brackt/app/components/standings/TeamScoreBreakdown.tsx

import { Link } from "react-router";
import { Card, CardContent } from "~/components/ui/card";
import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "~/components/ui/table";
import { Badge } from "~/components/ui/badge";

interface TeamScoreBreakdownProps {
  leagueId: string;
  seasonId: string;
  numTeams: number;
  breakdown: {
    team: {
      id: string;
      name: string;
    } | null;
    picks: Array<{
      pickNumber: number;
      round: number;
      participant: {
        id: string;
        name: string;
        sport: string;
        sportsSeasonId: string;
      };
      finalPosition: number | null;
      points: number;
      projectedPoints: number | null;
      isComplete: boolean;
      isPartialScore: boolean;
    }>;
    actualPoints: number;
    projectedPoints: number;
    completedCount: number;
    totalCount: number;
  };
  standing: {
    currentRank: number;
  } | null;
}

/**
 * Display detailed team score breakdown with all drafted participants
 * Phase 4.3: Team breakdown pages
 */
export function TeamScoreBreakdown({
  leagueId,
  seasonId,
  numTeams,
  breakdown,
  standing,
}: TeamScoreBreakdownProps) {
  if (!breakdown.team) {
    return (
      <div className="text-center text-muted-foreground py-8">
        Team not found
      </div>
    );
  }

  const remaining = breakdown.totalCount - breakdown.completedCount;

  // Flatten all picks sorted by sport name then pick number
  const allPicks = breakdown.picks
    .slice()
    .toSorted((a, b) => {
      const sportCmp = a.participant.sport.localeCompare(b.participant.sport);
      return sportCmp !== 0 ? sportCmp : a.pickNumber - b.pickNumber;
    });

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-start justify-between">
        <div>
          <h1 className="text-3xl font-bold">{breakdown.team.name}</h1>
          <p className="text-muted-foreground mt-1">Team Score Breakdown</p>
        </div>
        <div className="text-right">
          <div className="text-4xl font-bold text-primary">
            {breakdown.actualPoints.toFixed(2)}
          </div>
          <div className="text-sm text-muted-foreground">Actual Points</div>
          {breakdown.projectedPoints > breakdown.actualPoints && (
            <div className="text-xl font-semibold text-electric mt-1">
              {breakdown.projectedPoints.toFixed(2)}
              <span className="text-xs text-muted-foreground ml-1">projected</span>
            </div>
          )}
          {remaining > 0 && (
            <div className="text-sm text-muted-foreground mt-1">
              {remaining} participant{remaining !== 1 ? "s" : ""} remaining
            </div>
          )}
          {standing && (
            <Badge className="mt-2" variant={standing.currentRank <= 3 ? "default" : "outline"}>
              Rank #{standing.currentRank}
            </Badge>
          )}
        </div>
      </div>

      {/* All picks — single flat table */}
      <Card>
        <CardContent className="pt-4">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-[90px]">Pick #</TableHead>
                <TableHead>Sport</TableHead>
                <TableHead>Participant</TableHead>
                <TableHead className="text-center">Position</TableHead>
                <TableHead className="text-right">
                  <div>Points</div>
                  <div className="text-xs font-normal text-muted-foreground">actual / projected</div>
                </TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {allPicks.map((pick) => (
                <TableRow key={pick.pickNumber}>
                  <TableCell className="text-muted-foreground">
                    {numTeams > 0
                      ? `${pick.round}.${String(pick.pickNumber - (pick.round - 1) * numTeams).padStart(2, "0")}`
                      : `#${pick.pickNumber}`}
                    <span className="text-xs ml-1">(#{pick.pickNumber})</span>
                  </TableCell>
                  <TableCell>
                    <Link
                      to={`/leagues/${leagueId}/sports-seasons/${pick.participant.sportsSeasonId}`}
                      className="text-sm font-medium hover:underline text-primary"
                    >
                      {pick.participant.sport}
                    </Link>
                  </TableCell>
                  <TableCell className="font-medium">
                    {pick.participant.name}
                  </TableCell>
                  <TableCell className="text-center">
                    {pick.isComplete && !pick.isPartialScore ? (
                      (pick.finalPosition ?? 0) === 0 ? (
                        <Badge variant="secondary">Did Not Score</Badge>
                      ) : (
                        <PlacementBadge position={pick.finalPosition!} />
                      )
                    ) : (
                      <Badge variant="outline">Pending</Badge>
                    )}
                  </TableCell>
                  <TableCell className="text-right">
                    {pick.isComplete && !pick.isPartialScore ? (
                      <span className="font-semibold">
                        {pick.points > 0 ? pick.points.toFixed(2) : "0.00"}
                      </span>
                    ) : (
                      <div className="flex flex-col items-end">
                        <span className="font-semibold">{pick.points.toFixed(2)}</span>
                        {pick.projectedPoints !== null && (
                          <span className="text-xs text-muted-foreground">
                            {pick.projectedPoints.toFixed(2)}
                          </span>
                        )}
                      </div>
                    )}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      {/* Navigation */}
      <div className="flex justify-between pt-4">
        <Link
          to={`/leagues/${leagueId}/standings/${seasonId}`}
          className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground"
        >
          ← Back to Standings
        </Link>
      </div>
    </div>
  );
}

/**
 * Display placement badge with color coding
 */
function PlacementBadge({ position }: { position: number }) {
  const badges: Record<number, { label: string; className: string }> = {
    1: { label: "1st", className: "bg-amber-accent hover:bg-amber-accent/80 text-background" },
    2: { label: "2nd", className: "bg-muted hover:bg-muted/80 text-muted-foreground" },
    3: { label: "3rd", className: "bg-coral-accent hover:bg-coral-accent/80 text-background" },
    4: { label: "4th", className: "bg-electric/20 hover:bg-electric/30 text-electric" },
    5: { label: "5th", className: "bg-purple-500/20 hover:bg-purple-500/30 text-purple-400" },
    6: { label: "6th", className: "bg-emerald-500/20 hover:bg-emerald-500/30 text-emerald-400" },
    7: { label: "7th", className: "bg-pink-500/20 hover:bg-pink-500/30 text-pink-400" },
    8: { label: "8th", className: "bg-indigo-500/20 hover:bg-indigo-500/30 text-indigo-400" },
  };

  const badge = badges[position] || { label: `${position}th`, className: "" };

  return (
    <Badge className={badge.className}>
      {badge.label}
    </Badge>
  );
}