/* Advancement screen — each remaining team's title-win probability, restaked every knockout round. */

function AdvancementScreen({ onOpenModel }) {
  const { Card, Eyebrow, Stat, ModelChip } = window.TheOracleLeagueDesignSystem_92fa71;
  const ADVANCEMENT = window.ADVANCEMENT || { rounds: [] };
  const mobile = window.useMobile();
  const rounds = ADVANCEMENT.rounds;
  const [roundKey, setRoundKey] = React.useState(null);
  const [openTeam, setOpenTeam] = React.useState(null);

  React.useEffect(() => {
    if (rounds.length && !rounds.some((r) => r.key === roundKey)) {
      setRoundKey(rounds[rounds.length - 1].key);
    }
  }, [rounds]); // eslint-disable-line

  const round = rounds.find((r) => r.key === roundKey);

  return (
    <div style={{ padding: mobile ? "16px 16px" : "28px 32px", maxWidth: 980 }}>
      <div style={{ display: "flex", flexDirection: "column", gap: 14, marginBottom: 24 }}>
        <Eyebrow tone="gold">{window.MATCHDAY.label} · title odds</Eyebrow>
        <h1 style={{ fontFamily: "var(--font-display)", fontSize: mobile ? 28 : 44, fontWeight: 400, letterSpacing: "-0.02em", color: "var(--text-primary)", lineHeight: 1.12, margin: 0, maxWidth: mobile ? "100%" : 700 }}>
          Who wins it all?
        </h1>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, color: "var(--text-secondary)", maxWidth: mobile ? "100%" : 620, lineHeight: 1.55, margin: 0 }}>
          Each model's probability that a given team lifts the trophy from here — restaked every round as the bracket narrows. Tap a team to see every model's call.
        </p>
      </div>

      {rounds.length === 0 ? (
        <Card padding={28}>
          <span style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-secondary)", lineHeight: 1.6 }}>
            No knockout rounds yet. Once the bracket is set, each model stakes a probability on every
            team still alive winning it all — check back after the Round of 16 (or 32) matchups land.
          </span>
        </Card>
      ) : (
        <>
          <div style={{ display: "flex", gap: 8, marginBottom: 18, flexWrap: "wrap" }}>
            {rounds.map((r) => {
              const on = r.key === roundKey;
              return (
                <button key={r.key} onClick={() => { setRoundKey(r.key); setOpenTeam(null); }}
                  style={{
                    padding: "8px 14px", borderRadius: "var(--radius-md)", cursor: "pointer",
                    border: `1px solid ${on ? "transparent" : "var(--border)"}`,
                    background: on ? "var(--accent-soft)" : "transparent",
                    fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 600,
                    color: on ? "var(--gold-200)" : "var(--text-secondary)",
                    transition: "background var(--dur)",
                  }}>
                  {r.label}
                </button>
              );
            })}
          </div>

          <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr 1fr" : "repeat(auto-fill, minmax(190px, 1fr))", gap: 12 }}>
            {round && round.teams.map((t) => {
              const open = openTeam === t.team;
              return (
                <Card key={t.team} padding={16} style={{ cursor: "pointer" }}
                  onClick={() => setOpenTeam(open ? null : t.team)}>
                  <span style={{ fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 700, color: "var(--text-primary)", display: "block", marginBottom: 8 }}>
                    {t.team}
                  </span>
                  <Stat
                    value={`${(t.consensus * 100).toFixed(1)}%`}
                    delta={t.hasPrev ? `${t.delta >= 0 ? "+" : ""}${t.delta.toFixed(1)}pt` : null}
                    size="md"
                  />
                  {!t.hasPrev && (
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--text-muted)" }}>First read this round</span>
                  )}
                  {open && (
                    <div style={{ marginTop: 12, paddingTop: 12, borderTop: "1px solid var(--border)", display: "flex", flexDirection: "column", gap: 9 }}>
                      {t.rows.map((m) => (
                        <div key={m.id} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}
                          onClick={(e) => { e.stopPropagation(); onOpenModel(m.id); }}>
                          <ModelChip name={m.name} color={m.color} size={22} onClick={() => {}} />
                          <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 700, color: "var(--text-primary)", whiteSpace: "nowrap" }}>
                            {(m.winProb * 100).toFixed(1)}%
                            {m.delta != null && (
                              <span style={{ marginLeft: 5, fontSize: 10.5, color: m.delta >= 0 ? "var(--positive)" : "var(--negative)" }}>
                                {m.delta >= 0 ? "▲" : "▼"}{Math.abs(m.delta).toFixed(1)}
                              </span>
                            )}
                          </span>
                        </div>
                      ))}
                      {t.showStart && (
                        <span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--text-muted)", marginTop: 3, paddingTop: 8, borderTop: "1px dashed var(--border)" }}>
                          Started at {(t.startConsensus * 100).toFixed(1)}%
                        </span>
                      )}
                    </div>
                  )}
                </Card>
              );
            })}
          </div>
        </>
      )}
    </div>
  );
}

window.AdvancementScreen = AdvancementScreen;