// kova/monitor.jsx — MONITOR module · run detail page
// Architecture v7 §8.8 spec implemented field-by-field (16 fields):
//   1  run summary
//   2  user prompt (redacted)
//   3  rendered prompt snapshot
//   4  agent + version
//   5  skill pack version
//   6  memory snapshot version
//   7  tool calls timeline (with parallel batches)
//   8  tool receipts
//   9  parallel tool batches
//  10  artifacts created
//  11  verifier checks
//  12  output card link
//  13  approval events
//  14  outcome events
//  15  cost / latency / tokens
//  16  curator candidates

const {
  Btn, Chip, Kbd, Icon, Card, PageHead, StatusBadge, RunBadge, VerificationStamp,
  ConfidenceMeter, ApprovalChain, EmptyState, RestrictedState,
  DetailObject,
} = window.K;

/* ============================================================
   Synthesize a full run record from a decision (frontend fixture)
   ============================================================ */
const buildRunRecord = (decision) => {
  const isApproved = decision.status === 'approved';
  const isRejected = decision.status === 'rejected';

  return {
    summary: `${decision.runId} executed for ${decision.mod}.daily_brief, producing one verified decision card. Workflow ${
      isApproved ? 'reached "Outcome tracked".'
      : isRejected ? 'was rejected at the approval step and returned to author.'
      : 'is awaiting CEO sign at "Awaiting approval".'
    }`,
    prompt: {
      user:   `Run daily brief for ${decision.mod}. Surface anything that needs CEO approval today.`,
      rendered: `[CONTEXT · 128 KB · 4 sources · redacted per policy]
Tenant: ${decision.mod === 'kraft' ? 'acme · kraft.workspace_v17' : 'acme'}
Module: ${decision.mod}
Allowed scopes: sales.read, inventory.read, price.read, wiki.lookup
[REDACTED · user-provided prompt content]
Run ${decision.mod} brief. Compare current cohort to forecast over the last 14 days...`,
      redactionPolicy: 'tenant-internal',
    },
    agent:        `${decision.mod}_agent · v2.1`,
    skillVersion: `acme.${decision.mod}.skills @ 2026.05.18-3`,
    memoryVersion:`acme.memory @ 2026.05.20`,
    toolBatches: [
      { batch: 1, parallel: false, calls: [
        { name: 'context.build',   scope: 'system',      duration: '32 ms',  status: 'success' },
      ]},
      { batch: 2, parallel: true, calls: [
        { name: 'sql.query',       scope: 'sales.read',      duration: '124 ms', status: 'success' },
        { name: 'sql.query',       scope: 'inventory.read',  duration: '88 ms',  status: 'success' },
      ]},
      { batch: 3, parallel: false, calls: [
        { name: 'price.calculate', scope: 'deterministic',   duration: '12 ms',  status: 'success' },
      ]},
      { batch: 4, parallel: true, calls: [
        { name: 'wiki.lookup',     scope: 'wiki.read',       duration: '34 ms',  status: 'success' },
        { name: 'verifier.check',  scope: 'output.controller', duration: '18 ms', status: 'success' },
      ]},
    ],
    receipts:     decision.receipts || [],
    artifacts: [
      { name: 'output-card.json',     size: '2.1 KB',  r2: `r2://designs/${decision.runId}/output-card.json` },
      { name: 'prompt-snapshot.md',   size: '1.4 KB',  r2: `r2://designs/${decision.runId}/prompt-snapshot.md` },
      { name: 'evidence-bundle.zip',  size: '18.4 KB', r2: `r2://designs/${decision.runId}/evidence.zip` },
      { name: 'tool-receipts.ndjson', size: '4.7 KB',  r2: `r2://designs/${decision.runId}/receipts.ndjson` },
    ],
    verifierChecks: [
      { check: 'Schema · output_card.v1',         result: 'pass' },
      { check: 'Receipts · 3 / 3 claims sourced', result: 'pass' },
      { check: 'Deterministic math reproduced',   result: 'pass' },
      { check: 'RBAC · ceo.approve_required',     result: 'pass' },
      { check: 'Approval policy · external_write', result: isRejected ? 'fail' : 'pass' },
      { check: 'No raw model output reaching UI', result: 'pass' },
    ],
    approvalEvents: decision.chain,
    outcomeEvents: isApproved ? [
      { event: 'CONNECT · transfer.manifest queued',   when: 'just now',  status: 'done' },
      { event: 'Logistics partner · acknowledged',     when: 'just now',  status: 'done' },
      { event: 'Outcome curator · tracking 30 days',   when: 'now',       status: 'now'  },
    ] : isRejected ? [
      { event: 'Returned to author with reason',       when: decision.runWhen, status: 'done' },
    ] : [
      { event: 'Awaiting CEO sign · no outcome yet',   when: '—', status: 'pending' },
    ],
    cost:    '$0.018',
    latency: '8.4 s',
    tokens:  '4,212 in · 882 out',
    curatorCandidates: [
      { kind: 'memory',
        text: `${decision.mod === 'orbit' ? 'Delhi' : decision.mod === 'vault' ? 'Bengaluru' : 'Mumbai'} cohort exhibits durable momentum on this SKU class.`,
        confidence: 'high' },
      { kind: 'skill',
        text: `Add a margin-vs-transfer comparison to ${decision.mod}_agent prompt.`,
        confidence: 'medium' },
      { kind: 'eval',
        text: `Create eval case from ${decision.runId} input/output pair.`,
        confidence: 'high' },
    ],
  };
};


