brackt/app/components/sport-season/RegularSeasonStandings.tsx

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";
import { BarChart3 } from "lucide-react";
import { TeamOwnerBadge } from "~/components/ui/team-owner-badge";

interface StandingRow {
  id: string;
  participantId: string;
  wins: number;
  losses: number;
  otLosses: number | null;
  winPct: string | null;
  gamesPlayed: number;
  gamesBack: string | null;
  conference: string | null;
  division: string | null;
  conferenceRank: number | null;
  divisionRank: number | null;
  leagueRank: number | null;
  streak: string | null;
  lastTen: string | null;
  homeRecord: string | null;
  awayRecord: string | null;
  syncedAt: Date | string | null;
  participant: { id: string; name: string; shortName?: string | null };
}

interface TeamOwnership {
  teamName: string;
  ownerName: string;
  teamId: string;
}

interface Props {
  standings: StandingRow[];
  teamOwnerships: Record<string, TeamOwnership>;
  userParticipantIds: string[];
  showOtLosses?: boolean;
  /** How many teams per conference qualify for playoffs (flat mode only). 0 = no line. */
  playoffSpots?: number;
  /** "flat" = single ranked list per conference (NBA). "nhl-divisions" = div top-3 + wild card. "mlb-divisions" = same structure with 3 WC spots, uses "League" label. */
  displayMode?: "flat" | "nhl-divisions" | "mlb-divisions";
}

type RankMode = "conference" | "division" | "index";

interface TableSection {
  heading?: string;
  rows: StandingRow[];
  rankMode: RankMode;
  playoffSpots: number;
  showDivisionLabel?: boolean;
}

// ─── Formatting ───────────────────────────────────────────────────────────────

function formatWinPct(winPct: string | null, wins: number, gamesPlayed: number): string {
  if (winPct !== null) {
    const pct = parseFloat(winPct);
    if (!isNaN(pct)) return pct.toFixed(3);
  }
  if (gamesPlayed > 0) return (wins / gamesPlayed).toFixed(3);
  return "—";
}

function formatGB(gamesBack: string | null): string {
  if (gamesBack === null) return "—";
  const gb = parseFloat(gamesBack);
  if (isNaN(gb) || gb === 0) return "—";
  return gb % 1 === 0 ? gb.toString() : gb.toFixed(1);
}

function getRank(row: StandingRow, idx: number, mode: RankMode): number {
  if (mode === "division") return row.divisionRank ?? idx + 1;
  if (mode === "index") return idx + 1;
  return row.conferenceRank ?? idx + 1;
}

// ─── Grouping ─────────────────────────────────────────────────────────────────

type ConferenceGroup = { conference: string; conferenceLabel: string; sections: TableSection[] };

function buildFlatSections(
  standings: StandingRow[],
  playoffSpots: number
): ConferenceGroup[] {
  const hasConferences = standings.some((s) => s.conference);

  if (!hasConferences) {
    return [
      {
        conference: "",
        conferenceLabel: "Conference",
        sections: [
          {
            rows: [...standings].toSorted(
              (a, b) => (a.leagueRank ?? 99) - (b.leagueRank ?? 99)
            ),
            rankMode: "conference",
            playoffSpots,
          },
        ],
      },
    ];
  }

  const confMap = new Map<string, StandingRow[]>();
  for (const row of standings) {
    const conf = row.conference ?? "Other";
    if (!confMap.has(conf)) confMap.set(conf, []);
    confMap.get(conf)?.push(row);
  }

  return Array.from(confMap.entries()).map(([conference, rows]) => ({
    conference,
    conferenceLabel: "Conference",
    sections: [
      {
        rows: [...rows].toSorted(
          (a, b) =>
            (a.conferenceRank ?? a.leagueRank ?? 99) -
            (b.conferenceRank ?? b.leagueRank ?? 99)
        ),
        rankMode: "conference" as RankMode,
        playoffSpots,
        showDivisionLabel: true,
      },
    ],
  }));
}

/**
 * Shared builder for division-based display modes (NHL and MLB).
 * `divisionSpots`: how many teams per division qualify directly (3 for NHL, 1 for MLB).
 * `wcSpots`: how many wildcard slots exist per conference (2 for NHL, 3 for MLB).
 * `conferenceLabel`: the word shown after the conference name in the heading.
 */
