/* Dashboard — post-onboarding home */

const verdictColors = {
  verified: "#2f6e47",
  partial: "#9a6418",
  unverif: "#71717a",
  contradicted: "#9b2c2c",
};

/* ============================================================
   Fresh-onboarded variant
   Used when the tenant has just sealed its first trace.
   Empty/sparse data, prominent "add a source" CTA.
   ============================================================ */
const FreshDashboard = ({ onOpenTrace, onGoToSources }) => (
  <>
    <header className="page-header">
      <div className="page-header__inner">
        <div className="page-header__eyebrow">Welcome, {SCENARIO.tenant.user.name.split(" ")[0]}</div>
        <h1>Dashboard</h1>
        <p className="page-header__sub">
          {SCENARIO.tenant.name} · 1 app · 0 sources · evidence chain initialized 2 minutes ago
        </p>
      </div>
      <div className="page-actions">
        <Button variant="secondary" size="sm" iconRight={window.Icon.chevronDown({ size: 12 })}>Today</Button>
      </div>
    </header>

    {/* Sealed banner */}
    <div className="fresh-hero">
      <div className="fresh-hero__seal">
        {window.Icon.lock({ size: 18 })}
      </div>
      <div className="fresh-hero__body">
        <div className="fresh-hero__eyebrow">First trace sealed</div>
        <div className="fresh-hero__title">
          Your evidence chain is live.
        </div>
        <div className="fresh-hero__sub">
          One call wrapped · 3 claims extracted · 3/3 verified by judge consensus (κ 0.92). Root hash
          <span className="mono" style={{ marginLeft: 6 }}>af3c…91</span>, anchored to today's public bulletin at 00:00 UTC.
        </div>
      </div>
      <div className="fresh-hero__actions">
        <Button variant="primary" size="sm" onClick={() => onOpenTrace()} iconRight={window.Icon.arrowRight({ size: 12 })}>
          View first trace
        </Button>
      </div>
    </div>

    {/* Numbers — fresh sparse state */}
    <div className="metric-grid">
      <FreshMetric label="Calls today" value="1" />
      <FreshMetric label="Verified" value="100%" sub={<span className="muted">3/3 claims</span>} />
      <FreshMetric label="Contradicted" value="0" sub={<span className="muted">none yet</span>} />
      <FreshMetric label="Cost today" value="$0.012" sub={<span className="muted">free tier · 499 calls left</span>} />
    </div>

    {/* Next-step checklist */}
    <div className="setup">
      <div className="setup__head">
        <div>
          <div className="setup__eyebrow">Setup checklist</div>
          <h2 className="setup__title">A few more steps to reach audit-ready.</h2>
        </div>
        <span className="setup__count">1 of 4 complete</span>
      </div>
      <div className="setup__progress">
        <div className="setup__progress-bar" style={{ width: "25%" }} />
      </div>
      <div className="setup__list">
        <SetupStep
          done
          n={1}
          title="Wrap your first call"
          sub="SDK installed · first trace sealed 2 minutes ago"
        />
        <SetupStep
          active
          n={2}
          title="Add a source to verify against"
          sub="Without sources, every claim verdict is “unverifiable.” Upload one or more trusted documents — guidelines, drug labels, internal protocols."
          cta={<Button variant="primary" size="sm" icon={window.Icon.upload({ size: 13 })} onClick={onGoToSources}>Add source</Button>}
        />
        <SetupStep
          n={3}
          title="Invite a compliance teammate"
          sub="Compliance and Engineer roles are scoped. Auditors get read-only share links — no account needed."
          cta={<Button variant="secondary" size="sm">Invite</Button>}
        />
        <SetupStep
          n={4}
          title="Generate your first evidence pack"
          sub="Unlocks once you have 100+ verified calls. Currently 1 — keep wrapping."
          locked
        />
      </div>
    </div>

    <div className="dash-grid">
      <div className="card">
        <div className="card__header">
          <h3>Recent traces</h3>
          <span className="meta">1 trace</span>
          <div className="spacer" />
        </div>
        <table className="table">
          <thead>
            <tr>
              <th style={{ width: 80 }}>Time</th>
              <th>App</th>
              <th>Purpose</th>
              <th>Verdict</th>
              <th style={{ width: 90, textAlign: "right" }}>Tokens</th>
              <th style={{ width: 50 }} />
            </tr>
          </thead>
          <tbody>
            <tr className="clickable" onClick={() => onOpenTrace()}>
              <td className="mono text-sm muted">10:34</td>
              <td className="fw-500">{SCENARIO.apps[0].name}</td>
              <td><span className="tr-purpose">discharge_summary</span></td>
              <td><Verdict kind="verified" /></td>
              <td className="mono text-sm tabular" style={{ textAlign: "right" }}>1,234</td>
              <td style={{ color: "var(--ink-4)" }}>{window.Icon.chevronRight({ size: 14 })}</td>
            </tr>
          </tbody>
        </table>
        <div className="empty-row">
          <span className="muted text-sm">More traces will appear as your app receives traffic.</span>
        </div>
      </div>

      <div className="card card--padded fresh-aside">
        <div className="fresh-aside__eyebrow">Compliance posture</div>
        <h3 className="fresh-aside__title">Article 12 ready in one step.</h3>
        <p className="text-sm muted" style={{ margin: "8px 0 16px", lineHeight: 1.6 }}>
          HIPAA preset is active — every call is PHI-redacted, sealed Ed25519, and anchored to the public daily bulletin. Once you add a source, claim-level verification is on the record.
        </p>
        <div className="fresh-aside__list">
          <FreshAsideRow label="PHI redaction" value="18 identifiers · active" />
          <FreshAsideRow label="Retention" value="6 years · stubs un-purgeable" />
          <FreshAsideRow label="Daily bulletin" value="2026-10-24 · ready to anchor" />
          <FreshAsideRow label="Sandbox region" value="US-East · BAA in place" />
        </div>
      </div>
    </div>
  </>
);

