// kova/organisms.jsx — Wave C deliverable
// The 10 named UI objects. Each composes lower primitives only.
// Direction restyles atoms — Organism structure is invariant.

const {
  Btn, Chip, Kbd, Icon, IconBtn, StatusDot, Avatar,
  Field, Tabs, KPITile, ConfidenceMeter,
  RunBadge, StatusBadge, VerificationStamp, ApprovalChain,
  NotificationRow, Card,
} = window.K;
const { useState } = React;


/* ============================================================
   1 · DECISION CARD — the signature organism, full props
   ============================================================ */
const DecisionCard = ({
  mod,                   // 'orbit' | 'vault' | 'price' | 'kraft' | ...
  stamp,                 // VerificationStamp text
  status,                // 'verified' | 'pending' | 'failed' | 'drift'
  statusLabel,
  runId, runVersion, runWhen,
  title,
  reasoning,
  stats,                 // [{ label, value, color? }] — max 4
  confidence,            // 1-4
  confidenceLabel,
  onEvidence, onRunHistory, onReject, onRevise, onApprove,
  primaryKbd = '⌘⏎',
}) => (
  <article className="k-decision" style={{ '--m-mod': mod ? `var(--m-${mod})` : undefined }}>
    <div className="k-decision-head">
      <div className="k-decision-head-meta">
        {stamp && <VerificationStamp>{stamp}</VerificationStamp>}
        {status && <StatusBadge kind={status}>{statusLabel || status}</StatusBadge>}
        {runId && <RunBadge id={runId} version={runVersion} when={runWhen} />}
      </div>
    </div>
    <h2 className="k-decision-title">{title}</h2>
    {reasoning && <p className="k-decision-reason">{reasoning}</p>}

    {stats && stats.length > 0 && (
      <div className="k-decision-stats">
        {stats.slice(0, 4).map((s, i) => (
          <div className="k-decision-stat" key={i}>
            <div className="k-decision-stat-label">{s.label}</div>
            <div className={`k-decision-stat-value${s.color === 'success' ? ' is-success' : s.color === 'danger' ? ' is-danger' : ''}`}>{s.value}</div>
          </div>
        ))}
      </div>
    )}

    <div className="k-decision-foot">
      <div className="k-decision-foot-left">
        {onEvidence    && <Btn size="sm" onClick={onEvidence}>Evidence ›</Btn>}
        {onRunHistory  && <Btn size="sm" onClick={onRunHistory}>Run history</Btn>}
        {confidence && <ConfidenceMeter level={confidence} label={confidenceLabel || 'High'} mod={mod} />}
      </div>
      <div className="k-decision-foot-right">
        {onReject  && <Btn size="sm" variant="reject" onClick={onReject}>Reject</Btn>}
        {onRevise  && <Btn size="sm" onClick={onRevise}>Revise</Btn>}
        {onApprove && <Btn variant="primary" onClick={onApprove} kbd={primaryKbd}>Approve &amp; sign</Btn>}
      </div>
    </div>
  </article>
);


/* ============================================================
   1b · DECISION CARD · module-realistic factory fixtures
   ============================================================ */