/* ============================================================
   small repeatables
   ============================================================ */
const KV = ({ label, value, mono = true }) => (
  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0',
                borderBottom: '1px solid var(--line-2)', fontSize: 13 }}>
    <span className="t-meta" style={{ color: 'var(--mute)' }}>{label}</span>
    <span className={mono ? 't-mono' : ''} style={{ color: 'var(--ink)' }}>{value}</span>
  </div>
);


/* ============================================================
   MONITOR · run detail page
   ============================================================ */
const RunDetailPage = ({ runId, decision, role = 'ceo', onBack, onOpenOutputCard }) => {
  if (!decision) {
    return (
      <DetailObject
        back={<button className="k-detail-back" onClick={onBack}>← Back to MONITOR</button>}
        pageHead={<PageHead crumb={['MONITOR', 'runs']} title="Run not found" />}
        main={[
          <Card key="x">
            <EmptyState
              mark="?"
              title="That run record doesn’t exist."
              body="It may have been archived, or you may not have access to this tenant."
              cta={<Btn size="sm" onClick={onBack}>Back to MONITOR</Btn>}
            />
          </Card>
        ]}
        side={[]}
      />
    );
  }

  const r = buildRunRecord(decision);
  const isAdmin = role === 'admin' || role === 'implementation';
  const statusKind = decision.status === 'approved' ? 'verified'
                  : decision.status === 'rejected' ? 'failed' : 'pending';

  return (
    <DetailObject
      back={<button className="k-detail-back" onClick={onBack}>← Back to MONITOR</button>}
      pageHead={
        <PageHead
          crumb={['MONITOR', 'runs', decision.runId]}
          title={`Run · ${decision.runId}`}
          subtitle={`${r.agent} · ${decision.runWhen}`}
          actions={
            <>
              <Btn size="sm" variant="ghost" onClick={() => {}}>Open trace ↗</Btn>
              <Btn size="sm" onClick={onOpenOutputCard}>Open output card</Btn>
            </>
          }
        />
      }
      statusRow={
        <>
          <VerificationStamp>{decision.stamp || 'Verified'}</VerificationStamp>
          <StatusBadge kind={statusKind}>{decision.statusLabel}</StatusBadge>
          <RunBadge id={decision.runId} version={decision.runVersion} when={decision.runWhen} />
          {decision.confidence && (
            <ConfidenceMeter level={decision.confidence}
                             label={decision.confidenceLabel}
                             mod={decision.mod} />
          )}
          <Chip variant="mute">latency · {r.latency}</Chip>
          <Chip variant="mute">cost · {r.cost}</Chip>
        </>
      }
      main={[
        /* 1 · run summary */
        <Card key="summary">
          <div className="t-eyebrow" style={{ marginBottom: 8 }}>Run summary</div>
          <p className="t-body" style={{ color: 'var(--ink)', margin: 0, lineHeight: 1.55 }}>
            {r.summary}
          </p>
        </Card>,

        /* 2 + 3 · prompt snapshot */
        <Card key="prompt">
          <div className="t-eyebrow" style={{ marginBottom: 12 }}>Prompt snapshot</div>
          <div className="t-meta" style={{ marginBottom: 6, color: 'var(--mute)' }}>
            User prompt · redaction policy: <span className="t-mono">{r.prompt.redactionPolicy}</span>
          </div>
          <div style={{ background: 'var(--surface-2)', border: '1px solid var(--line-2)',
                        borderRadius: 8, padding: '12px 14px',
                        fontFamily: 'var(--font-mono)', fontSize: 12.5,
                        color: 'var(--ink-2)', lineHeight: 1.55 }}>
            {r.prompt.user}
          </div>
          <div className="t-meta" style={{ margin: '14px 0 6px', color: 'var(--mute)' }}>
            Rendered prompt sent to agent
          </div>
          <pre style={{ margin: 0, background: 'var(--surface-2)', border: '1px solid var(--line-2)',
                        borderRadius: 8, padding: '12px 14px',
                        fontFamily: 'var(--font-mono)', fontSize: 12,
                        color: 'var(--ink-2)', lineHeight: 1.55,
                        whiteSpace: 'pre-wrap', overflowX: 'auto' }}>{r.prompt.rendered}</pre>
        </Card>,

        /* 7 + 9 · tool calls timeline with parallel batches */
        <Card key="tools">
          <div className="t-eyebrow" style={{ marginBottom: 12 }}>Tool calls · {r.toolBatches.reduce((n, b) => n + b.calls.length, 0)} calls · {r.toolBatches.length} batches</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {r.toolBatches.map(b => (
              <div key={b.batch} style={{ borderLeft: '2px solid var(--line)', paddingLeft: 12 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                  <span className="t-eyebrow" style={{ color: 'var(--mute)' }}>Batch {b.batch}</span>
                  {b.parallel && <Chip variant="info">parallel · {b.calls.length} concurrent</Chip>}
                </div>
                {b.calls.map((c, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10,
                                        padding: '6px 0', fontSize: 13 }}>
                    <span className="t-mono" style={{ color: 'var(--ink)', minWidth: 160 }}>{c.name}</span>
                    <Chip variant="mute">{c.scope}</Chip>
                    <span className="t-mono" style={{ marginLeft: 'auto', color: 'var(--mute)' }}>{c.duration}</span>
                    <StatusBadge kind={c.status === 'success' ? 'verified' : 'failed'}>
                      {c.status}
                    </StatusBadge>
                  </div>
                ))}
              </div>
            ))}
          </div>
        </Card>,

        /* 8 · tool receipts */
        <Card key="receipts">
          <div className="t-eyebrow" style={{ marginBottom: 12 }}>Tool receipts · {r.receipts.length}</div>
          {r.receipts.length === 0 ? (
            <div className="t-meta">No receipts on file.</div>
          ) : r.receipts.map((rc, i) => (
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between',
                                  padding: '8px 0', borderTop: i ? '1px solid var(--line-2)' : 'none',
                                  fontSize: 13 }}>
              <span className="t-mono" style={{ color: 'var(--ink)' }}>{rc.tool}</span>
              <Chip variant="info">{rc.scope}</Chip>
              <span className="t-mono" style={{ color: 'var(--mute)', fontSize: 11 }}>{rc.id}</span>
            </div>
          ))}
        </Card>,

        /* 10 · artifacts */
        <Card key="artifacts">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
            <div className="t-eyebrow">Artifacts created · {r.artifacts.length}</div>
            <Btn size="sm" variant="ghost" onClick={() => {}}>Open source artifacts ↗</Btn>
          </div>
          {r.artifacts.map((a, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr auto auto',
                                  gap: 12, padding: '8px 0',
                                  borderTop: i ? '1px solid var(--line-2)' : 'none',
                                  fontSize: 13, alignItems: 'center' }}>
              <div>
                <div style={{ color: 'var(--ink)' }}>{a.name}</div>
                <div className="t-mono" style={{ color: 'var(--mute-2)', fontSize: 10.5 }}>{a.r2}</div>
              </div>
              <span className="t-meta">{a.size}</span>
              <Icon name="external" />
            </div>
          ))}
        </Card>,

        /* 11 · verifier checks */
        <Card key="checks">
          <div className="t-eyebrow" style={{ marginBottom: 12 }}>Verifier checks · {r.verifierChecks.filter(c => c.result === 'pass').length} / {r.verifierChecks.length} pass</div>
          {r.verifierChecks.map((c, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10,
                                  padding: '6px 0',
                                  borderTop: i ? '1px solid var(--line-2)' : 'none',
                                  fontSize: 13 }}>
              <span style={{ width: 18, height: 18, borderRadius: '50%',
                             background: c.result === 'pass' ? 'var(--success-soft)' : 'var(--danger-soft)',
                             color: c.result === 'pass' ? 'var(--success)' : 'var(--danger)',
                             display: 'grid', placeItems: 'center',
                             fontSize: 11, fontWeight: 700, flexShrink: 0 }}>
                {c.result === 'pass' ? '✓' : '✕'}
              </span>
              <span style={{ flex: 1, color: 'var(--ink-2)' }}>{c.check}</span>
              <span className="t-meta" style={{ color: c.result === 'pass' ? 'var(--success)' : 'var(--danger)',
                                                fontWeight: 600 }}>{c.result.toUpperCase()}</span>
            </div>
          ))}
        </Card>,

        /* 13 · approval events */
        <Card key="approval-events">
          <div className="t-eyebrow" style={{ marginBottom: 12 }}>Approval events</div>
          <ApprovalChain mod={decision.mod} steps={r.approvalEvents} />
        </Card>,

        /* 14 · outcome events */
        <Card key="outcome">
          <div className="t-eyebrow" style={{ marginBottom: 12 }}>Outcome events</div>
          {r.outcomeEvents.length === 0 ? (
            <div className="t-meta">No outcomes yet.</div>
          ) : r.outcomeEvents.map((o, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10,
                                  padding: '8px 0',
                                  borderTop: i ? '1px solid var(--line-2)' : 'none',
                                  fontSize: 13 }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%',
                             background: o.status === 'done' ? 'var(--success)' :
                                         o.status === 'now' ? 'var(--accent)' : 'var(--mute-2)' }} />
              <span style={{ flex: 1, color: 'var(--ink-2)' }}>{o.event}</span>
              <span className="t-mono" style={{ color: 'var(--mute)' }}>{o.when}</span>
            </div>
          ))}
        </Card>,
      ]}
      side={[
        /* 4-6 · versions */
        <Card key="versions">
          <div className="t-eyebrow" style={{ marginBottom: 10 }}>Versions</div>
          <KV label="Agent"        value={r.agent} />
          <KV label="Skill pack"   value={r.skillVersion} />
          <KV label="Memory"       value={r.memoryVersion} />
          <KV label="Run version"  value={decision.runVersion || 'v1'} />
          <div style={{ marginTop: 10 }}>
            <Btn size="sm" variant="ghost" onClick={() => {}} disabled>Diff against last version</Btn>
          </div>
        </Card>,

        /* 15 · cost / latency / tokens */
        <Card key="metrics">
          <div className="t-eyebrow" style={{ marginBottom: 10 }}>Cost · latency · tokens</div>
          <KV label="Latency"  value={r.latency} />
          <KV label="Cost"     value={r.cost} />
          <KV label="Tokens"   value={r.tokens} />
        </Card>,

        /* 16 · curator candidates */
        <Card key="curator">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 10 }}>
            <div className="t-eyebrow">Curator candidates · {r.curatorCandidates.length}</div>
            {!isAdmin && <Chip variant="mute">ADMIN ONLY</Chip>}
          </div>
          {r.curatorCandidates.map((c, i) => (
            <div key={i} style={{ padding: '10px 0',
                                  borderTop: i ? '1px solid var(--line-2)' : 'none' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                <Chip variant={c.kind === 'memory' ? 'success' : c.kind === 'skill' ? 'accent' : 'info'}>
                  {c.kind}
                </Chip>
                <span className="t-meta">confidence · {c.confidence}</span>
              </div>
              <div className="t-body-sm" style={{ color: 'var(--ink)' }}>{c.text}</div>
              <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
                <Btn size="sm" variant="ghost" disabled={!isAdmin}>Approve</Btn>
                <Btn size="sm" variant="ghost" disabled={!isAdmin}>Reject</Btn>
              </div>
            </div>
          ))}
        </Card>,

        /* 12 · output card link */
        <Card key="output">
          <div className="t-eyebrow" style={{ marginBottom: 10 }}>Output card</div>
          <p className="t-body-sm" style={{ marginTop: 0, color: 'var(--mute)' }}>
            The verified decision card produced by this run.
          </p>
          <Btn size="sm" onClick={onOpenOutputCard}>Open in APPROVALS ›</Btn>
        </Card>,

        /* admin-only actions */
        <Card key="admin-actions">
          <div className="t-eyebrow" style={{ marginBottom: 10 }}>Admin actions</div>
          {!isAdmin && (
            <Chip variant="warn" dot>Reserved for ADMIN / Implementation Eng</Chip>
          )}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 10 }}>
            <Btn size="sm" disabled={!isAdmin}>Create eval case</Btn>
            <Btn size="sm" disabled={!isAdmin}>Stage skill patch</Btn>
            <Btn size="sm" disabled={!isAdmin}>Mark known mistake</Btn>
            <Btn size="sm" disabled={!isAdmin}>Add to user guide</Btn>
          </div>
        </Card>,
      ]}
    />
  );
};


Object.assign(window.K, { RunDetailPage, buildRunRecord });