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

import { Link } from "react-router";
import { useState } from "react";
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 { cn } from "~/lib/utils";
import { ArrowLeft } 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 };

type BracketView = "standings" | "playoffs" | "finished";

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,

    groupStandings,
    bracketTemplateId,
  } = 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" :
    simulatorType === "mlb_bracket" ? "mlb-divisions" :
    "flat";
  const playoffSpots =
    simulatorType === "nba_bracket" || simulatorType === "afl_bracket" ? 10 : 8;

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

  // Show the 3-way toggle only for bracket sports that also have regular season standings
  const showToggle = hasStandings && scoringPattern === "playoff_bracket";

  const [view, setView] = useState<BracketView>(() => {
    if (!hasBracket) return "standings";
    if (sportsSeason.status === "completed") return "finished";
    return "playoffs";
  });

  const TOGGLE_VIEWS: { value: BracketView; label: string }[] = [
    { value: "standings", label: "Standings" },
    { value: "playoffs", label: "Playoffs" },
    { value: "finished", label: "Finished" },
  ];

  const bracketDisplay = (bracketMode: "bracket" | "rankings") => (
    <SportSeasonDisplay
      scoringPattern={scoringPattern as "playoff_bracket" | "season_standings" | "qualifying_points"}
      sportSeasonName={sportsSeason.name}
      sportName={sportsSeason.sport.name}
      bracketMode={bracketMode}
      playoffMatches={playoffMatches}
      playoffRounds={playoffRounds}
      bracketTemplateId={bracketTemplateId}
      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}
    />
  );

  const standingsDisplay = (
    <RegularSeasonStandings
      standings={regularSeasonStandings}
      teamOwnerships={ownershipMap}
      userParticipantIds={userParticipantIds}
      showOtLosses={showOtLosses}
      showSoccerTable={simulatorType === "epl_standings"}
      displayMode={standingsDisplayMode as "flat" | "nhl-divisions" | "mlb-divisions"}
      playoffSpots={playoffSpots}
    />
  );

  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 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between 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>

          {showToggle && (
            <div className="flex gap-1 rounded-lg bg-muted p-1 sm:shrink-0">
              {TOGGLE_VIEWS.map(({ value, label }) => (
                <button
                  key={value}
                  type="button"
                  onClick={() => setView(value)}
                  className={cn(
                    "flex-1 sm:flex-none px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
                    view === value
                      ? "bg-background shadow-sm text-foreground"
                      : "text-muted-foreground hover:text-foreground"
                  )}
                >
                  {label}
                </button>
              ))}
            </div>
          )}
        </div>
      </div>

      {showToggle ? (
        <div>
          {view === "standings" && standingsDisplay}
          {view === "playoffs" && bracketDisplay("bracket")}
          {view === "finished" && bracketDisplay("rankings")}
        </div>
      ) : (
        <>
          {/* Regular season standings above bracket when no bracket exists yet */}
          {hasStandings && !hasBracket && (
            <div className="mb-6">{standingsDisplay}</div>
          )}

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

          {/* Group stage standings */}
          {groupStandings.length > 0 && (
            <div className="mb-6">
              <GroupStageStandings groups={groupStandings} ownershipMap={ownershipMap} showEmpty={false} />
            </div>
          )}

          {/* Bracket — hidden when standings exist but bracket is empty */}
          {!(scoringPattern === "playoff_bracket" && hasStandings && !hasBracket) && bracketDisplay("bracket")}

          {/* Regular season standings below bracket once bracket exists */}
          {hasStandings && hasBracket && (
            <div className="mt-8">{standingsDisplay}</div>
          )}
        </>
      )}
    </div>
  );
}