// MostlyPrivacy — /cookie-scanner, the free cookie scanner tool page.
//
// It runs the REAL scan the dashboard runs (functions/cookiescan.js via MPApi.runSiteScan:
// runCookieScan → cookieScanWorker → getCookieScan), so a signed-in visitor gets a real
// inventory of the URL they type — free accounts crawl up to 3 pages. The callable is
// auth-gated (a crawler on someone else's site is a cost + abuse surface, and unverified
// domains are rate-limited server-side), so a SIGNED-OUT visitor gets the canned sample
// inventory from api.js, labelled as a sample, plus a sign-up path. Never presented as a
// scan of their site.
//
// The explanatory copy states the v1 coverage exactly (cookiescan.js header): server-set
// cookies (Set-Cookie response headers) + statically referenced third-party hosts. It does
// NOT execute JavaScript, so cookies written by client JS and localStorage are not seen.
//
// SSR: initial render has no result and no auth state, so the prerendered HTML and the
// first client render match; everything interactive happens after hydration.
(function () {
const F = window.ForgeDesignSystem_e40d74;
const { Button, Badge } = F;
const { Icon, ICONS, mpPath, MPNav, MPFooter, MPFaq, normDomain, isDomain } = window.MP;
const I18N = (typeof window !== "undefined" && window.ForgeI18n) || { t: (k) => k };
const tr = (k, a) => I18N.t(k, a);
const P = (p) => (mpPath ? mpPath(p) : p);
const K = "tool.scan.";

const CAT_TONE = { necessary: "neutral", analytics: "accent", marketing: "warn", preferences: "good" };
const CONSENT_TONE = { Essential: "neutral", Required: "warn", Exempt: "good" };
const range = (n) => Array.from({ length: n }, (_, i) => i);

function ScanResult({ inventory, sample }) {
  const cookies = (inventory && inventory.cookies) || [];
  const stats = (inventory && inventory.stats) || {};
  return (
    <div className="tool-result">
      {sample && <p className="tool-result__note"><Icon d={ICONS.flag} size={14} /> {tr(K + "sampleNote")}</p>}
      <div className="tool-result__stats">
        <div><b>{stats.cookies || cookies.length}</b><span>{tr(K + "stat.cookies")}</span></div>
        <div><b>{stats.third_parties || 0}</b><span>{tr(K + "stat.thirdParties")}</span></div>
        <div><b>{stats.requires_consent || 0}</b><span>{tr(K + "stat.consent")}</span></div>
        <div><b>{stats.pages_crawled || 0}</b><span>{tr(K + "stat.pages")}</span></div>
      </div>
      <div className="tool-result__table" role="table">
        <div className="tool-result__row tool-result__row--head" role="row">
          <span role="columnheader">{tr("scanner.table.cookieTool")}</span>
          <span role="columnheader">{tr("scanner.table.provider")}</span>
          <span role="columnheader">{tr("scanner.table.category")}</span>
          <span role="columnheader">{tr("scanner.table.consent")}</span>
          <span role="columnheader">{tr("scanner.table.expiry")}</span>
        </div>
        {cookies.map((c, i) => (
          <div className="tool-result__row" role="row" key={c.name + i}>
            <span className="tool-result__mono">{c.name}</span>
            <span>{c.provider}</span>
            <span><Badge tone={CAT_TONE[c.category] || "neutral"} dot>{tr("scanner.cat." + (c.category || "necessary"))}</Badge></span>
            <span><Badge tone={CONSENT_TONE[c.consent] || "neutral"}>{c.consent === "Exempt" ? tr("scanner.consent.exemptCookieless") : tr("scanner.consent." + String(c.consent || "required").toLowerCase())}</Badge></span>
            <span className="tool-result__mono">{c.expiry}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function ScannerTool({ go }) {
  const api = window.MPApi || { ready: false };
  const [url, setUrl] = React.useState("");
  const [user, setUser] = React.useState(null);
  const [status, setStatus] = React.useState("idle"); // idle | scanning | done | sample | error
  const [inventory, setInventory] = React.useState(null);
  const [error, setError] = React.useState("");

  React.useEffect(() => {
    if (!api.onAuth) return undefined;
    return api.onAuth((u) => setUser(u || null));
  }, []); // eslint-disable-line

  const submit = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    const host = normDomain ? normDomain(url) : String(url || "").trim();
    if (!host || (isDomain && !isDomain(host))) { setStatus("error"); setError(tr(K + "invalid")); return; }
    setError(""); setInventory(null);
    // Live backend + signed out → the labelled sample, never a pretend scan of their site.
    if (api.ready && !user) {
      setStatus("scanning");
      Promise.resolve(api.getCookieScan ? api.getCookieScan("sample") : null)
        .then((r) => { setInventory(r && r.result ? r.result.inventory : null); setStatus("sample"); })
        .catch(() => setStatus("sample"));
      return;
    }
    setStatus("scanning");
    Promise.resolve(api.runSiteScan ? api.runSiteScan({ url: "https://" + host }) : null)
      .then((res) => {
        if (res && res.status === "done" && res.result) {
          setInventory(res.result.inventory || null);
          setStatus(api.ready ? "done" : "sample");
        } else { setStatus("error"); setError((res && res.error) || tr(K + "failed")); }
      })
      .catch((err) => { setStatus("error"); setError((err && err.message) || tr(K + "failed")); });
  };

  return (
    <div className="tool-card">
      <form className="tool-form" onSubmit={submit}>
        <label className="tool-form__lbl" htmlFor="tool-scan-url">{tr(K + "label")}</label>
        <div className="tool-form__row">
          <input id="tool-scan-url" className="tool-form__input" type="text" inputMode="url" autoComplete="url"
            placeholder="example.com" value={url} onChange={(e) => setUrl(e.target.value)} />
          <Button variant="primary" size="lg" type="submit" disabled={status === "scanning"}
            iconRight={<Icon d={ICONS.scan} size={16} />}>{status === "scanning" ? tr(K + "scanning") : tr(K + "button")}</Button>
        </div>
        <p className="tool-form__hint">{tr(K + "hint")}</p>
      </form>
      {status === "error" && <p className="tool-form__err" role="alert">{error}</p>}
      {(status === "done" || status === "sample") && inventory && <ScanResult inventory={inventory} sample={status === "sample"} />}
      {status === "sample" && (
        <div className="tool-result__cta">
          <a className="forge-btn forge-btn--primary forge-btn--lg" href="/signin">{tr(K + "signinCta")}</a>
        </div>
      )}
      {status === "done" && (
        <div className="tool-result__cta">
          <Button variant="primary" size="lg" iconRight={<Icon d={ICONS.arrow} size={16} />} onClick={() => go("app", "banner")}>{tr(K + "nextCta")}</Button>
        </div>
      )}
    </div>
  );
}

function CookieScannerPage({ nav }) {
  const go = nav || window.mpNav;
  return (
    <div className="mp-root">
      <MPNav nav={go} cta="scanner" />
      <section className="mp-hero sol-hero">
        <div className="mp-wrap">
          <div className="mp-section-head" style={{ marginBottom: 26 }}>
            <span className="mp-eyebrow"><Icon d={ICONS.scan} size={14} /> {tr(K + "eyebrow")}</span>
            <h1 className="mp-h1 sol-h1">{tr(K + "h1")}</h1>
            <p className="mp-lead" style={{ maxWidth: "38em" }}>{tr(K + "lead")}</p>
          </div>
          <ScannerTool go={go} />
        </div>
      </section>

      <section className="mp-section">
        <div className="mp-wrap sol-prose">
          <h2 className="mp-h2">{tr(K + "what.h2")}</h2>
          {range(3).map((i) => <p className="sol-p" key={i}>{tr(K + "what.p." + i)}</p>)}
        </div>
      </section>

      <section className="mp-section">
        <div className="mp-wrap">
          <div className="mp-section-head">
            <h2 className="mp-h2">{tr(K + "read.h2")}</h2>
            <p className="mp-lead">{tr(K + "read.lead")}</p>
          </div>
          <div className="mp-feature-grid">
            {["necessary", "analytics", "marketing", "preferences", "exempt", "unknown"].map((c) => (
              <div className="int-step" key={c}>
                <h3 className="int-step__t">{tr(K + "read." + c + ".t")}</h3>
                <p className="int-step__d">{tr(K + "read." + c + ".b")}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="mp-section">
        <div className="mp-wrap sol-prose">
          <h2 className="mp-h2">{tr(K + "next.h2")}</h2>
          {range(2).map((i) => <p className="sol-p" key={i}>{tr(K + "next.p." + i)}</p>)}
          <h2 className="mp-h2 sol-h2--gap">{tr(K + "limits.h2")}</h2>
          {range(2).map((i) => <p className="sol-p" key={i}>{tr(K + "limits.p." + i)}</p>)}
          <p className="sol-xlink">
            {tr(K + "nextLinks")} <a href={P("/cookie-consent-banner")}>{tr("chrome.link.banner")}</a> · <a href={P("/cookie-policy-generator")}>{tr("chrome.link.cookie")}</a> · <a href={P("/privacy-policy-generator")}>{tr("chrome.link.privacy")}</a>
          </p>
        </div>
      </section>

      <MPFaq seoKey="toolScanner" n={8} />
      <MPFooter />
      <div style={{ height: 56 }} />
    </div>
  );
}

window.MP = Object.assign(window.MP || {}, { CookieScannerPage });
window.MPCookieScannerPage = CookieScannerPage;
})();