// -----------------------------------------------------------------------------
// Lou-Ka — Agrégateur de logements à louer (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// components/CookieConsent.tsx : bandeau de consentement (témoins/stockage)
//   Honnête par design : Lou-Ka n'utilise AUCUN témoin tiers ni traceur.
//   Le sélecteur couvre le stockage local (préférences) et une éventuelle
//   mesure d'audience anonyme future. Choix mémorisé en localStorage,
//   ré-ouvrable via l'événement « louka:openConsent » (lien du pied de page).
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";

const KEY = "louka-consent-v1";

export interface Consent {
  essential: true;          // toujours actif (fonctionnement du site)
  preferences: boolean;     // mémoriser filtres et vue liste/carte
  statistics: boolean;      // mesure d'audience anonyme (si activée un jour)
  ts: number;
}

export function getConsent(): Consent | null {
  try {
    const raw = localStorage.getItem(KEY);
    return raw ? (JSON.parse(raw) as Consent) : null;
  } catch {
    return null;
  }
}

function save(preferences: boolean, statistics: boolean): Consent {
  const c: Consent = { essential: true, preferences, statistics, ts: Date.now() };
  try { localStorage.setItem(KEY, JSON.stringify(c)); } catch { /* stockage bloqué */ }
  return c;
}

export default function CookieConsent() {
  const [visible, setVisible] = useState(false);
  const [custom, setCustom] = useState(false);
  const [prefs, setPrefs] = useState(true);
  const [stats, setStats] = useState(false);

  useEffect(() => {
    if (getConsent() === null) setVisible(true);
    const open = () => { setVisible(true); setCustom(true); };
    window.addEventListener("louka:openConsent", open);
    return () => window.removeEventListener("louka:openConsent", open);
  }, []);

  if (!visible) return null;

  const close = (p: boolean, s: boolean) => { save(p, s); setVisible(false); setCustom(false); };

  return (
    <div className="cookie-banner" role="dialog" aria-modal="false" aria-label="Gestion des témoins">
      <div className="cookie-inner">
        <div className="cookie-text">
          <b>🍪 Vos témoins, vos choix.</b>{" "}
          Lou-Ka n'utilise aucun traceur publicitaire ni témoin tiers. Le site
          mémorise localement vos préférences (filtres, vue carte) et votre choix
          de consentement. <Link to="/confidentialite">Politique de confidentialité</Link>
        </div>

        {custom && (
          <div className="cookie-options">
            <label className="cookie-opt">
              <input type="checkbox" checked disabled />
              <span><b>Essentiels</b> — fonctionnement du site (toujours actifs)</span>
            </label>
            <label className="cookie-opt">
              <input type="checkbox" checked={prefs} onChange={(e) => setPrefs(e.target.checked)} />
              <span><b>Préférences</b> — retenir vos filtres et votre vue liste/carte</span>
            </label>
            <label className="cookie-opt">
              <input type="checkbox" checked={stats} onChange={(e) => setStats(e.target.checked)} />
              <span><b>Statistiques</b> — mesure d'audience anonyme, sans profilage</span>
            </label>
          </div>
        )}

        <div className="cookie-actions">
          {!custom && (
            <button className="btn btn-ghost" onClick={() => setCustom(true)}>
              Personnaliser
            </button>
          )}
          <button className="btn btn-ghost" onClick={() => close(false, false)}>
            Essentiels seulement
          </button>
          {custom ? (
            <button className="btn btn-primary" onClick={() => close(prefs, stats)}>
              Enregistrer mes choix
            </button>
          ) : (
            <button className="btn btn-primary" onClick={() => close(true, true)}>
              Tout accepter
            </button>
          )}
        </div>
      </div>
    </div>
  );
}