/* global React */
// AURA Research Labs — admin-only. Every figure on this page comes from /api/research/*,
// i.e. from the research database. Nothing here is simulated agent activity.
const { useState: useStateR, useEffect: useEffectR, useCallback: useCallbackR } = React;

const TABS = [
  ["overview", "Executive Overview"], ["agents", "Agent Command Centre"], ["lab", "Experiment Laboratory"],
  ["board", "Strategy Leaderboard"], ["risk", "Risk Laboratory"], ["kb", "Knowledge Base"], ["approvals", "Approval Centre"],
];

const fx = (v, d = 3) => (v == null || Number.isNaN(v) ? "—" : typeof v === "number" ? v.toFixed(d) : String(v));
const when = (s) => (s ? String(s).replace("T", " ").slice(0, 16) : "—");

function DecisionPill({ d }) {
  if (!d) return <span className="pill neutral">pending</span>;
  const cls = d === "REJECTED" ? "sell" : d === "INCONCLUSIVE" ? "neutral" : "buy";
  return <span className={`pill ${cls}`}>{d}</span>;
}

function Stat({ label, value, meta }) {
  return (
    <div className="stat">
      <div className="stat-label">{label}</div>
      <div className="stat-value" style={{ fontSize: 26 }}>{value}</div>
      {meta && <div className="stat-meta"><span>{meta}</span></div>}
    </div>
  );
}

function Panel({ title, right, children, pad = true }) {
  return (
    <div className="panel">
      <div className="panel-header"><div className="panel-title">{title}</div>{right}</div>
      <div style={pad ? { padding: "10px 14px" } : {}}>{children}</div>
    </div>
  );
}

function Overview({ ov, onPause }) {
  if (!ov) return null;
  const outcomes = ov.experiments_by_outcome || {};
  return (
    <>
      <div className="stat-grid" style={{ gridTemplateColumns: "repeat(5, 1fr)" }}>
        <Stat label="Search size (shots)" value={ov.search_size.total} meta={`ledger ${ov.search_size.ledger} · labs ${ov.search_size.labs}`} />
        <Stat label="Research passes" value={outcomes.RESEARCH_PASS || 0} meta="controls included; see leaderboard" />
        <Stat label="Rejected" value={outcomes.REJECTED || 0} meta={`inconclusive ${outcomes.INCONCLUSIVE || 0}`} />
        <Stat label="Pending approvals" value={ov.pending_approvals} meta="owner decisions" />
        <Stat label="Status" value={ov.paused ? "PAUSED" : "ACTIVE"} meta={`last activity ${when(ov.last_activity)}`} />
      </div>
      {!ov.audit_chain_intact && <div className="banner warn">Audit chain BROKEN — history may have been edited.</div>}
      <div className="row" style={{ gap: 14, alignItems: "flex-start" }}>
        <div style={{ flex: 1 }}>
          <Panel title="Research cycles" right={<button className="btn ghost sm" onClick={onPause}>{ov.paused ? "Resume" : "Pause"} research</button>} pad={false}>
            <table className="tbl"><thead><tr><th>Cycle</th><th>Status</th><th>Started</th><th>Finished</th></tr></thead>
              <tbody>{ov.cycles.map((c) => (
                <tr key={c.id}><td className="mono">{c.id}</td><td>{c.status}</td><td>{when(c.started_at)}</td><td>{when(c.finished_at)}</td></tr>))}
                {!ov.cycles.length && <tr><td colSpan="4">No cycles yet.</td></tr>}</tbody></table>
          </Panel>
        </div>
        <div style={{ flex: 1 }}>
          <Panel title="Budget (today)" pad={false}>
            <table className="tbl"><thead><tr><th>Budget</th><th className="num">Remaining</th><th className="num">Daily limit</th></tr></thead>
              <tbody>{ov.budgets.map((b) => (
                <tr key={b.key}><td>{b.key}</td><td className="num mono">{fx(b.remaining_today, 1)}</td><td className="num mono">{b.daily_limit} {b.unit}</td></tr>))}</tbody></table>
          </Panel>
          <Panel title="Pipeline">
            <div className="mono" style={{ fontSize: 12 }}>
              proposals {JSON.stringify(ov.proposals_by_status)}<br />tasks {JSON.stringify(ov.task_queue)}
            </div>
          </Panel>
        </div>
      </div>
    </>
  );
}

