brackt/app/components/draft/DraftGridSection.tsx

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "~/components/ui/context-menu";

interface DraftGridSectionProps {
  draftSlots: Array<{
    id: string;
    draftOrder: number;
    team: {
      id: string;
      name: string;
    };
  }>;
  draftGrid: Array<
    Array<{
      pickNumber: number;
      round: number;
      pickInRound: number;
      teamId: string;
      pick?: {
        participant: {
          name: string;
        };
        sport: {
          name: string;
        };
      };
    }>
  >;
  currentPick: number;
  teamTimers: Record<string, number>;
  autodraftStatus: Record<string, boolean>;
  connectedTeams: Set<string>;
  isCommissioner: boolean;
  onForceAutopick: (pickNumber: number, teamId: string) => void;
  onForceManualPickOpen: (pickNumber: number, teamId: string) => void;
}

export function DraftGridSection({
  draftSlots,
  draftGrid,
  currentPick,
  teamTimers,
  autodraftStatus,
  connectedTeams,
  isCommissioner,
  onForceAutopick,
  onForceManualPickOpen,
}: DraftGridSectionProps) {
  const formatTime = (seconds: number | null) => {
    if (seconds === null) return "--:--";

    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const secs = seconds % 60;

    if (hours > 0) {
      return `${hours}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
    }
    return `${minutes}:${String(secs).padStart(2, "0")}`;
  };

  const getTimerColor = (seconds: number | null) => {
    if (seconds === null) return "text-muted-foreground";
    if (seconds > 60) return "text-green-600 dark:text-green-400";
    if (seconds > 30) return "text-yellow-600 dark:text-yellow-400";
    if (seconds > 10) return "text-red-600 dark:text-red-400";
    return "text-red-600 dark:text-red-400 animate-pulse";
  };

  return (
    <div className="h-full overflow-auto p-4">
      <h2 className="text-xl font-semibold mb-4">Draft Grid</h2>
      <div className="overflow-x-auto">
        <div className="w-full">
          {/* Team Headers */}
          <div className="flex gap-2 mb-2">
            {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-32 text-center">
                  <div
                    className={`font-semibold text-sm truncate px-2 ${!isConnected ? "italic text-muted-foreground" : ""}`}
                  >
                    {slot.team.name}
                  </div>
                  <div
                    className={`text-xs font-mono ${getTimerColor(teamTime)}`}
                  >
                    {formatTime(teamTime)}
                    {isAutodraft && (
                      <span className="ml-1 text-muted-foreground">
                        (auto)
                      </span>
                    )}
                  </div>
                </div>
              );
            })}
          </div>

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

              return (
                <div key={roundIndex} className="flex gap-2">
                  {displayPicks.map((cell) => {
                    const isCurrent = cell.pickNumber === currentPick;
                    const isPicked = !!cell.pick;

                    return isCommissioner && !isPicked && isCurrent ? (
                      <ContextMenu key={cell.pickNumber}>
                        <ContextMenuTrigger asChild>
                          <div
                            className={`flex-1 min-w-32 h-20 border-2 rounded-lg p-2 transition-all ${
                              isCurrent
                                ? "border-blue-500 bg-blue-50 dark:bg-blue-950 shadow-lg"
                                : isPicked
                                  ? "border-green-500 bg-green-50 dark:bg-green-950"
                                  : "border-gray-300 bg-white dark:bg-gray-900"
                            }`}
                            title={`Overall Pick #${cell.pickNumber}`}
                          >
                            <div className="text-xs font-mono text-muted-foreground mb-1">
                              {cell.round}.
                              {String(cell.pickInRound).padStart(2, "0")}
                            </div>
                            {isPicked ? (
                              <div className="text-xs">
                                <div className="font-semibold truncate">
                                  {cell.pick?.participant.name}
                                </div>
                                <div className="text-muted-foreground truncate">
                                  {cell.pick?.sport.name}
                                </div>
                              </div>
                            ) : isCurrent ? (
                              <div className="text-xs font-semibold text-blue-600 dark:text-blue-400">
                                On Clock
                              </div>
                            ) : null}
                          </div>
                        </ContextMenuTrigger>
                        <ContextMenuContent>
                          <ContextMenuItem
                            onClick={() =>
                              onForceAutopick(cell.pickNumber, cell.teamId)
                            }
                          >
                            Force Auto Pick
                          </ContextMenuItem>
                          <ContextMenuItem
                            onClick={() =>
                              onForceManualPickOpen(
                                cell.pickNumber,
                                cell.teamId
                              )
                            }
                          >
                            Force Manual Pick
                          </ContextMenuItem>
                        </ContextMenuContent>
                      </ContextMenu>
                    ) : (
                      <div
                        key={cell.pickNumber}
                        className={`flex-1 min-w-32 h-20 border-2 rounded-lg p-2 transition-all ${
                          isCurrent
                            ? "border-blue-500 bg-blue-50 dark:bg-blue-950 shadow-lg"
                            : isPicked
                              ? "border-green-500 bg-green-50 dark:bg-green-950"
                              : "border-gray-300 bg-white dark:bg-gray-900"
                        }`}
                        title={`Overall Pick #${cell.pickNumber}`}
                      >
                        <div className="text-xs font-mono text-muted-foreground mb-1">
                          {cell.round}.
                          {String(cell.pickInRound).padStart(2, "0")}
                        </div>
                        {isPicked ? (
                          <div className="text-xs">
                            <div className="font-semibold truncate">
                              {cell.pick?.participant.name}
                            </div>
                            <div className="text-muted-foreground truncate">
                              {cell.pick?.sport.name}
                            </div>
                          </div>
                        ) : isCurrent ? (
                          <div className="text-xs font-semibold text-blue-600 dark:text-blue-400">
                            On Clock
                          </div>
                        ) : null}
                      </div>
                    );
                  })}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}