// MostlyPrivacy — Cookie banner builder (screen B) + widget variants (C).
(function () {
const F = window.ForgeDesignSystem_e40d74;
const { Button, Badge, Switch, Field, Input, Textarea, Tabs } = F;
const { Icon, ICONS, LangSwitch, CookieWidget, LANGS } = window.MP;

const ACCENTS = [
  ["teal", "#159a8c"], ["indigo", "#7c69e0"], ["blue", "#5b8def"],
  ["green", "#2f9e6f"], ["amber", "#c9762f"], ["pink", "#cc5f97"],
];
const VARIANTS = [["bar", "Bottom bar"], ["corner", "Corner card"], ["modal", "Centered modal"]];
const PLATFORMS = ["Snippet", "WordPress", "Shopify", "Webflow"];

function ControlGroup({ n, label, children }) {
  return (
    <div className="bb-group">
      <div className="bb-group__label"><span className="n">{n}</span>{label}</div>
      {children}
    </div>
  );
}

const api = window.MPApi || { ready: false, listSites: () => Promise.resolve([{ id: "demo", domain: "café-lumiere.fr" }]), saveBannerConfig: () => Promise.resolve({ ok: true }) };
const ACCENT_HEX = Object.fromEntries(ACCENTS);

function Builder({ lang, setLang, nav, initial }) {
  const [variant, setVariant] = React.useState("bar");
  const [accent, setAccent] = React.useState("teal");
  const [consentMode, setConsentMode] = React.useState(true);
  const [showBadge, setShowBadge] = React.useState(true);
  const [pubLangs, setPubLangs] = React.useState(["en", "de", "fr"]);
  const [pane, setPane] = React.useState("preview");
  const [platform, setPlatform] = React.useState("Snippet");
  const [geoEU, setGeoEU] = React.useState(true);
  const [geoCA, setGeoCA] = React.useState(true);
  const [tcf, setTcf] = React.useState(false);
  const [consentApi, setConsentApi] = React.useState(true);
  const [catOn, setCatOn] = React.useState({ analytics: true, marketing: false, preferences: true });
  const [cookieless, setCookieless] = React.useState({ analytics: true });
  const [sites, setSites] = React.useState([]);
  const [siteId, setSiteId] = React.useState(initial || "");
  const [save, setSave] = React.useState({ state: "idle", msg: "" }); // idle|busy|done|error

  React.useEffect(() => {
    let ok = true;
    api.listSites().then((rows) => {
      if (!ok || !Array.isArray(rows)) return;
      setSites(rows);
      if (!siteId && rows[0]) setSiteId(rows[0].id);
      // hydrate from the selected site's saved banner config
      const sel = rows.find((r) => r.id === (initial || (rows[0] && rows[0].id))) || rows[0];
      const b = sel && sel.banner;
      if (b) {
        if (b.layout) setVariant(b.layout);
        if (b.accent) { const n = Object.keys(ACCENT_HEX).find((k) => ACCENT_HEX[k] === b.accent); if (n) setAccent(n); }
        if (typeof b.badge === "boolean") setShowBadge(b.badge);
        if (b.rules) { setGeoEU(b.rules.eu !== "off"); setGeoCA(b.rules.california !== "off"); }
        if (Array.isArray(b.cookieless)) setCookieless(Object.fromEntries(b.cookieless.map((c) => [c, true])));
      }
    }).catch(() => {});
    return () => { ok = false; };
  }, []);

  const toggleLang = (c) => setPubLangs((p) => p.includes(c) ? p.filter((x) => x !== c) : [...p, c]);

  // Builder state → the consent SiteConfig shape (validated server-side).
  function bannerConfig() {
    return {
      accent: ACCENT_HEX[accent] || "#159a8c",
      layout: variant,
      badge: showBadge,
      cookieless: Object.keys(cookieless).filter((k) => cookieless[k]),
      rules: { eu: geoEU ? "gdpr" : "off", california: geoCA ? "ccpa" : "off", default: geoEU ? "gdpr" : "none" },
    };
  }
  async function saveBanner() {
    if (!siteId) { setSave({ state: "error", msg: "Add a site first." }); return; }
    setSave({ state: "busy", msg: "" });
    try {
      await api.saveBannerConfig(siteId, bannerConfig());
      setSave({ state: "done", msg: "Saved — your live banner is updated." });
    } catch (e) {
      setSave({ state: "error", msg: (e && e.message) || "Could not save." });
    }
  }

  const currentSite = sites.find((s) => s.id === siteId);
  return (
    <div className="bb">
      {/* ── Controls ── */}
      <div className="bb__controls">
        <div className="app-card-head" style={{ marginBottom: 18 }}>
          <div>
            <div className="app-card-title" style={{ fontSize: 16 }}>Cookie banner</div>
            <div style={{ fontSize: 12, color: "var(--fg-subtle)", marginTop: 2, display: "flex", alignItems: "center", gap: 6 }}>
              MostlyCookie ·
              {sites.length > 1 ? (
                <select value={siteId} onChange={(e) => setSiteId(e.target.value)} style={{ font: "inherit", color: "var(--accent)", background: "none", border: "none", cursor: "pointer" }}>
                  {sites.map((s) => <option key={s.id} value={s.id}>{s.domain || s.dom}</option>)}
                </select>
              ) : <span style={{ color: "var(--accent)" }}>{(currentSite && (currentSite.domain || currentSite.dom)) || "café-lumiere.fr"}</span>}
            </div>
          </div>
          <Button variant="primary" size="sm" disabled={save.state === "busy"} iconLeft={<Icon d={save.state === "done" ? ICONS.check : ICONS.publish} size={14} />} onClick={saveBanner}>
            {save.state === "busy" ? "Saving…" : save.state === "done" ? "Saved" : "Save banner"}
          </Button>
        </div>
        {save.msg && <div style={{ fontSize: 12.5, marginBottom: 12, color: save.state === "error" ? "var(--danger, #b3261e)" : "var(--accent)" }}>{save.msg}</div>}

        <ControlGroup n="1" label="Layout & position">
          <div className="bb-seg">
            {VARIANTS.map(([v, l]) => (
              <button key={v} className={variant === v ? "is-active" : ""} onClick={() => setVariant(v)}>{l}</button>
            ))}
          </div>
        </ControlGroup>

        <ControlGroup n="2" label="Accent colour">
          <div className="bb-swatches">
            {ACCENTS.map(([name, hex]) => (
              <button key={name} className={"bb-swatch" + (accent === name ? " is-active" : "")}
                style={{ background: hex }} onClick={() => setAccent(name)} aria-label={name} />
            ))}
          </div>
        </ControlGroup>

        <ControlGroup n="3" label="Copy">
          <div className="bb-field"><Field label="Banner title"><Input defaultValue={window.MP.STR[lang].banner.title} /></Field></div>
          <Field label="Body"><Textarea rows={3} defaultValue={window.MP.STR[lang].banner.body} /></Field>
        </ControlGroup>

        <ControlGroup n="4" label="Categories">
          {[["necessary", true, false], ["analytics", false, true], ["marketing", false, false], ["preferences", false, true]].map(([id, locked, canExempt]) => {
            const exempt = !locked && cookieless[id];
            return (
              <div className="bb-cat" key={id}>
                <div className="bb-cat__main">
                  <div className="bb-cat__t">{window.MP.STR[lang].cats[id][0]}{exempt && <span className="bb-chip-exempt"><Icon d={ICONS.leaf} size={10} /> Cookieless</span>}</div>
                  <div className="bb-cat__d">{window.MP.STR[lang].cats[id][1]}</div>
                  {canExempt && (
                    <button className={"bb-exempt" + (exempt ? " is-on" : "")} onClick={() => setCookieless((p) => ({ ...p, [id]: !p[id] }))}>
                      <Icon d={exempt ? ICONS.check : ICONS.plus} size={11} />
                      {exempt ? "Cookieless · legitimate interest" : "Mark as cookieless"}
                    </button>
                  )}
                </div>
                <div className="bb-cat__sw"><Switch checked={locked || exempt ? true : catOn[id]} disabled={locked || exempt} onChange={() => setCatOn((p) => ({ ...p, [id]: !p[id] }))} /></div>
              </div>
            );
          })}
          <div className="bb-hint"><Icon d={ICONS.leaf} size={12} /> Cookieless tools (Plausible, Fathom) run under legitimate interest — measured even when visitors ignore the banner.</div>
        </ControlGroup>

        <ControlGroup n="5" label="Languages (auto-translated)">
          <div className="bb-langrow">
            {LANGS.map((l) => (
              <button key={l.code} className={"bb-langchip" + (pubLangs.includes(l.code) ? " is-active" : "")} onClick={() => toggleLang(l.code)}>
                {l.name}
                {pubLangs.includes(l.code) && <span className="x"><Icon d={ICONS.check} size={9} /></span>}
              </button>
            ))}
          </div>
          <div style={{ fontSize: 11.5, color: "var(--fg-subtle)", marginTop: 8 }}>Published in {pubLangs.length} languages · auto-detected from visitor locale.</div>
        </ControlGroup>

        <ControlGroup n="6" label="Geo rules">
          <div className="bb-geo">
            <span className="bb-geo__flag" style={{ background: "var(--accent-bg-soft)", color: "var(--accent)" }}>EU</span>
            <div><div className="bb-geo__t">GDPR consent banner</div><div className="bb-geo__s">European Union & UK</div></div>
            <div style={{ marginLeft: "auto" }}><Switch checked={geoEU} onChange={() => setGeoEU(!geoEU)} /></div>
          </div>
          <div className="bb-geo">
            <span className="bb-geo__flag" style={{ background: "var(--warn-soft)", color: "var(--warn)" }}>CA</span>
            <div><div className="bb-geo__t">CCPA “Do not sell” notice</div><div className="bb-geo__s">California, USA</div></div>
            <div style={{ marginLeft: "auto" }}><Switch checked={geoCA} onChange={() => setGeoCA(!geoCA)} /></div>
          </div>
        </ControlGroup>

        <ControlGroup n="7" label="Integrations">
          <div className="bb-geo" style={{ marginBottom: 8 }}>
            <span className="bb-geo__flag" style={{ background: "var(--accent-bg-soft)", color: "var(--accent)" }}><Icon d={ICONS.code} size={15} /></span>
            <div>
              <div className="bb-geo__t">Vendor-neutral consent API</div>
              <div className="bb-geo__s"><code className="bb-inline-code">window.MostlyCookie.consent()</code> + event — any tool</div>
            </div>
            <div style={{ marginLeft: "auto" }}><Switch checked={consentApi} onChange={() => setConsentApi(!consentApi)} /></div>
          </div>
          <div className="bb-geo" style={{ marginBottom: 8 }}>
            <span className="bb-geo__flag" style={{ background: "var(--accent-bg-soft)", color: "var(--accent)" }}><Icon d={ICONS.zap} size={15} /></span>
            <div><div className="bb-geo__t">Google Consent Mode v2</div><div className="bb-geo__s">For Google Analytics &amp; Ads specifically</div></div>
            <div style={{ marginLeft: "auto" }}><Switch checked={consentMode} onChange={() => setConsentMode(!consentMode)} /></div>
          </div>
          <div className="bb-geo" style={{ marginBottom: 8 }}>
            <span className="bb-geo__flag" style={{ background: "var(--accent-bg-soft)", color: "var(--accent)" }}><Icon d={ICONS.layout} size={15} /></span>
            <div>
              <div className="bb-geo__t" style={{ display: "flex", alignItems: "center", gap: 7 }}>IAB TCF v2.3 <Badge tone="accent">Pro</Badge></div>
              <div className="bb-geo__s">Transmit consent to adtech vendors — for publishers</div>
            </div>
            <div style={{ marginLeft: "auto" }}><Switch checked={tcf} onChange={() => setTcf(!tcf)} /></div>
          </div>
          <div className="bb-geo">
            <span className="bb-geo__flag" style={{ background: "var(--bg-chip)", color: "var(--fg-muted)" }}><Icon d={ICONS.bolt} size={15} /></span>
            <div><div className="bb-geo__t">Show MostlyCookie badge</div><div className="bb-geo__s">Drives referral signups · removable on paid plans</div></div>
            <div style={{ marginLeft: "auto" }}><Switch checked={showBadge} onChange={() => setShowBadge(!showBadge)} /></div>
          </div>
        </ControlGroup>
      </div>

      {/* ── Preview ── */}
      <div className="bb__preview">
        <div className="bb-preview-toolbar">
          <span className="ttl">Live preview</span>
          <Badge tone="accent">{VARIANTS.find((v) => v[0] === variant)[1]}</Badge>
          <div style={{ marginLeft: "auto", display: "flex", gap: 10, alignItems: "center" }}>
            <LangSwitch value={lang} onChange={setLang} />
            <Tabs value={pane} onChange={setPane} items={[{ value: "preview", label: "Preview" }, { value: "install", label: "Install" }]} />
          </div>
        </div>

        {pane === "preview" ? (
          <div className="bb-site" data-accent={accent}>
            <div className="bb-site__bar">
              <span className="mp-dot" style={{ background: "#ff5f57" }} />
              <span className="mp-dot" style={{ background: "#febc2e" }} />
              <span className="mp-dot" style={{ background: "#28c840" }} />
              <span className="bb-site__addr">https://café-lumiere.fr</span>
            </div>
            <div className="bb-site__page">
              <div className="bb-site__hero-eyebrow">Café Lumière</div>
              <div className="bb-site__hero-h">Fresh pastries, every morning.</div>
              <div className="bb-site__skeleton"><i /><i /><i /><i /></div>
              <div className="bb-site__cards"><div /><div /><div /></div>
              <CookieWidget key={variant + lang + accent + showBadge + JSON.stringify(cookieless)} variant={variant} lang={lang} showBadge={showBadge} cookieless={cookieless} />
            </div>
          </div>
        ) : (
          <InstallPane platform={platform} setPlatform={setPlatform} consentMode={consentMode} tcf={tcf} consentApi={consentApi} />
        )}
      </div>
    </div>
  );
}

function InstallPane({ platform, setPlatform, consentMode, tcf, consentApi }) {
  const [copied, setCopied] = React.useState(false);
  const copy = () => { setCopied(true); setTimeout(() => setCopied(false), 1600); };
  const STEPS = {
    Snippet: "Paste this just before the closing </head> tag on every page.",
    WordPress: "Install the MostlyCookie plugin, then paste your site key in Settings → Consent.",
    Shopify: "Add the MostlyCookie app, then enable it under Online Store → Preferences.",
    Webflow: "Project settings → Custom Code → paste in the Head section, then publish.",
  };
  return (
    <div style={{ maxWidth: 560 }}>
      <div className="bb-seg" style={{ marginBottom: 16 }}>
        {PLATFORMS.map((p) => (
          <button key={p} className={platform === p ? "is-active" : ""} onClick={() => setPlatform(p)}>{p}</button>
        ))}
      </div>
      <p style={{ fontSize: 13.5, color: "var(--fg-muted)", margin: "0 0 14px", lineHeight: 1.5 }}>{STEPS[platform]}</p>
      <div className="bb-install">
        <div className="bb-code">
          <div className="bb-code__copy">
            <Button variant="secondary" size="sm" iconLeft={<Icon d={copied ? ICONS.check : ICONS.copy} size={14} />} onClick={copy}>{copied ? "Copied" : "Copy"}</Button>
          </div>
          <div><span className="tk-com">&lt;!-- MostlyCookie consent banner --&gt;</span></div>
          <div><span className="tk-tag">&lt;script</span> <span className="tk-att">src</span>=<span className="tk-str">"https://cdn.mostlycookie.com/v2/banner.js"</span></div>
          <div>{"  "}<span className="tk-att">data-site</span>=<span className="tk-str">"site_8f2a91c4"</span></div>
          <div>{"  "}<span className="tk-att">data-langs</span>=<span className="tk-str">"auto"</span>{consentApi ? <> <span className="tk-att">data-consent-api</span>=<span className="tk-str">"on"</span></> : null}{consentMode ? <> <span className="tk-att">data-consent-mode</span>=<span className="tk-str">"v2"</span></> : null}{tcf ? <> <span className="tk-att">data-tcf</span>=<span className="tk-str">"2.3"</span></> : null} <span className="tk-tag">async&gt;&lt;/script&gt;</span></div>
        </div>

        {consentApi && (
          <div className="bb-code">
            <div><span className="tk-com">// Vendor-neutral — works with Plausible, PostHog, Fathom, your own tracker</span></div>
            <div><span className="tk-tag">if</span> (window.MostlyCookie.consent(<span className="tk-str">'analytics'</span>)) {'{'}</div>
            <div>{"  "}plausible(<span className="tk-str">'pageview'</span>);</div>
            <div>{'}'}</div>
            <div style={{ height: 8 }} />
            <div><span className="tk-com">// React the moment a visitor changes their choice</span></div>
            <div>window.addEventListener(<span className="tk-str">'mostlycookie:consent'</span>, (e) =&gt; {'{'}</div>
            <div>{"  "}<span className="tk-com">// e.detail → {'{'} analytics: true, marketing: false, … {'}'}</span></div>
            <div>{"  "}sync(e.detail);</div>
            <div>{'}'});</div>
          </div>
        )}
        <div className="wz-transparent" style={{ marginTop: 4 }}>
          <Icon d={ICONS.shieldCheck} size={18} />
          <span><b style={{ color: "var(--fg)" }}>That's it.</b> The banner auto-detects each visitor's language and region, exposes a vendor-neutral consent signal to any tool, and logs every choice for your audit trail.</span>
        </div>
      </div>
    </div>
  );
}

window.MP.Builder = Builder;
})();