// Corridor dashboard screens — compose the design-system components
// (window.CorridorDesignSystem_8d69e0) over the demo dataset. Overview
// now carries the chart band + the runaway-agent simulation; Events
// opens a real event-detail timeline. data-tour hooks mark the
// elements the guided tour spotlights.
const NS = window.CorridorDesignSystem_8d69e0;
const { Button, Badge, Input, Label, Card, CardHeader, CardTitle, CardDescription,
  CardContent, CardFooter, PageHeader, EmptyState, DataTable, DescriptionList, FilterChips } = NS;
const D = window.CorridorDemo;

const page = { maxWidth: 1000, margin: "0 auto", padding: "40px 32px", display: "flex", flexDirection: "column", gap: 24 };
const grid2 = { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, alignItems: "start" };
const tile = { fontSize: 13, color: "var(--text-muted)" };
const big = { fontSize: 28, fontWeight: 600, letterSpacing: "-0.01em", color: "var(--text-strong)", marginTop: 2 };

function link(id) { return <a href="#" style={{ color: "var(--brand)", textDecoration: "none" }}>{id}</a>; }

// ── Overview ──────────────────────────────────────────────────────
function Overview({ onSimState, simDeniedBump }) {
  const settled = D.events.filter((e) => e.status === "settled").reduce((a, e) => a + e.amount, 0);
  const deniedToday = D.stats.deniedToday + (simDeniedBump || 0);
  return (
    <div className="cor-page" style={page}>
      <PageHeader title="Overview" description={<>Signed in as <span style={{ fontFamily: "var(--font-mono)" }}>{D.provider.email}</span> — segment <span style={{ fontFamily: "var(--font-mono)" }}>{D.provider.segment}</span>.</>} />

      {/* chart band */}
      <div data-tour="overview-chart">
        <Card>
          <CardHeader row>
            <div><CardTitle>Spend over time</CardTitle><CardDescription>Captured + settled per day — denied calls overlaid in red.</CardDescription></div>
            <Badge variant="accent">last 7 days</Badge>
          </CardHeader>
          <CardContent>
            <div className="cor-2col" style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 24, alignItems: "center" }}>
              <SpendChart />
              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                <StatTile label="events today" value={D.stats.eventsToday} />
                <StatTile label="denied today" value={deniedToday} accent="danger" />
              </div>
            </div>
            <div style={{ marginTop: 20, paddingTop: 18, borderTop: "1px solid var(--hairline)" }}>
              <div style={{ fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.04em", color: "var(--text-muted)", marginBottom: 12 }}>settlement funnel · last 7 days</div>
              <SettlementFunnel />
            </div>
          </CardContent>
        </Card>
      </div>

      {/* runaway-agent simulation */}
      <RunawaySimulation onStateChange={onSimState} />

      {/* account summary */}
      <div className="cor-2col" style={grid2}>
        <Card style={{ gridColumn: "1 / -1" }}>
          <CardHeader row>
            <div><CardTitle>Stripe Connect</CardTitle><CardDescription>Account health &amp; onboarding state.</CardDescription></div>
            <Badge variant="success" dot>Connected</Badge>
          </CardHeader>
          <CardContent>
            <DescriptionList items={[
              { term: "Segment", value: D.onboarding.segment },
              { term: "Rail", value: D.onboarding.rail, mono: true },
              { term: "State", value: <Badge variant="success">complete</Badge> },
              { term: "Account", value: "•••• " + D.onboarding.last4, mono: true },
            ]} />
          </CardContent>
        </Card>
        <Card><CardHeader><CardDescription style={tile}>Settled this week</CardDescription><div style={big}>{D.fmtUSD(settled)}</div></CardHeader><CardContent><Badge variant="accent">2 published rules</Badge></CardContent></Card>
        <Card><CardHeader><CardDescription style={tile}>Active agents</CardDescription><div style={big}>3</div></CardHeader><CardContent><span style={{ fontSize: 13, color: "var(--text-muted)" }}>2 revoked · 5 total</span></CardContent></Card>
      </div>
    </div>
  );
}

