// Système de consentement des témoins (cookies) — Loi 25 (Québec)
// - Opt-in strict : aucun script non essentiel ne tourne avant consentement
// - Granulaire : essentiels (toujours actifs) / statistiques / marketing
// - Retrait aussi facile que l'octroi : lien « Gérer les témoins » au footer
// - Journal local : choix horodaté + version de la politique
//
// Activation de scripts tiers : déclarez-les ainsi dans le HTML —
//   <script type="text/plain" data-consent="analytics" data-src="https://..."></script>
// ou inline :
//   <script type="text/plain" data-consent="analytics">/* code */</script>
// Ils ne s'exécutent qu'après consentement à leur catégorie.

const CONSENT_KEY = 'cpl-consent-v1';
const CONSENT_VERSION = 1;

const consentStore = {
  read() {
    try {
      const raw = localStorage.getItem(CONSENT_KEY);
      if (!raw) return null;
      const parsed = JSON.parse(raw);
      if (parsed.version !== CONSENT_VERSION) return null; // politique mise à jour → redemander
      return parsed;
    } catch { return null; }
  },
  write(categories) {
    const record = {
      version: CONSENT_VERSION,
      date: new Date().toISOString(),
      categories
    };
    try { localStorage.setItem(CONSENT_KEY, JSON.stringify(record)); } catch {}
    consentStore.applyScripts(categories);
    return record;
  },
  // Active les scripts bloqués dont la catégorie est consentie
  applyScripts(categories) {
    document.querySelectorAll('script[type="text/plain"][data-consent]').forEach((node) => {
      const cat = node.dataset.consent;
      if (!categories[cat] || node.dataset.consentLoaded) return;
      const s = document.createElement('script');
      if (node.dataset.src) s.src = node.dataset.src;
      else s.textContent = node.textContent;
      document.head.appendChild(s);
      node.dataset.consentLoaded = '1';
    });
  }
};

// API publique pour le reste du site
window.cplConsent = {
  has(cat) {
    const rec = consentStore.read();
    return cat === 'essential' ? true : !!(rec && rec.categories[cat]);
  },
  open() { window.dispatchEvent(new CustomEvent('cpl-consent-open')); }
};

const CONSENT_CATEGORIES = [
  {
    id: 'essential',
    locked: true,
    title: 'Témoins essentiels',
    desc: 'Nécessaires au fonctionnement du site (préférences d\'affichage, sécurité). Ils ne collectent aucune donnée de navigation et ne peuvent pas être désactivés.'
  },
  {
    id: 'analytics',
    locked: false,
    title: 'Statistiques',
    desc: 'Mesure d\'audience anonymisée : pages vues, provenance, type d\'appareil. Nous aide à améliorer le site. Aucune revente de données.'
  },
  {
    id: 'marketing',
    locked: false,
    title: 'Marketing',
    desc: 'Permettent de mesurer l\'efficacité de nos communications et de vous présenter des contenus pertinents sur d\'autres plateformes.'
  }
];

