College Football Power Ratings

import { useMemo } from "react"; import ConfLink from "../components/ConfLink"; import TeamLogo from "../components/TeamLogo"; import { BracketGame } from "./BracketPage"; import { buildFCS24Field, pairFirstRoundNoConfConflict, playGame, reseedAndPair } from "../lib/bracket24"; import { useWeeklyStats } from "../lib/api/weeklyStats";

export default function FCSBracketPage({ onNavigateTeam, onNavigateConference, onHome }: any) { const field = useMemo(() => buildFCS24Field(), []); const { byTeam: liveByTeam } = useWeeklyStats("latest");

if (field.length < 24) { return ( ‹ All rankings FCS FCS PLAYOFF BRACKET Not enough FCS teams yet to build a full 24-team field. ); }

const byes = field.slice(0, 8); const firstRoundField = field.slice(8, 24);

const r1Pairs = pairFirstRoundNoConfConflict(firstRoundField); const r1Winners = r1Pairs.map((p) => playGame(p.host, p.away, false, liveByTeam));

const r2Pool = [...byes, ...r1Winners]; const r2Pairs = reseedAndPair(r2Pool); const r2Winners = r2Pairs.map((p) => playGame(p.host, p.away, false, liveByTeam));

const qfPairs = reseedAndPair(r2Winners); const qfWinners = qfPairs.map((p) => playGame(p.host, p.away, false, liveByTeam));

const sfPairs = reseedAndPair(qfWinners); const sfWinners = sfPairs.map((p) => playGame(p.host, p.away, false, liveByTeam));

const champPair = reseedAndPair(sfWinners)[0]; const champion = playGame(champPair.host, champPair.away, true, liveByTeam);

return ( ‹ All rankings FCS FCS PLAYOFF BRACKET Top 24 FCS teams seeded purely by Power Rating (conference auto-bids and resume-based at-large selection aren't modeled for FCS yet). Top 8 seeds get a bye; the better seed hosts every round except a neutral-site championship. Projected champion:{" "} <strong style={{ color: "var(--gold)" }}>{champion.team.team}.

  <div className="bracket-body">
    <div className="bracket-columns">
      <div className="bracket-col">
        <div className="section-label bracket-round-label">First Round</div>
        <div className="bracket-col-games">
          {r1Pairs.map((p) => (
            <BracketGame
              key={p.host.seed}
              seedA={p.host.seed}
              teamA={p.host.team}
              seedB={p.away.seed}
              teamB={p.away.team}
              onNavigateTeam={onNavigateTeam}
            />
          ))}
        </div>
      </div>

      <div className="bracket-col">
        <div className="section-label bracket-round-label">Second Round</div>
        <div className="bracket-col-games">
          {r2Pairs.map((p) => (
            <BracketGame
              key={p.host.seed}
              seedA={p.host.seed}
              teamA={p.host.team}
              seedB={p.away.seed}
              teamB={p.away.team}
              onNavigateTeam={onNavigateTeam}
            />
          ))}
        </div>
      </div>

      <div className="bracket-col">
        <div className="section-label bracket-round-label">Quarterfinals</div>
        <div className="bracket-col-games">
          {qfPairs.map((p) => (
            <BracketGame
              key={p.host.seed}
              seedA={p.host.seed}
              teamA={p.host.team}
              seedB={p.away.seed}
              teamB={p.away.team}
              onNavigateTeam={onNavigateTeam}
            />
          ))}
        </div>
      </div>

      <div className="bracket-col">
        <div className="section-label bracket-round-label">Semifinals</div>
        <div className="bracket-col-games">
          {sfPairs.map((p) => (
            <BracketGame
              key={p.host.seed}
              seedA={p.host.seed}
              teamA={p.host.team}
              seedB={p.away.seed}
              teamB={p.away.team}
              onNavigateTeam={onNavigateTeam}
            />
          ))}
        </div>
      </div>

      <div className="bracket-col">
        <div className="section-label bracket-round-label">Championship</div>
        <div className="bracket-col-games">
          <BracketGame
            seedA={champPair.host.seed}
            teamA={champPair.host.team}
            seedB={champPair.away.seed}
            teamB={champPair.away.team}
            neutral
            onNavigateTeam={onNavigateTeam}
          />
        </div>
      </div>
    </div>

    <div className="section-label bracket-round-label">The Field</div>
    <div className="table-wrap bracket-natty-wrap playoff24-field-wrap">
      <div className="table-scroll">
        <table>
          <thead>
            <tr>
              <th className="th">Seed</th>
              <th className="th">Team</th>
              <th className="th">Conference</th>
              <th className="th">Bid</th>
              <th className="th th-right">Power Rating</th>
            </tr>
          </thead>
          <tbody>
            {field.map((f) => (
              <tr key={f.team.team}>
                <td>
                  <span
                    className={`rank-flag ${f.seed <= 8 ? "top4" : f.seed <= 16 ? "top12" : ""}`}
                  >
                    {f.seed}
                  </span>
                </td>
                <td>
                  <button
                    className="team-link"
                    onClick={() => onNavigateTeam(f.team)}
                  >
                    <TeamLogo team={f.team} />
                    {f.team.team}
                  </button>
                </td>
                <td className="conf-cell">
                  <ConfLink conf={f.team.conf} onNavigateConference={onNavigateConference} />
                </td>
                <td className="futures-bet-cell">{f.bid}</td>
                <td className={`rating-cell ${f.team.rating < 0 ? "rating-good" : "rating-bad"}`}>
                  {f.team.rating > 0 ? "+" : ""}
                  {f.team.rating.toFixed(2)}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div className="footer-note">
    Seeding is by Power Rating alone for now — conference auto-bids and
    resume-based at-large selection will be added once FCS resume
    ratings and conference futures data are wired up. First round
    pairings avoid same-conference matchups where possible; every later
    round reseeds the remaining field, pairing the best seed against the
    worst, with the better seed hosting until a neutral-site
    championship.
  </div>
</div>

); }