import { Link } from "react-router";
import { Badge } from "~/components/ui/badge";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";
import { Trophy, Target, Flag } from "lucide-react";

interface SportSeasonCardProps {
  leagueId: string;
  sportSeasonId: string;
  sportName: string;
  seasonName: string;
  status: "upcoming" | "active" | "completed";
  scoringPattern?: string | null;
}

export function SportSeasonCard({
  leagueId,
  sportSeasonId,
  sportName,
  seasonName,
  status,
  scoringPattern,
}: SportSeasonCardProps) {
  const getStatusBadge = () => {
    switch (status) {
      case "upcoming":
        return (
          <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
            <Flag className="mr-1 h-3 w-3" />
            Upcoming
          </Badge>
        );
      case "active":
        return (
          <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
            <Target className="mr-1 h-3 w-3" />
            Active
          </Badge>
        );
      case "completed":
        return (
          <Badge variant="outline" className="bg-gray-50 text-gray-700 border-gray-200">
            <Trophy className="mr-1 h-3 w-3" />
            Completed
          </Badge>
        );
    }
  };

  const getScoringPatternLabel = () => {
    if (!scoringPattern) return null;

    switch (scoringPattern) {
      case "single_elimination_playoff":
        return "Playoff Bracket";
      case "page_playoff":
        return "AFL Finals";
      case "season_standings":
        return "Season Standings";
      case "qualifying_points":
        return "Qualifying Points";
      default:
        return null;
    }
  };

  const scoringLabel = getScoringPatternLabel();
  const isPlayoffType = scoringPattern === "single_elimination_playoff" || scoringPattern === "page_playoff";

  return (
    <Link to={`/leagues/${leagueId}/sports-seasons/${sportSeasonId}`}>
      <Card className="hover:shadow-lg transition-shadow cursor-pointer h-full">
        <CardHeader>
          <div className="flex items-start justify-between">
            <div className="flex-1 min-w-0">
              <CardTitle className="text-lg mb-1">{sportName}</CardTitle>
              <CardDescription className="truncate">{seasonName}</CardDescription>
            </div>
            {getStatusBadge()}
          </div>
        </CardHeader>
        <CardContent>
          <div className="space-y-2">
            {scoringLabel && (
              <div className="flex items-center gap-2 text-sm text-muted-foreground">
                {isPlayoffType ? (
                  <Trophy className="h-4 w-4" />
                ) : (
                  <Target className="h-4 w-4" />
                )}
                <span>{scoringLabel}</span>
              </div>
            )}
          </div>
        </CardContent>
      </Card>
    </Link>
  );
}