// ── Events (list → detail) ────────────────────────────────────────
function Events({ onOpen }) {
  const [status, setStatus] = React.useState(null);
  const rows = status ? D.events.filter((e) => e.status === status) : D.events;
  const COLUMNS = [
    { key: "id", header: "ID", cellClassName: "cor-dt-mono", render: (r) => <a href="#" onClick={(e) => { e.preventDefault(); onOpen(r); }} style={{ color: "var(--brand)", textDecoration: "none" }}>{r.id}</a> },
    { key: "status", header: "Status", render: (r) => <Badge variant={D.eventVariant(r.status)}>{r.status.replace(/_/g, " ")}</Badge> },
    { key: "agent", header: "Agent", cellClassName: "cor-dt-mono", render: (r) => link(r.agent) },
    { key: "meter", header: "Meter", cellClassName: "cor-dt-mono" },
    { key: "amount", header: "Amount", align: "right", cellClassName: "cor-dt-num", render: (r) => D.fmtUSD(r.amount) },
    { key: "at", header: "Authorized", cellClassName: "cor-dt-mono", render: (r) => <span style={{ color: "var(--text-muted)", fontSize: 12 }}>{r.at}</span> },
  ];
  const chips = [["All", null], ["settled", "settled"], ["captured", "captured"], ["authorized", "authorized"], ["settle_failed", "settle_failed"], ["reversed", "reversed"]];
  return (
    <div className="cor-page" style={page}>
      <PageHeader title="Events" description="Metered events with their authorize → capture → settle timeline." />
      <FilterChips label="Status:" chips={chips.map(([l, v]) => ({ label: l.replace(/_/g, " "), active: status === v, value: v || "" }))} onSelect={(c) => setStatus(c.value || null)} />
      <div data-tour="events-table">
        <DataTable columns={COLUMNS} rows={rows} rowKey={(r) => r.id} pagination={{ prevHref: null, nextHref: "#" }} emptyMessage="No events match this filter." />
      </div>
    </div>
  );
}

function EventDetail({ event, onBack }) {
  const steps = D.lifecycle[event.id] || defaultLifecycle(event);
  const phaseDot = (p) => p === "settled" ? "var(--success-ink)" : p === "failed" || p === "reversed" ? "var(--danger-ink)" : "var(--warning-ink)";
  return (
    <div className="cor-page" style={page}>
      <div style={{ fontSize: 13, color: "var(--text-muted)" }}>
        <a href="#" onClick={(e) => { e.preventDefault(); onBack(); }} style={{ color: "var(--brand)", textDecoration: "none" }}>Events</a>
        <span style={{ margin: "0 8px" }}>/</span><span style={{ fontFamily: "var(--font-mono)" }}>{event.id}</span>
      </div>
      <PageHeader title={<span style={{ fontFamily: "var(--font-mono)", fontSize: 22 }}>{event.id}</span>}
        description={<>Metered <span style={{ fontFamily: "var(--font-mono)" }}>{event.meter}</span> from <span style={{ fontFamily: "var(--font-mono)" }}>{event.agent}</span>.</>}
        actions={<Badge variant={D.eventVariant(event.status)}>{event.status.replace(/_/g, " ")}</Badge>} />
      <div className="cor-2col" style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 16, alignItems: "start" }}>
        <Card><CardHeader><CardTitle>Details</CardTitle></CardHeader><CardContent>
          <DescriptionList items={[
            { term: "Event ID", value: event.id, mono: true },
            { term: "Agent", value: event.agent, mono: true },
            { term: "Meter", value: event.meter, mono: true },
            { term: "Amount", value: D.fmtUSD(event.amount), mono: true },
            { term: "Priced by", value: "corpus-search v3", mono: true },
            { term: "Cleared by", value: "prl_demo_budget_daily", mono: true },
          ]} />
        </CardContent></Card>

        <div data-tour="event-timeline">
          <Card><CardHeader row><div><CardTitle>Timeline</CardTitle><CardDescription>Authorize → capture → settle, each timestamped.</CardDescription></div></CardHeader>
            <CardContent>
              <div style={{ display: "flex", flexDirection: "column" }}>
                {steps.map((s, i) => (
                  <div key={s.phase} style={{ display: "grid", gridTemplateColumns: "16px 1fr", gap: 12, paddingBottom: i < steps.length - 1 ? 18 : 0, position: "relative" }}>
                    <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
                      <span style={{ width: 11, height: 11, borderRadius: "50%", background: phaseDot(s.phase), marginTop: 3, flexShrink: 0 }} />
                      {i < steps.length - 1 ? <span style={{ flex: 1, width: 2, background: "var(--hairline)", marginTop: 4 }} /> : null}
                    </div>
                    <div>
                      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 8 }}>
                        <span style={{ fontSize: 14, fontWeight: 600, color: "var(--text-strong)" }}>{s.phase}</span>
                        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--text-muted)" }}>{s.at}</span>
                      </div>
                      <div style={{ fontSize: 13, color: "var(--text-muted)", marginTop: 2 }}>{s.note}</div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}

