import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { ShieldCheck } from 'lucide-react';
import { useT } from '@/lib/i18n';

const STORAGE_KEY = 'age_verified';

/**
 * Client-side age gate. The server-side Turnstile-backed check arrives in Phase 3
 * (age-gate server function). For now we persist confirmation in localStorage so
 * the gate doesn't reappear after the user confirms.
 */
const AgeGate = () => {
  const t = useT();
  const [show, setShow] = useState(false);

  useEffect(() => {
    if (typeof window === 'undefined') return;
    let cancelled = false;

    try {
      if (window.localStorage.getItem(STORAGE_KEY) === '1') return;
    } catch {
      /* localStorage blocked — fall through and show */
    }

    const trigger = () => !cancelled && setShow(true);
    const w = window as Window & {
      requestIdleCallback?: (cb: () => void, opts?: { timeout: number }) => number;
    };
    requestAnimationFrame(() =>
      requestAnimationFrame(() => {
        if (typeof w.requestIdleCallback === 'function') {
          w.requestIdleCallback(trigger, { timeout: 1500 });
        } else {
          window.setTimeout(trigger, 600);
        }
      })
    );

    return () => {
      cancelled = true;
    };
  }, []);

  const handleConfirm = () => {
    try {
      window.localStorage.setItem(STORAGE_KEY, '1');
    } catch {
      /* ignore */
    }
    setShow(false);
  };

  const handleDeny = () => {
    window.location.href = 'https://www.google.com';
  };

  return (
    <AnimatePresence>
      {show && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 z-[100] flex items-center justify-center bg-foreground/80 backdrop-blur-sm p-4"
        >
          <motion.div
            initial={{ scale: 0.9, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0.9, opacity: 0 }}
            className="bg-background rounded-lg shadow-2xl max-w-md w-full p-8 text-center"
          >
            <div className="mx-auto w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-6">
              <ShieldCheck className="w-8 h-8 text-primary" />
            </div>
            <h2 className="text-2xl font-bold mb-3">{t('Leeftijdsverificatie', 'Age Verification')}</h2>
            <p className="text-muted-foreground mb-8 leading-relaxed">
              {t('Deze website is alleen bedoeld voor personen van 18 jaar en ouder. Bevestig uw leeftijd om verder te gaan.', 'This website is intended only for individuals aged 18 and over. Please confirm your age to continue.')}
            </p>
            <div className="flex flex-col sm:flex-row gap-3">
              <button
                onClick={handleConfirm}
                className="flex-1 bg-primary text-primary-foreground font-semibold py-3 px-6 rounded-md hover:bg-primary-hover transition-colors"
              >
                {t('Ik ben 18+', 'I am 18+')}
              </button>
              <button
                onClick={handleDeny}
                className="flex-1 border border-border text-muted-foreground font-medium py-3 px-6 rounded-md hover:bg-muted transition-colors"
              >
                {t('Ik ben jonger dan 18', 'I am under 18')}
              </button>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
};

export default AgeGate;