const FreshMetric = ({ label, value, sub }) => (
  <div className="metric">
    <div className="metric__label">{label}</div>
    <div className="metric__value">{value}</div>
    <div className="metric__sub">{sub || <span className="muted">just sealed</span>}</div>
  </div>
);

const SetupStep = ({ n, title, sub, cta, done, active, locked }) => (
  <div className={`setup-step ${done ? "setup-step--done" : ""} ${active ? "setup-step--active" : ""} ${locked ? "setup-step--locked" : ""}`}>
    <div className="setup-step__indicator">
      {done ? window.Icon.checkSimple({ size: 12 }) : locked ? window.Icon.lock({ size: 11 }) : <span className="mono">{n}</span>}
    </div>
    <div className="setup-step__body">
      <div className="setup-step__title">{title}</div>
      {sub && <div className="setup-step__sub">{sub}</div>}
    </div>
    {cta && <div className="setup-step__cta">{cta}</div>}
  </div>
);

const FreshAsideRow = ({ label, value }) => (
  <div className="fresh-aside__row">
    <span className="muted">{label}</span>
    <span>{value}</span>
  </div>
);

// Pre-baked stacked-area data for last 30 days (verdict distribution)
// Each row: [verified, partial, unverif, contradicted] daily counts.
const STACKED_DATA = (() => {
  const days = 30;
  const arr = [];
  let v = 280, p = 18, u = 6, c = 5;
  for (let i = 0; i < days; i++) {
    // Gentle wobble; uptick in verified, downward in contradicted near end
    v += (Math.sin(i / 3) * 12) | 0;
    p += (Math.sin(i / 5) * 3) | 0;
    u += (Math.cos(i / 4) * 2) | 0;
    c += (Math.cos(i / 6) * 2) | 0;
    arr.push([Math.max(220, v), Math.max(8, p), Math.max(2, u), Math.max(0, c)]);
  }
  return arr;
})();

