import { GripVertical, Edit, Archive, RotateCcw } from 'lucide-react'
import { useSortable } from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import { cn } from '@/lib/utils'
import type { StepCategoryListItem } from '@/types'

interface CategoryRowProps {
  category: StepCategoryListItem
  stepCount: number
  onEdit: (category: StepCategoryListItem) => void
  onArchive: (id: string) => void
  onRestore: (id: string) => void
}

export function CategoryRow({
  category,
  stepCount,
  onEdit,
  onArchive,
  onRestore
}: CategoryRowProps) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging
  } = useSortable({ id: category.id })

  const style = {
    transform: CSS.Transform.toString(transform),
    transition
  }

  return (
    <div
      ref={setNodeRef}
      style={style}
      className={cn(
        'flex items-center gap-3 glass-card rounded-2xl p-4',
        isDragging && 'opacity-50'
      )}
    >
      {/* Drag Handle */}
      <button
        type="button"
        {...attributes}
        {...listeners}
        className="cursor-grab touch-none text-white/50 hover:text-white active:cursor-grabbing"
        aria-label="Drag to reorder"
      >
        <GripVertical className="h-5 w-5" />
      </button>

      {/* Category Info */}
      <div className="flex-1">
        <div className="flex items-center gap-2">
          <h3 className="font-medium text-white">{category.name}</h3>
          {!category.is_active && (
            <span className="rounded-full bg-white/10 px-2 py-0.5 text-xs font-medium text-white/70">
              Archived
            </span>
          )}
        </div>
        {category.description && (
          <p className="mt-1 text-sm text-white/40">{category.description}</p>
        )}
        <p className="mt-1 text-xs text-white/40">
          {stepCount} step{stepCount !== 1 ? 's' : ''}
        </p>
      </div>

      {/* Actions */}
      <div className="flex gap-2">
        <button
          type="button"
          onClick={() => onEdit(category)}
          className={cn(
            'rounded-md border border-white/10 bg-black/50 p-2 text-white/50',
            'hover:bg-white/10 hover:text-white'
          )}
          title="Edit category"
        >
          <Edit className="h-4 w-4" />
        </button>

        {category.is_active ? (
          <button
            type="button"
            onClick={() => onArchive(category.id)}
            className={cn(
              'rounded-md border border-input bg-background p-2 text-muted-foreground',
              'hover:bg-accent hover:text-accent-foreground'
            )}
            title="Archive category"
          >
            <Archive className="h-4 w-4" />
          </button>
        ) : (
          <button
            type="button"
            onClick={() => onRestore(category.id)}
            className={cn(
              'rounded-md border border-input bg-background p-2 text-muted-foreground',
              'hover:bg-accent hover:text-accent-foreground'
            )}
            title="Restore category"
          >
            <RotateCcw className="h-4 w-4" />
          </button>
        )}
      </div>
    </div>
  )
}