brackt/app/routes/leagues/$leagueId.sports-seasons.$sportsSeasonId.tsx

import { Link } from "react-router";
import type { Route } from "./+types/$leagueId.sports-seasons.$sportsSeasonId";

import { loader } from "./$leagueId.sports-seasons.$sportsSeasonId.server";
import { SportSeasonDisplay } from "~/components/scoring/SportSeasonDisplay";
import { EventSchedule } from "~/components/sport-season/EventSchedule";
import { RegularSeasonStandings } from "~/components/sport-season/RegularSeasonStandings";
import { Button } from "~/components/ui/button";
import { Badge } from "~/components/ui/badge";
import { ArrowLeft, CheckCircle2, Clock, Zap } from "lucide-react";

export function meta({ data }: Route.MetaArgs): Route.MetaDescriptors {
  return [{ title: `${data?.sportsSeason?.name ?? "Sport Season"} — ${data?.league?.name ?? "League"} - Brackt` }];
}

export { loader };

function getStatusBadge(status: string) {
  switch (status) {
    case "active":
      return (
        <Badge variant="outline" className="bg-emerald-500/15 text-emerald-400 border-emerald-500/30">
          <Zap className="mr-1 h-3 w-3" />
          Active
        </Badge>
      );
    case "upcoming":
      return (
        <Badge variant="outline" className="bg-electric/15 text-electric border-electric/30">
          <Clock className="mr-1 h-3 w-3" />
          Upcoming
        </Badge>
      );
    case "completed":
      return (
        <Badge variant="outline" className="bg-muted text-muted-foreground border-border">
          <CheckCircle2 className="mr-1 h-3 w-3" />
          Completed
        </Badge>
      );
    default:
      return null;
  }
}

export default function SportSeasonDetail({
  loaderData,
}: Route.ComponentProps) {
  const {
    league,
    season,
    sportsSeason,
    scoringPattern,
    playoffMatches,
    playoffRounds,
    preEliminatedParticipants,
    participantPoints,
    partialScoreParticipantIds,
    seasonStandings,
    qpStandings,
    teamOwnerships,
    userParticipantIds,
    upcomingEvents,
    recentEvents,
    seasonIsFinalized,
    regularSeasonStandings,
    participantEvs,
  } = loaderData;

  const hasBracket = playoffMatches && playoffMatches.length > 0;
  const hasStandings = regularSeasonStandings && regularSeasonStandings.length > 0;
  const showOtLosses = hasStandings && regularSeasonStandings.some((s) => s.otLosses !== null);

  const simulatorType = sportsSeason.sport?.simulatorType;
  const standingsDisplayMode =
    simulatorType === "nhl_bracket" ? "nhl-divisions" : "flat";
  // NBA: 10 teams make the postseason (6 auto-qualify + 4 play-in)
  // AFL: top 10 advance to the finals series (Wildcard + QF/EF + SF + PF + GF)
  // NHL: handled by the nhl-divisions mode (3 per div + 2 wild cards)
  const playoffSpots =
    simulatorType === "nba_bracket" || simulatorType === "afl_bracket" ? 10 : 8;

  // Build ownership map for RegularSeasonStandings
  const ownershipMap = Object.fromEntries(
    teamOwnerships.map((o) => [
      o.participantId,
      { teamName: o.teamName, ownerName: o.ownerName ?? "", teamId: o.teamId },
    ])
  );

  return (
    <div className="container mx-auto py-8 px-4">
      <div className="mb-6">
        <Button variant="ghost" size="sm" asChild className="mb-4">
          <Link to={`/leagues/${league.id}`}>
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to League
          </Link>
        </Button>

        <div className="flex items-start justify-between gap-4 mb-4">
          <div>
            <h1 className="text-3xl font-bold mb-1">
              {sportsSeason.sport.name}
            </h1>
            <p className="text-muted-foreground">
              {sportsSeason.name} • {league.name} • {season.year} Season
            </p>
          </div>
          {getStatusBadge(sportsSeason.status)}
        </div>
      </div>

      {/* Regular season standings — show above bracket when no bracket exists yet */}
      {hasStandings && !hasBracket && (
        <div className="mb-6">
          <RegularSeasonStandings
            standings={regularSeasonStandings}
            teamOwnerships={ownershipMap}
            userParticipantIds={userParticipantIds}
            showOtLosses={showOtLosses}
            participantEvs={participantEvs}
            displayMode={standingsDisplayMode as "flat" | "nhl-divisions"}
            playoffSpots={playoffSpots}
          />
        </div>
      )}

      {/* Event schedule - hidden for bracket sports (the bracket itself is the event) */}
      {scoringPattern !== "playoff_bracket" &&
        (upcomingEvents.length > 0 || recentEvents.length > 0) && (
          <div className="mb-6">
            <EventSchedule
              upcomingEvents={upcomingEvents}
              recentEvents={recentEvents}
            />
          </div>
        )}

      {/* Hide bracket display when standings exist but no bracket matches have been set yet */}
      {!(scoringPattern === "playoff_bracket" && hasStandings && !hasBracket) && <SportSeasonDisplay
        scoringPattern={scoringPattern as "playoff_bracket" | "season_standings" | "qualifying_points"}
        sportSeasonName={sportsSeason.name}
        sportName={sportsSeason.sport.name}
        playoffMatches={playoffMatches}
        playoffRounds={playoffRounds}
        preEliminatedParticipants={preEliminatedParticipants}
        participantPoints={participantPoints}
        partialScoreParticipantIds={partialScoreParticipantIds}
        seasonStandings={seasonStandings}
        seasonIsFinalized={seasonIsFinalized}
        qpStandings={qpStandings}
        qpIsFinalized={sportsSeason.qualifyingPointsFinalized || false}
        totalMajors={sportsSeason.totalMajors}
        majorsCompleted={sportsSeason.majorsCompleted || 0}
        canFinalize={
          (sportsSeason.majorsCompleted || 0) >=
            (sportsSeason.totalMajors || 0) &&
          !sportsSeason.qualifyingPointsFinalized
        }
        teamOwnerships={teamOwnerships}
        userParticipantIds={userParticipantIds}
        scoringRules={season}
        showOwnership={true}
      />}

      {/* Regular season standings — show below bracket once bracket exists */}
      {hasStandings && hasBracket && (
        <div className="mt-8">
          <RegularSeasonStandings
            standings={regularSeasonStandings}
            teamOwnerships={ownershipMap}
            userParticipantIds={userParticipantIds}
            showOtLosses={showOtLosses}
            participantEvs={participantEvs}
            displayMode={standingsDisplayMode as "flat" | "nhl-divisions"}
            playoffSpots={playoffSpots}
          />
        </div>
      )}
    </div>
  );
}