/* Team Summaries: cross-sport breakdown of how the user's favorite and rival
 * teams are doing. Lives at "/summary", opened from the user menu. Unlike the
 * sport pages (recs/schedule/standings), this walks every sport in
 * window.SPORTS rather than just the one selected by the URL path — it
 * fetches each sport's data on demand the same way src/onboarding.jsx does. */

const { useState: useTSState, useEffect: useTSEffect } = React;

function ordinal(n) {
  const s = ["th", "st", "nd", "rd"], v = n % 100;
  return `${n}${s[(v - 20) % 10] || s[v] || s[0]}`;
}

function streakOf(results) {
  if (!results || !results.length) return null;
  let kind = null, count = 0;
  for (let i = results.length - 1; i >= 0; i--) {
    const k = results[i].tie ? "T" : results[i].win ? "W" : "L";
    if (kind === null) { kind = k; count = 1; }
    else if (k === kind) count++;
    else break;
  }
  return kind ? `${kind}${count}` : null;
}

function seriesAgainst(favTeam, rivalAbbr) {
  const games = (favTeam?.results || []).filter(r => r.oppAbbr === rivalAbbr);
  if (!games.length) return null;
  const w = games.filter(r => r.win).length;
  return { w, l: games.length - w, played: games.length };
}

function standingSummary(team, standings) {
  const conf = team.conf, div = team.div;
  const divArr = standings?.divisions?.[conf]?.[div] || [];
  const divRank = divArr.findIndex(t => t.abbr === team.abbr) + 1;
  const byTeam = standings?.byTeam?.[team.abbr];
  const divLine = divRank
    ? divRank === 1
      ? `1st in ${conf} ${div}`
      : `${ordinal(divRank)} in ${conf} ${div}${byTeam?.gamesBehind ? ` · ${byTeam.gamesBehind.toFixed(1)} GB` : ""}`
    : `${conf} ${div}`;
  let seedLine = "Standing unavailable";
  if (byTeam?.kind === "division") seedLine = `#${byTeam.seed} seed — division leader`;
  else if (byTeam?.kind === "wildcard") seedLine = `#${byTeam.seed} seed — wild card`;
  else if (byTeam?.kind === "out") seedLine = byTeam.gamesBehind ? `Outside the playoffs, ${byTeam.gamesBehind.toFixed(1)} GB` : "Outside the playoffs";
  return { divLine, seedLine };
}

function TeamSummaryCard({ sport, team, standings, strength, kind, favTeam }) {
  const record = `${team.record[0]}-${team.record[1]}${team.record[2] > 0 ? `-${team.record[2]}` : ""}`;
  const { divLine, seedLine } = standingSummary(team, standings);
  const streak = streakOf(team.results);
  const last = team.results && team.results.length ? team.results[team.results.length - 1] : null;
  const series = kind === "rival" && favTeam && favTeam.abbr !== team.abbr ? seriesAgainst(favTeam, team.abbr) : null;

  return (
    <div className={"ts-card" + (kind === "rival" ? " rival" : "")}>
      <div className="ts-card-head">
        <span className="ts-swatch" style={{ background: team.color }}>{team.abbr}</span>
        <div className="ts-card-title">
          <div className="ts-name">{team.city ? `${team.city} ${team.name}` : team.name}</div>
          <div className="ts-sub">
            <sport.Icon size={12} />
            <span>{sport.label}</span>
            <span className="ts-record">{record}</span>
          </div>
        </div>
        {streak && <span className={"ts-streak" + (streak[0] === "W" ? " win" : streak[0] === "L" ? " loss" : "")}>{streak}</span>}
      </div>

      <div className="ts-stat-row">
        <div className="ts-stat">
          <span className="ts-stat-label">Division</span>
          <span className="ts-stat-value">{divLine}</span>
        </div>
        <div className="ts-stat">
          <span className="ts-stat-label">Playoffs</span>
          <span className="ts-stat-value">{seedLine}</span>
        </div>
        {typeof strength === "number" &&
        <div className="ts-stat">
          <span className="ts-stat-label">Strength</span>
          <span className="ts-stat-value">{Math.round(strength * 100)}<span className="ts-stat-unit">/100</span></span>
        </div>
        }
      </div>

      {last &&
      <div className="ts-last">
        {last.tie ? "Tied" : last.win ? "Won" : "Lost"} last {last.home ? "vs" : "@"} {last.oppAbbr} <span className="mono">{last.pf}-{last.pa}</span>
      </div>
      }

      {kind === "rival" &&
      <div className="ts-series">
        {series
          ? series.w === series.l
            ? `Season series tied ${series.w}-${series.l} vs your ${favTeam.abbr}`
            : series.w > series.l
              ? `You're up ${series.w}-${series.l} on them this season`
              : `You're down ${series.l}-${series.w} to them this season`
          : favTeam ? "Haven't played your team yet this season" : null}
      </div>
      }
    </div>
  );
}

