/* Evidence pack detail (S9) + Source detail (S7) */

const EvidencePackDetail = ({ packId, onBack, pushToast }) => {
  const pack = SCENARIO.evidencePacks.find((p) => p.id === packId) || SCENARIO.evidencePacks[0];
  const [showShare, setShowShare] = React.useState(false);
  const [shareStage, setShareStage] = React.useState("form");
  const [shareExpiry, setShareExpiry] = React.useState("14");
  const [shareEmail, setShareEmail] = React.useState("r.chen@hipaa-audit-partners.com");

  const verdictMix = [
    { kind: "verified", pct: 92.3, n: 7612 },
    { kind: "partial", pct: 4.7, n: 387 },
    { kind: "unverif", pct: 1.6, n: 136 },
    { kind: "contra", pct: 1.4, n: 112 },
  ];
  const colMap = { verified: "#2f6e47", partial: "#9a6418", unverif: "#71717a", contra: "#9b2c2c" };

  return (
    <>
      <div className="tr-header">
        <div className="tr-header__crumb">
          <button className="btn btn--ghost btn--sm" onClick={onBack} style={{ padding: "0 4px", height: 22, letterSpacing: 0, textTransform: "none", fontFamily: "var(--font-sans)" }}>
            {window.Icon.arrowLeft({ size: 12 })} Evidence packs
          </button>
          <span style={{ color: "var(--ink-4)" }}>/</span>
          <span className="mono">{pack.id}</span>
        </div>
        <div className="tr-header__title">
          <h1>{pack.name}</h1>
          <div className="tr-header__verdict-col">
            <Badge tone="sealed" size="lg" icon={window.Icon.lock({ size: 12 })}>Sealed</Badge>
          </div>
        </div>
        <div className="tr-header__meta">
          <div><span className="col-label">Range</span><span className="col-value">{pack.range}, 2026</span></div>
          <div><span className="col-label">Calls included</span><span className="col-value mono tabular">{pack.calls.toLocaleString()}</span></div>
          <div><span className="col-label">Generated</span><span className="col-value">{pack.generated}</span></div>
          <div><span className="col-label">Generated by</span><span className="col-value">{SCENARIO.tenant.user.name}</span></div>
          <div className="col-actions">
            <Button variant="secondary" size="sm" icon={window.Icon.share({ size: 12 })} onClick={() => { setShareStage("form"); setShowShare(true); }}>Share with auditor</Button>
          </div>
        </div>
      </div>

      {/* Verdict summary — large editorial moment */}
      <div className="card card--padded" style={{ marginBottom: "var(--space-5)" }}>
        <div style={{ display: "flex", alignItems: "flex-end", gap: "var(--space-4)", marginBottom: "var(--space-4)" }}>
          <div>
            <div className="text-xs muted fw-600" style={{ letterSpacing: "0.08em", textTransform: "uppercase", fontFamily: "var(--font-mono)" }}>Verdict summary</div>
            <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 32, letterSpacing: "-0.02em", color: "var(--ink-1)", marginTop: 4 }}>
              92.3% verified across 8,247 calls.
            </div>
          </div>
        </div>
        <div className="verdict-bar">
          {verdictMix.map((v) => (
            <div key={v.kind} className="verdict-bar__seg" style={{ flex: v.pct, background: colMap[v.kind] }}
              title={`${VERDICT[v.kind === "contra" ? "contradicted" : v.kind].label} · ${v.n.toLocaleString()}`} />
          ))}
        </div>
        <div className="verdict-mix">
          {verdictMix.map((v) => (
            <div key={v.kind} className="verdict-mix__row">
              <Verdict kind={v.kind} />
              <span className="mono tabular fw-600" style={{ color: "var(--ink-1)" }}>{v.pct}%</span>
              <span className="mono tabular muted text-xs">{v.n.toLocaleString()} calls</span>
            </div>
          ))}
        </div>
      </div>

      {/* Two-col: Seal + Downloads */}
      <div className="ep-grid">
        <div className="evidence-seal" style={{ margin: 0 }}>
          <div className="evidence-seal__layout">
            <div className="evidence-seal__mark">
              <PackSealMark size={104} />
            </div>
            <div className="evidence-seal__content">
              <div className="evidence-seal__head-row">
                <span className="evidence-seal__title">Pack signature</span>
                <span className="evidence-seal__head-meta">Ed25519 · daily bulletin</span>
              </div>
              <div className="evidence-seal__rows">
                <div className="evidence-row">
                  <span className="evidence-row__label">Pack hash</span>
                  <span className="evidence-row__value"><HashChip value="5e8f9c4d27f201e8b9c4d27f201" short="5e8f9c…b21a" /></span>
                </div>
                <div className="evidence-row">
                  <span className="evidence-row__label">Tenant root</span>
                  <span className="evidence-row__value"><HashChip value="af3c91" short="af3c…91" /></span>
                </div>
                <div className="evidence-row">
                  <span className="evidence-row__label">Daily bulletin</span>
                  <span className="evidence-row__value">
                    <Badge tone="verified" icon={window.Icon.checkSimple({ size: 11 })}>Verified 2026-10-24</Badge>
                  </span>
                </div>
                <div className="evidence-row">
                  <span className="evidence-row__label">Pages</span>
                  <span className="evidence-row__value">47 (auditor PDF)</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="card card--padded">
          <div className="text-xs muted fw-600" style={{ letterSpacing: "0.08em", textTransform: "uppercase", fontFamily: "var(--font-mono)", marginBottom: 4 }}>Downloads</div>
          <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 22, color: "var(--ink-1)", marginBottom: 16 }}>Three formats.</div>
          <div className="dl-list">
            <DLRow icon="pdf" title="Auditor PDF" sub="47 pages · plain-English summary + verdict tables" size="3.4 MB" pushToast={pushToast} />
            <DLRow icon="fileText" title="Signed JSON manifest" sub="Machine-readable · full chain · per-claim votes" size="892 KB" pushToast={pushToast} />
            <DLRow icon="download" title="replay-bundle.zip" sub="JSON + sources + offline-verify CLI" size="14.2 MB" recommended pushToast={pushToast} />
          </div>
          <div className="hr" />
          <div className="row gap-2">
            <span className="muted text-xs">Auditor doesn't have to log in:</span>
            <Button variant="link" size="sm" iconRight={window.Icon.external({ size: 11 })}>How offline verification works</Button>
          </div>
        </div>
      </div>

      {/* Claims drill-down */}
      <Card title="Claims drill-down" meta={`${pack.calls.toLocaleString()} calls · ${verdictMix.reduce((a, b) => a + b.n, 0).toLocaleString()} claims`}
        padded={false}
        action={<><Button variant="ghost" size="sm" icon={window.Icon.download({ size: 12 })}>Export CSV</Button></>}
      >
        <div className="toolbar" style={{ padding: "var(--space-3) var(--pad-card)", margin: 0, borderBottom: "1px solid var(--rule)" }}>
          <div className="search-input">
            {window.Icon.search({ size: 14 })}
            <input placeholder="Search claim text, trace ID, source…" />
          </div>
          <div className="segmented">
            <button className="active">All</button>
            <button>Verified</button>
            <button>Partial</button>
            <button>Unverifiable</button>
            <button>Contradicted</button>
          </div>
        </div>
        <table className="table">
          <thead>
            <tr>
              <th style={{ width: 100 }}>Trace</th>
              <th>Claim</th>
              <th>App</th>
              <th>Verdict</th>
              <th>Source</th>
              <th style={{ width: 50 }} />
            </tr>
          </thead>
          <tbody>
            {SCENARIO.recentTraces.slice(0, 8).map((t, i) => (
              <tr key={i} className="clickable">
                <td><HashChip value={t.id} short={t.id} /></td>
                <td className="truncate" style={{ maxWidth: 380 }}>
                  {["Metformin contraindicated below eGFR 30…", "Initiate GDMT with ACEi or ARNI…", "Schedule 7-day post-discharge follow-up…", "Beta-blockers at max dose immediately…", "ICD-10 J45.40 covers severe persistent…", "Statin therapy for ASCVD 10-year ≥7.5%…", "Routine post-discharge in 14 days…", "Pneumococcal vaccine recommended at 65+"][i]}
                </td>
                <td className="text-sm">{t.app}</td>
                <td><Verdict kind={t.verdict === "contradicted" ? "contra" : t.verdict} /></td>
                <td className="mono text-xs muted">{["FDA Metformin §5.1", "AHA/ACC HF §7.3.1", "Meridian Protocols §3.4", "AHA/ACC HF §7.3.3", "ICD-10-CM J45", "AHA/ACC ASCVD", "Meridian Protocols", "CDC Immunization 2025"][i]}</td>
                <td style={{ color: "var(--ink-4)" }}>{window.Icon.chevronRight({ size: 13 })}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="row" style={{ padding: 14, borderTop: "1px solid var(--rule)", justifyContent: "space-between" }}>
          <span className="muted text-sm mono">Showing 8 of {pack.calls.toLocaleString()} traces</span>
          <Button variant="link" size="sm" iconRight={window.Icon.arrowRight({ size: 12 })}>View all in Traces</Button>
        </div>
      </Card>

      {/* Share modal — abbreviated, reuses same stages */}
      <Modal
        open={showShare}
        onClose={() => { setShowShare(false); setShareStage("form"); }}
        title={shareStage === "form" ? "Share evidence pack" : shareStage === "sent" ? "Pack delivered" : "Signed link generated"}
        sub={shareStage === "form" ? "The auditor gets a signed link to this entire pack — verifiable offline with the CLI." : ""}
        wide
        footer={shareStage === "form" ? (
          <><Button variant="ghost" onClick={() => setShowShare(false)}>Cancel</Button>
          <Button variant="primary" icon={window.Icon.share({ size: 14 })} onClick={() => setShareStage("sent")}>Send to auditor</Button></>
        ) : (
          <><Button variant="ghost" onClick={() => { setShowShare(false); setShareStage("form"); }}>Done</Button>
          <Button variant="primary" icon={window.Icon.copy({ size: 14 })} onClick={() => { pushToast({ kind: "success", title: "Link copied" }); setShowShare(false); setShareStage("form"); }}>Copy link</Button></>
        )}
      >
        {shareStage === "form" && (
          <div className="col gap-4">
            <Field label="Expires in">
              <div className="radio-row">
                {["7", "14", "30"].map((v) => (
                  <RadioCard key={v} selected={shareExpiry === v} title={`${v} days`} sub={v === "14" ? "Standard audit window" : ""} onClick={() => setShareExpiry(v)} />
                ))}
              </div>
            </Field>
            <Field label="Auditor email" hint="They get instructions + the offline CLI link.">
              <input className="input" value={shareEmail} onChange={(e) => setShareEmail(e.target.value)} />
            </Field>
          </div>
        )}
        {shareStage === "sent" && (
          <div className="col gap-4">
            <div className="share-success">
              <div className="share-success__icon">{window.Icon.checkSimple({ size: 22 })}</div>
              <div>
                <div className="share-success__title"><em style={{ fontStyle: "italic", fontFamily: "var(--font-display)", fontSize: 22 }}>Pack delivered.</em></div>
                <div className="share-success__sub">Auditor at <strong>{shareEmail}</strong> has <strong>{shareExpiry} days</strong> to verify.</div>
              </div>
            </div>
            <div className="share-link">
              <div className="share-link__row">
                <span style={{ color: "#a1a1aa" }}>{window.Icon.link({ size: 13 })}</span>
                <span className="mono text-sm truncate" style={{ flex: 1 }}>audit.attestia.ai/share/pack/eyJ0eXAi…aZ4r</span>
                <Button variant="ghost" size="sm" onClick={() => pushToast({ kind: "success", title: "Copied" })}>Copy</Button>
              </div>
            </div>
          </div>
        )}
      </Modal>
    </>
  );
};

const DLRow = ({ icon, title, sub, size, recommended, pushToast }) => (
  <div className="dl-row">
    <div className="dl-row__icon">{window.Icon[icon === "pdf" ? "fileText" : icon]({ size: 16 })}</div>
    <div className="dl-row__body">
      <div className="row gap-2">
        <span className="fw-600 text-md">{title}</span>
        {recommended && <Badge tone="info" style={{ fontSize: 10 }}>Recommended</Badge>}
      </div>
      <div className="text-xs muted" style={{ marginTop: 2 }}>{sub} · {size}</div>
    </div>
    <Button variant="secondary" size="sm" icon={window.Icon.download({ size: 12 })}
      onClick={() => pushToast({ kind: "success", title: `${title} downloaded` })}>
      Download
    </Button>
  </div>
);

const PackSealMark = ({ size = 88 }) => (
  <svg width={size} height={size} viewBox="0 0 88 88">
    <defs>
      <path id="pack-top" d="M 8 44 A 36 36 0 0 1 80 44" />
      <path id="pack-bot" d="M 8 44 A 36 36 0 0 0 80 44" />
    </defs>
    <circle cx="44" cy="44" r="42" fill="none" stroke="#2f6e47" strokeWidth="1" opacity="0.5" />
    <circle cx="44" cy="44" r="36" fill="none" stroke="#2f6e47" strokeWidth="1.5" />
    <circle cx="44" cy="44" r="34" fill="none" stroke="#2f6e47" strokeWidth="0.5" strokeDasharray="1 2" opacity="0.6" />
    <text fontFamily="Geist Mono, monospace" fontSize="6.5" fill="#2f6e47" letterSpacing="2">
      <textPath href="#pack-top" startOffset="50%" textAnchor="middle">ATTESTIA · EVIDENCE PACK</textPath>
    </text>
    <text fontFamily="Geist Mono, monospace" fontSize="6.5" fill="#2f6e47" letterSpacing="2">
      <textPath href="#pack-bot" startOffset="50%" textAnchor="middle">· Q3 2026 · 8247 CALLS ·</textPath>
    </text>
    <text x="44" y="42" textAnchor="middle" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="22" fill="#2f6e47">A</text>
    <line x1="32" y1="50" x2="56" y2="50" stroke="#2f6e47" strokeWidth="0.5" />
    <text x="44" y="60" textAnchor="middle" fontFamily="Geist Mono, monospace" fontSize="4.5" fill="#2f6e47" letterSpacing="0.5">SEALED</text>
  </svg>
);

window.EvidencePackDetail = EvidencePackDetail;

/* ============================================================
   Source detail (S7) — with verification playground
   ============================================================ */

const SourceDetail = ({ sourceId, onBack, pushToast }) => {
  const source = SCENARIO.sources.find((s) => s.id === sourceId) || SCENARIO.sources[0];
  const [tab, setTab] = React.useState("preview");
  const [testQuery, setTestQuery] = React.useState("");
  const [testRunning, setTestRunning] = React.useState(false);
  const [testResults, setTestResults] = React.useState(null);

  const runTest = () => {
    if (!testQuery.trim()) return;
    setTestRunning(true);
    setTestResults(null);
    setTimeout(() => {
      setTestRunning(false);
      // Mocked results
      setTestResults([
        { score: 94.6, span: "§5.1 Lactic Acidosis, p. 9", quote: "Metformin is contraindicated in patients with eGFR below 30 mL/min/1.73m². Initiation of metformin in patients with eGFR between 30 and 45 mL/min/1.73m² is not recommended." },
        { score: 81.2, span: "§5.1 Lactic Acidosis, p. 10", quote: "Renal function should be assessed before initiating metformin and at least annually thereafter; more frequently in patients at increased risk." },
        { score: 68.4, span: "§6.4 Drug Interactions, p. 14", quote: "Concomitant use with carbonic anhydrase inhibitors may increase the risk of lactic acidosis. Consider more frequent monitoring." },
      ]);
    }, 1100);
  };

  return (
    <>
      <div className="tr-header">
        <div className="tr-header__crumb">
          <button className="btn btn--ghost btn--sm" onClick={onBack} style={{ padding: "0 4px", height: 22, letterSpacing: 0, textTransform: "none", fontFamily: "var(--font-sans)" }}>
            {window.Icon.arrowLeft({ size: 12 })} Sources
          </button>
          <span style={{ color: "var(--ink-4)" }}>/</span>
          <span className="mono">{source.id}</span>
        </div>
        <div className="tr-header__title">
          <h1>{source.name}</h1>
          <div className="tr-header__verdict-col">
            <Badge tone="sealed" size="lg" icon={window.Icon.checkSimple({ size: 12 })}>Active · Indexed</Badge>
          </div>
        </div>
        <div className="tr-header__meta">
          <div><span className="col-label">Format</span><span className="col-value">{source.kind}{source.pages ? ` · ${source.pages} pages` : ""}</span></div>
          <div><span className="col-label">Size</span><span className="col-value">{source.size}</span></div>
          <div><span className="col-label">Indexed</span><span className="col-value">{source.indexed}</span></div>
          <div><span className="col-label">Citations</span><span className="col-value mono tabular">{source.citations.toLocaleString()}</span></div>
          <div className="col-actions">
            <Button variant="ghost" size="sm" icon={window.Icon.more({ size: 14 })} />
          </div>
        </div>
      </div>

      <Tabs items={[
        { value: "preview", label: "Preview" },
        { value: "playground", label: "Test verification" },
        { value: "citations", label: `Citations · ${source.citations.toLocaleString()}` },
        { value: "activity", label: "Activity" },
        { value: "settings", label: "Settings" },
      ]} value={tab} onChange={setTab} />

      {tab === "preview" && (
        <div className="card card--padded">
          <div className="row gap-2" style={{ marginBottom: 12 }}>
            <Badge tone="info">{source.tags[0]}</Badge>
            {source.tags.slice(1).map((t) => <Badge key={t} tone="neutral">{t}</Badge>)}
            <div className="spacer" />
            <span className="mono text-xs muted">Hash {source.hash}</span>
          </div>
          <div className="preview-frame">
            <div className="preview-page">
              <div className="preview-page__head">
                <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 18 }}>§5.1 Lactic Acidosis</div>
                <div className="muted text-xs">Page 9 of {source.pages || "—"}</div>
              </div>
              <div className="preview-page__body">
                <p>
                  Lactic acidosis is a serious metabolic complication that can occur due to metformin accumulation
                  during treatment. Reported cases have occurred primarily in patients with significant renal insufficiency.
                </p>
                <p>
                  <mark>Metformin is contraindicated in patients with eGFR below 30 mL/min/1.73m².</mark>
                  Initiation of metformin in patients with eGFR between 30 and 45 mL/min/1.73m² is not recommended.
                  In patients taking metformin whose eGFR later falls below 45 mL/min/1.73m², assess the benefit and risk of continuing therapy.
                </p>
                <p>
                  Renal function should be assessed before initiating metformin and at least annually thereafter.
                  In patients at increased risk for renal impairment (e.g., the elderly), renal function should be
                  assessed more frequently.
                </p>
              </div>
            </div>
            <div className="preview-toolbar">
              <Button variant="ghost" size="sm" icon={window.Icon.arrowLeft({ size: 12 })}>Prev</Button>
              <span className="mono text-sm muted">Page 9 · 178</span>
              <Button variant="ghost" size="sm" iconRight={window.Icon.arrowRight({ size: 12 })}>Next</Button>
              <div className="spacer" />
              <Button variant="ghost" size="sm" icon={window.Icon.search({ size: 12 })}>Find</Button>
              <Button variant="ghost" size="sm" icon={window.Icon.download({ size: 12 })}>Download original</Button>
            </div>
          </div>
        </div>
      )}

      {tab === "playground" && (
        <div className="col gap-4">
          <div className="card card--padded">
            <div className="text-xs muted fw-600" style={{ letterSpacing: "0.08em", textTransform: "uppercase", fontFamily: "var(--font-mono)" }}>Test verification</div>
            <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 26, marginTop: 4, marginBottom: 6, color: "var(--ink-1)" }}>
              Paste a claim. See what verifies against this source.
            </div>
            <div className="text-sm muted" style={{ marginBottom: 16 }}>
              The same retrieval + scoring runs against your live claims — this just lets you preview what the multi-judge consensus will see.
            </div>
            <textarea className="textarea" rows="3"
              placeholder="e.g. Metformin is contraindicated in patients with an eGFR below 30 mL/min/1.73m²."
              value={testQuery}
              onChange={(e) => setTestQuery(e.target.value)} />
            <div className="row gap-2" style={{ marginTop: 12 }}>
              <Button variant="primary" size="sm" disabled={!testQuery.trim() || testRunning} onClick={runTest}
                icon={testRunning ? null : window.Icon.zap({ size: 12 })}>
                {testRunning ? "Running…" : "Run test"}
              </Button>
              <Button variant="ghost" size="sm" onClick={() => { setTestQuery("Metformin is contraindicated in patients with an eGFR below 30 mL/min/1.73m²."); }}>
                Use example
              </Button>
              <span className="spacer" />
              <span className="text-xs muted">Top 3 matches · cosine similarity</span>
            </div>
          </div>

          {testRunning && (
            <div className="card card--padded" style={{ textAlign: "center", padding: 32 }}>
              <div className="spinner-lg" />
              <div className="text-sm muted" style={{ marginTop: 12 }}>Retrieving · embedding · scoring…</div>
            </div>
          )}

          {testResults && (
            <div className="card" style={{ overflow: "hidden" }}>
              <div className="card__header">
                <h3>Top matches</h3>
                <span className="meta">3 spans found · best match {testResults[0].score}%</span>
              </div>
              <div style={{ padding: "var(--space-3) var(--pad-card) var(--space-4)" }}>
                {testResults.map((r, i) => (
                  <div key={i} className="match-row">
                    <div className="match-row__head">
                      <span className="mono text-xs" style={{ color: "var(--ink-1)", fontWeight: 600 }}>#{i + 1}</span>
                      <span className="text-xs muted">{r.span}</span>
                      <div className="spacer" />
                      <div className="row gap-2">
                        <div className="score-bar" style={{ width: 160, maxWidth: 160 }}>
                          <div className="score-bar__fill" style={{ width: `${r.score}%`, background: i === 0 ? "var(--verified)" : "var(--ink-3)" }} />
                        </div>
                        <span className="mono fw-600 tabular" style={{ width: 48, textAlign: "right" }}>{r.score}%</span>
                      </div>
                    </div>
                    <div className="match-row__quote">"{r.quote}"</div>
                  </div>
                ))}
                <div className="onb-note" style={{ marginTop: 16 }}>
                  <span>{window.Icon.shield({ size: 14 })}</span>
                  <div className="text-sm">
                    <strong>Verdict prediction:</strong> Verified — top match exceeds the 90% threshold and 3-judge consensus would likely return κ ≥ 0.85.
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      )}

      {tab === "citations" && (
        <Card title="Recent citations" meta={`${source.citations.toLocaleString()} total · 8 most recent`} padded={false}>
          <table className="table">
            <thead><tr><th style={{ width: 80 }}>Time</th><th>Claim</th><th>App</th><th>Verdict</th><th>Match</th></tr></thead>
            <tbody>
              {SCENARIO.recentTraces.slice(0, 6).map((t, i) => (
                <tr key={i} className="clickable">
                  <td className="mono text-xs muted">{t.time}</td>
                  <td className="truncate" style={{ maxWidth: 380 }}>
                    {["Metformin is contraindicated below eGFR 30", "Initiate GDMT with ACEi or ARNI for HFrEF", "Schedule 7-day follow-up post-discharge", "Beta-blockers at max dose immediately", "Statin therapy for elevated ASCVD risk", "Pneumococcal vaccine at age 65+"][i]}
                  </td>
                  <td className="text-sm">{t.app}</td>
                  <td><Verdict kind={t.verdict === "contradicted" ? "contra" : t.verdict} /></td>
                  <td className="mono tabular">{[96, 91, 98, 87, 89, 94][i]}%</td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
      )}

      {tab === "activity" && (
        <Card title="Source activity" padded={false}>
          <div className="activity-list">
            <ActivityRow icon="checkSimple" title="Indexed and signed" time={source.indexed} sub={`${source.pages || "—"} pages · ~${Math.round((source.pages || 100) * 4)} chunks · root added to bulletin`} />
            <ActivityRow icon="upload" title="Uploaded" time={source.indexed} sub={`by ${SCENARIO.tenant.user.name} · ${source.size}`} />
            <ActivityRow icon="key" title="Source hash signed" time={source.indexed} sub={`${source.hash} · Ed25519`} />
          </div>
        </Card>
      )}

      {tab === "settings" && (
        <div className="card card--padded">
          <div className="col gap-4">
            <Field label="Display name"><input className="input" defaultValue={source.name} /></Field>
            <Field label="Tags"><div className="row gap-2 mono text-sm">{source.tags.join(" · ")}</div></Field>
            <Field label="Status"><Badge tone="sealed" icon={window.Icon.checkSimple({ size: 11 })}>Active</Badge></Field>
            <div className="hr" />
            <div>
              <div className="fw-600 text-md" style={{ marginBottom: 4 }}>Danger zone</div>
              <div className="text-sm muted" style={{ marginBottom: 12 }}>Deprecating a source stops new verifications. Existing evidence chains remain valid — old verdicts are immutable.</div>
              <div className="row gap-2">
                <Button variant="secondary" size="sm">Deprecate source</Button>
                <Button variant="destructive" size="sm">Delete source</Button>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

const ActivityRow = ({ icon, title, time, sub }) => (
  <div className="activity">
    <div className="activity__icon" style={{ color: "var(--ink-2)" }}>{window.Icon[icon]({ size: 13 })}</div>
    <div className="activity__body">
      <div className="activity__title">{title}</div>
      <div className="activity__time">{sub} · {time}</div>
    </div>
  </div>
);

window.SourceDetail = SourceDetail;