/* FindMyFrag — Issues.
   /issue        — list of all issues (archival index)
   /issue/001    — the canonical per-issue snapshot

   Each issue is a frozen editorial object — a citable URL, a publication
   date, a changelog, and an explicit scope of what IS vs ISN'T modeled.
   Journalists, academics, Reddit threads, and tax auditors all benefit
   from anchoring to specific issues rather than an always-changing site. */

/* global React, FMF */

const ISSUES = [
  {
    id: "001",
    title: "The Aventus Exemplar",
    date: "April 2026",
    iso:  "2026-04",
    exemplar: { slug: "creed-aventus-2010", brand: "Creed", name: "Aventus" },
    scope: {
      fragrancesFullyModeled: 1,
      retailersTracked: 32,
      refusalsInForce: 12,
      breachesOnRecord: 1,
    },
    published: true,
    editor: "The editor, FindMyFrag",
    city: "Brooklyn",
    summary: "Issue 001 ships with one fully-modeled exemplar — Creed Aventus 2010 — so every retailer row, coupon, timestamp, and invariant can be verified against the published method before catalog coverage expands.",
    contents: [
      { kind: "exemplar",    label: "Creed Aventus 2010 · full ledger",   href: "#/fragrance/creed-aventus-2010" },
      { kind: "ethics",      label: "11 refusals · signed and dated",      href: "#/refusals" },
      { kind: "breaches",    label: "Breach ledger · 1 on record",         href: "#/breaches" },
      { kind: "manifesto",   label: "Why we exist · 200 words",            href: "#/about" },
      { kind: "colophon",    label: "Colophon · every spec",               href: "#/colophon" },
    ],
  },
];