function defaultLifecycle(e) {
  const out = [{ phase: "authorized", at: e.at, note: "priced by corpus-search v3" }];
  if (!["authorized", "voided", "expired"].includes(e.status)) out.push({ phase: "captured", at: e.at, note: "policy cleared at authorize time" });
  if (e.status === "settled") out.push({ phase: "settled", at: e.at, note: "settled on stripe_connect" });
  else if (e.status === "settle_failed") out.push({ phase: "failed", at: e.at, note: "settlement failed on rail" });
  else if (e.status === "reversed") out.push({ phase: "reversed", at: e.at, note: "reversed after settle" });
  return out;
}

// ── Agents (list → detail) ────────────────────────────────────────
function Agents({ onOpen }) {
  const COLUMNS = [
    { key: "id", header: "Agent", cellClassName: "cor-dt-mono", render: (r) => <a href="#" onClick={(e) => { e.preventDefault(); onOpen(r); }} style={{ color: "var(--brand)", textDecoration: "none" }}>{r.id}</a> },
    { key: "name", header: "Name", render: (r) => <span>{r.name} <span style={{ color: "var(--text-muted)" }}>· {r.owner}</span></span> },
    { key: "status", header: "Status", render: (r) => <Badge variant={D.agentVariant(r.status)}>{r.status.replace(/_/g, " ")}</Badge> },
    { key: "events", header: "Events", align: "right", cellClassName: "cor-dt-num", render: (r) => r.events.toLocaleString("en-US") },
    { key: "amount", header: "Lifetime", align: "right", cellClassName: "cor-dt-num", render: (r) => D.fmtUSD(r.amount) },
  ];
  return (
    <div className="cor-page" style={page}>
      <PageHeader title="Agents" description="Per-agent identity, usage, and lifecycle. Created on first authorize." />
      <div data-tour="agents-table">
        <DataTable columns={COLUMNS} rows={D.agents} rowKey={(r) => r.id} pagination={{ prevHref: null, nextHref: null }} />
      </div>
    </div>
  );
}

