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>

      {/* 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-1.5 mb-4">
          {queue.map((item, index) => (
            <div
              key={item.id}
              className="flex items-center justify-between p-2 bg-muted rounded-lg"
            >
              <div className="flex items-center gap-2">
                <Badge variant="default" className="text-xs">{index + 1}</Badge>
                <div>
                  <p className="font-semibold text-sm">
                    {availableParticipants.find(
                      (p) => p.id === item.participantId
                    )?.name || "Unknown"}
                  </p>
                </div>
              </div>
              <Button
                variant="ghost"
                size="icon"
                className="h-7 w-7 text-destructive hover:text-destructive hover:bg-destructive/10"
                onClick={() => onRemoveFromQueue(item.id)}
                title="Remove from queue"
              >
                <span className="text-lg">×</span>
              </Button>
            </div>
          ))}
        </div>
      )}

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