'use client'

import { useDraggable } from '@dnd-kit/core'
import { CSS } from '@dnd-kit/utilities'
import { cn } from '@/lib/utils'
import type { SoloTask } from './solo-board'

const PRIORITY_BORDER: Record<number, string> = {
  1: 'border-l-4 border-l-priority-critical',
  2: 'border-l-4 border-l-priority-high',
  3: 'border-l-4 border-l-priority-medium',
  4: 'border-l-4 border-l-priority-low',
}

interface SoloTaskCardProps {
  task: SoloTask
  isDemo: boolean
  onClick: () => void
}

export function SoloTaskCard({ task, isDemo, onClick }: SoloTaskCardProps) {
  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
    id: task.id,
    disabled: isDemo,
  })

  const style = transform ? { transform: CSS.Translate.toString(transform) } : undefined

  return (
    <div
      ref={setNodeRef}
      style={style}
      onClick={onClick}
      className={cn(
        'bg-surface-container rounded border border-border px-3 py-2 select-none transition-colors',
        PRIORITY_BORDER[task.priority],
        isDragging ? 'opacity-40 z-50 shadow-lg' : 'hover:bg-surface-container-high',
        isDemo ? 'cursor-pointer' : 'cursor-grab active:cursor-grabbing',
      )}
      {...(!isDemo ? { ...attributes, ...listeners } : {})}
    >
      <p className="text-sm text-foreground leading-snug">{task.title}</p>
      <p className="text-xs text-muted-foreground mt-0.5 truncate">{task.story_title}</p>
    </div>
  )
}

export function SoloTaskCardOverlay({ task }: { task: SoloTask }) {
  return (
    <div
      className={cn(
        'bg-surface-container rounded border border-primary px-3 py-2 shadow-xl opacity-90',
        PRIORITY_BORDER[task.priority],
      )}
    >
      <p className="text-sm text-foreground leading-snug">{task.title}</p>
      <p className="text-xs text-muted-foreground mt-0.5 truncate">{task.story_title}</p>
    </div>
  )
}