// MostlyPrivacy — Cookie Scanner (new screen). Run/schedule scans, results by category.
(function () {
const F = window.ForgeDesignSystem_e40d74;
const { Button, Badge, Card, CardBody, Stat, Table, Select, Switch } = F;
const { Icon, ICONS } = window.MP;

const SITES = ["café-lumiere.fr", "boulangerie-no7.de", "studio-aria.it", "northwind.shop"];
const CATS = ["Necessary", "Analytics", "Marketing", "Preferences"];
const CAT_TONE = { Necessary: "neutral", Analytics: "accent", Marketing: "warn", Preferences: "good" };

const COOKIES = [
  { name: "session_id", provider: "café-lumiere.fr", purpose: "Keeps you signed in during your visit", cat: "Necessary", exp: "Session", consent: "Essential" },
  { name: "csrf_token", provider: "café-lumiere.fr", purpose: "Protects forms against cross-site requests", cat: "Necessary", exp: "Session", consent: "Essential" },
  { name: "cookie_consent", provider: "MostlyCookie", purpose: "Stores your consent choices", cat: "Necessary", exp: "1 year", consent: "Essential" },
  { name: "__stripe_mid", provider: "Stripe", purpose: "Fraud prevention at checkout", cat: "Necessary", exp: "1 year", consent: "Essential" },
  { name: "Plausible", provider: "Plausible", purpose: "Privacy-friendly, cookieless page analytics", cat: "Analytics", exp: "No cookies", consent: "Exempt" },
  { name: "_ga", provider: "Google Analytics", purpose: "Distinguishes unique visitors", cat: "Analytics", exp: "2 years", consent: "Required" },
  { name: "_gid", provider: "Google Analytics", purpose: "Distinguishes unique visitors", cat: "Analytics", exp: "24 hours", consent: "Required" },
  { name: "_hjSession", provider: "Hotjar", purpose: "Records session for heatmaps", cat: "Analytics", exp: "30 minutes", consent: "Required" },
  { name: "_gcl_au", provider: "Google Ads", purpose: "Measures ad conversion", cat: "Marketing", exp: "3 months", consent: "Required" },
  { name: "_fbp", provider: "Meta (Facebook)", purpose: "Delivers and measures ads", cat: "Marketing", exp: "3 months", consent: "Required" },
  { name: "VISITOR_INFO1_LIVE", provider: "YouTube", purpose: "Estimates bandwidth on embedded videos", cat: "Marketing", exp: "6 months", consent: "Required" },
  { name: "lang_pref", provider: "café-lumiere.fr", purpose: "Remembers your language", cat: "Preferences", exp: "1 year", consent: "Required" },
  { name: "intercom-id", provider: "Intercom", purpose: "Remembers your support chat", cat: "Preferences", exp: "9 months", consent: "Required" },
];
const CONSENT_TONE = { Essential: "neutral", Required: "warn", Exempt: "good" };

function Scanner({ nav }) {
  const [site, setSite] = React.useState(SITES[0]);
  const [status, setStatus] = React.useState("done"); // idle | scanning | done
  const [progress, setProgress] = React.useState(100);
  const [filter, setFilter] = React.useState("All");
  const [schedule, setSchedule] = React.useState("Weekly");
  const [lastScan, setLastScan] = React.useState("2 hours ago");
  const timer = React.useRef(null);

  const runScan = () => {
    if (status === "scanning") return;
    setStatus("scanning"); setProgress(0); setFilter("All");
    clearInterval(timer.current);
    timer.current = setInterval(() => {
      setProgress((p) => {
        if (p >= 100) { clearInterval(timer.current); setStatus("done"); setLastScan("just now"); return 100; }
        return Math.min(100, p + 9 + Math.random() * 12);
      });
    }, 120);
  };
  React.useEffect(() => () => clearInterval(timer.current), []);

  const counts = CATS.map((c) => COOKIES.filter((k) => k.cat === c).length);
  const rows = COOKIES.filter((k) => filter === "All" || k.cat === filter);
  const cols = [
    { key: "name", label: "Cookie / tool", mono: true, render: (v, r) => <span style={{ fontWeight: 600 }}>{v}{r.consent === "Exempt" && <span className="scan-leaf"><Icon d={ICONS.leaf} size={11} /></span>}</span> },
    { key: "provider", label: "Provider" },
    { key: "purpose", label: "Purpose" },
    { key: "cat", label: "Category", render: (v) => <Badge tone={CAT_TONE[v]} dot>{v}</Badge> },
    { key: "consent", label: "Consent", render: (v) => <Badge tone={CONSENT_TONE[v]}>{v === "Exempt" ? "Exempt · cookieless" : v}</Badge> },
    { key: "exp", label: "Expiry", align: "right", mono: true },
  ];
  const exemptCount = COOKIES.filter((k) => k.consent === "Exempt").length;

  return (
    <div className="app-view app-view--wide">
      <div className="app-view__head">
        <div>
          <h1 className="app-h1">Cookie scanner</h1>
          <p className="app-sub">Detect every cookie and tracker on your site, auto-sorted into consent categories.</p>
        </div>
        <Badge tone="good" dot>Auto-feeds your banner</Badge>
      </div>

      {/* control bar */}
      <Card style={{ marginBottom: 16 }}>
        <CardBody>
          <div className="scan-bar">
            <div className="scan-bar__field">
              <label className="scan-bar__lbl">Site</label>
              <Select defaultValue={site} onChange={(e) => setSite(e && e.target ? e.target.value : e)} options={SITES} />
            </div>
            <div className="scan-bar__field">
              <label className="scan-bar__lbl">Scheduled scans</label>
              <Select defaultValue={schedule} onChange={(e) => setSchedule(e && e.target ? e.target.value : e)} options={["Off", "Daily", "Weekly", "Monthly"]} />
            </div>
            <div className="scan-bar__spacer" />
            <div className="scan-bar__meta">
              <Icon d={ICONS.clock} size={14} /> Last scan <strong>{lastScan}</strong>
            </div>
            <Button variant="primary" iconLeft={<Icon d={status === "scanning" ? ICONS.refresh : ICONS.scan} size={15} />} onClick={runScan} disabled={status === "scanning"}>
              {status === "scanning" ? "Scanning…" : "Run scan"}
            </Button>
          </div>
          {status === "scanning" && (
            <div className="scan-progress">
              <div className="scan-progress__bar" style={{ width: progress + "%" }} />
              <span className="scan-progress__txt">Crawling {site} · {Math.round(progress)}%</span>
            </div>
          )}
        </CardBody>
      </Card>

      {/* summary */}
      <div className="app-stats" style={{ gridTemplateColumns: "repeat(5,1fr)" }}>
        <Stat label="Cookies found" value={String(COOKIES.length)} delta={status === "scanning" ? "scanning…" : "+2 since last"} trend="up" bordered />
        {CATS.map((c, i) => (
          <Stat key={c} label={c} value={String(counts[i])} delta={CAT_TONE[c] === "neutral" ? "always on" : "needs consent"} trend="flat" bordered />
        ))}
      </div>

      {/* results */}
      <Card>
        <CardBody style={{ paddingBottom: 6 }}>
          <div className="app-card-head">
            <span className="app-card-title">Detected cookies &amp; trackers</span>
            <div className="scan-filters">
              {["All", ...CATS].map((c) => (
                <button key={c} className={"scan-chip" + (filter === c ? " is-active" : "")} onClick={() => setFilter(c)}>
                  {c}{c !== "All" && <span className="scan-chip__n">{counts[CATS.indexOf(c)]}</span>}
                </button>
              ))}
            </div>
          </div>
        </CardBody>
        <div style={{ opacity: status === "scanning" ? 0.45 : 1, transition: "opacity .2s" }}>
          <Table columns={cols} rows={rows} />
        </div>
        <CardBody>
          <div className="wz-transparent" style={{ marginTop: 0 }}>
            <Icon d={ICONS.leaf} size={18} />
            <span><b style={{ color: "var(--fg)" }}>{exemptCount} cookieless tool runs under legitimate interest</b> — no opt-in required, so it keeps measuring even when visitors ignore the banner. Everything else is gated and feeds your banner's categories on <strong>{site}</strong> automatically.</span>
          </div>
        </CardBody>
      </Card>
    </div>
  );
}

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