const COOKIE_KEY = "discover_cookie_consent";

function CookieBanner() {
  const [visible, setVisible] = React.useState(false);
  const [expanded, setExpanded] = React.useState(false);
  const [prefs, setPrefs] = React.useState({ analytics: true, marketing: false });

  React.useEffect(() => {
    const saved = localStorage.getItem(COOKIE_KEY);
    if (!saved) {
      // Show banner after a short delay so it doesn't fight the intro screen
      const t = setTimeout(() => setVisible(true), 3200);
      return () => clearTimeout(t);
    }
  }, []);

  const accept = () => {
    localStorage.setItem(COOKIE_KEY, JSON.stringify({ analytics: true, marketing: true, ts: Date.now() }));
    setVisible(false);
  };

  const acceptSelected = () => {
    localStorage.setItem(COOKIE_KEY, JSON.stringify({ ...prefs, necessary: true, ts: Date.now() }));
    setVisible(false);
  };

  const decline = () => {
    localStorage.setItem(COOKIE_KEY, JSON.stringify({ analytics: false, marketing: false, necessary: true, ts: Date.now() }));
    setVisible(false);
  };

  if (!visible) return null;

  return (
    <div className={`cookie-banner${expanded ? " cookie-expanded" : ""}`}>
      <div className="cookie-inner">
        <div className="cookie-top">
          <div className="cookie-icon">🍪</div>
          <div className="cookie-text">
            <strong>Nous utilisons des cookies</strong>
            <p>Des cookies essentiels font fonctionner ce site. Des cookies analytiques nous aident à l'améliorer. Tu choisis.</p>
          </div>
          <button className="cookie-close" onClick={decline} aria-label="Refuser et fermer">✕</button>
        </div>

        {expanded && (
          <div className="cookie-prefs">
            <div className="cookie-pref-row">
              <div>
                <strong>Nécessaires</strong>
                <span>Indispensables au fonctionnement du site.</span>
              </div>
              <div className="cookie-toggle always-on">Toujours actif</div>
            </div>
            <div className="cookie-pref-row">
              <div>
                <strong>Analytiques</strong>
                <span>Mesure d'audience anonyme (visites, pages vues).</span>
              </div>
              <label className="cookie-toggle-wrap">
                <input
                  type="checkbox"
                  checked={prefs.analytics}
                  onChange={e => setPrefs(p => ({ ...p, analytics: e.target.checked }))}
                />
                <span className="cookie-toggle-track" />
              </label>
            </div>
            <div className="cookie-pref-row">
              <div>
                <strong>Marketing</strong>
                <span>Publicités personnalisées et réseaux sociaux.</span>
              </div>
              <label className="cookie-toggle-wrap">
                <input
                  type="checkbox"
                  checked={prefs.marketing}
                  onChange={e => setPrefs(p => ({ ...p, marketing: e.target.checked }))}
                />
                <span className="cookie-toggle-track" />
              </label>
            </div>
          </div>
        )}

        <div className="cookie-actions">
          <button className="cookie-btn cookie-btn-outline" onClick={() => setExpanded(e => !e)}>
            {expanded ? "Masquer les options" : "Personnaliser"}
          </button>
          {expanded
            ? <button className="cookie-btn cookie-btn-secondary" onClick={acceptSelected}>Enregistrer</button>
            : <button className="cookie-btn cookie-btn-secondary" onClick={decline}>Refuser</button>
          }
          <button className="cookie-btn cookie-btn-primary" onClick={accept}>Tout accepter</button>
        </div>
      </div>
    </div>
  );
}

window.CookieBanner = CookieBanner;