brackt/app/components/draft/TeamsDraftedGrid.tsx

import { Badge } from "~/components/ui/badge";
import { useMemo } from "react";

interface TeamsDraftedGridProps {
  draftSlots: Array<{
    id: string;
    draftOrder: number;
    team: {
      id: string;
      name: string;
      seasonId: string;
    };
  }>;
  picks: Array<{
    id: string;
    team: {
      id: string;
      name: string;
    };
    participant: {
      id: string;
      name: string;
    };
    sport: {
      id: string;
      name: string;
    };
  }>;
  availableParticipants: Array<{
    id: string;
    name: string;
    sport: {
      id: string;
      name: string;
    };
  }>;
  season: {
    numFlexPicks: number;
  };
}

export function TeamsDraftedGrid({
  draftSlots,
  picks,
  availableParticipants,
  season,
}: TeamsDraftedGridProps) {
  // Get unique sports from all available participants (not just picked ones)
  const sports = useMemo(() => {
    const sportMap = new Map<string, { id: string; name: string }>();
    availableParticipants.forEach((participant) => {
      if (!sportMap.has(participant.sport.id)) {
        sportMap.set(participant.sport.id, {
          id: participant.sport.id,
          name: participant.sport.name,
        });
      }
    });
    return Array.from(sportMap.values()).sort((a, b) =>
      a.name.localeCompare(b.name)
    );
  }, [availableParticipants]);

  // Calculate picks by team and sport
  const picksByTeamAndSport = useMemo(() => {
    const map = new Map<string, Map<string, typeof picks>>();

    picks.forEach((pick) => {
      if (!map.has(pick.team.id)) {
        map.set(pick.team.id, new Map());
      }
      const teamMap = map.get(pick.team.id)!;
      if (!teamMap.has(pick.sport.id)) {
        teamMap.set(pick.sport.id, []);
      }
      teamMap.get(pick.sport.id)!.push(pick);
    });

    return map;
  }, [picks]);

  // Calculate flex picks used by each team
  const flexPicksByTeam = useMemo(() => {
    const map = new Map<string, number>();

    draftSlots.forEach((slot) => {
      const teamPicks = picks.filter((p) => p.team.id === slot.team.id);
      const flexUsed = Math.max(0, teamPicks.length - sports.length);
      map.set(slot.team.id, flexUsed);
    });

    return map;
  }, [picks, draftSlots, sports]);

  if (sports.length === 0) {
    return (
      <div className="flex items-center justify-center h-full p-8 text-muted-foreground">
        <p>No picks have been made yet</p>
      </div>
    );
  }

  return (
    <div className="w-full h-full overflow-auto">
      <table className="w-full border-collapse">
          <thead className="sticky top-0 bg-background z-10">
            <tr>
              <th className="border-r border-b border-border p-2 text-left font-semibold min-w-[150px] bg-muted/50">
                Sport
              </th>
              {draftSlots.map((slot, index) => {
                const flexUsed = flexPicksByTeam.get(slot.team.id) || 0;
                const isLast = index === draftSlots.length - 1;
                return (
                  <th
                    key={slot.id}
                    className={`border-b border-border p-2 text-left font-semibold min-w-[180px] bg-muted/50 ${!isLast ? 'border-r' : ''}`}
                  >
                    <div className="flex flex-col gap-1">
                      <div className="font-semibold text-sm">
                        {slot.team.name}
                      </div>
                      <div className="text-xs text-muted-foreground font-normal">
                        {flexUsed} of {season.numFlexPicks} flex
                      </div>
                    </div>
                  </th>
                );
              })}
            </tr>
          </thead>
          <tbody className="border-b border-border">
            {sports.map((sport, sportIndex) => {
              const isLastRow = sportIndex === sports.length - 1;
              return (
                <tr key={sport.id}>
                  <td className={`border-r border-border p-2 font-medium bg-muted/30 ${!isLastRow ? 'border-b' : ''}`}>
                    {sport.name}
                  </td>
                  {draftSlots.map((slot, slotIndex) => {
                    const teamSportPicks =
                      picksByTeamAndSport
                        .get(slot.team.id)
                        ?.get(sport.id) || [];
                    const hasMultiplePicks = teamSportPicks.length > 1;
                    const isLastCol = slotIndex === draftSlots.length - 1;

                    return (
                      <td
                        key={`${slot.team.id}-${sport.id}`}
                        className={`border-border p-2 ${
                          hasMultiplePicks
                            ? "bg-accent/30 font-semibold"
                            : "bg-background"
                        } ${!isLastRow ? 'border-b' : ''} ${!isLastCol ? 'border-r' : ''}`}
                      >
                      {teamSportPicks.length > 0 ? (
                        <div className="flex flex-col gap-1">
                          {teamSportPicks.map((pick) => (
                            <div
                              key={pick.id}
                              className="text-sm flex items-center gap-1"
                            >
                              <span>{pick.participant.name}</span>
                              {hasMultiplePicks && (
                                <Badge
                                  variant="secondary"
                                  className="text-xs px-1 py-0"
                                >
                                  {teamSportPicks.indexOf(pick) + 1}
                                </Badge>
                              )}
                            </div>
                          ))}
                        </div>
                      ) : null}
                    </td>
                  );
                })}
                </tr>
              );
            })}
          </tbody>
        </table>
    </div>
  );
}