function Agents({ agents, handoffs }) {
  return (
    <>
      <Panel title={`Specialist agents · ${agents.length}`} pad={false}>
        <table className="tbl"><thead><tr><th>Role</th><th>Mandate</th><th>Permissions</th><th>Last task</th><th className="num">Done</th><th className="num">Failed</th><th className="num">Handoffs</th></tr></thead>
          <tbody>{agents.map((a) => (
            <tr key={a.code}>
              <td><b className="mono">{a.code}</b> {a.name}{a.uses_llm && <span className="pill neutral" style={{ marginLeft: 6 }}>LLM-capable</span>}</td>
              <td style={{ maxWidth: 360, whiteSpace: "normal", fontSize: 12 }}>{a.mandate}</td>
              <td className="mono" style={{ fontSize: 11, whiteSpace: "normal", maxWidth: 220 }}>{a.permissions.join(", ")}</td>
              <td style={{ fontSize: 12 }}>{a.last_task ? `${a.last_task.kind} · ${a.last_task.status} · ${a.last_task.cycle}` : "never run"}</td>
              <td className="num mono">{a.task_counts.done || 0}</td>
              <td className="num mono">{a.task_counts.failed || 0}</td>
              <td className="num mono">{a.handoffs_sent}/{a.handoffs_received}</td>
            </tr>))}</tbody></table>
      </Panel>
      <Panel title="Recent hand-offs" pad={false}>
        <table className="tbl"><thead><tr><th>At</th><th>From → To</th><th>Subject</th><th>Artifact</th></tr></thead>
          <tbody>{handoffs.map((h) => (
            <tr key={h.id}><td>{when(h.at)}</td><td className="mono">{h.from} → {h.to}</td><td className="mono">{h.subject}</td>
              <td className="mono" style={{ fontSize: 11, whiteSpace: "normal", maxWidth: 520 }}>{JSON.stringify(h.artifact).slice(0, 240)}</td></tr>))}</tbody></table>
      </Panel>
    </>
  );
}

function Lab({ exps }) {
  const [sel, setSel] = useStateR(null);
  const [detail, setDetail] = useStateR(null);
  useEffectR(() => { if (sel) window.api.researchExperiment(sel).then(setDetail).catch(() => setDetail(null)); }, [sel]);
  return (
    <div className="row" style={{ gap: 14, alignItems: "flex-start" }}>
      <div style={{ flex: 1 }}>
        <Panel title={`Experiments · ${exps.length}`} pad={false}>
          <table className="tbl"><thead><tr><th>ID</th><th>Kind</th><th>Title</th><th>Decision</th><th className="num">n</th><th className="num">PF net</th></tr></thead>
            <tbody>{exps.map((e) => (
              <tr key={e.id} onClick={() => setSel(e.id)} style={{ cursor: "pointer", background: sel === e.id ? "var(--bg-2)" : undefined }}>
                <td className="mono">{e.id}</td><td>{e.kind}</td><td style={{ whiteSpace: "normal", maxWidth: 300 }}>{e.title}</td>
                <td><DecisionPill d={e.decision} /></td><td className="num mono">{e.n ?? "—"}</td><td className="num mono">{fx(e.pf_net_live)}</td></tr>))}
              {!exps.length && <tr><td colSpan="6">No experiments yet.</td></tr>}</tbody></table>
        </Panel>
      </div>
      <div style={{ flex: 1.3 }}>
        {detail ? (
          <Panel title={`${detail.id} · ${detail.family} · prereg ${detail.prereg_sha256.slice(0, 12)}`}>
            <div style={{ fontSize: 13, marginBottom: 8 }}><DecisionPill d={detail.decision} /> {detail.decision_reason}</div>
            <table className="tbl"><thead><tr><th>Gate</th><th>Pass</th><th>Detail</th></tr></thead>
              <tbody>{Object.entries(detail.gates || {}).map(([k, v]) => (
                <tr key={k}><td className="mono">{k}</td><td>{v.pass ? "yes" : "NO"}</td><td style={{ whiteSpace: "normal", fontSize: 12 }}>{v.detail}</td></tr>))}</tbody></table>
            <div style={{ fontSize: 12, marginTop: 8 }}>
              <b>Red team:</b> blocking {JSON.stringify(detail.redteam.blocking || [])}; reproduced {String(detail.redteam.checks?.deterministic_rerun)};
              independent implementation agrees {String(detail.redteam.checks?.independent_implementation?.agree)}<br />
              <b>Risk ($300):</b> suitable {String(detail.risk.suitable_for_300)} — min-lot loss ${fx(detail.risk.feasibility_300?.min_lot_loss_usd, 2)},
              equity needed ${fx(detail.risk.feasibility_300?.equity_needed_at_pref_usd, 0)}<br />
              <b>Revisit only if:</b> {detail.revisit_when || "—"}<br />
              <b>Provenance:</b> <span className="mono">{JSON.stringify(detail.result.provenance || {})}</span>
            </div>
          </Panel>
        ) : <Panel title="Select an experiment"><div style={{ fontSize: 12 }}>Pre-registration, gates, red-team, risk and lineage appear here.</div></Panel>}
      </div>
    </div>
  );
}

