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 { Button } from "~/components/ui/button";
import { Badge } from "~/components/ui/badge";
import { ArrowLeft, CheckCircle2, Clock, Zap } from "lucide-react";

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,
    seasonStandings,
    qpStandings,
    teamOwnerships,
    userParticipantIds,
    upcomingEvents,
    recentEvents,
    seasonIsFinalized,
  } = 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="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>

      {/* Event schedule (upcoming + recent) - shown when there's event data */}
      {(upcomingEvents.length > 0 || recentEvents.length > 0) && (
        <div className="mb-6">
          <EventSchedule
            upcomingEvents={upcomingEvents as any}
            recentEvents={recentEvents as any}
          />
        </div>
      )}

      <SportSeasonDisplay
        scoringPattern={scoringPattern as any}
        sportSeasonName={sportsSeason.name}
        sportName={sportsSeason.sport.name}
        playoffMatches={playoffMatches as any}
        playoffRounds={playoffRounds}
        seasonStandings={seasonStandings as any}
        seasonIsFinalized={seasonIsFinalized}
        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}
        userParticipantIds={userParticipantIds}
        scoringRules={season}
        showOwnership={true}
      />
    </div>
  );
}