const StackedArea = ({ data, w = 720, h = 180 }) => {
  const totalDays = data.length;
  const innerW = w - 40;
  const innerH = h - 30;
  const dx = innerW / (totalDays - 1);
  const maxTotal = Math.max(...data.map((r) => r.reduce((a, b) => a + b, 0)));

  const seriesColors = [verdictColors.verified, verdictColors.partial, verdictColors.unverif, verdictColors.contradicted];
  const paths = [0, 1, 2, 3].map((sIdx) => {
    let path = "";
    // top edge: cumulative through sIdx
    data.forEach((row, i) => {
      const top = row.slice(0, sIdx + 1).reduce((a, b) => a + b, 0);
      const y = innerH - (top / maxTotal) * innerH;
      path += `${i === 0 ? "M" : "L"} ${20 + i * dx} ${15 + y} `;
    });
    // bottom edge: cumulative through sIdx-1 (reverse)
    for (let i = totalDays - 1; i >= 0; i--) {
      const bottom = sIdx === 0 ? 0 : data[i].slice(0, sIdx).reduce((a, b) => a + b, 0);
      const y = innerH - (bottom / maxTotal) * innerH;
      path += `L ${20 + i * dx} ${15 + y} `;
    }
    path += "Z";
    return <path key={sIdx} d={path} fill={seriesColors[sIdx]} fillOpacity={sIdx === 0 ? 0.18 : 0.55} stroke={seriesColors[sIdx]} strokeWidth={sIdx === 0 ? 1.5 : 0} />;
  });

  // X axis labels (week markers)
  const labels = [];
  for (let i = 0; i < totalDays; i += 7) {
    labels.push(
      <text key={i} x={20 + i * dx} y={h - 4} fontSize="10" fill="var(--ink-4)" textAnchor="middle">
        {`Day ${i + 1}`}
      </text>
    );
  }

  return (
    <svg viewBox={`0 0 ${w} ${h}`} className="stacked-area" width="100%" height={h}>
      {/* gridlines */}
      {[0.25, 0.5, 0.75, 1].map((t) => (
        <line key={t} x1="20" y1={15 + innerH * (1 - t)} x2={w - 20} y2={15 + innerH * (1 - t)} stroke="var(--rule)" strokeDasharray="3 3" />
      ))}
      {paths}
      {labels}
    </svg>
  );
};