const ConsentManager = ({ onOpenPrivacy }) => {
  const [visible, setVisible] = React.useState(() => !consentStore.read());
  const [panelOpen, setPanelOpen] = React.useState(false);
  const [prefs, setPrefs] = React.useState(() => {
    const rec = consentStore.read();
    return {
      essential: true,
      analytics: rec ? !!rec.categories.analytics : false,
      marketing: rec ? !!rec.categories.marketing : false
    };
  });

  // Applique les scripts déjà consentis au chargement
  React.useEffect(() => {
    const rec = consentStore.read();
    if (rec) consentStore.applyScripts(rec.categories);
  }, []);

  // Réouverture via le footer (« Gérer les témoins »)
  React.useEffect(() => {
    const onOpen = () => { setPanelOpen(true); setVisible(true); };
    window.addEventListener('cpl-consent-open', onOpen);
    return () => window.removeEventListener('cpl-consent-open', onOpen);
  }, []);

  const decide = (categories) => {
    consentStore.write(categories);
    setPrefs({ essential: true, ...categories });
    setPanelOpen(false);
    setVisible(false);
  };

  const acceptAll = () => decide({ essential: true, analytics: true, marketing: true });
  const refuseAll = () => decide({ essential: true, analytics: false, marketing: false });
  const saveCustom = () => decide({ essential: true, analytics: prefs.analytics, marketing: prefs.marketing });

  if (!visible) return null;

  return (
    <div
      role="dialog"
      aria-label="Consentement aux témoins"
      style={{
        position: 'fixed',
        left: 'clamp(12px, 2vw, 24px)',
        right: 'clamp(12px, 2vw, 24px)',
        bottom: 'clamp(12px, 2vw, 24px)',
        zIndex: 90,
        display: 'flex',
        justifyContent: 'center',
        pointerEvents: 'none'
      }}
    >
      <div style={{
        pointerEvents: 'auto',
        width: '100%',
        maxWidth: panelOpen ? 680 : 980,
        background: 'var(--bg-2)',
        border: '1px solid var(--line-strong)',
        borderRadius: 16,
        boxShadow: '0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(37,212,242,0.08)',
        overflow: 'hidden',
        animation: 'consentUp .4s cubic-bezier(0.2, 0.8, 0.2, 1)'
      }}>
        {!panelOpen ? (
          /* ── Bannière compacte ─────────────────────────────── */
          <div style={{ padding: 'clamp(20px, 3vw, 28px)', display: 'grid', gridTemplateColumns: '1fr auto', gap: 24, alignItems: 'center' }} className="consent-banner-grid">
            <div>
              <div className="mono" style={{ color: 'var(--cyan)', marginBottom: 8 }}>// témoins &amp; vie privée</div>
              <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.55, color: 'var(--fg-dim)', maxWidth: 560 }}>
                Nous utilisons des témoins essentiels pour le fonctionnement du site.
                Avec votre accord, nous utiliserions aussi des témoins de statistiques anonymes.
                Vous pouvez refuser sans aucune perte de fonctionnalité.{' '}
                <a href="#" onClick={(e) => { e.preventDefault(); onOpenPrivacy && onOpenPrivacy(); }} style={{ color: 'var(--cyan)', textDecoration: 'underline', textUnderlineOffset: 3 }}>
                  Politique de confidentialité
                </a>
              </p>
            </div>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
              <button onClick={() => setPanelOpen(true)} className="btn btn-ghost" style={{ padding: '11px 18px', fontSize: 14 }}>
                Personnaliser
              </button>
              <button onClick={refuseAll} className="btn btn-ghost" style={{ padding: '11px 18px', fontSize: 14 }}>
                Tout refuser
              </button>
              <button onClick={acceptAll} className="btn btn-cyan" style={{ padding: '11px 18px', fontSize: 14 }}>
                Tout accepter
              </button>
            </div>
          </div>
        ) : (
          /* ── Panneau de préférences ────────────────────────── */
          <div>
            <header style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              padding: '18px 24px', borderBottom: '1px solid var(--line)'
            }}>
              <div>
                <div className="mono" style={{ color: 'var(--cyan)' }}>// préférences.témoins</div>
                <h3 style={{ margin: '4px 0 0', fontSize: 18, fontWeight: 500, color: 'var(--fg)' }}>Gérer les témoins</h3>
              </div>
              <button
                onClick={() => setPanelOpen(false)}
                aria-label="Retour"
                style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-dim)',
                  border: '1px solid var(--line-strong)', borderRadius: 999, padding: '8px 14px'
                }}
              >
                ← retour
              </button>
            </header>

            <div style={{ padding: '8px 24px', maxHeight: '45vh', overflowY: 'auto' }}>
              {CONSENT_CATEGORIES.map((cat) => (
                <div key={cat.id} style={{
                  display: 'grid', gridTemplateColumns: '1fr auto', gap: 16,
                  padding: '18px 0', borderBottom: '1px solid var(--line)', alignItems: 'start'
                }}>
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 500, color: 'var(--fg)', marginBottom: 4 }}>
                      {cat.title}
                      {cat.locked && <span className="mono" style={{ marginLeft: 10, color: 'var(--fg-mute)' }}>toujours actifs</span>}
                    </div>
                    <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.5, color: 'var(--fg-dim)' }}>{cat.desc}</p>
                  </div>
                  <button
                    role="switch"
                    aria-checked={cat.locked || prefs[cat.id]}
                    aria-label={cat.title}
                    disabled={cat.locked}
                    onClick={() => setPrefs(p => ({ ...p, [cat.id]: !p[cat.id] }))}
                    style={{
                      width: 44, height: 26, borderRadius: 999, position: 'relative',
                      background: (cat.locked || prefs[cat.id]) ? 'var(--cyan)' : 'var(--surface)',
                      border: '1px solid ' + ((cat.locked || prefs[cat.id]) ? 'var(--cyan)' : 'var(--line-strong)'),
                      opacity: cat.locked ? 0.55 : 1,
                      cursor: cat.locked ? 'not-allowed' : 'pointer',
                      transition: 'background .2s ease, border-color .2s ease',
                      flexShrink: 0
                    }}
                  >
                    <span style={{
                      position: 'absolute', top: 2, left: (cat.locked || prefs[cat.id]) ? 20 : 2,
                      width: 20, height: 20, borderRadius: '50%',
                      background: (cat.locked || prefs[cat.id]) ? '#001018' : 'var(--fg-dim)',
                      transition: 'left .2s ease, background .2s ease'
                    }}></span>
                  </button>
                </div>
              ))}
            </div>

            <footer style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', padding: '16px 24px', flexWrap: 'wrap' }}>
              <button onClick={refuseAll} className="btn btn-ghost" style={{ padding: '11px 18px', fontSize: 14 }}>
                Tout refuser
              </button>
              <button onClick={saveCustom} className="btn btn-cyan" style={{ padding: '11px 18px', fontSize: 14 }}>
                Enregistrer mes choix
              </button>
            </footer>
          </div>
        )}
      </div>

      <style>{`
        @keyframes consentUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
        @media (max-width: 760px) {
          .consent-banner-grid { grid-template-columns: 1fr !important; }
          .consent-banner-grid > div:last-child { justify-content: stretch !important; }
          .consent-banner-grid .btn { flex: 1; justify-content: center; }
        }
      `}</style>
    </div>
  );
};

Object.assign(window, { ConsentManager });