// Sculty Dog — Cookie Consent Banner (GDPR compliant)
//
// Funziona così:
// - Al primo accesso mostra il banner.
// - Il consenso (granulare per categoria) viene salvato in localStorage
//   sotto la chiave SD_COOKIE_CONSENT con shape { v, ts, analytics, marketing }.
// - I cookie tecnici sono sempre attivi.
// - I cookie analytics (Google Analytics) e marketing (Meta Pixel) vengono
//   attivati DOPO il consenso tramite injection di <script> in <head>.
// - Il link "Gestisci cookie" del footer chiama window.SD_OPEN_COOKIES() per
//   riaprire il banner anche dopo l'accettazione iniziale.

const COOKIE_STORAGE_KEY = 'SD_COOKIE_CONSENT';
const COOKIE_VERSION = 1;

// ─── DA COMPILARE QUANDO HAI GA + PIXEL ───
// Quando attivi Analytics/Pixel reali, sostituisci questi ID:
const GA_ID = '';     // es. 'G-XXXXXXXXXX' di Google Analytics
const PIXEL_ID = '';  // es. '1234567890' di Meta Pixel

function loadConsent() {
  try {
    const raw = localStorage.getItem(COOKIE_STORAGE_KEY);
    if (!raw) return null;
    const parsed = JSON.parse(raw);
    if (parsed.v !== COOKIE_VERSION) return null;
    return parsed;
  } catch (e) {
    return null;
  }
}

function saveConsent(consent) {
  const payload = {
    v: COOKIE_VERSION,
    ts: Date.now(),
    analytics: !!consent.analytics,
    marketing: !!consent.marketing
  };
  try {
    localStorage.setItem(COOKIE_STORAGE_KEY, JSON.stringify(payload));
  } catch (e) {}
  return payload;
}

function applyConsent(consent) {
  if (consent.analytics && GA_ID) {
    injectGA(GA_ID);
  }
  if (consent.marketing && PIXEL_ID) {
    injectMetaPixel(PIXEL_ID);
  }
}

function injectGA(id) {
  if (document.querySelector('script[data-sd-ga]')) return;
  const s = document.createElement('script');
  s.async = true;
  s.src = 'https://www.googletagmanager.com/gtag/js?id=' + id;
  s.setAttribute('data-sd-ga', '1');
  document.head.appendChild(s);
  const init = document.createElement('script');
  init.setAttribute('data-sd-ga', '2');
  init.textContent = "window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', '" + id + "', { anonymize_ip: true });";
  document.head.appendChild(init);
}

function injectMetaPixel(id) {
  if (document.querySelector('script[data-sd-pixel]')) return;
  const s = document.createElement('script');
  s.setAttribute('data-sd-pixel', '1');
  s.textContent = "!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,document,'script','https://connect.facebook.net/en_US/fbevents.js');fbq('init','" + id + "');fbq('track','PageView');";
  document.head.appendChild(s);
}