function Board({ rows }) {
  return (
    <Panel title="Candidates — ranked by stage of evidence, then net PF (controls and reproductions excluded)" pad={false}>
      <table className="tbl"><thead><tr><th>ID</th><th>Hypothesis</th><th>Development</th><th>Independent holdout</th><th>Shadow</th><th>Demo</th><th className="num">PF net (CI)</th><th className="num">t / z req</th></tr></thead>
        <tbody>{rows.map((r) => (
          <tr key={r.id}><td className="mono">{r.id}</td><td style={{ whiteSpace: "normal", maxWidth: 320 }}>{r.title}</td>
            <td><DecisionPill d={r.decision} /></td><td>{r.evidence.independent_holdout}</td><td>{r.evidence.shadow}</td><td>{r.evidence.demo}</td>
            <td className="num mono">{fx(r.pf_net_live)} {r.pf_net_live_ci ? `[${fx(r.pf_net_live_ci[0])}, ${fx(r.pf_net_live_ci[1])}]` : ""}</td>
            <td className="num mono">{fx(r.t_day_clustered, 2)} / {fx(r.z_required, 2)}</td></tr>))}
          {!rows.length && <tr><td colSpan="8">No research candidate has been decided yet. An empty leaderboard is an honest one.</td></tr>}</tbody></table>
    </Panel>
  );
}