const Dashboard = ({ onOpenTrace }) => {
  const verdictDistApp = SCENARIO.apps.map((a, i) => ({
    name: a.name,
    pct: [96, 87, 61][i],
    flag: [96, 87, 61][i] < 80,
  }));

  return (
    <>
      <header className="page-header">
        <div className="page-header__inner">
          <div className="page-header__eyebrow">Welcome back, {SCENARIO.tenant.user.name.split(" ")[0]}</div>
          <h1>Dashboard</h1>
          <p className="page-header__sub">
            {SCENARIO.tenant.name} · {SCENARIO.apps.length} apps · {SCENARIO.sources.length} sources · last 7 days
          </p>
        </div>
        <div className="page-actions">
          <Button variant="secondary" size="sm" iconRight={window.Icon.chevronDown({ size: 12 })}>Last 7 days</Button>
          <Button variant="primary" size="sm" icon={window.Icon.fileCheck({ size: 14 })}>Generate evidence pack</Button>
        </div>
      </header>

      <div className="dash-banner">
        <div className="dash-banner__icon">{window.Icon.checkSimple({ size: 14 })}</div>
        <div style={{ flex: 1 }}>
          <strong>First trace sealed.</strong> <span className="muted">Evidence chain initialized for <span className="mono">{SCENARIO.tenant.org}</span> · root hash <span className="mono">af3c…91</span>.</span>
        </div>
        <Button variant="ghost" size="sm" onClick={() => onOpenTrace()}>View first trace →</Button>
      </div>

      {/* Metric strip */}
      <div className="metric-grid">
        <MetricCard label="Calls" value="1,247" sparkline={[12, 18, 22, 19, 24, 30, 38, 42]} delta="+12% wk" deltaTone="up" />
        <MetricCard label="Verified" value="92.3%" subRow={
          <div className="metric__sub-row">
            <span className="text-xs muted tabular">1,151 calls</span>
            <span className="delta-up">+1.4 pp</span>
          </div>
        } />
        <MetricCard label="Contradicted" value="14" sub={<span className="delta-up">−6 wk-over-wk</span>} />
        <MetricCard label="Cost" value="$12.40" sparkline={[8, 10, 11, 9, 10, 12, 13, 12]} delta="+8%" deltaTone="up" />
      </div>

      {/* Attention banner */}
      <div className="attention">
        <div className="attention__icon">{window.Icon.alertTriangle({ size: 16 })}</div>
        <div style={{ flex: 1 }}>
          <div className="attention__title">3 traces need attention</div>
          <div className="attention__sub">2 contradicted · 1 sandbox-failed verification. All calls forwarded successfully — only verification is queued.</div>
        </div>
        <Button variant="secondary" size="sm" iconRight={window.Icon.arrowRight({ size: 12 })}>Review</Button>
      </div>

      <div className="dash-grid">
        {/* Verdict distribution chart */}
        <div className="card dash-chart-card">
          <div className="card__header">
            <h3>Verdict distribution</h3>
            <span className="meta">Last 30 days · {SCENARIO.verdictTotals.verified + SCENARIO.verdictTotals.partial + SCENARIO.verdictTotals.unverif + SCENARIO.verdictTotals.contradicted} verified calls</span>
            <div className="spacer" />
            <Button variant="link">View as table →</Button>
          </div>
          <div className="legend" style={{ paddingTop: 12 }}>
            <div className="legend__item"><span className="legend__swatch" style={{ background: verdictColors.verified }} /> Verified</div>
            <div className="legend__item"><span className="legend__swatch" style={{ background: verdictColors.partial }} /> Partial</div>
            <div className="legend__item"><span className="legend__swatch" style={{ background: verdictColors.unverif }} /> Unverifiable</div>
            <div className="legend__item"><span className="legend__swatch" style={{ background: verdictColors.contradicted }} /> Contradicted</div>
          </div>
          <div className="chart-area">
            <StackedArea data={STACKED_DATA} w={680} h={180} />
          </div>
          <div className="card__footer">
            <span className="text-xs muted">Anomaly: Encounter Summary contradiction rate rose Oct 14 → Oct 18.</span>
            <Button variant="link" size="sm">Investigate →</Button>
          </div>
        </div>

        {/* Compliance side panel */}
        <div className="col gap-4">
          <Card title="Compliance status" padded={false} className="compliance-card">
            <div className="compliance-list">
              <ComplianceItem
                icon="shieldCheck"
                title="HIPAA — Article 12 equivalent"
                sub="Last pack: Q3 2026 · ready for audit"
                badge={<Badge tone="sealed" icon={window.Icon.checkSimple({ size: 11 })}>Ready</Badge>}
              />
              <ComplianceItem
                icon="shield"
                title="EU AI Act Article 12"
                sub="Effective Aug 2, 2026 · this tenant complies"
                badge={<Badge tone="sealed" icon={window.Icon.checkSimple({ size: 11 })}>Ready</Badge>}
              />
              <ComplianceItem
                icon="fileCheck"
                title="FDA 21 CFR Part 11"
                sub="6 e-signature events this quarter"
                badge={<Badge tone="info">Active</Badge>}
              />
            </div>
          </Card>

          <Card title="Next steps">
            <div className="col gap-2" style={{ fontSize: 13 }}>
              <ChecklistItem text="Generate Q4 evidence pack" sub="Due in 38 days" />
              <ChecklistItem text="Add ICD-10 source for triage app" sub="Recommended by usage" />
              <ChecklistItem text="Invite teammate to compliance role" />
            </div>
          </Card>
        </div>
      </div>

      {/* Verdict by app */}
      <div className="card" style={{ marginBottom: "var(--space-6)" }}>
        <div className="card__header">
          <h3>Verdict distribution by app</h3>
          <span className="meta">Last 30 days</span>
        </div>
        <div style={{ padding: "var(--space-4) var(--pad-card)" }}>
          {verdictDistApp.map((a) => (
            <div key={a.name} style={{ padding: "10px 0", borderBottom: "1px solid var(--rule)" }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6 }}>
                <span style={{ fontWeight: 500, fontSize: 13 }}>{a.name}</span>
                <span className="row gap-2">
                  <span className="text-sm tabular fw-600" style={{ color: a.flag ? "var(--partial)" : "var(--ink-1)" }}>{a.pct}% verified</span>
                  {a.flag && <Badge tone="partial" icon={window.Icon.warning({ size: 10 })}>Watch</Badge>}
                </span>
              </div>
              <div style={{ display: "flex", height: 6, borderRadius: 4, overflow: "hidden", background: "var(--paper-alt)" }}>
                <div style={{ width: `${a.pct}%`, background: verdictColors.verified }} />
                <div style={{ width: `${(100 - a.pct) * 0.4}%`, background: verdictColors.partial }} />
                <div style={{ width: `${(100 - a.pct) * 0.3}%`, background: verdictColors.unverif }} />
                <div style={{ width: `${(100 - a.pct) * 0.3}%`, background: verdictColors.contradicted }} />
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Recent traces */}
      <Card title="Recent traces" meta={`${SCENARIO.recentTraces.length} of 1,247`} padded={false} action={
        <Button variant="link" size="sm" iconRight={window.Icon.arrowRight({ size: 12 })}>View all</Button>
      }>
        <table className="table">
          <thead>
            <tr>
              <th style={{ width: 80 }}>Time</th>
              <th>App</th>
              <th>Purpose</th>
              <th>Verdict</th>
              <th style={{ width: 90, textAlign: "right" }}>Tokens</th>
              <th style={{ width: 80, textAlign: "right" }}>Cost</th>
              <th style={{ width: 50 }} />
            </tr>
          </thead>
          <tbody>
            {SCENARIO.recentTraces.slice(0, 6).map((t, i) => (
              <tr key={i} className="clickable" onClick={() => onOpenTrace(t.id)}>
                <td className="mono text-sm muted">{t.time}</td>
                <td className="fw-500">{t.app}</td>
                <td><span className="tr-purpose">{t.purpose}</span></td>
                <td><Verdict kind={t.verdict === "contradicted" ? "contra" : t.verdict} /></td>
                <td className="mono text-sm tabular" style={{ textAlign: "right" }}>{t.tokens.toLocaleString()}</td>
                <td className="mono text-sm tabular" style={{ textAlign: "right" }}>{t.cost}</td>
                <td>{window.Icon.chevronRight({ size: 14, props: { color: "var(--ink-4)" } })}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </>
  );
};

const MetricCard = ({ label, value, sparkline, sub, subRow, delta, deltaTone }) => (
  <div className="metric">
    <div className="metric__label">{label}</div>
    <div className="metric__value">{value}</div>
    <div className="metric__sub">
      {subRow ? subRow : (
        <>
          <span>{sub || (delta && <span className={`delta-${deltaTone || "flat"}`}>{delta} wk</span>)}</span>
          {sparkline && <Sparkline values={sparkline} color={deltaTone === "down" ? "var(--contra)" : "var(--ink-1)"} w={80} h={24} />}
        </>
      )}
    </div>
  </div>
);

const ComplianceItem = ({ icon, title, sub, badge }) => (
  <div className="compliance-item">
    <div className="compliance-item__icon">{window.Icon[icon]({ size: 16 })}</div>
    <div className="compliance-item__body">
      <div className="compliance-item__title">{title}</div>
      <div className="compliance-item__sub">{sub}</div>
    </div>
    {badge}
  </div>
);

const ChecklistItem = ({ text, sub }) => (
  <div style={{ display: "flex", alignItems: "flex-start", gap: 10, padding: "6px 0" }}>
    <div style={{ width: 16, height: 16, borderRadius: 4, border: "1.5px solid var(--rule-strong)", marginTop: 2, flexShrink: 0 }} />
    <div style={{ flex: 1 }}>
      <div style={{ fontWeight: 500 }}>{text}</div>
      {sub && <div className="text-xs muted" style={{ marginTop: 1 }}>{sub}</div>}
    </div>
  </div>
);

window.Dashboard = Dashboard;
window.FreshDashboard = FreshDashboard;