import type { PlaylistSound } from '@/lib/api/services/playlists'
import type { Sound } from '@/lib/api/services/sounds'
import { useDroppable } from '@dnd-kit/core'
import { Music } from 'lucide-react'

// Simple drop area for the end of the playlist
export function EndDropArea() {
  const { setNodeRef } = useDroppable({
    id: 'playlist-end',
    data: { type: 'playlist-end' },
  })

  return (
    <div
      ref={setNodeRef}
      className="h-8 w-full" // Invisible drop area
    />
  )
}

// Inline preview component that shows where the sound will be dropped
interface InlinePreviewProps {
  sound: Sound | PlaylistSound
  position: number
}

export function InlinePreview({ sound, position }: InlinePreviewProps) {
  return (
    <div className="flex items-center gap-3 p-3 border-2 border-dashed border-primary rounded-lg bg-primary/10 animate-pulse">
      <span className="text-sm font-mono text-primary min-w-[1.5rem] text-center flex-shrink-0">
        {position + 1}
      </span>

      <Music className="h-4 w-4 text-primary flex-shrink-0" />

      <div className="min-w-0 flex-1">
        <div className="font-medium truncate text-primary">{sound.name}</div>
      </div>
    </div>
  )
}

// Drag overlay component that shows the dragged item
interface DragOverlayContentProps {
  sound: Sound | PlaylistSound
  position?: number
}

export function DragOverlayContent({ sound, position }: DragOverlayContentProps) {
  // If position is provided, show as current playlist style
  if (position !== undefined) {
    return (
      <div className="flex items-center gap-3 p-3 border rounded-lg bg-background shadow-lg">
        <span className="text-sm font-mono text-muted-foreground min-w-[1.5rem] text-center flex-shrink-0">
          {position + 1}
        </span>

        <Music className="h-4 w-4 text-muted-foreground flex-shrink-0" />

        <div className="min-w-0 flex-1">
          <div className="font-medium truncate">{sound.name}</div>
        </div>
      </div>
    )
  }

  // Default available sound style
  return (
    <div className="flex items-center gap-3 p-3 border rounded-lg bg-background shadow-lg">
      <Music className="h-4 w-4 text-muted-foreground flex-shrink-0" />

      <div className="min-w-0 flex-1">
        <div className="font-medium truncate">{sound.name}</div>
      </div>
    </div>
  )
}