/* Bankroll screen — the two betting leagues with equity curves. */

function BankrollScreen({ onOpenModel }) {
  const { Card, Eyebrow, Stat, Sparkline, ModelChip, Badge, RankBadge } = window.TheOracleLeagueDesignSystem_92fa71;
  const { STANDINGS, MODELS } = window;
  const byId = Object.fromEntries(MODELS.map((m) => [m.id, m]));
  const SuspendedStamp = window.SuspendedStamp;
  const SM = window.SUSPENDED_MODELS || new Set();
  const [league, setLeague] = React.useState("consensus");

  const val = (r) => league === "consensus" ? r.consensus : r.book;
  const ranked = [...STANDINGS].sort((a, b) => val(b) - val(a));
  const top = ranked[0];
  const totalPnl = STANDINGS.reduce((s, r) => s + (val(r) - 100), 0);
  const profitable = STANDINGS.filter((r) => val(r) >= 100).length;

  const curve = (r) => {
    const sparkMap = league === "consensus" ? window.SPARKLINES_CON : window.SPARKLINES_BOOK;
    const real = sparkMap && sparkMap[r.id];
    if (real && real.length > 1) return real;
    const seed = r.rank * 7; const base = val(r);
    return [100, 100 + (seed % 9) - 4, 100 + (seed % 15) - 7, 100 + (seed % 11) - 5, (base + 100) / 2, base];
  };

  return (
    <div style={{ padding: "28px 32px", maxWidth: 900 }}>
      <div style={{ display: "flex", flexDirection: "column", gap: 14, marginBottom: 24 }}>
        <Eyebrow tone="gold">Betting leagues</Eyebrow>
        <h1 style={{ fontFamily: "var(--font-display)", fontSize: 40, fontWeight: 400, letterSpacing: "-0.02em", color: "var(--text-primary)", lineHeight: 1.12, margin: 0 }}>
          Every model starts with $100.
        </h1>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, color: "var(--text-secondary)", maxWidth: 600, lineHeight: 1.55, margin: 0 }}>
          Two parallel ledgers. In one, models bet into the field's own consensus odds. In the other, they bet against real bookmaker lines — where beating the market actually means something.
        </p>
      </div>

      <div style={{ display: "flex", gap: 8, marginBottom: 20 }}>
        {[["consensus", "Vs. Consensus"], ["book", "Vs. Bookmaker"]].map(([id, label]) => {
          const on = league === id;
          return (
            <button key={id} onClick={() => setLeague(id)} style={{
              padding: "9px 18px", borderRadius: "var(--radius-md)", cursor: "pointer",
              fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 600,
              border: `1px solid ${on ? "transparent" : "var(--border)"}`,
              background: on ? "var(--accent-soft)" : "transparent",
              color: on ? "var(--gold-200)" : "var(--text-secondary)",
            }}>{label}</button>
          );
        })}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginBottom: 22 }}>
        <Card padding={18}>
          <Stat label="League leader" value={`$${val(top).toFixed(2)}`} delta={`+${(val(top)-100).toFixed(2)}`} size="md" />
          <div style={{ marginTop: 10 }}><ModelChip name={byId[top.id].name} sublabel={byId[top.id].vendor} color={byId[top.id].color} size={26} /></div>
        </Card>
        <Card padding={18}>
          <Stat label="Field net P&L" value={`${totalPnl >= 0 ? "+" : "−"}$${Math.abs(totalPnl).toFixed(2)}`} trend={totalPnl >= 0 ? "up" : "down"} size="md" />
          <div style={{ marginTop: 10, fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-muted)" }}>across 8 ledgers</div>
        </Card>
        <Card padding={18}>
          <Stat label="In profit" value={`${profitable}/8`} size="md" />
          <div style={{ marginTop: 10, fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-muted)" }}>above the $100 line</div>
        </Card>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {ranked.map((r, i) => {
          const m = byId[r.id]; const pnl = val(r) - 100;
          return (
            <div key={r.id} onClick={() => onOpenModel(r.id)} style={{
              display: "grid", gridTemplateColumns: "34px 1fr auto auto", alignItems: "center", gap: 16,
              padding: "12px 16px", background: "var(--bg-surface)", border: "1px solid var(--border)",
              borderRadius: "var(--radius-md)", cursor: "pointer", transition: "border-color var(--dur)",
            }}
            onMouseEnter={(e) => e.currentTarget.style.borderColor = "var(--border-strong)"}
            onMouseLeave={(e) => e.currentTarget.style.borderColor = "var(--border)"}>
              <RankBadge rank={i + 1} delta={league === "consensus" ? r.dCon : r.dBook} size={26} />
              <div style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 0 }}>
                <ModelChip name={m.name} sublabel={m.vendor} color={m.color} size={30} />
                {SM.has(r.id) && <SuspendedStamp size="sm" />}
              </div>
              <Sparkline data={curve(r)} baseline={100} width={120} height={32} />
              <div style={{ textAlign: "right", minWidth: 110 }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 16, fontWeight: 700, color: "var(--text-primary)" }}>${val(r).toFixed(2)}</div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 600, color: pnl >= 0 ? "var(--positive)" : "var(--negative)" }}>{pnl >= 0 ? "+" : "−"}${Math.abs(pnl).toFixed(2)}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.BankrollScreen = BankrollScreen;