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 { Button } from "~/components/ui/button";
import { ArrowLeft } from "lucide-react";

export { loader };

export default function SportSeasonDetail({
  loaderData,
}: Route.ComponentProps) {
  const {
    league,
    season,
    sportsSeason,
    scoringPattern,
    playoffMatches,
    playoffRounds,
    seasonStandings,
    qpStandings,
    teamOwnerships,
  } = loaderData;

  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="mb-4">
          <h1 className="text-3xl font-bold mb-2">
            {sportsSeason.sport.name} - {sportsSeason.name}
          </h1>
          <p className="text-muted-foreground">
            {league.name} • {season.year} Season
          </p>
        </div>
      </div>

      <SportSeasonDisplay
        scoringPattern={scoringPattern as any}
        sportSeasonName={sportsSeason.name}
        sportName={sportsSeason.sport.name}
        playoffMatches={playoffMatches as any}
        playoffRounds={playoffRounds}
        seasonStandings={seasonStandings as any}
        seasonIsFinalized={false} // TODO: determine from data
        qpStandings={qpStandings as any}
        qpIsFinalized={sportsSeason.qualifyingPointsFinalized || false}
        totalMajors={sportsSeason.totalMajors}
        majorsCompleted={sportsSeason.majorsCompleted || 0}
        canFinalize={
          (sportsSeason.majorsCompleted || 0) >=
            (sportsSeason.totalMajors || 0) &&
          !sportsSeason.qualifyingPointsFinalized
        }
        teamOwnerships={teamOwnerships}
        scoringRules={season} // Season has the scoring rules (pointsFor1st, etc.)
        showOwnership={true}
      />
    </div>
  );
}