// Cookiebanner en cookie-instellingen.
// Keuze wordt 14 dagen bewaard in localStorage, daarna vragen wij opnieuw.

const BB_COOKIE_KEY = "bb-cookie-consent";
const BB_COOKIE_DAGEN = 14;
const BB_COOKIE_VERSIE = 1;

function bbLeesConsent() {
  try {
    const raw = localStorage.getItem(BB_COOKIE_KEY);
    if (!raw) return null;
    const d = JSON.parse(raw);
    if (!d || d.versie !== BB_COOKIE_VERSIE || !d.datum) return null;
    const oud = (Date.now() - d.datum) / 86400000;
    if (oud > BB_COOKIE_DAGEN) return null;
    return d;
  } catch (e) { return null; }
}

function bbSchrijfConsent(keuze) {
  const d = { versie: BB_COOKIE_VERSIE, datum: Date.now(), analytisch: !!keuze.analytisch, derden: !!keuze.derden };
  try { localStorage.setItem(BB_COOKIE_KEY, JSON.stringify(d)); } catch (e) {}
  window.bbConsent = d;
  window.dispatchEvent(new CustomEvent("bb-consent", { detail: d }));
  return d;
}

// Andere modules kunnen dit uitlezen voordat zij een script of kaart laden.
window.bbConsent = bbLeesConsent();
window.bbOpenCookieInstellingen = () => window.dispatchEvent(new CustomEvent("bb-cookie-open"));

const BB_COOKIE_CATS = [
  {
    id: "functioneel", titel: "Functionele cookies", vast: true,
    tekst: "Nodig om de website te laten werken, bijvoorbeeld om jouw cookiekeuze te onthouden. Hiervoor is geen toestemming nodig.",
  },
  {
    id: "analytisch", titel: "Analytische cookies",
    tekst: "Helpen ons te zien hoeveel mensen de website bezoeken en welke pagina's goed werken. IP-adressen worden geanonimiseerd.",
  },
  {
    id: "derden", titel: "Cookies van derden",
    tekst: "Nodig voor externe diensten: de kaart op de pagina 'Waar actief', de video's op de pagina 'In de media' en het donatieformulier van WhyDonate. Zonder toestemming laden wij die niet en zie je in plaats daarvan een melding.",
  },
];

function CookieBanner({ go }) {
  const [open, setOpen] = useState(false);
  const [detail, setDetail] = useState(false);
  const [keuze, setKeuze] = useState({ analytisch: false, derden: false });
  const kaartRef = useRef(null);
  const eersteRef = useRef(null);
  const heropendRef = useRef(false);

  useEffect(() => {
    const bestaand = bbLeesConsent();
    if (!bestaand) {
      const t = setTimeout(() => setOpen(true), 600);
      return () => clearTimeout(t);
    }
  }, []);

  useEffect(() => {
    const openen = () => {
      const b = bbLeesConsent();
      setKeuze({ analytisch: !!(b && b.analytisch), derden: !!(b && b.derden) });
      heropendRef.current = true;
      setDetail(true);
      setOpen(true);
    };
    window.addEventListener("bb-cookie-open", openen);
    return () => window.removeEventListener("bb-cookie-open", openen);
  }, []);

  useEffect(() => {
    if (!open) return;
    // Alleen focus verplaatsen als de gebruiker de banner zelf heropent vanuit de footer.
    let t = 0;
    if (heropendRef.current && eersteRef.current) {
      t = setTimeout(() => { if (eersteRef.current) eersteRef.current.focus(); }, 60);
    }
    const onKey = (e) => {
      if (e.key === "Escape" && heropendRef.current) sluitZonderWijziging();
    };
    document.addEventListener("keydown", onKey);
    return () => { if (t) clearTimeout(t); document.removeEventListener("keydown", onKey); };
  }, [open, detail]);

  const sluitZonderWijziging = () => {
    setOpen(false);
    setDetail(false);
    const knop = document.querySelector(".bb-cookie__settings");
    if (heropendRef.current && knop) knop.focus();
    heropendRef.current = false;
  };

  const bewaar = (k) => {
    bbSchrijfConsent(k);
    setOpen(false);
    setDetail(false);
    const knop = document.querySelector(".bb-cookie__settings");
    if (heropendRef.current && knop) knop.focus();
    heropendRef.current = false;
  };

  if (!open) return null;

  return (
    <div className="bb-cookie" role="region" aria-labelledby="bb-cookie-kop">
      <div className="bb-cookie__card" ref={kaartRef}>
        <div className="bb-cookie__top">
          <span className="bb-cookie__icon" aria-hidden="true"><Icon name="shield" size={24} /></span>
          <div>
            <h2 id="bb-cookie-kop">Cookies op deze website</h2>
            <p id="bb-cookie-tekst">
              Wij gebruiken functionele cookies om de website te laten werken. Met jouw toestemming
              gebruiken wij ook analytische cookies en cookies van derden. Je keuze bewaren wij 14 dagen
              en daarna vragen wij het opnieuw. Meer lezen kan in ons{" "}
              <a
                href={window.bbHref("cookiebeleid")}
                onClick={(e) => { e.preventDefault(); setOpen(false); go("cookiebeleid"); }}
              >Cookiebeleid</a>.
            </p>
          </div>
        </div>

        {detail && (
          <ul className="bb-cookie__cats">
            {BB_COOKIE_CATS.map((c) => (
              <li key={c.id}>
                <label className={"bb-cookie__cat" + (c.vast ? " is-vast" : "")}>
                  <input
                    type="checkbox"
                    checked={c.vast ? true : keuze[c.id]}
                    disabled={c.vast}
                    onChange={(e) => setKeuze((k) => ({ ...k, [c.id]: e.target.checked }))}
                  />
                  <span>
                    <b>{c.titel}{c.vast && <em> (altijd aan)</em>}</b>
                    <span className="d">{c.tekst}</span>
                  </span>
                </label>
              </li>
            ))}
          </ul>
        )}

        <div className="bb-cookie__acts">
          <button
            type="button" className="bb-btn bb-btn--yellow bb-cookie__btn" ref={eersteRef}
            onClick={() => bewaar({ analytisch: true, derden: true })}
          >Alles accepteren</button>
          <button
            type="button" className="bb-btn bb-btn--secondary bb-cookie__btn"
            onClick={() => bewaar({ analytisch: false, derden: false })}
          >Alleen functioneel</button>
          {detail ? (
            <button
              type="button" className="bb-btn bb-btn--secondary bb-cookie__btn"
              onClick={() => bewaar(keuze)}
            >Mijn keuze bewaren</button>
          ) : (
            <button
              type="button" className="bb-cookie__link"
              onClick={() => setDetail(true)}
            >Voorkeuren instellen</button>
          )}
        </div>
      </div>
    </div>
  );
}

function CookieSettingsLink({ className = "" }) {
  return (
    <button type="button" className={"bb-cookie__settings " + className} onClick={() => window.bbOpenCookieInstellingen()}>
      Cookie-instellingen
    </button>
  );
}

Object.assign(window, { CookieBanner, CookieSettingsLink, bbLeesConsent, bbSchrijfConsent });