function buildDivisionSections(
  standings: StandingRow[],
  divisionSpots: number,
  wcSpots: number,
  conferenceLabel: string
): ConferenceGroup[] {
  const confMap = new Map<string, StandingRow[]>();
  for (const row of standings) {
    const conf = row.conference ?? "Other";
    if (!confMap.has(conf)) confMap.set(conf, []);
    confMap.get(conf)?.push(row);
  }

  return Array.from(confMap.entries()).map(([conference, rows]) => {
    const divMap = new Map<string, StandingRow[]>();
    for (const row of rows) {
      const div = row.division ?? "";
      if (!divMap.has(div)) divMap.set(div, []);
      divMap.get(div)?.push(row);
    }

    const divisions = Array.from(divMap.entries())
      .map(([name, divRows]) => ({
        name,
        qualifiers: divRows
          .filter((r) => (r.divisionRank ?? 99) <= divisionSpots)
          .toSorted((a, b) => (a.divisionRank ?? 99) - (b.divisionRank ?? 99)),
      }))
      .toSorted(
        (a, b) =>
          (a.qualifiers[0]?.conferenceRank ?? 99) -
          (b.qualifiers[0]?.conferenceRank ?? 99)
      );

    const wildCard = rows
      .filter((r) => (r.divisionRank ?? 99) > divisionSpots)
      .toSorted(
        (a, b) =>
          (a.conferenceRank ?? a.leagueRank ?? 99) -
          (b.conferenceRank ?? b.leagueRank ?? 99)
      );

    const sections: TableSection[] = [
      ...divisions.map((div) => ({
        heading: `${div.name} Division`,
        rows: div.qualifiers,
        rankMode: "division" as RankMode,
        playoffSpots: 0,
        showDivisionLabel: false,
      })),
      ...(wildCard.length > 0
        ? [
            {
              heading: "Wild Card",
              rows: wildCard,
              rankMode: "index" as RankMode,
              playoffSpots: wcSpots,
              showDivisionLabel: true,
            },
          ]
        : []),
    ];

    return { conference, conferenceLabel, sections };
  });
}

function buildNhlSections(standings: StandingRow[]): ConferenceGroup[] {
  return buildDivisionSections(standings, 3, 2, "Conference");
}

function buildMlbSections(standings: StandingRow[]): ConferenceGroup[] {
  return buildDivisionSections(standings, 1, 3, "League");
}

// ─── Single table that renders all sections ───────────────────────────────────

