brackt/app/components/DraftGrid.tsx

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "~/components/ui/context-menu";
import { DraftPickCell, type CoronaState } from "~/components/draft/DraftPickCell";
import { TeamAvatar } from "~/components/TeamAvatar";
import type { SeasonStatus } from "~/models/season";
import type { AvatarData, RawFlagConfig } from "~/lib/flag-types";

interface DraftCell {
  pickNumber: number;
  participant: { id: string; name: string };
  sport: { id: string; name: string };
  team: { id: string; name: string };
}

interface DraftGridProps {
  draftSlots: Array<{
    id: string;
    draftOrder: number;
    team: {
      id: string;
      name: string;
      logoUrl?: string | null;
      flagConfig?: RawFlagConfig | null;
      avatarType?: string | null;
      ownerAvatarData?: AvatarData | null;
    };
  }>;
  draftGrid: Array<Array<DraftCell | null>>;
  currentPick: number;
  teamTimers?: Record<string, number>;
  formatTime?: (seconds: number | undefined) => string;
  title?: string;
  isCommissioner?: boolean;
  onForceAutopick?: (pickNumber: number, teamId: string) => void;
  onForceManualPick?: (pickNumber: number, teamId: string) => void;
  autodraftStatus?: Record<string, boolean>;
  connectedTeams?: Set<string>;
  ownerMap?: Record<string, string>;
  coronaStates?: Record<string, CoronaState>;
  seasonStatus?: SeasonStatus;
  draftPaused?: boolean;
}

export function DraftGrid({
  draftSlots,
  draftGrid,
  currentPick,
  teamTimers,
  formatTime,
  title,
  isCommissioner = false,
  onForceAutopick,
  onForceManualPick,
  autodraftStatus = {},
  connectedTeams = new Set(),
  ownerMap = {},
  coronaStates = {},
  seasonStatus,
  draftPaused,
}: DraftGridProps) {
  const totalTeams = draftSlots.length;

  return (
    <div className="p-2 md:p-4">
      {title && <h2 className="text-xl font-semibold mb-4">{title}</h2>}
      <div className="w-full overflow-x-auto">
        <div className="min-w-max">
        {/* Team Headers */}
        <div className="flex gap-1.5 mb-1.5">
          {draftSlots.map((slot) => {
            const teamTime = teamTimers?.[slot.team.id];
            const isAutodraft = autodraftStatus[slot.team.id] || false;
            const isConnected = connectedTeams.has(slot.team.id);

            return (
              <div key={slot.id} className="flex-1 min-w-20 text-center">
                <div className="flex justify-center mb-1">
                  <TeamAvatar
                    teamId={slot.team.id}
                    teamName={ownerMap[slot.team.id] || slot.team.name}
                    logoUrl={slot.team.logoUrl}
                    flagConfig={slot.team.flagConfig}
                    avatarType={slot.team.avatarType}
                    ownerAvatarData={slot.team.ownerAvatarData}
                    size="lg"
                  />
                </div>
                <div
                  className={`font-semibold text-xs truncate px-1 flex items-center justify-center ${!isConnected ? "italic text-muted-foreground" : ""}`}
                >
                  {isAutodraft && (
                    <span className="mr-1 inline-flex items-center justify-center h-4 w-4 text-[10px] font-bold text-white bg-black shrink-0">A</span>
                  )}
                  <span className="truncate">{ownerMap[slot.team.id] || slot.team.name}</span>
                </div>
                {teamTimers && formatTime && (
                  <div
                    className={`text-sm font-mono ${
                      teamTime === undefined
                        ? "text-muted-foreground"
                        : teamTime > 60
                          ? "text-emerald-400"
                          : teamTime > 30
                            ? "text-amber-accent"
                            : "text-coral-accent"
                    }`}
                  >
                    {formatTime(teamTime)}
                  </div>
                )}
              </div>
            );
          })}
        </div>

        {/* Draft Grid Rows */}
        <div className="space-y-1.5">
          {draftGrid.map((roundPicks, roundIndex) => {
            const round = roundIndex + 1;
            const isEvenRound = round % 2 === 0;
            const displayPicks = isEvenRound
              ? [...roundPicks].toReversed()
              : roundPicks;

            return (
              <div key={round} className="flex gap-1.5">
                {displayPicks.map((cell, index) => {
                  const actualIndex = isEvenRound
                    ? roundPicks.length - 1 - index
                    : index;
                  const pickNumber = roundIndex * totalTeams + actualIndex + 1;
                  const isCurrent = pickNumber === currentPick;
                  const isPicked = !!cell;

                  const cellContent = (
                    <DraftPickCell
                      key={pickNumber}
                      pickNumber={pickNumber}
                      round={round}
                      pickInRound={actualIndex + 1}
                      state={
                        isPicked ? "picked" : isCurrent ? "current" : "upcoming"
                      }
                      pick={
                        cell
                          ? {
                              participant: { name: cell.participant.name },
                              sport: { name: cell.sport.name },
                            }
                          : undefined
                      }
                      coronaState={
                        cell ? coronaStates[cell.participant.id] : undefined
                      }
                      seasonStatus={seasonStatus}
                      draftPaused={draftPaused}
                    />
                  );

                  if (
                    isCommissioner &&
                    !isPicked &&
                    isCurrent &&
                    onForceAutopick &&
                    onForceManualPick
                  ) {
                    const slot = draftSlots[actualIndex];
                    return (
                      <ContextMenu key={pickNumber}>
                        <ContextMenuTrigger asChild>
                          {cellContent}
                        </ContextMenuTrigger>
                        <ContextMenuContent>
                          <ContextMenuItem
                            onClick={() =>
                              onForceAutopick(pickNumber, slot.team.id)
                            }
                          >
                            Force Auto Pick
                          </ContextMenuItem>
                          <ContextMenuItem
                            onClick={() =>
                              onForceManualPick(pickNumber, slot.team.id)
                            }
                          >
                            Force Manual Pick
                          </ContextMenuItem>
                        </ContextMenuContent>
                      </ContextMenu>
                    );
                  }

                  return cellContent;
                })}
              </div>
            );
          })}
        </div>
        </div>
      </div>
    </div>
  );
}