function CookieBanner() {
  const [shown, setShown] = React.useState(false);
  const [view, setView] = React.useState('summary'); // 'summary' | 'details'
  const [analytics, setAnalytics] = React.useState(false);
  const [marketing, setMarketing] = React.useState(false);

  React.useEffect(() => {
    const c = loadConsent();
    if (c) {
      applyConsent(c);
      setAnalytics(c.analytics);
      setMarketing(c.marketing);
    } else {
      setShown(true);
    }
    // Endpoint globale per riaprire il banner dal footer
    window.SD_OPEN_COOKIES = () => {
      const cur = loadConsent();
      if (cur) {
        setAnalytics(cur.analytics);
        setMarketing(cur.marketing);
      }
      setView('summary');
      setShown(true);
    };
    return () => { delete window.SD_OPEN_COOKIES; };
  }, []);

  const accept = (a, m) => {
    const c = saveConsent({ analytics: a, marketing: m });
    applyConsent(c);
    setAnalytics(a); setMarketing(m);
    setShown(false);
  };

  if (!shown) return null;

  return (
    <>
      {/* Backdrop tenue */}
      <div aria-hidden="true" style={{
        position: 'fixed', inset: 0, zIndex: 200,
        background: 'rgba(30,20,15,0.18)',
        backdropFilter: 'blur(2px)',
        WebkitBackdropFilter: 'blur(2px)'
      }} />

      <div role="dialog" aria-modal="false" aria-label="Preferenze cookie" style={{
        position: 'fixed',
        left: 'clamp(12px, 3vw, 24px)',
        right: 'clamp(12px, 3vw, 24px)',
        bottom: 'clamp(12px, 3vw, 24px)',
        maxWidth: 640,
        margin: '0 auto',
        zIndex: 201,
        background: 'var(--sd-paper)',
        borderRadius: 'var(--sd-r-lg)',
        boxShadow: '0 30px 80px -20px rgba(30,20,15,0.45)',
        border: '1px solid rgba(184,89,58,0.16)',
        padding: 'clamp(20px, 3.5vw, 28px)',
        animation: 'sd-float-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both'
      }}>
        {view === 'summary' ? (
          <div>
            <div className="sd-eyebrow" style={{ marginBottom: 12 }}>🍪 Cookie</div>
            <h2 style={{
              margin: 0,
              fontFamily: 'var(--sd-font-serif)',
              fontWeight: 400,
              fontSize: 'clamp(20px, 2.4vw, 26px)',
              letterSpacing: '-0.01em',
              color: 'var(--sd-ink)',
              lineHeight: 1.15
            }}>
              Un cookie sulla mensola?
            </h2>
            <p style={{ marginTop: 12, marginBottom: 0, fontSize: 14.5, lineHeight: 1.55, color: 'var(--sd-ink-2)' }}>
              Usiamo cookie tecnici (necessari) per far funzionare il sito.
              Con il tuo consenso usiamo anche cookie analitici (Google
              Analytics) per capire come migliorarci, e cookie di marketing
              (Meta Pixel) per mostrarti contenuti pertinenti su Facebook e
              Instagram.
            </p>
            <div style={{
              display: 'flex',
              gap: 10,
              marginTop: 22,
              flexWrap: 'wrap',
              alignItems: 'center'
            }}>
              <button onClick={() => accept(true, true)} style={primaryBtn}>
                Accetta tutti
              </button>
              <button onClick={() => accept(false, false)} style={ghostBtnLight}>
                Rifiuta non necessari
              </button>
              <button onClick={() => setView('details')} style={linkBtn}>
                Personalizza →
              </button>
            </div>
            <p style={{ marginTop: 14, marginBottom: 0, fontSize: 12, color: 'var(--sd-ink-3)', fontFamily: 'var(--sd-font-mono)', letterSpacing: '0.03em' }}>
              Dettagli: <a onClick={() => setView('details')} style={{ color: 'var(--sd-ink-2)', textDecoration: 'underline', cursor: 'pointer' }}>Personalizza</a> · Vedi <a onClick={() => { setShown(false); window.location.hash = '#cookie'; }} style={{ color: 'var(--sd-ink-2)', textDecoration: 'underline', cursor: 'pointer' }}>Cookie Policy</a>
            </p>
          </div>
        ) : (
          <div>
            <div className="sd-eyebrow" style={{ marginBottom: 12 }}>Personalizza i cookie</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 8 }}>
              <Toggle
                label="Tecnici (necessari)"
                desc="Cookie strettamente necessari per il funzionamento del sito. Sempre attivi."
                value={true}
                disabled
              />
              <Toggle
                label="Analitici (Google Analytics)"
                desc="Ci aiutano a capire come gli utenti usano il sito, in forma aggregata e anonima."
                value={analytics}
                onChange={setAnalytics}
              />
              <Toggle
                label="Marketing (Meta Pixel)"
                desc="Permettono di mostrarti contenuti pertinenti su Facebook e Instagram."
                value={marketing}
                onChange={setMarketing}
              />
            </div>
            <div style={{ display: 'flex', gap: 10, marginTop: 22, flexWrap: 'wrap' }}>
              <button onClick={() => accept(analytics, marketing)} style={primaryBtn}>
                Salva preferenze
              </button>
              <button onClick={() => accept(true, true)} style={ghostBtnLight}>
                Accetta tutti
              </button>
              <button onClick={() => setView('summary')} style={linkBtn}>
                ← Indietro
              </button>
            </div>
          </div>
        )}
      </div>
    </>
  );
}

function Toggle({ label, desc, value, onChange, disabled }) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '1fr auto',
      gap: 14,
      padding: '12px 14px',
      borderRadius: 'var(--sd-r-md)',
      background: disabled ? 'rgba(184,89,58,0.06)' : 'var(--sd-bg-soft)',
      border: '1px solid rgba(26,23,21,0.08)'
    }}>
      <div>
        <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--sd-ink)' }}>{label}</div>
        <div style={{ fontSize: 12.5, color: 'var(--sd-ink-2)', marginTop: 4, lineHeight: 1.4 }}>{desc}</div>
      </div>
      <button
        type="button"
        role="switch"
        aria-checked={value}
        disabled={disabled}
        onClick={() => !disabled && onChange && onChange(!value)}
        style={{
          background: value ? 'var(--sd-terracotta)' : 'rgba(26,23,21,0.15)',
          border: 'none',
          width: 44, height: 24,
          borderRadius: 999,
          position: 'relative',
          cursor: disabled ? 'not-allowed' : 'pointer',
          opacity: disabled ? 0.65 : 1,
          padding: 0,
          alignSelf: 'center',
          transition: 'background 0.2s'
        }}>
        <span style={{
          position: 'absolute',
          top: 3, left: value ? 23 : 3,
          width: 18, height: 18,
          borderRadius: '50%',
          background: 'var(--sd-paper)',
          transition: 'left 0.18s cubic-bezier(0.22, 1, 0.36, 1)'
        }} />
      </button>
    </div>
  );
}

const primaryBtn = {
  background: 'var(--sd-terracotta)',
  color: 'var(--sd-paper)',
  border: 'none',
  padding: '12px 22px',
  borderRadius: 999,
  fontSize: 14,
  fontWeight: 600,
  cursor: 'pointer',
  fontFamily: 'inherit',
  boxShadow: '0 12px 26px -10px rgba(142, 63, 38, 0.5)'
};
const ghostBtnLight = {
  background: 'transparent',
  color: 'var(--sd-ink)',
  border: '1px solid rgba(26,23,21,0.18)',
  padding: '12px 20px',
  borderRadius: 999,
  fontSize: 14,
  fontWeight: 500,
  cursor: 'pointer',
  fontFamily: 'inherit'
};
const linkBtn = {
  background: 'transparent',
  color: 'var(--sd-ink-2)',
  border: 'none',
  padding: '12px 6px',
  fontSize: 13,
  cursor: 'pointer',
  textDecoration: 'underline',
  fontFamily: 'inherit'
};

Object.assign(window, { CookieBanner });
