/* ============================================================
   Dinasty Control — AI Eval screen
   Per-set evaluation: confidence score, recommendation, rationale.
   ============================================================ */

function confidence(r) {
  // deterministic from set health
  let c = 0.5 + (r.pf - 1) * 0.18 + (r.winrate - 50) / 240 - r.drawdown / 90;
  if (r.rec === "PAUSE") c = Math.min(c, 0.42);
  return Math.max(0.18, Math.min(0.97, c));
}
function rationale(r) {
  if (r.rec === "PAUSE") {
    if (r.pf < 0.82) return `PF ${r.pf.toFixed(2)} below 0.85 floor — edge lost`;
    if (r.pl < -1600) return `realised −$${Math.abs(r.pl).toLocaleString()} breaches daily stop`;
    return `drawdown ${r.drawdown}% with weak PF — capital protection`;
  }
  if (r.rec === "REDUCE") {
    if (r.lossStreak >= 4) return `loss streak ${r.lossStreak} — scaling lots 0.5×`;
    if (r.drawdown > 9) return `drawdown ${r.drawdown}% elevated — trimming exposure`;
    return `PF ${r.pf.toFixed(2)} thin — entries gated`;
  }
  return `PF ${r.pf.toFixed(2)} · WR ${r.winrate.toFixed(0)}% — within tolerance`;
}

function ConfBar({ v }) {
  const tone = v >= 0.66 ? "pos" : v >= 0.45 ? "warn" : "neg";
  return (
    <div className="winwrap">
      <span className="win-val mono">{(v * 100).toFixed(0)}%</span>
      <span className="win-track" style={{ width: 60 }}><span className={`win-fill win-${tone}`} style={{ width: v * 100 + "%" }}></span></span>
    </div>
  );
}

function AIEval({ rows, overview, alerts, onOpenSet }) {
  const [rec, setRec] = useState(null);

  const evals = useMemo(() => {
    const e = rows.map((r) => ({ ...r, conf: confidence(r), why: rationale(r) }));
    // surface interventions first (pause, then reduce), then by confidence asc
    const order = { PAUSE: 0, REDUCE: 1, NORMAL: 2 };
    return e.sort((a, b) => order[a.rec] - order[b.rec] || a.conf - b.conf);
  }, [rows]);

  const list = useMemo(() => evals.filter((r) => !rec || r.rec === rec), [evals, rec]);
  const avgConf = useMemo(() => evals.reduce((a, r) => a + r.conf, 0) / evals.length, [evals]);
  const c = overview.counts;

  return (
    <div className="screen screen-matrix">
      <div className="screen-head">
        <div className="screen-title">AI Eval</div>
        <div className="screen-sub">Continuous risk evaluation · {c.total} sets scored every 60s</div>
      </div>

      {/* stat tiles */}
      <div className="blotter-sum">
        <div className="bs-item"><span className="bs-lbl">POSTURE</span><span className="bs-val"><AIBadge status={overview.aiStatus} /></span></div>
        <div className="bs-item"><span className="bs-lbl">INTERVENTIONS</span><span className="bs-val mono">{c.pause + c.reduce} <i>today</i></span></div>
        <div className="bs-item"><span className="bs-lbl">AVG CONFIDENCE</span><span className="bs-val mono">{(avgConf * 100).toFixed(0)}%</span></div>
        <div className="bs-item"><span className="bs-lbl">HALTED</span><span className="bs-val mono neg">{c.pause}</span></div>
        <div className="bs-item"><span className="bs-lbl">THROTTLED</span><span className="bs-val mono" style={{ color: "var(--warn)" }}>{c.reduce}</span></div>
        <div className="filter-spacer"></div>
        <div className="filter-grp" style={{ borderRight: "none", paddingRight: 0 }}>
          <button className={`chip chip-pause ${rec === "PAUSE" ? "active" : ""}`} onClick={() => setRec(rec === "PAUSE" ? null : "PAUSE")}>PAUSE</button>
          <button className={`chip chip-reduce ${rec === "REDUCE" ? "active" : ""}`} onClick={() => setRec(rec === "REDUCE" ? null : "REDUCE")}>REDUCE</button>
          <button className={`chip ${rec === "NORMAL" ? "active" : ""}`} onClick={() => setRec(rec === "NORMAL" ? null : "NORMAL")}>NORMAL</button>
        </div>
      </div>

      <div className="tablewrap">
        <table className="matrix">
          <thead>
            <tr>
              <th className="sticky-h sticky-c">SetID</th>
              <th className="sticky-h">Mode</th>
              <th className="sticky-h r">PF</th>
              <th className="sticky-h r">Winrate</th>
              <th className="sticky-h r">Confidence</th>
              <th className="sticky-h">Recommendation</th>
              <th className="sticky-h">AI Rationale</th>
            </tr>
          </thead>
          <tbody>
            {list.map((r, i) => (
              <tr key={r.id} className={`mrow clickable ${i % 2 ? "odd" : "even"} ${r.risky ? "risky" : ""}`} onClick={() => onOpenSet(r.id)}>
                <td className="sticky-c"><span className="setid mono">{r.id}</span></td>
                <td><span className={`mode mode-${r.mode.toLowerCase()}`}>{r.mode}</span></td>
                <td className="r"><span className={`mono pf ${r.pf < 1 ? "pf-bad" : ""}`}>{r.pf.toFixed(2)}</span></td>
                <td className="r mono">{r.winrate.toFixed(1)}%</td>
                <td className="r"><ConfBar v={r.conf} /></td>
                <td><RecPill rec={r.rec} /></td>
                <td className="ai-why">{r.why}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.AIEval = AIEval;