/* Standings — division tables + playoff seeding sidebar. */

// True when a team is mathematically eliminated from all playoff contention.
function isElim(abbr) {
  const t = window.TEAMS[abbr];
  if (!t) return false;
  const L = window.LEAGUE;
  const played = t.record[0] + t.record[1] + (t.record[2] || 0);
  const maxWins = t.record[0] + Math.max(0, L.gamesPerSeason - played);
  const peers = Object.values(window.TEAMS).filter(p => p.conf === t.conf && p.abbr !== abbr);
  return peers.filter(p => p.record[0] > maxWins).length >= L.playoffSeeds;
}

// Returns "***" (clinched top seed), "**" (clinched division), "*" (clinched playoff), or null.
function clinchMark(abbr) {
  const t = window.TEAMS[abbr];
  if (!t) return null;
  const L = window.LEAGUE;
  const conf = t.conf;
  const myWins = t.record[0];
  const rem = (team) => Math.max(0, L.gamesPerSeason - (team.record[0] + team.record[1] + (team.record[2] || 0)));
  const confTeams = Object.values(window.TEAMS).filter(o => o.conf === conf && o.abbr !== abbr);
  const divRivals = confTeams.filter(o => o.div === t.div);
  if (confTeams.every(o => myWins > o.record[0] + rem(o))) return "***";
  if (divRivals.length && divRivals.every(r => myWins > r.record[0] + rem(r))) return "**";
  if (confTeams.filter(o => o.record[0] + rem(o) > myWins).length < L.playoffSeeds) return "*";
  return null;
}

function SeedDot({ kind, seed }) {
  const label = kind === "division" ? "DIV" : "WC";
  const bg = kind === "division" ? "var(--accent)" : "color-mix(in oklch, var(--accent) 55%, var(--text-faint))";
  return (
    <span className="seed-pill" style={{ background: bg }}>
      {seed}
      <span className="seed-kind">{label}</span>
    </span>
  );
}

