import { useEffect, useState } from 'react';

export function CookieBanner() {
  const [visible, setVisible] = useState(false);
  const [acceptConsent, rejectConsent] = [null, null];

  useEffect(() => {
    try {
      const stored = localStorage.getItem('decoda_consent');
      if (!stored) {
        setVisible(true);
      }
    } catch (e) {
      console.error('Consent check failed:', e);
    }
  }, []);

  const handleAccept = () => {
    try {
      localStorage.setItem('decoda_consent', JSON.stringify({
        version: '1',
        accepted: true,
        timestamp: new Date().toISOString(),
      }));
      setVisible(false);
    } catch (e) {
      console.error('Failed to accept consent:', e);
    }
  };

  const handleReject = () => {
    try {
      localStorage.setItem('decoda_consent', JSON.stringify({
        version: '1',
        accepted: false,
        timestamp: new Date().toISOString(),
      }));
      setVisible(false);
    } catch (e) {
      console.error('Failed to reject consent:', e);
    }
  };

  if (!visible) return null;

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 p-4 md:p-6" role="dialog" aria-label="Consentimento de cookies">
      <div className="mx-auto max-w-4xl">
        <div className="bg-white rounded-2xl shadow-2xl overflow-hidden border border-gray-200">
          <div className="h-1 bg-gradient-to-r from-red-600 to-pink-600"></div>
          <div className="p-6 md:p-8">
            <div className="flex flex-col md:flex-row gap-6 md:gap-8 items-start">
              <div className="flex-1 min-w-0">
                <h2 className="font-title font-bold text-xl md:text-2xl text-gray-900 mb-2">
                  Sua privacidade é importante
                </h2>
                <p className="font-sans text-sm md:text-base text-gray-700 leading-relaxed">
                  Utilizamos dados sobre como você usa a plataforma para melhorar a experiência educacional
                  e entender quais recursos são mais úteis.{' '}
                  <a
                    href="#/privacy-policy"
                    className="text-red-600 hover:text-red-700 font-semibold underline transition-colors"
                  >
                    Saiba mais
                  </a>
                </p>
              </div>
              <div className="flex flex-col sm:flex-row gap-3 w-full md:w-auto flex-shrink-0">
                <button
                  onClick={handleReject}
                  className="px-6 py-2.5 rounded-xl font-sans font-semibold text-sm text-gray-700 bg-gray-100 hover:bg-gray-200 transition-all duration-200 border border-gray-300"
                  aria-label="Rejeitar"
                >
                  Rejeitar
                </button>
                <button
                  onClick={handleAccept}
                  className="px-6 py-2.5 rounded-xl font-sans font-semibold text-sm text-white bg-gradient-to-r from-red-600 to-pink-600 hover:shadow-lg hover:scale-105 transition-all duration-200 transform"
                  aria-label="Aceitar"
                >
                  Aceitar
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