function IssueIndex() {
  return (
    <main>
      <section className="container" style={{ paddingTop: 28, paddingBottom: 14 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
          <div className="kicker">Archive · all issues</div>
          <div className="mono body-xs" style={{ color: "var(--ink-mute)" }}>
            {ISSUES.length} issue{ISSUES.length === 1 ? "" : "s"} · most recent first
          </div>
        </div>
      </section>
      <hr className="hairline-k" />

      <section className="container" style={{ padding: "64px 32px 24px" }}>
        <h1 className="display-xl" style={{ margin: 0, maxWidth: "18ch" }}>
          Every <span className="fraun-itl">issue</span>, kept in public.
        </h1>
        <p className="fraun body-l" style={{ color: "var(--ink-soft)", marginTop: 20, maxWidth: "50ch" }}>
          Each issue is a frozen editorial object. The URL never moves.
          The data as-of-publication is the record. Cite by issue number.
        </p>
      </section>

      <section className="container" style={{ padding: "24px 32px 64px" }}>
        <ol style={{ listStyle: "none", padding: 0, margin: 0, borderTop: "1px solid var(--ink)" }}>
          {ISSUES.map(issue => <IssueRow key={issue.id} issue={issue} />)}
        </ol>
      </section>
    </main>
  );
}

function IssueRow({ issue }) {
  return (
    <li>
      <a href={`#/issue/${issue.id}`} style={{
        display: "grid",
        gridTemplateColumns: "110px 1fr 240px",
        gap: 32,
        padding: "28px 0",
        borderBottom: "1px solid var(--rule)",
        alignItems: "baseline",
        textDecoration: "none",
        color: "inherit",
      }}>
        <div className="mono" style={{ fontSize: 32, letterSpacing: "-0.02em", color: "var(--ink-soft)" }}>
          № {issue.id}
        </div>
        <div>
          <div className="fraun" style={{ fontSize: 30, letterSpacing: "-0.018em", lineHeight: 1.15 }}>
            {issue.title}
          </div>
          <div className="body-m" style={{ color: "var(--ink-soft)", marginTop: 10, maxWidth: "60ch" }}>
            {issue.summary}
          </div>
        </div>
        <div className="mono body-xs" style={{ color: "var(--ink-mute)", lineHeight: 1.9, textAlign: "right" }}>
          <div style={{ color: "var(--ink)", fontSize: 14 }}>{issue.date}</div>
          <div>exemplar · {issue.exemplar.brand}</div>
          <div>{issue.scope.refusalsInForce} refusals · {issue.scope.breachesOnRecord} breach{issue.scope.breachesOnRecord === 1 ? "" : "es"}</div>
        </div>
      </a>
    </li>
  );
}

function Issue({ id }) {
  const issue = ISSUES.find(i => i.id === id);
  if (!issue) return <NoRecordIssue id={id} />;
  const citation = `FindMyFrag. Issue ${issue.id}: ${issue.title}. ${issue.date}. ${typeof location !== "undefined" ? location.origin : ""}/#/issue/${issue.id}`;

  return (
    <main>
      <section className="container" style={{ paddingTop: 28, paddingBottom: 14 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", flexWrap: "wrap", gap: 12 }}>
          <div className="kicker">Archive · issue {issue.id} · {issue.date}</div>
          <div className="mono body-xs" style={{ color: "var(--ink-mute)" }}>
            <a href="#/issue" style={{ color: "var(--ink-mute)", borderBottom: "1px solid var(--rule)", paddingBottom: 1 }}>all issues →</a>
          </div>
        </div>
      </section>
      <hr className="hairline-k" />

      {/* Masthead */}
      <section className="container" style={{ padding: "80px 32px 36px" }}>
        <div className="mono body-xs" style={{ color: "var(--ink-mute)", letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 14 }}>
          Issue № {issue.id}
        </div>
        <h1 className="display-xxl" style={{ margin: 0, maxWidth: "14ch" }}>
          {issue.title.split(" ").slice(0, -1).join(" ")} <span className="fraun-itl">{issue.title.split(" ").pop()}</span>.
        </h1>
        <p className="fraun body-l" style={{ color: "var(--ink-soft)", marginTop: 26, maxWidth: "56ch" }}>
          {issue.summary}
        </p>
      </section>

      {/* Scope stats strip */}
      <section className="container" style={{ padding: "20px 32px 24px" }}>
        <div className="stack-mobile" style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 36,
          borderTop: "1px solid var(--ink)",
          borderBottom: "1px solid var(--ink)",
          padding: "24px 0",
        }}>
          <IssueStat label="Fragrances fully modeled" big={issue.scope.fragrancesFullyModeled} meta="ledger · invariant · history" />
          <IssueStat label="Retailers tracked"        big={issue.scope.retailersTracked}       meta="5 tiers · trust scored" />
          <IssueStat label="Refusals in force"         big={issue.scope.refusalsInForce}        meta="signed + dated" />
          <IssueStat label="Breaches on record"        big={issue.scope.breachesOnRecord}       meta="logged within 72h" />
        </div>
      </section>

      {/* Contents */}
      <section className="container" style={{ padding: "48px 32px 24px" }}>
        <div className="kicker" style={{ marginBottom: 20 }}>Contents of this issue</div>
        <ol style={{ listStyle: "none", padding: 0, margin: 0, borderTop: "1px solid var(--ink)" }}>
          {issue.contents.map((c, i) => (
            <li key={c.href}>
              <a href={c.href} style={{
                display: "grid",
                gridTemplateColumns: "60px 110px 1fr 16px",
                gap: 20,
                padding: "16px 0",
                borderBottom: "1px solid var(--rule)",
                alignItems: "baseline",
                textDecoration: "none",
                color: "inherit",
              }}>
                <span className="mono body-xs" style={{ color: "var(--ink-mute)" }}>{String(i + 1).padStart(2, "0")}</span>
                <span className="mono body-xs" style={{ color: "var(--ink-mute)", letterSpacing: "0.08em", textTransform: "uppercase" }}>{c.kind}</span>
                <span className="fraun" style={{ fontSize: 20, letterSpacing: "-0.01em" }}>{c.label}</span>
                <span className="mono body-xs" style={{ color: "var(--ink-mute)" }}>→</span>
              </a>
            </li>
          ))}
        </ol>
      </section>

      {/* Citation block — the academic / journalist move */}
      <section className="container" style={{ padding: "24px 32px 48px" }}>
        <div style={{ border: "1px solid var(--ink)", padding: "24px 28px", background: "var(--paper)" }}>
          <div className="kicker" style={{ marginBottom: 12 }}>How to cite this issue</div>
          <pre className="mono" style={{
            margin: 0,
            fontSize: 13,
            lineHeight: 1.7,
            letterSpacing: 0,
            whiteSpace: "pre-wrap",
            wordBreak: "break-word",
            color: "var(--ink)",
            background: "transparent",
            overflow: "auto",
          }}>
{citation}
          </pre>
          <div className="mono body-xs" style={{ color: "var(--ink-mute)", marginTop: 14, letterSpacing: "0.04em" }}>
            Also downloadable as a signed editorial bulletin — use Ctrl+P to print.
          </div>
        </div>
      </section>

      <hr className="hairline-k" />

      {/* Sign-off */}
      <section className="container" style={{ padding: "48px 32px 56px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "start" }}>
          <div>
            <div className="kicker" style={{ marginBottom: 12 }}>Published</div>
            <div className="fraun" style={{ fontSize: 24, lineHeight: 1.4 }}>
              {issue.city} · {issue.date}
            </div>
            <div className="mono body-s" style={{ color: "var(--ink-mute)", marginTop: 10 }}>
              {issue.editor}
            </div>
          </div>
          <div style={{ display: "flex", justifyContent: "flex-end", gap: 16, alignItems: "baseline", flexWrap: "wrap" }}>
            <a href="#/issue" className="shop-btn shop-btn--ghost">Archive index</a>
            <a href={issue.contents[0].href} className="shop-btn">{issue.exemplar.brand} · {issue.exemplar.name}</a>
          </div>
        </div>
      </section>
    </main>
  );
}

function IssueStat({ label, big, meta }) {
  return (
    <div>
      <div className="kicker" style={{ marginBottom: 8 }}>{label}</div>
      <div className="fraun" style={{ fontSize: 52, letterSpacing: "-0.025em", lineHeight: 1 }}>{big}</div>
      <div className="mono body-xs" style={{ color: "var(--ink-mute)", marginTop: 8 }}>{meta}</div>
    </div>
  );
}

function NoRecordIssue({ id }) {
  return (
    <main>
      <section className="container" style={{ paddingTop: 20, paddingBottom: 0 }}>
        <div className="mono body-xs" style={{ color: "var(--ink-mute)", letterSpacing: "0.04em" }}>
          <a href="#/" style={{ color: "var(--ink-mute)", borderBottom: "1px solid var(--rule)" }}>FindMyFrag</a>
          <span style={{ margin: "0 10px", color: "var(--ink-faint)" }}>/</span>
          <a href="#/issue" style={{ color: "var(--ink-mute)", borderBottom: "1px solid var(--rule)" }}>Archive</a>
          <span style={{ margin: "0 10px", color: "var(--ink-faint)" }}>/</span>
          <span style={{ color: "var(--ink)" }}>no issue {id}</span>
        </div>
      </section>
      <hr className="hairline-k" />
      <section className="container" style={{ padding: "96px 32px" }}>
        <div className="kicker" style={{ marginBottom: 22 }}>404 · no issue on record</div>
        <h1 className="display-xxl" style={{ margin: 0, maxWidth: "14ch" }}>
          No <span className="fraun-itl">issue</span> {id}.
        </h1>
        <p className="fraun body-l" style={{ color: "var(--ink-soft)", margin: "24px 0 0", maxWidth: "50ch" }}>
          The archive has no issue numbered {id}. Future issues will be listed at <a href="#/issue" style={{ color: "var(--ink)", textDecoration: "underline", textUnderlineOffset: 4 }}>/issue</a> when they publish.
        </p>
        <div style={{ marginTop: 32 }}>
          <a href="#/issue" className="shop-btn" style={{ marginRight: 12 }}>Archive index</a>
          <a href="#/" className="shop-btn shop-btn--ghost">Home</a>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { IssueIndex, Issue });