brackt/app/components/scoring/SeasonStandings.tsx

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "~/components/ui/table";
import { Badge } from "~/components/ui/badge";
import { TrendingUp, TrendingDown, Minus, Flag, CheckCircle2, Star } from "lucide-react";

interface SeasonStanding {
  id: string;
  championshipPoints: string; // Decimal as string
  position: number;
  previousPosition?: number | null; // For showing movement
  participant: {
    id: string;
    name: string;
  };
}

interface TeamOwnership {
  participantId: string;
  teamName: string;
  teamId: string;
  ownerName?: string;
}

interface SeasonStandingsProps {
  standings: SeasonStanding[];
  teamOwnerships?: TeamOwnership[]; // Which teams own which participants
  userParticipantIds?: string[]; // Participants drafted by the current user
  showOwnership?: boolean;
  isFinalized?: boolean; // Whether season is complete
  title?: string;
  description?: string;
}

/**
 * SeasonStandings component - Displays F1-style championship standings
 *
 * Features:
 * - Shows participants ranked by championship points
 * - Positions auto-calculated from points (highest = 1st)
 * - Optional ownership hints with team avatars
 * - Movement indicators (position changes)
 * - Handles ties (same points = same position)
 */
export function SeasonStandings({
  standings,
  teamOwnerships = [],
  userParticipantIds = [],
  showOwnership = true,
  isFinalized = false,
  title = "Championship Standings",
  description,
}: SeasonStandingsProps) {
  const userParticipantSet = new Set(userParticipantIds);
  // Create ownership map for fast lookup
  const ownershipMap = new Map<string, TeamOwnership>();
  teamOwnerships.forEach((ownership) => {
    ownershipMap.set(ownership.participantId, ownership);
  });

  // Get ownership info for a participant
  const getOwnership = (participantId: string): TeamOwnership | null => {
    if (!showOwnership) return null;
    return ownershipMap.get(participantId) || null;
  };

  // Generate avatar from team name (first letter)
  const getTeamAvatar = (teamName: string) => {
    const initial = teamName.charAt(0).toUpperCase();
    const hash = teamName.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
    const colors = [
      "bg-blue-500",
      "bg-green-500",
      "bg-purple-500",
      "bg-pink-500",
      "bg-amber-500",
      "bg-red-500",
      "bg-indigo-500",
      "bg-teal-500",
    ];
    const colorClass = colors[hash % colors.length];

    return (
      <div
        className={`h-6 w-6 rounded-full ${colorClass} text-white text-xs font-bold flex items-center justify-center`}
      >
        {initial}
      </div>
    );
  };

  // Get movement indicator
  const getMovementIndicator = (
    currentPosition: number,
    previousPosition?: number | null
  ) => {
    if (!previousPosition) return null;

    const change = previousPosition - currentPosition; // Positive means moved up

    if (change > 0) {
      return (
        <div className="flex items-center gap-1 text-emerald-400">
          <TrendingUp className="h-3 w-3" />
          <span className="text-xs">+{change}</span>
        </div>
      );
    } else if (change < 0) {
      return (
        <div className="flex items-center gap-1 text-coral-accent">
          <TrendingDown className="h-3 w-3" />
          <span className="text-xs">{change}</span>
        </div>
      );
    } else {
      return (
        <div className="flex items-center gap-1 text-muted-foreground">
          <Minus className="h-3 w-3" />
        </div>
      );
    }
  };

  // Get position display
  const getPositionBadge = (position: number, isTied: boolean) => {
    const suffix = position === 1 ? "st" : position === 2 ? "nd" : position === 3 ? "rd" : "th";
    const positionText = isTied ? `T${position}` : `${position}${suffix}`;
    return <span className="font-medium">{positionText}</span>;
  };

  // Check if multiple participants share the same position
  const checkIfTied = (standing: SeasonStanding): boolean => {
    return standings.some(
      (other) =>
        other.id !== standing.id && other.position === standing.position
    );
  };

  // Count top 8 finishers (those who will get fantasy points)
  const top8Count = standings.filter((s) => s.position <= 8).length;

  return (
    <Card
      className={
        isFinalized
          ? "border-emerald-500/30"
          : "border-electric/30"
      }
    >
      <CardHeader>
        <CardTitle
          className={
            isFinalized
              ? "text-emerald-400"
              : "text-electric"
          }
        >
          <Flag className="inline mr-2 h-5 w-5" />
          {title}
        </CardTitle>
        <CardDescription>
          {isFinalized ? (
            <span className="text-emerald-400 font-semibold">
              <CheckCircle2 className="inline h-4 w-4 mr-1" />
              Season complete - Fantasy points assigned to top 8 finishers
            </span>
          ) : (
            <>
              Current championship standings. Positions calculated from points
              (highest = 1st).
              {top8Count > 0 && (
                <span className="block mt-1">
                  Top 8 finishers will receive fantasy points when season completes.
                </span>
              )}
            </>
          )}
        </CardDescription>
      </CardHeader>
      <CardContent>
        {standings.length === 0 ? (
          <div className="text-center py-8 text-muted-foreground">
            <p className="text-sm">No standings data available yet.</p>
            <p className="text-xs mt-1">
              Championship points will appear here once results are entered.
            </p>
          </div>
        ) : (
          <>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-20">Pos</TableHead>
                  {standings.some((s) => s.previousPosition) && (
                    <TableHead className="w-20">Change</TableHead>
                  )}
                  <TableHead>Participant</TableHead>
                  <TableHead className="text-right w-20">Points</TableHead>
                  {showOwnership && (
                    <TableHead className="w-40 pl-6">Drafted By</TableHead>
                  )}
                </TableRow>
              </TableHeader>
              <TableBody>
                {standings
                  .sort((a, b) => a.position - b.position)
                  .map((standing) => {
                    const ownership = getOwnership(standing.participant.id);
                    const isTied = checkIfTied(standing);
                    const isTop8 = standing.position <= 8;
                    const isOwned = userParticipantSet.has(standing.participant.id);

                    let rowClass = "";
                    if (isOwned && isTop8) {
                      rowClass = "bg-electric/8 border-l-2 border-l-electric font-medium";
                    } else if (isOwned && !isTop8) {
                      rowClass = "bg-muted/20 border-l-2 border-l-muted-foreground/40 opacity-80";
                    } else if (isTop8) {
                      rowClass = standing.position <= 3 ? "bg-muted/30 font-medium" : "";
                    } else {
                      rowClass = "opacity-60";
                    }

                    return (
                      <TableRow
                        key={standing.id}
                        className={rowClass}
                      >
                        <TableCell>
                          {getPositionBadge(standing.position, isTied)}
                        </TableCell>
                        {standings.some((s) => s.previousPosition) && (
                          <TableCell>
                            {getMovementIndicator(
                              standing.position,
                              standing.previousPosition
                            )}
                          </TableCell>
                        )}
                        <TableCell className="font-medium">
                          <span>{standing.participant.name}</span>
                          {isOwned && (
                            <Star
                              className={`inline ml-1.5 h-3 w-3 fill-current ${isTop8 ? "text-electric" : "text-muted-foreground"}`}
                            />
                          )}
                        </TableCell>
                        <TableCell className="text-right">
                          <span
                            className={`font-semibold ${
                              isTop8
                                ? "text-electric"
                                : "text-muted-foreground"
                            }`}
                          >
                            {Math.round(parseFloat(standing.championshipPoints))}
                          </span>
                        </TableCell>
                        {showOwnership && (
                          <TableCell className="pl-6">
                            {ownership ? (
                              <div className="flex items-center gap-2">
                                {getTeamAvatar(ownership.teamName)}
                                <div className="min-w-0">
                                  <p className="text-xs font-medium truncate">{ownership.teamName}</p>
                                  {ownership.ownerName && (
                                    <p className="text-xs text-muted-foreground truncate">{ownership.ownerName}</p>
                                  )}
                                </div>
                              </div>
                            ) : (
                              <span className="text-xs text-muted-foreground">-</span>
                            )}
                          </TableCell>
                        )}
                      </TableRow>
                    );
                  })}
              </TableBody>
            </Table>

            {!isFinalized && top8Count > 0 && (
              <div className="mt-4 p-3 border-t">
                <p className="text-sm text-muted-foreground">
                  <Badge variant="secondary" className="text-xs">
                    {top8Count}
                  </Badge>{" "}
                  participant{top8Count !== 1 ? "s" : ""} currently in top 8 will
                  receive fantasy points when season completes.
                </p>
              </div>
            )}
          </>
        )}
      </CardContent>
    </Card>
  );
}