function RiskLab() {
  const [eq, setEq] = useStateR(300);
  const [rl, setRl] = useStateR(null);
  useEffectR(() => { window.api.researchRiskLab(eq).then(setRl).catch(() => setRl(null)); }, [eq]);
  if (!rl) return null;
  return (
    <>
      <Panel title="Policy (immutable; changes need owner approval of a new hash)" right={
        <label style={{ fontSize: 12 }}>Equity $ <input type="number" value={eq} min={50} step={50} onChange={(e) => setEq(Number(e.target.value) || 300)}
          style={{ width: 90, background: "var(--bg-2)", color: "var(--text-1)", border: "1px solid var(--line)", borderRadius: 4, padding: "3px 6px" }} /></label>}>
        <div className="mono" style={{ fontSize: 12 }}>
          {Object.entries(rl.limits_usd).map(([k, v]) => `${k} $${v}`).join(" · ")}<br />
          approved hash {rl.policy.approved_hash} · assumptions {JSON.stringify(rl.assumptions)}
        </div>
      </Panel>
      <Panel title="XAUUSD minimum-lot feasibility (0.01 lot = 1 oz)" pad={false}>
        <table className="tbl"><thead><tr><th className="num">Stop (bp)</th><th className="num">Stop ($)</th><th className="num">Min-lot loss incl. costs</th><th>At 0.25%</th><th>At 0.50%</th><th className="num">Equity needed at 0.25%</th><th className="num">Losses to 10% DD halt</th></tr></thead>
          <tbody>{rl.feasibility.map((f) => (
            <tr key={f.stop_bp}><td className="num mono">{f.stop_bp}</td><td className="num mono">{fx(f.stop_price, 2)}</td>
              <td className="num mono">${fx(f.min_lot_loss_usd, 2)}</td><td>{f.feasible_at_pref ? "yes" : "NO"}</td><td>{f.feasible_at_cap ? "yes" : "NO"}</td>
              <td className="num mono">${Number(f.equity_needed_at_pref_usd).toLocaleString()}</td><td className="num mono">{f.consecutive_min_lot_losses_to_dd_halt}</td></tr>))}</tbody></table>
      </Panel>
      <Panel title="Risk of ruin (Monte Carlo)">
        <div style={{ fontSize: 12 }}>P(hit the 10% drawdown halt) = <b>{fx(rl.risk_of_ruin.p_halt, 3)}</b> — {rl.risk_of_ruin.assumptions}; 50% win, 1.5R, 200 trades, 0.25% risk.</div>
      </Panel>
    </>
  );
}

function KB() {
  const [q, setQ] = useStateR("");
  const [kb, setKb] = useStateR(null);
  const load = useCallbackR(() => window.api.researchKnowledge(q).then(setKb).catch(() => setKb(null)), [q]);
  useEffectR(() => { load(); }, []);
  if (!kb) return null;
  return (
    <>
      <Panel title="Mechanism families" pad={false}>
        <table className="tbl"><thead><tr><th>Code</th><th>Family</th><th>Status</th><th className="num">Ledger</th><th>Why</th><th>Reopen requires</th></tr></thead>
          <tbody>{kb.families.map((f) => (
            <tr key={f.code}><td className="mono">{f.code}</td><td>{f.name}</td>
              <td><span className={`pill ${f.status === "exhausted" || f.status === "excluded" ? "sell" : f.status === "untested" ? "buy" : "neutral"}`}>{f.status}</span></td>
              <td className="num mono">{f.ledger_count}</td><td style={{ whiteSpace: "normal", fontSize: 12, maxWidth: 380 }}>{f.why}</td>
              <td style={{ whiteSpace: "normal", fontSize: 12, maxWidth: 260 }}>{f.reopen_requires}</td></tr>))}</tbody></table>
      </Panel>
      <Panel title={`Experiment history · ${kb.ledger.length}`} right={
        <span className="row" style={{ gap: 6 }}><input value={q} onChange={(e) => setQ(e.target.value)} placeholder="semantic search, e.g. liquidity sweep"
          style={{ background: "var(--bg-2)", color: "var(--text-1)", border: "1px solid var(--line)", borderRadius: 4, padding: "4px 8px", width: 260 }} />
          <button className="btn ghost sm" onClick={load}>Search</button></span>} pad={false}>
        <table className="tbl"><thead><tr><th>ID</th><th>Family</th><th>Hypothesis</th><th>Outcome</th><th>R</th></tr></thead>
          <tbody>{kb.ledger.map((r, i) => (
            <tr key={i}><td className="mono">{r.ledger_id}</td><td className="mono">{r.family}</td>
              <td style={{ whiteSpace: "normal", maxWidth: 420, fontSize: 12 }}>{r.hypothesis}</td>
              <td style={{ whiteSpace: "normal", maxWidth: 280, fontSize: 12 }}>{r.outcome}</td><td className="mono" style={{ fontSize: 11 }}>{r.r}</td></tr>))}</tbody></table>
      </Panel>
      <Panel title="Proposals screened" pad={false}>
        <table className="tbl"><thead><tr><th>ID</th><th>Source</th><th>Title</th><th>Status</th><th>Why</th></tr></thead>
          <tbody>{kb.proposals.map((p) => (
            <tr key={p.id}><td className="mono">{p.id}</td><td>{p.source}</td><td style={{ whiteSpace: "normal", maxWidth: 320 }}>{p.title}</td>
              <td>{p.status}</td><td style={{ whiteSpace: "normal", fontSize: 12, maxWidth: 420 }}>{(p.screen.reasons || []).join("; ")}</td></tr>))}</tbody></table>
      </Panel>
    </>
  );
}

