brackt/app/components/draft/QueueSection.tsx

import { Button } from "~/components/ui/button";
import { Badge } from "~/components/ui/badge";
import { AutodraftSettings } from "~/components/AutodraftSettings";

interface QueueSectionProps {
  queue: Array<{
    id: string;
    participantId: string;
  }>;
  availableParticipants: Array<{
    id: string;
    name: string;
  }>;
  eligibility: {
    flexPicksUsed: number;
    flexPicksAvailable: number;
    picksBySport: Record<string, number>;
    sportAvailability: Record<
      string,
      { sportName: string; sportId: string }
    >;
    ineligibleReasons: Record<string, string>;
  } | null;
  seasonId: string;
  teamId: string;
  isMyTurn: boolean;
  userAutodraft: {
    isEnabled: boolean;
    mode: "next_pick" | "while_on";
  };
  onClearQueue: () => void;
  onRemoveFromQueue: (queueId: string) => void;
  onAutodraftUpdate: (isEnabled: boolean, mode: "next_pick" | "while_on") => void;
}

export function QueueSection({
  queue,
  availableParticipants,
  eligibility,
  seasonId,
  teamId,
  isMyTurn,
  userAutodraft,
  onClearQueue,
  onRemoveFromQueue,
  onAutodraftUpdate,
}: QueueSectionProps) {
  return (
    <div className="p-4">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-lg font-semibold">Queue ({queue.length})</h3>
        {queue.length > 0 && (
          <Button variant="outline" size="sm" onClick={onClearQueue}>
            Clear
          </Button>
        )}
      </div>

      {/* Eligibility Status Banner */}
      {eligibility && (
        <div className="mb-4 p-3 bg-muted/50 rounded-lg border">
          <div className="text-sm font-semibold mb-2">Draft Status</div>
          <div className="text-xs space-y-1">
            <div className="flex justify-between">
              <span>Flex Picks:</span>
              <span
                className={
                  eligibility.flexPicksUsed >= eligibility.flexPicksAvailable
                    ? "text-red-600 dark:text-red-400 font-semibold"
                    : "text-green-600 dark:text-green-400"
                }
              >
                {eligibility.flexPicksUsed} / {eligibility.flexPicksAvailable}
              </span>
            </div>
            {Object.entries(eligibility.picksBySport).length > 0 && (
              <>
                <div className="font-semibold mt-2 mb-1">Picks by Sport:</div>
                {Object.entries(eligibility.picksBySport).map(
                  ([sportId, count]) => {
                    const sportInfo = eligibility.sportAvailability[sportId];
                    return (
                      <div
                        key={sportId}
                        className="flex justify-between items-center pl-2"
                      >
                        <span>{sportInfo?.sportName || sportId}:</span>
                        <span className="font-mono">{count}</span>
                      </div>
                    );
                  }
                )}
              </>
            )}
            {Object.keys(eligibility.ineligibleReasons).length > 0 && (
              <>
                <div className="font-semibold mt-2 mb-1 text-red-600 dark:text-red-400">
                  Restrictions:
                </div>
                {Object.entries(eligibility.ineligibleReasons)
                  .slice(0, 2)
                  .map(([sportId, reason]) => {
                    const sportInfo = eligibility.sportAvailability[sportId];
                    return (
                      <div
                        key={sportId}
                        className="text-xs text-red-600 dark:text-red-400 pl-2"
                      >
                        {sportInfo?.sportName}: {reason}
                      </div>
                    );
                  })}
              </>
            )}
          </div>
        </div>
      )}

      {/* Queue List */}
      {queue.length === 0 ? (
        <p className="text-muted-foreground text-sm text-center py-8">
          Click participants to add to your queue
        </p>
      ) : (
        <div className="space-y-2 mb-4">
          {queue.map((item, index) => (
            <div
              key={item.id}
              className="flex items-center justify-between p-3 bg-muted rounded-lg"
            >
              <div className="flex items-center gap-3">
                <Badge variant="default">{index + 1}</Badge>
                <div>
                  <p className="font-semibold text-sm">
                    {availableParticipants.find(
                      (p) => p.id === item.participantId
                    )?.name || "Unknown"}
                  </p>
                </div>
              </div>
              <Button
                variant="destructive"
                size="sm"
                onClick={() => onRemoveFromQueue(item.id)}
              >
                Remove
              </Button>
            </div>
          ))}
        </div>
      )}

      {/* Autodraft Settings */}
      <AutodraftSettings
        seasonId={seasonId}
        teamId={teamId}
        isEnabled={userAutodraft.isEnabled}
        mode={userAutodraft.mode}
        isMyTurn={isMyTurn}
        onUpdate={onAutodraftUpdate}
      />
    </div>
  );
}