/* Model detail — slide-in drawer with a model's full record. */

function ModelDrawer({ modelId, onClose }) {
  const { Stat, Eyebrow, Badge, Sparkline, ProbBar, Button } = window.TheOracleLeagueDesignSystem_92fa71;
  const { MODELS, STANDINGS, MATCHDAY } = window;
  const Icon = window.Icon;
  const SuspendedStamp = window.SuspendedStamp;
  const isSuspended = window.SUSPENDED_MODELS && window.SUSPENDED_MODELS.has(modelId);
  if (!modelId) return null;
  const m = MODELS.find((x) => x.id === modelId);
  const row = STANDINGS.find((x) => x.id === modelId);
  const seed = row.rank * 7;
  const _realCon = window.SPARKLINES_CON && window.SPARKLINES_CON[modelId];
  const consensusCurve = (_realCon && _realCon.length > 1)
    ? _realCon
    : [100, 100 + (seed % 9) - 4, 100 + (seed % 15) - 7, 100 + (seed % 11) - 5, (row.consensus + 100) / 2, row.consensus];

  const recent = MATCHDAY.fixtures
    .filter((f) => f.status === "final")
    .map((f) => ({ f, p: f.picks.find((p) => p.id === modelId) }))
    .filter((x) => x.p);

  return (
    <>
      <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(4,6,12,0.6)", backdropFilter: "blur(2px)", zIndex: 40, animation: "olFade 160ms ease-out" }} />
      <aside style={{
        position: "fixed", top: 0, right: 0, bottom: 0, width: 440, maxWidth: "92vw", zIndex: 41,
        background: "var(--bg-surface)", borderLeft: "1px solid var(--border-strong)",
        boxShadow: "var(--shadow-pop)", overflowY: "auto", animation: "olSlide 240ms var(--ease-out)",
      }}>
        <div style={{ padding: "22px 24px", borderBottom: "1px solid var(--border)", position: "sticky", top: 0, background: "var(--bg-surface)", zIndex: 2 }}>
          <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 13 }}>
              <span style={{ width: 46, height: 46, borderRadius: "var(--radius-pill)", flex: "none",
                background: `color-mix(in srgb, ${m.color} 22%, var(--ink-700))`, color: m.color,
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 18, border: `2px solid ${m.color}` }}>
                {m.name.split(/\s+/).slice(0, 2).map((w) => w[0]).join("")}
              </span>
              <div>
                <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
                  <span style={{ fontFamily: "var(--font-sans)", fontSize: 19, fontWeight: 700, color: "var(--text-primary)" }}>{m.name}</span>
                  {isSuspended && <SuspendedStamp />}
                </div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-muted)" }}>{m.vendor}</div>
              </div>
            </div>
            <button onClick={onClose} style={{ background: "transparent", border: "none", cursor: "pointer", padding: 4, color: "var(--text-muted)" }}>
              <Icon name="x" size={20} />
            </button>
          </div>
          <div style={{ display: "flex", gap: 8, marginTop: 14 }}>
            <Badge tone="gold" variant={row.rank === 1 ? "solid" : "soft"}>RANK #{row.rank}</Badge>
            <Badge tone="neutral">{row.points} pts</Badge>
            <Badge tone={row.consensus >= 100 ? "positive" : "negative"}>${row.consensus.toFixed(0)} consensus</Badge>
          </div>
        </div>

        <div style={{ padding: "20px 24px", display: "flex", flexDirection: "column", gap: 22 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
            <Stat label="Fun points" value={row.points} size="md" />
            <Stat label="Mean Brier" value={row.brier.toFixed(3)} size="md" />
            <Stat label="Called" value={row.called} size="sm" />
            <Stat label="Exact scores" value={row.exact} size="sm" />
          </div>

          <div>
            <Eyebrow rule>Consensus bankroll</Eyebrow>
            <div style={{ marginTop: 12, display: "flex", alignItems: "center", gap: 16 }}>
              <Sparkline data={consensusCurve} baseline={100} width={200} height={56} />
              <div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 22, fontWeight: 700, color: row.consensus >= 100 ? "var(--positive)" : "var(--negative)" }}>${row.consensus.toFixed(2)}</div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-muted)" }}>from $100 stake</div>
              </div>
            </div>
          </div>

          <div>
            <Eyebrow rule>Recent calls</Eyebrow>
            <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 9 }}>
              {recent.map(({ f, p }) => (
                <div key={f.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: "var(--radius-sm)" }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, color: "var(--text-secondary)", flex: 1 }}>{f.home.code} {f.homeScore}–{f.awayScore} {f.away.code}</span>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-muted)" }}>called {p.score}</span>
                  <Icon name={p.hit ? "check" : "x"} size={15} color={p.hit ? "var(--positive)" : "var(--negative)"} />
                </div>
              ))}
            </div>
          </div>

          <Button variant="secondary" iconRight={<Icon name="arrowUpRight" size={15} />}>View full prediction log</Button>
        </div>
      </aside>
    </>
  );
}

window.ModelDrawer = ModelDrawer;