const DECISION_FIXTURES = {
  orbit: {
    mod: 'orbit',
    stamp: 'Verified · Orbit daily brief',
    status: 'pending', statusLabel: 'Pending CEO sign',
    runId: 'rcp-44c9', runVersion: 'v3', runWhen: '2 min ago',
    title: 'Transfer 38 SKUs Mumbai → Delhi to recover ₹14.2 L',
    reasoning: 'Delhi outperformed forecast 14 days running on solitaire bands; Mumbai’s same-cohort velocity slid 22 %. Transfer beats reprice on margin retained and preserves the catalogue.',
    stats: [
      { label: 'Unlock',     value: '₹14.2 L' },
      { label: 'SKUs',       value: '38' },
      { label: 'Median age', value: '214 d' },
      { label: 'Margin Δ',   value: '+ 6.4 %', color: 'success' },
    ],
    confidence: 3, confidenceLabel: 'High',
  },
  vault: {
    mod: 'vault',
    stamp: 'Verified · Vault deadstock scan',
    status: 'pending', statusLabel: 'Co-sign · Inventory',
    runId: 'rcp-44ca', runVersion: 'v17', runWhen: '11 min ago',
    title: 'Reprice 6 Bengaluru SKUs · −8 % unlocks ₹2.1 L',
    reasoning: 'These six are 198–241 days aged in a cooling cohort. Reprice cheaper than hold; transfer not viable given Bengaluru-only demand pattern.',
    stats: [
      { label: 'Unlock',     value: '₹2.1 L' },
      { label: 'SKUs',       value: '6' },
      { label: 'Reprice',    value: '−8 %' },
      { label: 'Margin Δ',   value: '− 1.2 %', color: 'danger' },
    ],
    confidence: 3, confidenceLabel: 'High',
  },
  price: {
    mod: 'price',
    stamp: 'Verified · Price engine · explained',
    status: 'pending', statusLabel: 'Awaiting CEO ceiling',
    runId: 'rcp-44cb', runVersion: 'v1', runWhen: '4 min ago',
    title: 'Approve gold rate update · 24K ₹78,420 → ₹79,520 / 10 g',
    reasoning: 'Spot moved +1.4 % overnight. PRICE engine calculated downstream impact on 412 SKUs; agent explains. Within CEO ceiling of ±2 % daily.',
    stats: [
      { label: 'Rate Δ',     value: '+ 1.4 %' },
      { label: 'SKUs affected', value: '412' },
      { label: 'Margin Δ',   value: '+ 0.3 %', color: 'success' },
      { label: 'Ceiling',    value: 'within' },
    ],
    confidence: 4, confidenceLabel: 'Verified',
  },
  kraft: {
    mod: 'kraft',
    stamp: 'Verified · Design packet ready',
    status: 'pending', statusLabel: 'Awaiting CEO sign',
    runId: 'rcp-44cc', runVersion: 'v2', runWhen: '1 h ago',
    title: 'Sign off CAD-117 · solitaire band · launch pack',
    reasoning: 'Designer submitted final CAD with BOM; verified against brief constraints (margin floor, vendor capacity, lead time). Ready to ship to launch.',
    stats: [
      { label: 'Brief ref',  value: 'kraft-2024-1117' },
      { label: 'Margin',     value: '+ 38 %', color: 'success' },
      { label: 'Lead time',  value: '14 d' },
      { label: 'BOM cost',   value: '₹62,400' },
    ],
    confidence: 4, confidenceLabel: 'Verified',
  },
};


/* ============================================================
   2 · RUN OBJECT — Run record header
   ============================================================ */
const RunObject = ({
  mod, runId, title, agent, skillVersion, memoryVersion, startedAt, cost, latency, status,
  onOpenTrace, onRetry,
}) => (
  <div className="k-run-object" style={{ '--m-mod': mod ? `var(--m-${mod})` : undefined }}>
    <div className="k-run-object-head">
      <div className="k-run-object-id">
        <span>{runId}</span>
        {status && <StatusBadge kind={status}>{status}</StatusBadge>}
      </div>
      {title && <div className="k-run-object-title">{title}</div>}
      <div className="k-run-object-grid">
        {agent &&         <div><span className="l">Agent</span><span className="v">{agent}</span></div>}
        {skillVersion &&  <div><span className="l">Skill pack</span><span className="v">{skillVersion}</span></div>}
        {memoryVersion && <div><span className="l">Memory</span><span className="v">{memoryVersion}</span></div>}
        {startedAt &&     <div><span className="l">Started</span><span className="v">{startedAt}</span></div>}
        {cost &&          <div><span className="l">Cost</span><span className="v">{cost}</span></div>}
        {latency &&       <div><span className="l">Latency</span><span className="v">{latency}</span></div>}
      </div>
    </div>
    <div className="k-run-object-actions">
      {onRetry &&     <Btn size="sm" variant="ghost">Retry</Btn>}
      {onOpenTrace && <Btn size="sm">Open trace</Btn>}
    </div>
  </div>
);


