// ═══════════════════════════════════════════════════════════════════
// ARTIFACT REGISTRY — uploaded source artifacts, per project.
// Inputs to Workflow · 01 Parse & Comprehend. Every KB fact cites
// exactly one artifact registered here.
// ═══════════════════════════════════════════════════════════════════
(function () {
  const I = window.INTEL;

  const AR_STATUS = {
    parsed:  { tone: "ok",      label: "parsed" },
    parsing: { tone: "accent",  label: "parsing" },
    queued:  { tone: "neutral", label: "queued" },
    failed:  { tone: "err",     label: "failed" },
  };

  const arMono = (s, extra) => <span style={{ fontFamily: "var(--mono)", fontSize: "8.5px", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--ink-4)", ...extra }}>{s}</span>;

  function Stat({ label, value, sub }) {
    return (
      <div style={{ border: "1px solid var(--rule-hard)", borderRadius: "var(--r-3)", background: "var(--bg)", padding: "13px 15px" }}>
        {arMono(label, { display: "block", marginBottom: 6 })}
        <div style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: "26px", lineHeight: 1, color: "var(--ink)" }}>{value}</div>
        {sub ? <div style={{ marginTop: 5, fontSize: "var(--fs-xs)", color: "var(--ink-3)" }}>{sub}</div> : null}
      </div>
    );
  }

  function ArtifactRegistry({ proj, tenant, go }) {
    const rows = I.artifactsFor(proj);
    const parsed = rows.filter((r) => r.status === "parsed").length;
    const dp = rows.reduce((a, r) => a + (r.dp || 0), 0);
    const pending = rows.length - parsed;

    return (
      <div>
        <window.PageHead eyebrow={tenant.name + " · " + proj.name} title="Artifact Registry"
          sub="Every source artifact uploaded into this project — the raw material the pipeline parses. Facts in the Knowledge Base cite these artifacts by ID; nothing enters the report without one."
          right={<button onClick={() => alert("Upload mock — wire to intake API")} style={{ border: "1px solid var(--accent-bd)", background: "var(--accent-bg)", color: "var(--accent-lo)", borderRadius: "var(--r-2)", padding: "8px 14px", cursor: "pointer", fontFamily: "var(--mono)", fontSize: "9.5px", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", whiteSpace: "nowrap" }}>+ Upload artifacts</button>}>
        </window.PageHead>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14, marginBottom: 18 }}>
          <Stat label="artifacts" value={rows.length} sub="registered in this project"></Stat>
          <Stat label="parsed" value={parsed + " / " + rows.length} sub="structured & indexed"></Stat>
          <Stat label="datapoints cited" value={dp} sub="KB facts citing an artifact"></Stat>
          <Stat label="awaiting parse" value={pending} sub={pending ? "feeds the next run" : "registry fully parsed"}></Stat>
        </div>

        <window.SectionHead sub="one row per artifact · upload & parse timestamp · parse status · how many knowledge-base facts cite it">Registered Artifacts</window.SectionHead>
        <div style={{ border: "1px solid var(--rule-hard)", borderRadius: "var(--r-3)", overflow: "hidden" }}>
          <div style={{ display: "grid", gridTemplateColumns: "80px 1.4fr 64px 1.05fr 104px 84px 78px", gap: 1, background: "var(--rule)" }}>
            {["ID", "Artifact", "Kind", "File / origin", "Ingested", "Status", "Datapoints"].map((h) => (
              <div key={h} style={{ background: "var(--bg-2)", padding: "8px 12px" }}><window.MonoLabel>{h}</window.MonoLabel></div>
            ))}
            {rows.map((r) => {
              const st = AR_STATUS[r.status] || AR_STATUS.queued;
              const web = /capture|web|public/i.test(r.file || "") || r.kind === "html";
              return (
                <React.Fragment key={r.id}>
                  <div style={{ background: "var(--bg)", padding: "9px 12px", fontFamily: "var(--mono)", fontSize: "10px", color: "var(--ink-3)" }}>{r.id}</div>
                  <div style={{ background: "var(--bg)", padding: "9px 12px", fontSize: "var(--fs-sm)", fontWeight: 500, color: "var(--ink)", lineHeight: 1.4 }}>{r.name}</div>
                  <div style={{ background: "var(--bg)", padding: "9px 12px" }}><window.Pill tone={r.kind === "platform" ? "accent" : "neutral"}>{r.kind}</window.Pill></div>
                  <div style={{ background: "var(--bg)", padding: "9px 12px", fontFamily: "var(--mono)", fontSize: "10px", color: "var(--ink-4)", lineHeight: 1.5, wordBreak: "break-all" }}>{r.file}</div>
                  <div style={{ background: "var(--bg)", padding: "9px 12px", fontFamily: "var(--mono)", fontSize: "9px", color: "var(--ink-3)", lineHeight: 1.5 }}>
                    {r.uploaded && <span style={{ display: "block" }} title="uploaded to the project"><span style={{ color: "var(--ink-4)" }}>↑ </span>{r.uploaded}</span>}
                    {r.parsed && <span style={{ display: "block", color: "var(--ink-2)" }} title={web ? "retrieved & searched" : "parsed & extracted"}><span style={{ color: "var(--ink-4)" }}>{web ? "⧉ " : "▤ "}</span>{r.parsed}</span>}
                    {!r.uploaded && !r.parsed && <span style={{ color: "var(--ink-4)" }}>—</span>}
                  </div>
                  <div style={{ background: "var(--bg)", padding: "9px 12px" }}><window.Pill tone={st.tone}>{st.label}</window.Pill></div>
                  <div style={{ background: "var(--bg)", padding: "9px 12px", fontFamily: "var(--mono)", fontSize: "11px", fontWeight: 600, color: r.dp ? "var(--ink)" : "var(--ink-4)" }}>{r.dp || "—"}</div>
                </React.Fragment>
              );
            })}
          </div>
        </div>

        <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 14, flexWrap: "wrap" }}>
          <p style={{ margin: 0, fontFamily: "var(--mono)", fontSize: "9px", letterSpacing: "0.06em", color: "var(--ink-4)", lineHeight: 1.7, flex: 1, minWidth: 280 }}>
            Parsing structures each artifact into the Knowledge Base. Ingested shows ↑ upload / ▤ parse for documents and ⧉ retrieval for web sources. Datapoint counts come from the Knowledge Base — every fact cites exactly one artifact.
          </p>
          <button onClick={() => go("workflow")} style={{ border: "1px solid var(--rule-hard)", background: "var(--bg)", borderRadius: "var(--r-1)", padding: "5px 10px", cursor: "pointer", fontFamily: "var(--mono)", fontSize: "8.5px", letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-3)" }}>open workflow ↗</button>
        </div>
      </div>
    );
  }

  window.ArtifactRegistry = ArtifactRegistry;
})();