import { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { useAuth } from '../../contexts/AuthContext';

export interface SeoConsentModalProps {
  onClose: () => void;
}

const SeoConsentModal = ({ onClose }: SeoConsentModalProps) => {
  const { seoConsent, updateSeoConsent } = useAuth();
  const [isEnabled, setIsEnabled] = useState(seoConsent);
  const [isSubmitting, setIsSubmitting] = useState(false);

  useEffect(() => {
    setIsEnabled(seoConsent);
  }, [seoConsent]);

  const toggleConsent = async () => {
    if (isSubmitting) return;
    const newValue = !isEnabled;
    setIsEnabled(newValue); // Optimistic update
    setIsSubmitting(true);
    try {
      await updateSeoConsent(newValue);
    } catch (error) {
      console.error("Failed to update consent:", error);
      setIsEnabled(!newValue); // Revert on error
    } finally {
      setIsSubmitting(false);
    }
  };

  const modalContent = (
    <div className="fixed inset-0 flex items-center justify-center p-4 z-50">
      <div className="absolute inset-0 bg-black/30 backdrop-blur-sm" onClick={onClose} />
      <div className="bg-background-light dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-2xl shadow-xl w-full max-w-md relative z-10 overflow-hidden">
        <div className="flex justify-between items-center p-6 border-b border-gray-200 dark:border-gray-700">
          <h2 className="text-xl font-semibold text-text-light dark:text-text-dark">Content Usage Preference</h2>
          <button onClick={onClose} className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        <div className="p-6">
          <div className="mb-6">
            <h3 className="text-lg font-medium mb-2 text-text-light dark:text-text-dark">How We Use Your Conversations</h3>
            <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
              To help the WordPress community, we may publish anonymized versions of helpful conversations as articles.
            </p>
            <ul className="list-disc pl-5 mb-4 text-sm text-gray-600 dark:text-gray-400 space-y-2">
              <li>All personal information is removed.</li>
              <li>Your questions and our solutions become a resource for others.</li>
              <li>You can change this setting at any time.</li>
            </ul>
            <div className="flex justify-between items-center p-4 rounded-lg bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700">
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
                  Allow Content Publishing
                </label>
                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                  Your choice is saved automatically.
                </p>
              </div>
              <button
                onClick={toggleConsent}
                className={`
                  relative inline-flex flex-shrink-0 items-center h-6 w-11
                  rounded-full transition-colors ease-in-out duration-200
                  focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-opacity-75
                  ${isEnabled ? 'bg-blue-600 dark:bg-blue-500' : 'bg-gray-300 dark:bg-gray-600'}
                  cursor-pointer ${isSubmitting ? 'opacity-70' : ''}
                `}
                role="switch"
                aria-checked={isEnabled === true}
                disabled={isSubmitting}
              >
                <span className="sr-only">Allow Content Publishing</span>
                <span
                  className={`
                    pointer-events-none inline-block h-5 w-5 rounded-full 
                    bg-white shadow-lg transform ring-0 transition ease-in-out duration-200
                    ${isEnabled ? 'translate-x-6' : 'translate-x-0'}
                  `}
                />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
  
  return ReactDOM.createPortal(modalContent, document.body);
};

export default SeoConsentModal;