function TeamSummaries({ onClose }) {
  const [cache, setCache] = useTSState({});
  const [tab, setTab] = useTSState("favorites");
  const prefs = window.W2R4TeamPrefs.loadTeamPrefs();

  useTSEffect(() => {
    window.SPORTS.forEach((s) => {
      if (!(s.id in prefs.bySport)) return; // sport never decided — nothing to summarize
      window.W2R4_loadSportData(s.id).then((data) => {
        setCache((prev) => ({ ...prev, [s.id]: data }));
      }).catch((err) => {
        setCache((prev) => ({ ...prev, [s.id]: { error: err } }));
      });
    });
  }, []);

  const sportsWithPicks = window.SPORTS.filter((s) => prefs.bySport[s.id]?.favTeam);
  const loading = sportsWithPicks.some((s) => !cache[s.id]);

  const favoriteCards = [];
  const rivalCards = [];
  for (const s of sportsWithPicks) {
    const data = cache[s.id];
    if (!data || data.error) continue;
    const pick = prefs.bySport[s.id];
    const favTeam = data.TEAMS[pick.favTeam];
    if (!favTeam) continue;
    const standings = window.W2R4_standingsForPayload(data);
    favoriteCards.push(
      <TeamSummaryCard key={s.id} sport={s} team={favTeam} standings={standings}
        strength={data.TEAM_STRENGTHS?.[favTeam.abbr]?.strengthScore} kind="favorite" />
    );
    for (const abbr of pick.dislikes || []) {
      const rivalTeam = data.TEAMS[abbr];
      if (!rivalTeam) continue;
      rivalCards.push(
        <TeamSummaryCard key={`${s.id}-${abbr}`} sport={s} team={rivalTeam} standings={standings}
          strength={data.TEAM_STRENGTHS?.[abbr]?.strengthScore} kind="rival" favTeam={favTeam} />
      );
    }
  }

  return (
    <div className="ts-shell">
      <div className="ts-inner">
        <div className="page-head">
          <div>
            <div className="eyebrow">Across every sport</div>
            <h1>Team Summaries</h1>
            <div className="sub">How your favorite teams — and the teams you love to root against — are doing right now.</div>
          </div>
          <button className="btn ghost" style={{ flexShrink: 0 }} onClick={onClose}>Back</button>
        </div>

        <div className="mode-pills" role="tablist">
          <button type="button" role="tab" aria-selected={tab === "favorites"}
            className={"mode-pill" + (tab === "favorites" ? " active" : "")}
            onClick={() => setTab("favorites")}>
            Favorites
          </button>
          <button type="button" role="tab" aria-selected={tab === "rivals"}
            className={"mode-pill" + (tab === "rivals" ? " active" : "")}
            onClick={() => setTab("rivals")}>
            Rivals
          </button>
        </div>

        {loading ?
        <div className="onb-loading">
          <div className="w2r4-boot-bar"><span /></div>
          <p>Loading team data…</p>
        </div> :
        <div className="ts-grid">
          {tab === "favorites" ?
          (favoriteCards.length ? favoriteCards :
            <div className="ts-empty">Pick a favorite team to see it summarized here.</div>) :
          (rivalCards.length ? rivalCards :
            <div className="ts-empty">You haven't marked any rivals yet — add some from Edit team &amp; rivals.</div>)
          }
        </div>
        }
      </div>
    </div>
  );
}

window.TeamSummaries = TeamSummaries;