/* global React */
const { useState: useSC, useEffect: useEC } = React;

function CookieBanner({ lang = "fi" }) {
  const [show, setShow] = useSC(false);
  const [showSettings, setShowSettings] = useSC(false);
  const [prefs, setPrefs] = useSC({ necessary: true, analytics: false, marketing: false });

  useEC(() => {
    try {
      const saved = localStorage.getItem("am-cookie-consent");
      if (!saved) setShow(true);
    } catch (e) { setShow(true); }
    const open = () => { setShow(true); setShowSettings(true); };
    window.addEventListener("am:open-cookies", open);
    return () => window.removeEventListener("am:open-cookies", open);
  }, []);

  const save = (p) => {
    try { localStorage.setItem("am-cookie-consent", JSON.stringify({ ...p, ts: Date.now() })); } catch (e) {}
    try { window.dispatchEvent(new CustomEvent("am-consent-changed", { detail: p })); } catch (e) {}
    setShow(false); setShowSettings(false);
  };
  const acceptAll = () => save({ necessary: true, analytics: true, marketing: true });
  const rejectAll = () => save({ necessary: true, analytics: false, marketing: false });
  const saveCustom = () => save(prefs);

  if (!show) return null;

  const t = lang === "en" ? {
    title: "Cookies on this site",
    body: "We use necessary cookies to make the site work and analytics cookies to understand how it is used. You can choose what to allow.",
    settings: "Settings",
    reject: "Reject all",
    accept: "Accept all",
    save: "Save selection",
    nec: "Necessary", necDesc: "Required for the site to function. Cannot be disabled.",
    ana: "Analytics", anaDesc: "Helps us understand how the site is used. Anonymous.",
    mar: "Marketing", marDesc: "We do not currently use marketing cookies.",
    more: "Read the privacy policy",
    moreHref: "Tietosuoja.html",
  } : {
    title: "Evästeet sivustolla",
    body: "Käytämme välttämättömiä evästeitä sivuston toimintaan ja analytiikkaevästeitä liikenteen mittaamiseen. Voit valita, mitä sallit.",
    settings: "Asetukset",
    reject: "Hylkää kaikki",
    accept: "Hyväksy kaikki",
    save: "Tallenna valinta",
    nec: "Välttämättömät", necDesc: "Tarvitaan sivuston toiminnan varmistamiseksi. Ei voida poistaa käytöstä.",
    ana: "Analytiikka", anaDesc: "Auttaa meitä ymmärtämään, miten sivustoa käytetään. Anonyymisti.",
    mar: "Markkinointi", marDesc: "Emme käytä markkinointievästeitä tällä hetkellä.",
    more: "Lue tietosuojaseloste",
    moreHref: "Tietosuoja.html",
  };

  return (
    <div className="cb-root" role="dialog" aria-labelledby="cb-title" aria-modal="false">
      <div className="cb-card">
        {!showSettings ? (
          <>
            <div>
              <h3 id="cb-title">{t.title}</h3>
              <p>{t.body} <a href={t.moreHref}>{t.more} →</a></p>
            </div>
            <div className="cb-actions">
              <button className="cb-btn cb-btn-ghost" onClick={()=>setShowSettings(true)}>{t.settings}</button>
              <button className="cb-btn cb-btn-out" onClick={rejectAll}>{t.reject}</button>
              <button className="cb-btn cb-btn-solid" onClick={acceptAll}>{t.accept}</button>
            </div>
          </>
        ) : (
          <>
            <div>
              <h3 id="cb-title">{t.settings}</h3>
              <div className="cb-prefs">
                {[
                  { key: "necessary", t: t.nec, d: t.necDesc, locked: true },
                  { key: "analytics", t: t.ana, d: t.anaDesc },
                  { key: "marketing", t: t.mar, d: t.marDesc },
                ].map(it => (
                  <label key={it.key} className={"cb-pref"+(it.locked?" is-locked":"")}>
                    <span><strong>{it.t}</strong><span>{it.d}</span></span>
                    <input type="checkbox" checked={prefs[it.key]} disabled={it.locked} onChange={e=>setPrefs({...prefs,[it.key]:e.target.checked})} />
                  </label>
                ))}
              </div>
            </div>
            <div className="cb-actions">
              <button className="cb-btn cb-btn-ghost" onClick={()=>setShowSettings(false)}>←</button>
              <button className="cb-btn cb-btn-solid" onClick={saveCustom}>{t.save}</button>
            </div>
          </>
        )}
      </div>
      <style>{`
        .cb-root{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;display:flex;justify-content:center;pointer-events:none}
        @media(min-width:720px){.cb-root{left:auto;right:24px;bottom:24px;max-width:440px}}
        .cb-card{pointer-events:auto;background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:8px;padding:24px;box-shadow:0 24px 48px -16px rgba(31,41,55,.18);font-family:var(--sans);max-width:520px;width:100%}
        .cb-card h3{font-family:var(--serif);font-size:18px;color:var(--ink);margin:0 0 8px;font-weight:600}
        .cb-card p{margin:0 0 18px;font-size:14px;line-height:1.6;color:var(--ink-2)}
        .cb-card a{color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:1px}
        .cb-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:16px}
        .cb-btn{font:inherit;font-size:13px;font-weight:500;padding:10px 16px;border-radius:6px;border:1px solid transparent;cursor:pointer;transition:all 200ms}
        .cb-btn-ghost{color:var(--ink-2);background:transparent}
        .cb-btn-ghost:hover{color:var(--ink);background:var(--bg-2)}
        .cb-btn-out{color:var(--ink);background:transparent;border-color:var(--line)}
        .cb-btn-out:hover{border-color:var(--ink)}
        .cb-btn-solid{background:var(--ink);color:var(--bg)}
        .cb-btn-solid:hover{background:var(--blue)}
        .cb-prefs{display:flex;flex-direction:column;gap:8px;margin-top:8px}
        .cb-pref{display:flex;justify-content:space-between;gap:16px;padding:12px;border:1px solid var(--line);border-radius:6px;cursor:pointer}
        .cb-pref.is-locked{background:var(--bg-2);cursor:default}
        .cb-pref strong{display:block;font-size:13px;color:var(--ink);margin-bottom:2px;font-weight:600}
        .cb-pref span span{font-size:12px;color:var(--ink-2);line-height:1.5}
        .cb-pref input{width:18px;height:18px;flex-shrink:0;margin-top:2px}
      `}</style>
    </div>
  );
}

window.CookieBanner = CookieBanner;