// Cookie consent banner — GDPR-compliant, gates Meta Pixel + analytics until consent.
// Usage: drop <window.CookieBanner /> at the root. Read consent via window.__cookieConsent.
//
// HOW TO FIRE PIXELS AFTER CONSENT:
//   window.addEventListener("cookie-consent-accepted", () => {
//     // load Meta Pixel here
//     fbq('init', 'YOUR_PIXEL_ID');
//     fbq('track', 'PageView');
//   });
//
// User can re-open settings via the "Cookie settings" footer link
// (footer dispatches `window.dispatchEvent(new Event('open-cookie-settings'))`).

function CookieBanner() {
  const [state, setState] = React.useState("hidden"); // "hidden" | "banner" | "settings"
  const [prefs, setPrefs] = React.useState({ analytics: true, marketing: true });

  React.useEffect(() => {
    let stored = null;
    try { stored = localStorage.getItem("cashy_cookie_consent_v1"); } catch (e) {}
    if (!stored) {
      // small delay so it doesn't fight the page paint
      const t = setTimeout(() => setState("banner"), 800);
      return () => clearTimeout(t);
    } else {
      try {
        const parsed = JSON.parse(stored);
        window.__cookieConsent = parsed;
        if (parsed.analytics || parsed.marketing) {
          window.dispatchEvent(new CustomEvent("cookie-consent-accepted", { detail: parsed }));
        }
      } catch (e) {}
    }
    const reopen = () => setState("settings");
    window.addEventListener("open-cookie-settings", reopen);
    return () => window.removeEventListener("open-cookie-settings", reopen);
  }, []);

  const save = (choice) => {
    const data = {
      necessary: true,
      analytics: choice.analytics,
      marketing: choice.marketing,
      timestamp: new Date().toISOString(),
      version: 1,
    };
    try { localStorage.setItem("cashy_cookie_consent_v1", JSON.stringify(data)); } catch (e) {}
    window.__cookieConsent = data;
    if (data.analytics || data.marketing) {
      window.dispatchEvent(new CustomEvent("cookie-consent-accepted", { detail: data }));
    }
    setState("hidden");
  };

  if (state === "hidden") return null;

  if (state === "settings") {
    return (
      <div className="cc-overlay" onClick={() => setState("banner")}>
        <div className="cc-modal" onClick={(e) => e.stopPropagation()}>
          <div className="cc-eyebrow">PRIVACY · COOKIES</div>
          <h3 className="cc-title">Cookie settings</h3>
          <p className="cc-sub">Choose which cookies Cashy can use. You can change this anytime via the "Cookie settings" link in the footer.</p>

          <div className="cc-row">
            <div className="cc-row-meta">
              <div className="cc-row-title">Strictly necessary</div>
              <div className="cc-row-desc">Required for the site to function. Cannot be disabled.</div>
            </div>
            <div className="cc-toggle is-locked"><span></span></div>
          </div>

          <div className="cc-row">
            <div className="cc-row-meta">
              <div className="cc-row-title">Analytics</div>
              <div className="cc-row-desc">Helps us understand how visitors use the site (Google Analytics).</div>
            </div>
            <button
              className={`cc-toggle ${prefs.analytics ? "is-on" : ""}`}
              onClick={() => setPrefs(p => ({...p, analytics: !p.analytics}))}
              aria-pressed={prefs.analytics}
            ><span></span></button>
          </div>

          <div className="cc-row">
            <div className="cc-row-meta">
              <div className="cc-row-title">Marketing</div>
              <div className="cc-row-desc">Lets us measure ad performance (Meta Pixel, Conversions API).</div>
            </div>
            <button
              className={`cc-toggle ${prefs.marketing ? "is-on" : ""}`}
              onClick={() => setPrefs(p => ({...p, marketing: !p.marketing}))}
              aria-pressed={prefs.marketing}
            ><span></span></button>
          </div>

          <div className="cc-actions">
            <button className="cc-btn cc-btn-ghost" onClick={() => save({ analytics: false, marketing: false })}>Reject all</button>
            <button className="cc-btn cc-btn-primary" onClick={() => save(prefs)}>Save my choice</button>
          </div>
        </div>
      </div>
    );
  }

  // banner
  return (
    <div className="cc-banner" role="region" aria-label="Cookie consent">
      <div className="cc-banner-inner">
        <div className="cc-banner-text">
          <div className="cc-banner-title">We use cookies</div>
          <p>Cashy uses essential cookies to run the site, plus optional cookies for analytics and ad measurement (Meta Pixel). You can accept all, reject all, or customize. See our <a href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new Event("open-privacy-modal")); }}>Privacy Policy</a>.</p>
        </div>
        <div className="cc-banner-actions">
          <button className="cc-btn cc-btn-ghost" onClick={() => save({ analytics: false, marketing: false })}>Reject all</button>
          <button className="cc-btn cc-btn-ghost" onClick={() => setState("settings")}>Customize</button>
          <button className="cc-btn cc-btn-primary" onClick={() => save({ analytics: true, marketing: true })}>Accept all</button>
        </div>
      </div>
    </div>
  );
}

window.CookieBanner = CookieBanner;