/* global React */

/* ============================================================
   CookieBanner — Bandeau de consentement aux témoins (Loi 25, QC)
   ------------------------------------------------------------
   - Apparaît en bas de page à la première visite uniquement.
   - Deux choix : « Accepter » / « Refuser ».
   - Le choix est mémorisé dans localStorage et le bandeau ne
     réapparaît plus une fois la décision prise.
   ============================================================ */

const COOKIE_CONSENT_KEY = 'aa-cookie-consent';

const CookieBanner = () => {
  // Initialisation paresseuse : on lit le choix existant une seule fois,
  // ce qui évite tout clignotement du bandeau au chargement.
  const [visible, setVisible] = React.useState(() => {
    try {
      return !localStorage.getItem(COOKIE_CONSENT_KEY);
    } catch (e) {
      // localStorage indisponible (mode privé strict, etc.) : on affiche le bandeau.
      return true;
    }
  });

  const decide = (choice) => {
    try {
      localStorage.setItem(COOKIE_CONSENT_KEY, choice);
    } catch (e) {
      /* Si le stockage échoue, on masque quand même le bandeau pour la session. */
    }
    // Met à jour le consentement Google Analytics (Consent Mode) immédiatement.
    if (typeof window.aaUpdateAnalyticsConsent === 'function') {
      window.aaUpdateAnalyticsConsent(choice);
    }
    setVisible(false);
  };

  if (!visible) return null;

  const btnBase = {
    fontFamily: 'Georgia, serif',
    fontSize: '15px',
    color: '#fff',
    border: 'none',
    borderRadius: '6px',
    padding: '11px 26px',
    cursor: 'pointer',
    whiteSpace: 'nowrap',
  };

  return (
    <div
      role="dialog"
      aria-live="polite"
      aria-label="Consentement aux témoins"
      style={{
        position: 'fixed',
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: 9999,
        background: '#faf7f2',
        fontFamily: 'Georgia, serif',
        boxShadow: '0 -2px 18px rgba(0, 0, 0, 0.12)',
        padding: '18px 24px',
        display: 'flex',
        flexWrap: 'wrap',
        alignItems: 'center',
        justifyContent: 'center',
        gap: '18px',
      }}>
      <p
        style={{
          margin: 0,
          flex: '1 1 320px',
          maxWidth: '720px',
          color: '#2a2622',
          fontSize: '15px',
          lineHeight: 1.5,
        }}>
        Ce site utilise des témoins (cookies) pour analyser la navigation. Tu peux accepter ou refuser.
      </p>
      <div style={{ display: 'flex', gap: '12px', flexShrink: 0 }}>
        <button
          type="button"
          onClick={() => decide('accepted')}
          style={{ ...btnBase, background: '#E85B2C' }}>
          Accepter
        </button>
        <button
          type="button"
          onClick={() => decide('refused')}
          style={{ ...btnBase, background: '#2B72B5' }}>
          Refuser
        </button>
      </div>
    </div>
  );
};

window.CookieBanner = CookieBanner;