import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { X } from 'lucide-react';
import { Link } from 'react-router-dom';

export function CookieBanner() {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    // delay showing banner slightly for better UX
    const timer = setTimeout(() => {
      const consent = localStorage.getItem('cookie-consent');
      if (!consent) {
        setIsVisible(true);
      }
    }, 1500);
    return () => clearTimeout(timer);
  }, []);

  const acceptCookies = () => {
    localStorage.setItem('cookie-consent', 'accepted');
    setIsVisible(false);
  };

  const declineCookies = () => {
    localStorage.setItem('cookie-consent', 'declined');
    setIsVisible(false);
  };

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ y: 100, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          exit={{ y: 100, opacity: 0 }}
          transition={{ duration: 0.4, ease: "easeOut" }}
          className="fixed bottom-0 left-0 right-0 z-[100] p-4 md:p-6 pointer-events-none flex justify-center"
        >
          <div className="bg-stone-900 border border-stone-800 text-stone-300 w-full max-w-5xl rounded-3xl p-6 shadow-2xl pointer-events-auto flex flex-col md:flex-row items-center gap-6 md:gap-12 justify-between">
            <div className="flex flex-col gap-2 flex-grow">
              <h4 className="text-white font-medium text-lg flex items-center gap-2">
                Nós valorizamos sua privacidade
              </h4>
              <p className="text-sm font-light text-stone-400 leading-relaxed">
                Utilizamos cookies e tecnologias semelhantes (incluindo pixels de rastreamento) para melhorar sua experiência de navegação, 
                analisar o tráfego do site e personalizar nosso conteúdo e anúncios. Ao clicar em "Aceitar", 
                você concorda com nossa <Link to="/privacidade" className="text-primary-300 hover:text-white transition-colors hover:underline">Política de Privacidade</Link>.
              </p>
            </div>
            <div className="flex items-center gap-3 w-full md:w-auto shrink-0 justify-end mt-4 md:mt-0">
              <button 
                onClick={declineCookies}
                className="px-5 py-3 text-sm font-medium text-stone-400 hover:text-white transition-colors"
              >
                Recusar
              </button>
              <button 
                onClick={acceptCookies}
                className="px-8 py-3 bg-white hover:bg-stone-200 text-stone-900 text-sm font-medium rounded-full transition-colors whitespace-nowrap active:scale-95"
              >
                Aceitar Cookies
              </button>
              <button 
                onClick={declineCookies}
                className="p-2.5 text-stone-500 hover:text-white transition-colors ml-2 hidden md:flex items-center justify-center rounded-full hover:bg-stone-800"
                aria-label="Fechar"
              >
                <X size={20} />
              </button>
            </div>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}