import React, { useState, useEffect } from 'react';
import { useLocation } from '@docusaurus/router';

export default function DocFeedback() {
  const location = useLocation();
  const [feedback, setFeedback] = useState(null);

  useEffect(() => {
    setFeedback(null);
  }, [location.pathname]);

  const handleFeedback = (type) => {
    const feedbacks = JSON.parse(localStorage.getItem('doc-feedbacks') || '{}');
    feedbacks[location.pathname] = {
      type,
      timestamp: new Date().toISOString(),
    };
    localStorage.setItem('doc-feedbacks', JSON.stringify(feedbacks));
    setFeedback(type);
  };

  return (
    <div
      style={{
        marginTop: '3rem',
        padding: '1.5rem',
        borderTop: '1px solid var(--ifm-color-emphasis-300)',
        borderRadius: '8px',
      }}
    >
      {feedback ? (
        <div
          style={{
            textAlign: 'center',
            color: 'var(--ifm-color-success)',
            fontSize: '1rem',
          }}
        >
          感谢您的反馈！我们会持续改进文档质量。
        </div>
      ) : (
        <>
          <p
            style={{
              fontSize: '1rem',
              fontWeight: 600,
              marginBottom: '1rem',
              color: 'var(--ifm-color-emphasis-800)',
            }}
          >
            这篇文档对您有帮助吗？
          </p>
          <div style={{ display: 'flex', gap: '1rem' }}>
            <button
              onClick={() => handleFeedback('positive')}
              style={{
                padding: '8px 24px',
                border: '1px solid var(--ifm-color-success)',
                borderRadius: '6px',
                background: 'transparent',
                color: 'var(--ifm-color-success)',
                cursor: 'pointer',
                fontSize: '0.9rem',
                transition: 'all 0.2s',
              }}
              onMouseOver={(e) => {
                e.target.style.background = 'var(--ifm-color-success)';
                e.target.style.color = '#fff';
              }}
              onMouseOut={(e) => {
                e.target.style.background = 'transparent';
                e.target.style.color = 'var(--ifm-color-success)';
              }}
            >
              有帮助
            </button>
            <button
              onClick={() => handleFeedback('negative')}
              style={{
                padding: '8px 24px',
                border: '1px solid var(--ifm-color-danger)',
                borderRadius: '6px',
                background: 'transparent',
                color: 'var(--ifm-color-danger)',
                cursor: 'pointer',
                fontSize: '0.9rem',
                transition: 'all 0.2s',
              }}
              onMouseOver={(e) => {
                e.target.style.background = 'var(--ifm-color-danger)';
                e.target.style.color = '#fff';
              }}
              onMouseOut={(e) => {
                e.target.style.background = 'transparent';
                e.target.style.color = 'var(--ifm-color-danger)';
              }}
            >
              没帮助
            </button>
          </div>
        </>
      )}
    </div>
  );
}
