"use client";

import {
  DndContext,
  PointerSensor,
  closestCenter,
  useSensor,
  useSensors,
  type DragEndEvent,
} from "@dnd-kit/core";
import {
  SortableContext,
  arrayMove,
  horizontalListSortingStrategy,
  useSortable,
} from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { Plus } from "lucide-react";
import { displaySize, type PageState } from "@/lib/editor/types";

interface ThumbnailBarProps {
  pages: PageState[];
  currentPageId: string;
  /** pageId -> background thumbnail data URL (blank pages have none). */
  thumbnails: Record<string, string>;
  onSelect: (pageId: string) => void;
  onReorder: (pages: PageState[]) => void;
  onAddBlankPage: () => void;
}

function Thumb({
  page,
  index,
  active,
  url,
  onSelect,
}: {
  page: PageState;
  index: number;
  active: boolean;
  url: string | undefined;
  onSelect: () => void;
}) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: page.id });
  const { width, height } = displaySize(page);
  const thumbH = 72;
  const thumbW = Math.max(28, Math.round((width / height) * thumbH));

  return (
    <div
      ref={setNodeRef}
      style={{ transform: CSS.Transform.toString(transform), transition }}
      className={`flex shrink-0 cursor-pointer flex-col items-center gap-1 ${isDragging ? "z-10 opacity-80" : ""}`}
      onClick={onSelect}
      {...attributes}
      {...listeners}
    >
      <div
        className={`overflow-hidden rounded border-2 bg-white shadow-sm transition-colors ${
          active ? "border-brand-600" : "border-slate-200 hover:border-slate-400 dark:border-slate-600"
        }`}
        style={{ width: thumbW, height: thumbH }}
      >
        {url ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img src={url} alt={`Page ${index + 1}`} className="h-full w-full object-cover" draggable={false} />
        ) : (
          <div className="h-full w-full bg-white" />
        )}
      </div>
      <span className={`text-[11px] ${active ? "font-semibold text-brand-600" : "text-slate-400"}`}>{index + 1}</span>
    </div>
  );
}

export function ThumbnailBar({ pages, currentPageId, thumbnails, onSelect, onReorder, onAddBlankPage }: ThumbnailBarProps) {
  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));

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

  return (
    <footer className="flex h-28 shrink-0 items-center gap-3 overflow-x-auto border-t border-slate-200 bg-white px-4 dark:border-slate-700 dark:bg-slate-800">
      <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
        <SortableContext items={pages.map((p) => p.id)} strategy={horizontalListSortingStrategy}>
          {pages.map((page, index) => (
            <Thumb
              key={page.id}
              page={page}
              index={index}
              active={page.id === currentPageId}
              url={thumbnails[page.id]}
              onSelect={() => onSelect(page.id)}
            />
          ))}
        </SortableContext>
      </DndContext>
      <button
        type="button"
        title="Add blank page"
        onClick={onAddBlankPage}
        className="flex h-[72px] w-12 shrink-0 items-center justify-center rounded border-2 border-dashed border-slate-300 text-slate-400 transition-colors hover:border-brand-400 hover:text-brand-600 dark:border-slate-600"
      >
        <Plus className="h-5 w-5" />
      </button>
    </footer>
  );
}