function Approvals({ items, reload }) {
  const decide = (id, approve) => {
    const note = window.prompt(`${approve ? "Approve" : "Reject"} ${id} — note for the audit log:`, "") ?? null;
    if (note === null) return;
    window.api.researchDecide(id, approve, note).then(reload);
  };
  return (
    <Panel title="Human Approval Centre — agents request, only the owner decides" pad={false}>
      <table className="tbl"><thead><tr><th>ID</th><th>Kind</th><th>Subject</th><th>Requested by</th><th>Status</th><th></th></tr></thead>
        <tbody>{items.map((a) => (
          <tr key={a.id}><td className="mono">{a.id}</td><td>{a.kind}</td><td style={{ whiteSpace: "normal", maxWidth: 420 }}>{a.subject}</td>
            <td className="mono">{a.requested_by}</td><td>{a.status}{a.note ? ` — ${a.note}` : ""}</td>
            <td>{a.status === "pending" && <span className="row" style={{ gap: 6 }}>
              <button className="btn ghost sm" onClick={() => decide(a.id, true)}>Approve</button>
              <button className="btn ghost sm" onClick={() => decide(a.id, false)}>Reject</button></span>}</td></tr>))}
          {!items.length && <tr><td colSpan="6">No requests.</td></tr>}</tbody></table>
    </Panel>
  );
}

function ResearchLabs() {
  const [tab, setTab] = useStateR("overview");
  const [data, setData] = useStateR({ ov: null, agents: [], handoffs: [], exps: [], board: [], approvals: [] });
  const [error, setError] = useStateR(null);
  const load = useCallbackR(() => {
    Promise.all([window.api.researchOverview(), window.api.researchAgents(), window.api.researchHandoffs(),
      window.api.researchExperiments(), window.api.researchLeaderboard(), window.api.researchApprovals()])
      .then(([ov, agents, handoffs, exps, board, approvals]) => { setData({ ov, agents, handoffs, exps, board, approvals }); setError(null); })
      .catch((e) => setError(String(e)));
  }, []);
  useEffectR(() => { load(); const t = setInterval(load, 30000); return () => clearInterval(t); }, [load]);
  const pause = () => window.api.researchControl(!data.ov.paused).then(load);
  return (
    <>
      <div className="page-header">
        <div>
          <h1 className="page-title">AURA Research Labs</h1>
          <div className="page-subtitle">Research only — this area cannot place, change or close a trade.</div>
        </div>
        <div style={{ marginLeft: "auto" }} className="row"><button className="btn ghost" onClick={load}>Refresh</button></div>
      </div>
      <div className="page-content col">
        {error && <div className="banner warn">{error}</div>}
        <div className="tabs">{TABS.map(([k, label]) => (
          <button key={k} className={`tab ${tab === k ? "active" : ""}`} onClick={() => setTab(k)}>{label}</button>))}</div>
        {tab === "overview" && <Overview ov={data.ov} onPause={pause} />}
        {tab === "agents" && <Agents agents={data.agents} handoffs={data.handoffs} />}
        {tab === "lab" && <Lab exps={data.exps} />}
        {tab === "board" && <Board rows={data.board} />}
        {tab === "risk" && <RiskLab />}
        {tab === "kb" && <KB />}
        {tab === "approvals" && <Approvals items={data.approvals} reload={load} />}
      </div>
    </>
  );
}

window.ResearchLabs = ResearchLabs;