"use client";

import {
  DndContext,
  KeyboardSensor,
  PointerSensor,
  closestCenter,
  useSensor,
  useSensors,
  type DragEndEvent,
} from "@dnd-kit/core";
import {
  SortableContext,
  arrayMove,
  sortableKeyboardCoordinates,
  useSortable,
  verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { FileText, GripVertical, X } from "lucide-react";
import type { FileDto } from "@use2pdf/shared-types";
import { formatBytes } from "@/lib/format";

interface MergeReorderListProps {
  files: FileDto[];
  onReorder: (files: FileDto[]) => void;
  onRemove: (fileId: string) => void;
  disabled?: boolean;
}

function SortableFileRow({
  file,
  index,
  onRemove,
  disabled,
}: {
  file: FileDto;
  index: number;
  onRemove: (fileId: string) => void;
  disabled?: boolean;
}) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id: file.id,
    disabled,
  });

  return (
    <li
      ref={setNodeRef}
      style={{ transform: CSS.Transform.toString(transform), transition }}
      className={`flex items-center gap-3 rounded-md border border-slate-200 bg-white px-3 py-2.5 ${
        isDragging ? "z-10 shadow-lg" : "shadow-sm"
      }`}
    >
      <button
        type="button"
        aria-label={`Reorder ${file.originalName}`}
        className="cursor-grab touch-none text-slate-400 hover:text-slate-600 disabled:cursor-not-allowed"
        disabled={disabled}
        {...attributes}
        {...listeners}
      >
        <GripVertical className="h-5 w-5" />
      </button>
      <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-brand-100 text-xs font-semibold text-brand-700">
        {index + 1}
      </span>
      <FileText className="h-6 w-6 shrink-0 text-red-500" />
      <div className="min-w-0 flex-1">
        <p className="truncate text-sm font-medium text-slate-900">{file.originalName}</p>
        <p className="text-xs text-slate-500">{formatBytes(file.sizeBytes)}</p>
      </div>
      <button
        type="button"
        aria-label={`Remove ${file.originalName}`}
        className="text-slate-400 hover:text-red-600 disabled:cursor-not-allowed"
        onClick={() => onRemove(file.id)}
        disabled={disabled}
      >
        <X className="h-4 w-4" />
      </button>
    </li>
  );
}

export function MergeReorderList({ files, onReorder, onRemove, disabled }: MergeReorderListProps) {
  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
  );

  function handleDragEnd(event: DragEndEvent) {
    const { active, over } = event;
    if (over && active.id !== over.id) {
      const oldIndex = files.findIndex((f) => f.id === active.id);
      const newIndex = files.findIndex((f) => f.id === over.id);
      onReorder(arrayMove(files, oldIndex, newIndex));
    }
  }

  return (
    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
      <SortableContext items={files.map((f) => f.id)} strategy={verticalListSortingStrategy}>
        <ul className="space-y-2">
          {files.map((file, index) => (
            <SortableFileRow
              key={file.id}
              file={file}
              index={index}
              onRemove={onRemove}
              disabled={disabled}
            />
          ))}
        </ul>
      </SortableContext>
    </DndContext>
  );
}