/* ============================================================
   3 · EVIDENCE PANEL — tabbed claims · receipts · math
   ============================================================ */
const EvidencePanel = ({ runId, claims = [], receipts = [], math = [] }) => {
  const [tab, setTab] = useState('claims');
  const counts = { claims: claims.length, receipts: receipts.length, math: math.length };
  return (
    <div className="k-evidence-panel">
      <div className="k-evidence-panel-head">
        <div className="k-evidence-panel-tabs">
          {['claims','receipts','math'].map(t => (
            <div key={t} className={`k-evidence-panel-tab${tab === t ? ' is-on' : ''}`}
                 onClick={() => setTab(t)}>
              {t} <span style={{ opacity: 0.65, marginLeft: 4 }}>{counts[t]}</span>
            </div>
          ))}
        </div>
        {runId && <RunBadge id={runId} />}
      </div>
      <div className="k-evidence-panel-body">
        {tab === 'claims' && claims.map((c, i) => (
          <div className="k-evidence-claim" key={i}>
            <div className="t-eyebrow" style={{ marginBottom: 6 }}>Claim {i + 1}</div>
            <div className="k-claim-body">{c.text}</div>
            <div className="k-claim-receipt">
              <Chip variant="info">{c.source}</Chip>
              <span className="t-mono" style={{ fontSize: 11 }}>{c.receipt}</span>
            </div>
          </div>
        ))}
        {tab === 'receipts' && receipts.map((r, i) => (
          <div className="k-receipt-row" key={i}>
            <span>{r.tool}</span>
            <span className="src">{r.scope}</span>
            <span className="id">{r.id}</span>
          </div>
        ))}
        {tab === 'math' && math.map((m, i) => (
          <div className="k-receipt-row" key={i}>
            <span className="t-mono" style={{ fontSize: 12 }}>{m.expr}</span>
            <span></span>
            <span className="t-mono" style={{ fontSize: 12, color: 'var(--ink)' }}>{m.value}</span>
          </div>
        ))}
      </div>
    </div>
  );
};


/* ============================================================
   4 · WORKFLOW TIMELINE — 7 canonical run steps
   ============================================================ */
const WORKFLOW_STEPS = ['Queued', 'Context built', 'Agent ran', 'Verified', 'Approved', 'Executed', 'Outcome tracked'];

const WorkflowTimeline = ({ steps, title = 'Run · workflow timeline', actions }) => {
  // steps: [{ label, meta, time, state: 'done'|'now'|'failed'|'pending' }]
  return (
    <div className="k-workflow">
      <div className="k-workflow-head">
        <h3 className="t-h3" style={{ margin: 0 }}>{title}</h3>
        {actions}
      </div>
      {steps.map((s, i) => {
        const cls = ['k-workflow-step',
          s.state === 'done'   && 'is-done',
          s.state === 'now'    && 'is-now',
          s.state === 'failed' && 'is-failed',
        ].filter(Boolean).join(' ');
        return (
          <div key={i} className={cls}>
            <div className="k-workflow-step-mark" />
            <div className="k-workflow-step-body">
              <div className="k-workflow-step-title">{s.label}</div>
              {s.meta && <div className="k-workflow-step-meta">{s.meta}</div>}
            </div>
            <div className="k-workflow-step-time">{s.time || '—'}</div>
          </div>
        );
      })}
    </div>
  );
};


/* ============================================================
   5 · EXCEPTION CARD — failures · verifier rejections · heartbeat
   ============================================================ */
