import { useState } from "react";
import { Button } from "~/components/ui/button";
import { Badge } from "~/components/ui/badge";
import { GripVertical, X } from "lucide-react";

interface Participant {
  id: string;
  name: string;
  sport: string;
  expectedValue: number;
}

interface QueueItem {
  id: string;
  participantId: string;
  queuePosition: number;
}

interface DraftQueueProps {
  queueItems: QueueItem[];
  participants: Participant[];
  onReorder?: (participantIds: string[]) => void;
  onRemove?: (queueItemId: string) => void;
}

export function DraftQueue({
  queueItems,
  participants,
  onReorder,
  onRemove,
}: DraftQueueProps) {
  const [draggedIndex, setDraggedIndex] = useState<number | null>(null);

  // Create a map for quick participant lookup
  const participantMap = new Map(participants.map((p) => [p.id, p]));

  // Sort queue items by position
  const sortedQueue = [...queueItems].sort((a, b) => a.queuePosition - b.queuePosition);

  const handleDragStart = (index: number) => {
    setDraggedIndex(index);
  };

  const handleDragOver = (e: React.DragEvent, index: number) => {
    e.preventDefault();
    if (draggedIndex === null || draggedIndex === index) return;

    // Reorder the items
    const newQueue = [...sortedQueue];
    const draggedItem = newQueue[draggedIndex];
    newQueue.splice(draggedIndex, 1);
    newQueue.splice(index, 0, draggedItem);

    // Update positions and notify parent
    const participantIds = newQueue.map((item) => item.participantId);
    onReorder?.(participantIds);
    setDraggedIndex(index);
  };

  const handleDragEnd = () => {
    setDraggedIndex(null);
  };

  if (sortedQueue.length === 0) {
    return (
      <div className="text-center py-8 text-muted-foreground">
        <p>Your queue is empty</p>
        <p className="text-sm mt-2">Add players from the Available Players list</p>
      </div>
    );
  }

  return (
    <div className="space-y-2">
      {sortedQueue.map((item, index) => {
        const participant = participantMap.get(item.participantId);
        if (!participant) return null;

        return (
          <div
            key={item.id}
            draggable
            onDragStart={() => handleDragStart(index)}
            onDragOver={(e) => handleDragOver(e, index)}
            onDragEnd={handleDragEnd}
            className={`flex items-center gap-2 p-3 rounded-lg border bg-card transition-all ${
              draggedIndex === index ? "opacity-50" : "hover:bg-accent cursor-move"
            }`}
          >
            {/* Drag Handle */}
            <div className="flex items-center gap-2 text-muted-foreground">
              <GripVertical className="h-4 w-4" />
              <span className="text-sm font-semibold w-6">{index + 1}</span>
            </div>

            {/* Player Info */}
            <div className="flex-1 min-w-0">
              <div className="font-medium truncate">{participant.name}</div>
              <div className="flex items-center gap-2 mt-1">
                <Badge variant="secondary" className="text-xs">
                  {participant.sport}
                </Badge>
                <span className="text-xs text-muted-foreground">
                  EV: {participant.expectedValue.toFixed(1)}
                </span>
              </div>
            </div>

            {/* Remove Button */}
            {onRemove && (
              <Button
                variant="ghost"
                size="sm"
                onClick={() => onRemove(item.id)}
                className="h-8 w-8 p-0"
              >
                <X className="h-4 w-4" />
              </Button>
            )}
          </div>
        );
      })}
    </div>
  );
}