function DivisionTable({ conf, div, teams, fav, seeds }) {
  // Determine first-out team in this conference for rank coloring
  const firstOutAbbr = (() => {
    const outTeams = Object.entries(seeds.byTeam)
      .filter(([, s]) => s.kind === "out" && s.conf === conf)
      .map(([abbr]) => window.TEAMS[abbr])
      .filter(Boolean)
      .sort((a, b) => {
        const aP = a.record[0] / Math.max(1, a.record[0] + a.record[1]);
        const bP = b.record[0] / Math.max(1, b.record[0] + b.record[1]);
        return bP - aP || b.record[0] - a.record[0];
      });
    return outTeams.length > 0 ? outTeams[0].abbr : null;
  })();

  return (
    <div className="div-table">
      <div className="div-table-head">
        <h3>{conf} {div}</h3>
        <span className="mono">{teams.length} teams</span>
      </div>
      <div className="div-table-rows">
        {teams.map((t, i) => {
          const s = seeds.byTeam[t.abbr];
          const isFav = t.abbr === fav;
          const inPlayoffs = s && s.seed && s.seed <= window.LEAGUE.playoffSeeds;
          const strength = window.TEAM_STRENGTHS[t.abbr]?.strengthScore || 0.5;
          const tb = window.TIEBREAKER_REASONS[t.abbr];
          const isFirstOut = t.abbr === firstOutAbbr;

          let rankClass = "rank mono";
          let rankStyle = {};
          if (i === 0) {
            rankClass += " rank-div-leader";
          } else if (s?.kind === "wildcard") {
            rankClass += " rank-wc";
          } else if (isFirstOut) {
            rankClass += " rank-first-out";
          }

          return (
            <div className={"div-row" + (isFav ? " is-fav" : "")} key={t.abbr}
                 style={{ "--enter-delay": `${i * 30}ms` }}>
              <div className={rankClass} style={rankStyle}>{i + 1}</div>
              <div className="swatch" style={{ background: t.color }}></div>
              <div className="name">
                <span className="city">{t.city}</span>
                <span className="team-name">{t.name}</span>
                {isElim(t.abbr) && <span className="elim-tag">(e)</span>}
                {clinchMark(t.abbr) && <span className="clinch-mark">{clinchMark(t.abbr)}</span>}
              </div>
              <div className="strength-cell">
                <div className="strength-track"><div className="strength-fill" style={{ width: `${strength * 100}%` }}></div></div>
                <span className="mono">{(strength * 100).toFixed(0)}</span>
              </div>
              <div className="seed-cell">
                {isFav && <span className="you-tag">You</span>}
                {s?.gamesBehind != null && (
                  <span className="gb mono">{s.gamesBehind} GB</span>
                )}
              </div>
              <div className="record mono">
                {t.record[0]}-{t.record[1]}{t.record[2] > 0 ? `-${t.record[2]}` : ""}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function ConfBracket({ conf, seeds, fav }) {
  // First three teams out of the wild-card race — same conference, no seed,
  // sorted by win pct descending (computeStandings already orders rest by pct).
  const teamsOut = Object.entries(seeds.byTeam)
    .filter(([, s]) => s.kind === "out" && s.conf === conf)
    .map(([abbr, s]) => ({ abbr, ...s, team: window.TEAMS[abbr] }))
    .sort((a, b) => {
      const aP = a.team.record[0] / Math.max(1, a.team.record[0] + a.team.record[1]);
      const bP = b.team.record[0] / Math.max(1, b.team.record[0] + b.team.record[1]);
      return bP - aP || b.team.record[0] - a.team.record[0];
    })
    .slice(0, 3);

  return (
    <div className="bracket-card">
      <div className="bracket-head">
        <h4>{conf} Playoff Picture</h4>
        <span className="mono">{window.LEAGUE.playoffSeeds} of {Object.values(window.TEAMS).filter(t => t.conf === conf).length}</span>
      </div>
      <ol className="bracket-list">
        {seeds[conf].map((s) => {
          const t = window.TEAMS[s.team];
          const isFav = s.team === fav;
          return (
            <li key={s.team} className={"bracket-row" + (isFav ? " is-fav" : "")
                                       + (s.kind === "division" ? " div-winner" : "")}>
              <span className={"bracket-seed mono" + (s.kind === "wildcard" ? " seed-wc" : "")}>{s.seed}</span>
              <span className="bracket-swatch" style={{ background: t.color }}></span>
              <span className="bracket-name">
                <span className="city">{t.city}</span> <span className="team-name">{t.name}</span>
                {isElim(s.team) && <span className="elim-tag">(e)</span>}
                {clinchMark(s.team) && <span className="clinch-mark">{clinchMark(s.team)}</span>}
              </span>
              <span className="bracket-record mono">{t.record[0]}-{t.record[1]}{t.record[2] > 0 ? `-${t.record[2]}` : ""}</span>
              <span className={"bracket-kind" + (s.kind === "division" ? " is-div" : " is-wc")}>
                {s.kind === "division" ? "Division" : "Wild card"}
              </span>
            </li>
          );
        })}
        <li className="bracket-divider">
          <span className="line"></span>
          <span className="cutoff mono">playoff cutoff</span>
          <span className="line"></span>
        </li>
        {teamsOut.length > 0 ? teamsOut.map((o, i) => {
          const isFav = o.abbr === fav;
          return (
            <li key={o.abbr}
                className={"bracket-row bubble-row" + (i === 0 ? " first-out" : "") + (isFav ? " is-fav" : "")}>
              <span className="bracket-seed mono">{8 + i}</span>
              <span className="bracket-swatch" style={{ background: o.team.color }}></span>
              <span className="bracket-name">
                <span className="city">{o.team.city}</span> <span className="team-name">{o.team.name}</span>
                {isElim(o.abbr) && <span className="elim-tag">(e)</span>}
              </span>
              <span className="bracket-record mono">
                {o.team.record[0]}-{o.team.record[1]}{o.team.record[2] > 0 ? `-${o.team.record[2]}` : ""}
              </span>
              <span className="bracket-kind">
                {i === 0 ? "First out" : i === 1 ? "Second out" : "Third out"}
              </span>
            </li>
          );
        }) : (
          <li className="bracket-row bubble-row">
            <span className="bracket-seed mono">8</span>
            <span className="bracket-swatch muted"></span>
            <span className="bracket-name muted">No teams currently out</span>
            <span className="bracket-record mono">—</span>
          </li>
        )}
      </ol>
    </div>
  );
}

function SimulateResults({ fav, currentSeeds }) {
  const [picks, setPicks] = React.useState({});
  const games = (window.SCHEDULE || []).filter(g => !g.completed);

  const simTeams = React.useMemo(() => {
    const t = JSON.parse(JSON.stringify(window.TEAMS));
    for (const g of games) {
      const pick = picks[g.id];
      if (!pick) continue;
      if (pick === "tie") {
        t[g.home].record[2] = (t[g.home].record[2] || 0) + 1;
        t[g.away].record[2] = (t[g.away].record[2] || 0) + 1;
      } else if (pick === "home") {
        t[g.home].record[0]++;
        t[g.away].record[1]++;
      } else {
        t[g.away].record[0]++;
        t[g.home].record[1]++;
      }
    }
    return t;
  }, [picks]);

  const simStandings = React.useMemo(
    () => window.computeStandingsFor(simTeams),
    [simTeams]
  );

  const picksCount = Object.values(picks).filter(Boolean).length;
  const favTeam = window.TEAMS[fav];
  const otherConf = window.LEAGUE.conferences.find(c => c !== favTeam.conf) || favTeam.conf;
  const tiesAllowed = window.LEAGUE.tiesAllowed;

  const toggle = (gameId, side) =>
    setPicks(p => ({ ...p, [gameId]: p[gameId] === side ? null : side }));

  return (
    <div className="sim-panel">
      <div className="sim-header">
        <div>
          <h3 style={{ margin: 0 }}>Simulate Results</h3>
          <span className="sim-meta mono">
            {picksCount === 0 ? `${games.length} games to pick` : `${picksCount} of ${games.length} picked`}
          </span>
        </div>
        <button className="btn ghost" style={{ fontSize: 12 }} onClick={() => setPicks({})}>Reset</button>
      </div>

      <div className="sim-body">
        {/* ── Game picker ── */}
        <div className="sim-games">
          <div className="sim-section-label">Pick winners</div>
          {games.length === 0 && (
            <div className="sim-empty">No upcoming games this week.</div>
          )}
          {games.map(g => {
            const pick = picks[g.id];
            const ht = window.TEAMS[g.home];
            const at = window.TEAMS[g.away];
            return (
              <div className="sim-game" key={g.id}>
                <button
                  className={"sim-team-btn" + (pick === "away" ? " sim-picked" : pick === "home" ? " sim-lost" : pick === "tie" ? " sim-tied" : "")}
                  onClick={() => toggle(g.id, "away")}>
                  <span className="sim-dot" style={{ background: at.color }}></span>
                  <span className="sim-abbr">{g.away}</span>
                  <span className="sim-rec mono">{at.record[0]}-{at.record[1]}{at.record[2] > 0 ? `-${at.record[2]}` : ""}</span>
                </button>
                <span className="sim-at">@</span>
                <button
                  className={"sim-team-btn" + (pick === "home" ? " sim-picked" : pick === "away" ? " sim-lost" : pick === "tie" ? " sim-tied" : "")}
                  onClick={() => toggle(g.id, "home")}>
                  <span className="sim-dot" style={{ background: ht.color }}></span>
                  <span className="sim-abbr">{g.home}</span>
                  <span className="sim-rec mono">{ht.record[0]}-{ht.record[1]}{ht.record[2] > 0 ? `-${ht.record[2]}` : ""}</span>
                </button>
                {tiesAllowed && (
                  <button
                    className={"sim-tie-btn" + (pick === "tie" ? " sim-picked" : "")}
                    onClick={() => toggle(g.id, "tie")}>T</button>
                )}
              </div>
            );
          })}
        </div>

        {/* ── Projected standings ── */}
        <div className="sim-standings">
          <div className="sim-section-label">
            Projected playoff picture
            <span style={{ color: "var(--text-faint)", fontWeight: 400 }}> · pick games to see changes</span>
          </div>
          {[favTeam.conf, otherConf].map(conf => (
            <div key={conf} className="sim-conf-block">
              <div className="sim-conf-title">{conf}</div>
              <ol className="sim-seed-list">
                {simStandings[conf].map(s => {
                  const simT = simTeams[s.team];
                  const baseT = window.TEAMS[s.team];
                  const isFav = s.team === fav;
                  const currEntry = currentSeeds.byTeam[s.team];
                  const seedDelta = currEntry?.seed != null ? s.seed - currEntry.seed : 0;
                  const winsAdded = simT.record[0] - baseT.record[0];
                  return (
                    <li key={s.team}
                        className={"sim-seed-row" + (isFav ? " is-fav" : "") + (s.kind === "division" ? " div-winner" : s.seed ? " wc-team" : " out-team")}>
                      <span className="sim-seed mono">{s.seed ?? "—"}</span>
                      <span className="sim-swatch" style={{ background: baseT.color }}></span>
                      <span className="sim-team-name">{s.team}</span>
                      <span className="sim-record mono">
                        {simT.record[0]}-{simT.record[1]}{(simT.record[2] || 0) > 0 ? `-${simT.record[2]}` : ""}
                        {winsAdded > 0 && <span className="sim-win-added">+{winsAdded}</span>}
                        {((simT.record[2] || 0) - (baseT.record[2] || 0)) > 0 && <span className="sim-win-added">+{(simT.record[2] || 0) - (baseT.record[2] || 0)}T</span>}
                      </span>
                      {seedDelta !== 0 && (
                        <span className={"sim-seed-delta mono" + (seedDelta < 0 ? " moved-up" : " moved-down")}>
                          {seedDelta < 0 ? `▲${-seedDelta}` : `▼${seedDelta}`}
                        </span>
                      )}
                    </li>
                  );
                })}
              </ol>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Standings({ fav }) {
  const seeds = window.computeStandings();
  const order = window.LEAGUE.divisionOrder;
  const favTeam = window.TEAMS[fav];
  const favSeed = seeds.byTeam[fav];
  const otherConf = window.LEAGUE.conferences.find(c => c !== favTeam.conf) || favTeam.conf;
  const [simOpen, setSimOpen] = React.useState(false);

  return (
    <>
      <div className="page-head">
        <div>
          <div className="eyebrow">{window.WEEK_META.label} · {window.SEASON_LABEL}</div>
          <h1>Standings &amp; seeding</h1>
          <div className="sub">
            {favSeed && favSeed.seed
              ? <>The {favTeam.name} sit at the <strong className="mono">#{favSeed.seed}</strong> seed — currently in as a {favSeed.kind === "division" ? "division leader" : "wild card"}.</>
              : <>The {favTeam.name} are on the outside looking in by {favSeed?.gamesBehind} game{favSeed?.gamesBehind === 1 ? "" : "s"}.</>}
          </div>
        </div>
        <button className="btn ghost" style={{ flexShrink: 0 }} onClick={() => setSimOpen(v => !v)}>
          {simOpen
            ? <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: 6, verticalAlign: "middle" }}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            : <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: 6, verticalAlign: "middle" }}><polygon points="5 3 19 12 5 21 5 3"/></svg>
          }
          {simOpen ? "Hide simulator" : "Simulate Results"}
        </button>
      </div>

      {simOpen && <SimulateResults fav={fav} currentSeeds={seeds} />}

      {/* Playoff picture — AFC & NFC side by side */}
      <div className="brackets-row">
        <ConfBracket conf={favTeam.conf} seeds={seeds} fav={fav} />
        <ConfBracket conf={otherConf} seeds={seeds} fav={fav} />
      </div>

      {/* Division tables — each conference, all divisions in a row */}
      {window.LEAGUE.conferences.map((conf, ci) => (
        <div key={conf} className="conf-block"
             style={{ "--section-delay": `${ci * 80}ms` }}>
          <h2 className="conf-title">{conf}</h2>
          <div className="div-tables-row">
            {order.map(div => (
              <DivisionTable
                key={div}
                conf={conf}
                div={div}
                teams={seeds.divisions[conf][div]}
                fav={fav}
                seeds={seeds}
              />
            ))}
          </div>
        </div>
      ))}

      {/* Clinch / elimination legend */}
      <div className="clinch-legend">
        <span className="clinch-legend-item"><span className="clinch-mark">*</span> Clinched playoff spot</span>
        <span className="clinch-legend-item"><span className="clinch-mark">**</span> Clinched division</span>
        <span className="clinch-legend-item"><span className="clinch-mark">***</span> Clinched #1 seed</span>
        <span className="clinch-legend-item"><span className="elim-tag">(e)</span> Eliminated</span>
      </div>

      {/* Tiebreakers — resolved list + DIV & WC procedures side by side */}
      <div className="tb-panel">
        <div className="bracket-head">
          <h4>Tiebreakers resolved</h4>
          <span className="mono">{Object.entries(window.TIEBREAKER_REASONS).reduce((n, [, tb]) => {
            const by = {};
            for (const l of tb.over) { const r = tb.reasons?.[l] ?? tb.reason; (by[r] = by[r] || []).push(l); }
            return n + Object.keys(by).length;
          }, 0)}</span>
        </div>
        <div className="tb-list">
          {Object.entries(window.TIEBREAKER_REASONS).flatMap(([abbr, tb]) => {
            const t = window.TEAMS[abbr];
            // Group each loser under the specific step that resolved that matchup.
            // Multiple losers beaten by the same step collapse into one row.
            const byReason = {};
            for (const loser of tb.over) {
              const r = tb.reasons?.[loser] ?? tb.reason;
              (byReason[r] = byReason[r] || []).push(loser);
            }
            return Object.entries(byReason).map(([reason, losers]) => (
              <div className="tb-row" key={`${abbr}-${reason}`}>
                <span className="tb-swatch" style={{ background: t.color }}></span>
                <span className="tb-team">
                  <span className="mono ab">{abbr}</span>
                  <span className="tb-over">over {losers.join(", ")}</span>
                </span>
                <span className="tb-reason">{reason}</span>
              </div>
            ));
          })}
        </div>

        <div className="tb-procs">
          {[window.LEAGUE.tiebreakerProcedures.div, window.LEAGUE.tiebreakerProcedures.wc].map((proc) => (
            <div className="tb-proc-block" key={proc.tag}>
              <div className="tb-proc-head">
                <span className={"tb-proc-tag " + proc.tag.toLowerCase()}>{proc.tag}</span>
                <span className="tb-proc-title">{proc.title}</span>
              </div>
              <ol className="tb-proc-list">
                {proc.steps.map((step, i) => (
                  <li key={i} className={i === 0 ? "lead" : undefined}>{step}</li>
                ))}
              </ol>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

window.Standings = Standings;