const ExceptionCard = ({
  kind = 'failed',       // 'failed' | 'warn'
  icon = '!',
  title,
  source, errorCode, when,
  detail,
  onRetry, onOpen,
}) => (
  <div className={`k-exception${kind === 'warn' ? ' is-warn' : ''}`}>
    <div className="k-exception-icon">{icon}</div>
    <div className="k-exception-body">
      <div className="k-exception-title">{title}</div>
      <div className="k-exception-meta">
        {source &&   <><Chip variant={kind === 'warn' ? 'warn' : 'danger'}>{source}</Chip></>}
        {errorCode && <span className="t-mono">{errorCode}</span>}
        {when &&     <span>· {when}</span>}
      </div>
      {detail && <p className="k-exception-detail">{detail}</p>}
    </div>
    <div className="k-exception-actions">
      {onRetry && <Btn size="sm" variant="primary" onClick={onRetry}>Retry</Btn>}
      {onOpen  && <Btn size="sm" onClick={onOpen}>Open</Btn>}
    </div>
  </div>
);


/* ============================================================
   6 · APPROVAL SURFACE — standalone (DecisionCard wraps a variant)
   ============================================================ */
const ApprovalSurface = ({
  mod, runId, title,
  chain,                       // approval steps array
  onReject, onRevise, onApprove,
  primaryKbd = '⌘⏎',
}) => (
  <div className="k-approval-surface" style={{ '--m-mod': mod ? `var(--m-${mod})` : undefined }}>
    <div className="k-approval-surface-head">
      <div>
        <div className="t-eyebrow" style={{ marginBottom: 4 }}>Approval surface · {runId}</div>
        {title && <div className="t-h3">{title}</div>}
      </div>
      <StatusBadge kind="pending">Pending</StatusBadge>
    </div>

    {chain && <ApprovalChain mod={mod} steps={chain} />}

    <div className="k-approval-surface-foot">
      <span className="t-meta">Audited action · requires sign</span>
      <div className="k-approval-surface-buttons">
        {onReject  && <Btn size="sm" variant="reject" onClick={onReject}>Reject</Btn>}
        {onRevise  && <Btn size="sm" onClick={onRevise}>Revise</Btn>}
        {onApprove && <Btn variant="primary" onClick={onApprove} kbd={primaryKbd}>Approve &amp; sign</Btn>}
      </div>
    </div>
  </div>
);


/* ============================================================
   7 · ACTIVITY STREAM — chronological feed
   ============================================================ */
const ActivityStream = ({ title = 'Activity', items = [], onSeeAll }) => (
  <div className="k-activity">
    <div className="k-activity-head">
      <div className="t-h3">{title}</div>
      <Btn size="sm" variant="ghost" onClick={onSeeAll}>See all ›</Btn>
    </div>
    {items.map((it, i) => (
      <div key={i} className="k-activity-item" style={{ '--m-mod': it.mod ? `var(--m-${it.mod})` : undefined }}>
        <div className="k-activity-item-mark">{it.icon || '•'}</div>
        <div className="k-activity-item-body">
          <div className="k-activity-item-title">{it.title}</div>
          {(it.meta || it.runId) && (
            <div className="k-activity-item-meta">
              {it.meta && <span>{it.meta}</span>}
              {it.runId && <span className="t-mono" style={{ color: 'var(--ink-2)' }}>{it.runId}</span>}
            </div>
          )}
        </div>
        <div className="k-activity-item-time">{it.time}</div>
      </div>
    ))}
    {onSeeAll && <div className="k-activity-foot" onClick={onSeeAll}>Open MONITOR for full history ›</div>}
  </div>
);


/* ============================================================
   EXPORT
   ============================================================ */
Object.assign(window.K, {
  DecisionCard, DECISION_FIXTURES,
  RunObject, EvidencePanel, WorkflowTimeline, ExceptionCard,
  ApprovalSurface, ActivityStream,
});