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

import { Link, useRevalidator } from "react-router";
import { useEffect } from "react";
import { io } from "socket.io-client";
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 { GroupStageStandings } from "~/components/sport-season/GroupStageStandings";
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,
    groupStandings,
  } = loaderData;

  const { revalidate } = useRevalidator();

  // Revalidate when the admin updates standings (e.g. recalculate-floors).
  useEffect(() => {
    const socket = io({ path: "/socket.io", transports: ["websocket", "polling"] });
    socket.on("connect", () => {
      socket.emit("join-draft", season.id);
    });
    socket.on("standings-updated", (data: { sportsSeasonId: string }) => {
      if (data.sportsSeasonId === sportsSeason.id) {
        revalidate();
      }
    });
    return () => {
      socket.emit("leave-draft", season.id);
      socket.disconnect();
    };
  }, [season.id, sportsSeason.id, revalidate]);

  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" :
    simulatorType === "mlb_bracket" ? "mlb-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 nhl-divisions mode (3 per div + 2 wild cards)
  // MLB: handled by mlb-divisions mode (1 per div + 3 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" | "mlb-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>
        )}

      {/* Group stage standings — shown for FIFA-style tournaments before/during group phase */}
      {groupStandings.length > 0 && (
        <div className="mb-6">
          <GroupStageStandings groups={groupStandings} ownershipMap={ownershipMap} showEmpty={false} />
        </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" | "mlb-divisions"}
            playoffSpots={playoffSpots}
          />
        </div>
      )}
    </div>
  );
}