function StandingsTable({
  sections,
  teamOwnerships,
  userParticipantIds,
  showOtLosses,
}: {
  sections: TableSection[];
  teamOwnerships: Record<string, TeamOwnership>;
  userParticipantIds: string[];
  showOtLosses: boolean;
}) {
  // # Team GP W L [OTL] [PTS] PCT GB L10 STK Mgr
  // OTL and PTS are both shown for hockey (showOtLosses = true)
  const totalCols = 10 + (showOtLosses ? 2 : 0);

  return (
    <div className="overflow-x-auto -mx-6 px-6">
      <table className="w-full min-w-[740px] text-sm">
        <thead>
          <tr className="text-xs text-muted-foreground uppercase tracking-wide border-b">
            <th className="text-left py-1.5 pr-2 w-6">#</th>
            <th className="text-left py-1.5">Team</th>
            <th className="text-right py-1.5 px-2 w-10">GP</th>
            <th className="text-right py-1.5 px-2 w-8">W</th>
            <th className="text-right py-1.5 px-2 w-8">L</th>
            {showOtLosses && <th className="text-right py-1.5 px-2 w-10">OTL</th>}
            {showOtLosses && <th className="text-right py-1.5 px-2 w-10">PTS</th>}
            <th className="text-right py-1.5 px-2 w-12">PCT</th>
            <th className="text-right py-1.5 px-2 w-10">GB</th>
            <th className="text-right py-1.5 px-2 w-12">L10</th>
            <th className="text-right py-1.5 px-2 w-12">STK</th>
            <th className="text-right py-1.5 pl-4 w-40">Mgr</th>
          </tr>
        </thead>
        <tbody>
          {sections.flatMap((section, sIdx) => {
            const sectionRows: React.ReactNode[] = [];
            let playoffLineShown = false;

            if (section.heading) {
              sectionRows.push(
                <tr key={`h-${section.heading}`}>
                  <td
                    colSpan={totalCols}
                    className={`text-xs font-medium text-muted-foreground/60 uppercase tracking-wider pb-1 ${
                      sIdx > 0 ? "pt-5" : "pt-2"
                    }`}
                  >
                    {section.heading}
                  </td>
                </tr>
              );
            }

            section.rows.forEach((row, i) => {
              const rank = getRank(row, i, section.rankMode);

              if (!playoffLineShown && section.playoffSpots > 0 && rank > section.playoffSpots) {
                playoffLineShown = true;
                sectionRows.push(
                  <tr key={`pl-${sIdx}`}>
                    <td colSpan={totalCols} className="py-0.5">
                      <div className="flex items-center gap-2">
                        <div className="flex-1 border-t border-dashed border-amber-500/40" />
                        <span className="text-[10px] text-amber-600/70 dark:text-amber-500/70 uppercase tracking-wide whitespace-nowrap font-medium px-1">
                          Playoff Line
                        </span>
                        <div className="flex-1 border-t border-dashed border-amber-500/40" />
                      </div>
                    </td>
                  </tr>
                );
              }

              const isUserTeam = userParticipantIds.includes(row.participantId);
              const ownership = teamOwnerships[row.participantId];

              sectionRows.push(
                <tr
                  key={row.id}
                  className={`border-b border-border/50 last:border-0 ${
                    isUserTeam ? "bg-primary/5" : "hover:bg-muted/30"
                  }`}
                >
                  <td className="py-2 pr-2 text-muted-foreground tabular-nums">{rank}</td>
                  <td className="py-2">
                    <span className={`font-medium ${isUserTeam ? "text-primary" : ""}`}>
                      {row.participant.shortName ?? row.participant.name}
                    </span>
                    {section.showDivisionLabel && row.division && (
                      <span className="ml-1.5 text-[10px] text-muted-foreground/50 uppercase tracking-wide">
                        {row.division}
                      </span>
                    )}
                  </td>
                  <td className="py-2 px-2 text-right tabular-nums text-muted-foreground">
                    {row.gamesPlayed}
                  </td>
                  <td className="py-2 px-2 text-right tabular-nums font-medium">{row.wins}</td>
                  <td className="py-2 px-2 text-right tabular-nums">{row.losses}</td>
                  {showOtLosses && (
                    <td className="py-2 px-2 text-right tabular-nums">{row.otLosses ?? 0}</td>
                  )}
                  {showOtLosses && (
                    <td className="py-2 px-2 text-right tabular-nums font-medium">
                      {row.wins * 2 + (row.otLosses ?? 0)}
                    </td>
                  )}
                  <td className="py-2 px-2 text-right tabular-nums text-muted-foreground">
                    {formatWinPct(row.winPct, row.wins, row.gamesPlayed)}
                  </td>
                  <td className="py-2 px-2 text-right tabular-nums text-muted-foreground">
                    {formatGB(row.gamesBack)}
                  </td>
                  <td className="py-2 px-2 text-right tabular-nums text-muted-foreground">
                    {row.lastTen ?? "—"}
                  </td>
                  <td className="py-2 px-2 text-right tabular-nums">
                    {row.streak ? (
                      <span
                        className={
                          row.streak.startsWith("W")
                            ? "text-emerald-500"
                            : "text-destructive/80"
                        }
                      >
                        {row.streak}
                      </span>
                    ) : (
                      <span className="text-muted-foreground">—</span>
                    )}
                  </td>
                  <td className="py-2 pl-4 text-right">
                    {ownership ? (
                      <div className="flex justify-end">
                        <TeamOwnerBadge
                          teamName={ownership.teamName}
                          ownerName={ownership.ownerName || undefined}
                          align="right"
                        />
                      </div>
                    ) : (
                      <span className="text-xs text-muted-foreground">—</span>
                    )}
                  </td>
                </tr>
              );
            });

            return sectionRows;
          })}
        </tbody>
      </table>
    </div>
  );
}

// ─── Main export ──────────────────────────────────────────────────────────────

export function RegularSeasonStandings({
  standings,
  teamOwnerships,
  userParticipantIds,
  showOtLosses = false,
  playoffSpots = 8,
  displayMode = "flat",
}: Props) {
  if (standings.length === 0) return null;

  const lastSyncedAt = standings
    .map((s) => s.syncedAt)
    .filter(Boolean)
    .toSorted()
    .at(-1);

  const groups =
    displayMode === "nhl-divisions"
      ? buildNhlSections(standings)
      : displayMode === "mlb-divisions"
      ? buildMlbSections(standings)
      : buildFlatSections(standings, playoffSpots);

  const tableProps = { teamOwnerships, userParticipantIds, showOtLosses };

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between gap-2">
          <CardTitle className="flex items-center gap-2">
            <BarChart3 className="h-5 w-5" />
            Regular Season Standings
          </CardTitle>
          {lastSyncedAt && (
            <CardDescription className="text-xs tabular-nums">
              Updated {new Date(lastSyncedAt).toLocaleDateString()}
            </CardDescription>
          )}
        </div>
      </CardHeader>
      <CardContent>
        {groups.map((group) => (
          <div key={group.conference} className="mb-6 last:mb-0">
            {group.conference && (
              <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3">
                {group.conference} {group.conferenceLabel}
              </h3>
            )}
            <StandingsTable sections={group.sections} {...tableProps} />
          </div>
        ))}
      </CardContent>
    </Card>
  );
}