function AgentDetail({ agent, onBack }) {
  const revoked = agent.status !== "active";
  return (
    <div className="cor-page" style={page}>
      <div style={{ fontSize: 13, color: "var(--text-muted)" }}>
        <a href="#" onClick={(e) => { e.preventDefault(); onBack(); }} style={{ color: "var(--brand)", textDecoration: "none" }}>Agents</a>
        <span style={{ margin: "0 8px" }}>/</span><span style={{ fontFamily: "var(--font-mono)" }}>{agent.id}</span>
      </div>
      <PageHeader title={agent.name} description={<span style={{ fontFamily: "var(--font-mono)" }}>{agent.id}</span>}
        actions={revoked ? <Badge variant="destructive">{agent.status.replace(/_/g, " ")}</Badge> : <Button variant="destructive" size="sm">Revoke agent</Button>} />
      <div className="cor-2col" style={grid2}>
        <Card><CardHeader><CardTitle>Identity</CardTitle></CardHeader><CardContent>
          <DescriptionList items={[
            { term: "Agent ID", value: agent.id, mono: true },
            { term: "Scope", value: agent.scope, mono: true },
            { term: "Owner", value: agent.owner },
            { term: "Status", value: <Badge variant={D.agentVariant(agent.status)}>{agent.status.replace(/_/g, " ")}</Badge> },
          ]} />
        </CardContent></Card>
        <Card><CardHeader><CardTitle>Usage</CardTitle></CardHeader><CardContent>
          <DescriptionList items={[
            { term: "Lifetime events", value: agent.events.toLocaleString("en-US"), mono: true },
            { term: "Lifetime amount", value: D.fmtUSD(agent.amount), mono: true },
            { term: "Created", value: agent.created, mono: true },
            { term: "Last observed", value: agent.last, mono: true },
          ]} />
        </CardContent></Card>
      </div>
    </div>
  );
}

// ── Pricing ───────────────────────────────────────────────────────
function Pricing() {
  const COLUMNS = [
    { key: "name", header: "Rule", render: (r) => <span><span style={{ fontWeight: 500 }}>{r.name}</span> <span style={{ color: "var(--text-muted)", fontFamily: "var(--font-mono)", fontSize: 12 }}>v{r.version}</span></span> },
    { key: "meter", header: "Meter", cellClassName: "cor-dt-mono" },
    { key: "type", header: "Type" },
    { key: "amount", header: "Price", cellClassName: "cor-dt-mono" },
    { key: "status", header: "Status", render: (r) => <Badge variant={D.ruleVariant(r.status)}>{r.status}</Badge> },
  ];
  return (
    <div className="cor-page" style={page}>
      <PageHeader title="Pricing" description="Declarative, versioned rules — see exactly which rule priced any event." actions={<Button size="sm">New rule</Button>} />
      <div data-tour="pricing-table">
        <DataTable columns={COLUMNS} rows={D.pricing} rowKey={(r) => r.id} pagination={{ prevHref: null, nextHref: null }} />
      </div>
    </div>
  );
}

// ── Policies ──────────────────────────────────────────────────────
function Policies() {
  const COLUMNS = [
    { key: "type", header: "Rule type", render: (r) => <span style={{ fontWeight: 500 }}>{r.type.replace(/_/g, " ")}</span> },
    { key: "selector", header: "Applies to", cellClassName: "cor-dt-mono" },
    { key: "params", header: "Parameters" },
    { key: "status", header: "Status", render: (r) => <Badge variant={D.policyVariant(r.status)}>{r.status}</Badge> },
  ];
  return (
    <div className="cor-page" style={page}>
      <PageHeader title="Policies" description="Spend caps, rate limits & allow-lists — enforced before the work happens." actions={<Button size="sm">New policy</Button>} />
      <div data-tour="policies-table">
        <DataTable columns={COLUMNS} rows={D.policies} rowKey={(r) => r.id} pagination={{ prevHref: null, nextHref: null }} />
      </div>
    </div>
  );
}

// ── Settlement ────────────────────────────────────────────────────
function Settlement() {
  const rows = D.events.filter((e) => e.rail !== "—");
  const COLUMNS = [
    { key: "id", header: "Event", cellClassName: "cor-dt-mono", render: (r) => link(r.id) },
    { key: "rail", header: "Rail status", render: (r) => <Badge variant={r.rail === "settled" ? "success" : r.rail === "failed" ? "destructive" : "warning"}>{r.rail}</Badge> },
    { key: "amount", header: "Amount", align: "right", cellClassName: "cor-dt-num", render: (r) => D.fmtUSD(r.amount) },
    { key: "at", header: "Authorized", cellClassName: "cor-dt-mono", render: (r) => <span style={{ color: "var(--text-muted)", fontSize: 12 }}>{r.at}</span> },
  ];
  return <div className="cor-page" style={page}><PageHeader title="Settlement" description="How captured events settle on the rail — every payout traces to the events that earned it." /><div data-tour="settlement-table"><DataTable columns={COLUMNS} rows={rows} rowKey={(r) => r.id} pagination={{ prevHref: null, nextHref: null }} /></div></div>;
}

