// CookieBanner — Bandeau de consentement Loi 25 (Québec) / RGPD-compatible
//
// Apparaît au premier visite ou quand l'utilisateur clique "Gérer mes cookies"
// dans le footer. Granularité : analytics + marketing (les essentiels sont toujours actifs).
//
// Conformité Loi 25 :
//   - Défaut : tout refusé (opt-in, pas opt-out)
//   - Boutons "Refuser" et "Tout accepter" de prominence visuelle équivalente
//   - Détails clairs par finalité
//   - Retrait facile via lien permanent dans le footer

const { useState: useCBS, useEffect: useCBE } = React;

function CookieBanner({ lang }) {
  const FR = lang !== 'en';

  // Visible si pas encore décidé, ou si l'utilisateur a cliqué "Gérer mes cookies"
  const [visible, setVisible] = useCBS(false);
  const [expanded, setExpanded] = useCBS(false);
  const [analytics, setAnalytics] = useCBS(false);
  const [marketing, setMarketing] = useCBS(false);

  // À l'init : afficher si pas encore décidé
  useCBE(() => {
    const c = window.vestora && window.vestora.consent;
    if (!c) return;
    if (!c.hasDecided()) {
      setVisible(true);
    }
    // Pré-remplir les toggles avec la valeur courante (si déjà décidé)
    const current = c.getConsent();
    setAnalytics(current.analytics);
    setMarketing(current.marketing);
  }, []);

  // Écouter l'event de réouverture depuis le footer
  useCBE(() => {
    const onReopen = () => {
      const c = window.vestora && window.vestora.consent;
      if (c) {
        const current = c.getConsent();
        setAnalytics(current.analytics);
        setMarketing(current.marketing);
      }
      setExpanded(true);
      setVisible(true);
    };
    window.addEventListener('vestora:consent:reopen', onReopen);
    return () => window.removeEventListener('vestora:consent:reopen', onReopen);
  }, []);

  if (!visible) return null;

  const c = window.vestora && window.vestora.consent;
  if (!c) return null;

  const t = {
    title: FR ? 'Vos données, vos choix' : 'Your data, your choice',
    intro: FR
      ? "Nous utilisons des cookies essentiels au fonctionnement du site (authentification, paiement). Avec votre consentement, nous activons aussi des cookies de mesure d'audience et de marketing. Vous pouvez modifier vos choix à tout moment depuis le pied de page."
      : "We use essential cookies for the site to function (authentication, payment). With your consent, we also enable analytics and marketing cookies. You can change your choice anytime from the footer.",
    reject: FR ? 'Refuser' : 'Reject',
    customize: FR ? 'Personnaliser' : 'Customize',
    acceptAll: FR ? 'Tout accepter' : 'Accept all',
    save: FR ? 'Enregistrer mes choix' : 'Save my choices',
    essTitle: FR ? 'Essentiels' : 'Essential',
    essDesc: FR
      ? "Authentification, panier, sécurité. Toujours actifs — nécessaires au fonctionnement."
      : 'Authentication, cart, security. Always active — required for the site to work.',
    essAlways: FR ? 'Toujours actif' : 'Always on',
    anaTitle: FR ? 'Mesure d’audience' : 'Analytics',
    anaDesc: FR
      ? "Statistiques de visite (Meta Pixel — pages vues, parcours). Aide à améliorer le produit."
      : 'Visit statistics (Meta Pixel — page views, paths). Helps us improve the product.',
    mktTitle: FR ? 'Marketing' : 'Marketing',
    mktDesc: FR
      ? "Mesure de conversion publicitaire (Meta Conversions API — transmet votre courriel à Meta pour mesurer l'efficacité des publicités)."
      : 'Ad conversion tracking (Meta Conversions API — transmits your email to Meta to measure ad effectiveness).',
    loiLink: FR
      ? "En savoir plus sur nos pratiques de confidentialité"
      : 'Learn more about our privacy practices',
  };

  function handleReject() {
    c.rejectAll();
    setVisible(false);
  }
  function handleAcceptAll() {
    c.acceptAll();
    setVisible(false);
  }
  function handleSave() {
    c.setConsent({ analytics, marketing });
    setVisible(false);
  }

  return (
    <div className="cookie-banner-overlay" role="dialog" aria-label={t.title}>
      <div className="cookie-banner">
        <div className="cookie-banner-body">
          <h3 className="cookie-banner-title">{t.title}</h3>
          <p className="cookie-banner-intro">
            {t.intro}
            {" "}
            <a href="#/confidentialite" onClick={() => setVisible(false)}>
              {t.loiLink}
            </a>.
          </p>

          {expanded ? (
            <div className="cookie-banner-categories">
              <div className="cookie-cat">
                <div className="cookie-cat-head">
                  <span className="cookie-cat-title">{t.essTitle}</span>
                  <span className="cookie-cat-locked">{t.essAlways}</span>
                </div>
                <p className="cookie-cat-desc">{t.essDesc}</p>
              </div>

              <div className="cookie-cat">
                <div className="cookie-cat-head">
                  <label className="cookie-cat-toggle">
                    <input
                      type="checkbox"
                      checked={analytics}
                      onChange={(e) => setAnalytics(e.target.checked)}
                    />
                    <span className="cookie-cat-title">{t.anaTitle}</span>
                  </label>
                </div>
                <p className="cookie-cat-desc">{t.anaDesc}</p>
              </div>

              <div className="cookie-cat">
                <div className="cookie-cat-head">
                  <label className="cookie-cat-toggle">
                    <input
                      type="checkbox"
                      checked={marketing}
                      onChange={(e) => setMarketing(e.target.checked)}
                    />
                    <span className="cookie-cat-title">{t.mktTitle}</span>
                  </label>
                </div>
                <p className="cookie-cat-desc">{t.mktDesc}</p>
              </div>
            </div>
          ) : null}
        </div>

        <div className="cookie-banner-actions">
          {expanded ? (
            <>
              <button className="cookie-btn cookie-btn-secondary" onClick={handleReject}>
                {t.reject}
              </button>
              <button className="cookie-btn cookie-btn-primary" onClick={handleSave}>
                {t.save}
              </button>
            </>
          ) : (
            <>
              <button className="cookie-btn cookie-btn-secondary" onClick={handleReject}>
                {t.reject}
              </button>
              <button
                className="cookie-btn cookie-btn-ghost"
                onClick={() => setExpanded(true)}
              >
                {t.customize}
              </button>
              <button className="cookie-btn cookie-btn-primary" onClick={handleAcceptAll}>
                {t.acceptAll}
              </button>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

window.CookieBanner = CookieBanner;