brackt/app/components/sports/SportSeasonCard.tsx

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

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

function formatNextEventDate(dateStr: string | null | undefined): string {
  if (!dateStr) return "";
  try {
    return format(parseISO(dateStr), "MMM d");
  } catch {
    return "";
  }
}

export function SportSeasonCard({
  leagueId,
  sportSeasonId,
  sportName,
  seasonName,
  status,
  scoringPattern,
  nextEvent,
}: SportSeasonCardProps) {
  const getStatusBadge = () => {
    switch (status) {
      case "upcoming":
        return (
          <Badge variant="outline" className="bg-electric/15 text-electric border-electric/30">
            <Flag className="mr-1 h-3 w-3" />
            Upcoming
          </Badge>
        );
      case "active":
        return (
          <Badge variant="outline" className="bg-emerald-500/15 text-emerald-400 border-emerald-500/30">
            <Target className="mr-1 h-3 w-3" />
            Active
          </Badge>
        );
      case "completed":
        return (
          <Badge variant="outline" className="bg-muted text-muted-foreground border-border">
            <Trophy className="mr-1 h-3 w-3" />
            Completed
          </Badge>
        );
    }
  };

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

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

  const scoringLabel = getScoringPatternLabel();
  const isPlayoffType = scoringPattern === "playoff_bracket";
  const nextEventDate = formatNextEventDate(nextEvent?.eventDate);

  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>
            )}
            {nextEvent && (
              <div className="flex items-center gap-2 text-sm">
                <Calendar className="h-4 w-4 text-electric shrink-0" />
                <span className="text-muted-foreground truncate">
                  <span className="text-electric font-medium">Next: </span>
                  {nextEvent.name}
                  {nextEventDate && (
                    <span className="text-muted-foreground"> — {nextEventDate}</span>
                  )}
                </span>
              </div>
            )}
          </div>
        </CardContent>
      </Card>
    </Link>
  );
}