// ── Remaining routes ──────────────────────────────────────────────
function Onboarding() {
  return (
    <div className="cor-page" style={page}>
      <PageHeader title="Onboarding" description="Connect the payment rail that pays you out." />
      <Card><CardHeader row><div><CardTitle>Stripe Connect</CardTitle><CardDescription>Greenfield — Corridor runs your money path.</CardDescription></div><Badge variant="success" dot>Complete</Badge></CardHeader>
        <CardContent><DescriptionList items={[{ term: "Connected account", value: "acct_•••• " + D.onboarding.last4, mono: true }, { term: "Outstanding requirements", value: "None" }]} /></CardContent>
        <CardFooter><Button variant="outline" size="sm">Manage on Stripe →</Button></CardFooter></Card>
    </div>
  );
}
function Webhooks() {
  const COLUMNS = [
    { key: "id", header: "Endpoint", cellClassName: "cor-dt-mono", render: (r) => link(r.id) },
    { key: "url", header: "URL", cellClassName: "cor-dt-mono", render: (r) => <span style={{ color: "var(--text-muted)" }}>{r.url}</span> },
    { key: "events", header: "Subscriptions", align: "right", cellClassName: "cor-dt-num" },
    { key: "status", header: "Status", render: (r) => <Badge variant={r.status === "active" ? "success" : "warning"}>{r.status}</Badge> },
  ];
  return <div className="cor-page" style={page}><PageHeader title="Webhooks" description="Signed event delivery to your endpoints." actions={<Button size="sm">Add endpoint</Button>} /><DataTable columns={COLUMNS} rows={D.webhooks} rowKey={(r) => r.id} pagination={{ prevHref: null, nextHref: null }} /></div>;
}
function ApiKeys() {
  const COLUMNS = [
    { key: "prefix", header: "Key", cellClassName: "cor-dt-mono", render: (r) => r.prefix + "…" },
    { key: "env", header: "Env", render: (r) => <Badge variant={r.env === "live" ? "accent" : "outline"}>{r.env}</Badge> },
    { key: "status", header: "Status", render: (r) => <Badge variant={r.status === "active" ? "success" : "destructive"}>{r.status}</Badge> },
    { key: "last", header: "Last used", cellClassName: "cor-dt-mono", render: (r) => <span style={{ color: "var(--text-muted)", fontSize: 12 }}>{r.last}</span> },
  ];
  return <div className="cor-page" style={page}><PageHeader title="API keys" description="Server-side secrets. Shown once on creation, never again." actions={<Button size="sm">Create key</Button>} /><DataTable columns={COLUMNS} rows={D.apiKeys} rowKey={(r) => r.id} pagination={{ prevHref: null, nextHref: null }} /></div>;
}
function Account() {
  return <div className="cor-page" style={page}><PageHeader title="Account" description="Full readout of your Corridor account." /><div className="cor-2col" style={grid2}>
    <Card><CardHeader><CardTitle>Provider</CardTitle></CardHeader><CardContent><DescriptionList items={[{ term: "Email", value: D.provider.email, mono: true }, { term: "Segment", value: "Greenfield" }]} /></CardContent></Card>
    <Card><CardHeader row><div><CardTitle>Recent events</CardTitle></div><Badge variant="neutral">last 5</Badge></CardHeader><CardContent><DescriptionList items={D.events.slice(0, 4).map((e) => ({ term: e.id, value: e.status, mono: true }))} /></CardContent></Card>
  </div></div>;
}

Object.assign(window, { Overview, Events, EventDetail, Agents, AgentDetail, Pricing, Policies, Onboarding, Webhooks, ApiKeys, Account, Settlement });