brackt/app/components/standings/TeamScoreBreakdown.tsx

import { useState } from "react";
import { Link } from "react-router";
import { ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
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;
}

type SortColumn = "pick" | "points" | "sport" | "participant";
type SortDirection = "asc" | "desc";

function SortIndicator({ column, sortColumn, sortDirection }: { column: SortColumn; sortColumn: SortColumn; sortDirection: SortDirection }) {
  if (sortColumn !== column) return <ArrowUpDown className="ml-1 h-3 w-3 text-muted-foreground/40" />;
  return sortDirection === "asc"
    ? <ArrowUp className="ml-1 h-3 w-3" />
    : <ArrowDown className="ml-1 h-3 w-3" />;
}

function SortableHeader({ column, label, sortColumn, sortDirection, onSort, className }: {
  column: SortColumn;
  label: string;
  sortColumn: SortColumn;
  sortDirection: SortDirection;
  onSort: (column: SortColumn) => void;
  className?: string;
}) {
  return (
    <button
      onClick={() => onSort(column)}
      aria-sort={sortColumn === column ? (sortDirection === "asc" ? "ascending" : "descending") : "none"}
      className={`flex items-center hover:text-foreground cursor-pointer ${className ?? ""}`}
    >
      {label}<SortIndicator column={column} sortColumn={sortColumn} sortDirection={sortDirection} />
    </button>
  );
}

const cmp = (a: string, b: string) => a.localeCompare(b, undefined, { sensitivity: "base" });

function sortPicks(
  picks: TeamScoreBreakdownProps["breakdown"]["picks"],
  sortColumn: SortColumn,
  sortDirection: SortDirection,
) {
  const dir = sortDirection === "asc" ? 1 : -1;
  return picks.toSorted((a, b) => {
    if (sortColumn === "pick") {
      return (a.pickNumber - b.pickNumber) * dir;
    }
    if (sortColumn === "sport") {
      const sportCmp = cmp(a.participant.sport, b.participant.sport) * dir;
      if (sportCmp !== 0) return sportCmp;
      return cmp(a.participant.name, b.participant.name) * dir;
    }
    if (sortColumn === "participant") {
      return cmp(a.participant.name, b.participant.name) * dir;
    }
    // points: sort by actual first, then projected
    const pointsDiff = a.points - b.points;
    if (pointsDiff !== 0) return pointsDiff * dir;
    const aProjected = a.projectedPoints ?? 0;
    const bProjected = b.projectedPoints ?? 0;
    return (aProjected - bProjected) * dir;
  });
}

/**
 * Display detailed team score breakdown with all drafted participants
 * Phase 4.3: Team breakdown pages
 */
export function TeamScoreBreakdown({
  leagueId,
  seasonId,
  numTeams,
  breakdown,
  standing,
}: TeamScoreBreakdownProps) {
  const [sortColumn, setSortColumn] = useState<SortColumn>("pick");
  const [sortDirection, setSortDirection] = useState<SortDirection>("asc");

  if (!breakdown.team) {
    return (
      <div className="text-center text-muted-foreground py-8">
        Team not found
      </div>
    );
  }

  const remaining = breakdown.totalCount - breakdown.completedCount;

  function handleSort(column: SortColumn) {
    if (sortColumn === column) {
      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
    } else {
      setSortColumn(column);
      setSortDirection(column === "points" ? "desc" : "asc");
    }
  }

  const allPicks = sortPicks(breakdown.picks, sortColumn, sortDirection);

  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="min-w-[90px]">
                  <SortableHeader column="pick" label="Pick #" sortColumn={sortColumn} sortDirection={sortDirection} onSort={handleSort} />
                </TableHead>
                <TableHead>
                  <SortableHeader column="sport" label="Sport" sortColumn={sortColumn} sortDirection={sortDirection} onSort={handleSort} />
                </TableHead>
                <TableHead>
                  <SortableHeader column="participant" label="Participant" sortColumn={sortColumn} sortDirection={sortDirection} onSort={handleSort} />
                </TableHead>
                <TableHead className="text-center">Position</TableHead>
                <TableHead className="text-right">
                  <button
                    onClick={() => handleSort("points")}
                    aria-sort={sortColumn === "points" ? (sortDirection === "asc" ? "ascending" : "descending") : "none"}
                    className="flex flex-col items-end ml-auto hover:text-foreground cursor-pointer"
                  >
                    <div className="flex items-center">
                      Points<SortIndicator column="points" sortColumn={sortColumn} sortDirection={sortDirection} />
                    </div>
                    <div className="text-xs font-normal text-muted-foreground">actual / projected</div>
                  </button>
                </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 ?? 0} />
                      )
                    ) : (
                      <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>
  );
}