// Adapted from Kibo UI (MIT), with owned React/CSS APIs. See THIRD_PARTY_NOTICES.md.
"use client";
import { useState, type ComponentProps, type ReactNode } from "react";
import {
  DndContext,
  PointerSensor,
  KeyboardSensor,
  useSensor,
  useSensors,
  useDroppable,
  closestCenter,
  type DragEndEvent,
} from "./_ynrlib/dnd-core.js";
import {
  SortableContext,
  useSortable,
  verticalListSortingStrategy,
  sortableKeyboardCoordinates,
  arrayMove,
} from "./_ynrlib/dnd-sortable.js";
import { CSS } from "./_ynrlib/dnd-utilities.js";
export interface KanbanItem {
  id: string;
  title: string;
  column: string;
}
export interface KanbanColumn {
  id: string;
  title: string;
}
export type KanbanProps<T extends KanbanItem> = ComponentProps<"div"> & {
  columns: readonly KanbanColumn[];
  items: T[];
  onItemsChange: (items: T[]) => void;
  renderItem?: (item: T) => ReactNode;
  disabled?: boolean;
};
function BoardColumn({
  column,
  children,
}: {
  column: KanbanColumn;
  children: ReactNode;
}) {
  const { setNodeRef, isOver } = useDroppable({ id: `column:${column.id}` });
  return (
    <div
      role="group"
      aria-label={column.title}
      ref={setNodeRef}
      className="ynr-kanban-column"
      data-column={column.id}
      data-over={isOver}
    >
      <h3>{column.title}</h3>
      {children}
    </div>
  );
}
function BoardCard<T extends KanbanItem>({
  item,
  columns,
  move,
  reorder,
  renderItem,
  disabled,
  first,
  last,
}: {
  item: T;
  columns: readonly KanbanColumn[];
  move: (id: string, column: string) => void;
  reorder: (id: string, direction: number) => void;
  renderItem?: (item: T) => ReactNode;
  disabled?: boolean;
  first: boolean;
  last: boolean;
}) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id: `item:${item.id}`, disabled });
  return (
    <div
      ref={setNodeRef}
      className="ynr-kanban-card"
      style={{
        transform: CSS.Transform.toString(transform),
        transition,
        opacity: isDragging ? 0.5 : 1,
      }}
    >
      <button
        className="ynr-kanban-handle"
        type="button"
        {...attributes}
        {...listeners}
        disabled={disabled}
        aria-label={`Drag ${item.title}`}
      >
        ⠿
      </button>
      <div>{renderItem?.(item) ?? item.title}</div>
      <select
        aria-label={`Move ${item.title}`}
        disabled={disabled}
        value={item.column}
        onChange={(event) => move(item.id, event.target.value)}
      >
        {columns.map((column) => (
          <option key={column.id} value={column.id}>
            {column.title}
          </option>
        ))}
      </select>
      <div className="ynr-kanban-order">
        <button
          type="button"
          aria-label={`Move ${item.title} up`}
          disabled={disabled || first}
          onClick={() => reorder(item.id, -1)}
        >
          ↑
        </button>
        <button
          type="button"
          aria-label={`Move ${item.title} down`}
          disabled={disabled || last}
          onClick={() => reorder(item.id, 1)}
        >
          ↓
        </button>
      </div>
    </div>
  );
}
export function Kanban<T extends KanbanItem>({
  columns,
  items,
  onItemsChange,
  renderItem,
  disabled,
  className = "",
  ...props
}: KanbanProps<T>) {
  const [notice, setNotice] = useState("");
  const sensors = useSensors(
    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    }),
  );
  const move = (id: string, column: string) => {
    if (disabled || !columns.some((c) => c.id === column)) return;
    onItemsChange(
      items.map((item) => (item.id === id ? { ...item, column } : item)),
    );
    setNotice(
      `Moved ${items.find((item) => item.id === id)?.title} to ${columns.find((c) => c.id === column)?.title}`,
    );
  };
  const reorder = (id: string, direction: number) => {
    const old = items.findIndex((item) => item.id === id);
    const same = items.filter((item) => item.column === items[old]?.column);
    const next = same[same.findIndex((item) => item.id === id) + direction];
    if (disabled || !next) return;
    onItemsChange(
      arrayMove(
        items,
        old,
        items.findIndex((item) => item.id === next.id),
      ),
    );
    setNotice(`Reordered ${items[old].title}`);
  };
  const end = ({ active, over }: DragEndEvent) => {
    if (disabled || !over || active.id === over.id) return;
    const id = String(active.id).slice(5);
    const old = items.findIndex((item) => item.id === id);
    if (old < 0) return;
    if (String(over.id).startsWith("column:")) {
      move(id, String(over.id).slice(7));
      return;
    }
    const index = items.findIndex((item) => `item:${item.id}` === over.id);
    if (index < 0) return;
    const next = items.map((item) =>
      item.id === id ? { ...item, column: items[index].column } : item,
    );
    onItemsChange(arrayMove(next, old, index));
    setNotice(`Moved ${items[old].title}`);
  };
  return (
    <div className={`ynr-kanban ${className}`} {...props}>
      <DndContext
        sensors={sensors}
        collisionDetection={closestCenter}
        onDragEnd={end}
      >
        <div className="ynr-kanban-columns">
          {columns.map((column) => {
            const cards = items.filter((item) => item.column === column.id);
            return (
              <BoardColumn key={column.id} column={column}>
                <SortableContext
                  items={cards.map((item) => `item:${item.id}`)}
                  strategy={verticalListSortingStrategy}
                >
                  {cards.map((item, i) => (
                    <BoardCard
                      key={item.id}
                      item={item}
                      columns={columns}
                      move={move}
                      reorder={reorder}
                      first={i === 0}
                      last={i === cards.length - 1}
                      renderItem={renderItem}
                      disabled={disabled}
                    />
                  ))}
                  {!cards.length && <p>No items.</p>}
                </SortableContext>
              </BoardColumn>
            );
          })}
        </div>
      </DndContext>
      <span role="status">{notice}</span>
    </div>
  );
}