Kanban

"use client";

import { useId, useLayoutEffect, useRef, useState } from "react";
import type { ComponentProps, KeyboardEvent, PointerEvent, ReactNode } from "react";
import "./kanban.css";

export type KanbanColumn = { id: string; title: string; limit?: number };
export type KanbanCard = { id: string; column: string; title: string; meta?: string };

export type KanbanProps = Omit<ComponentProps<"div">, "children"> & {
  /** Names the board for assistive tech. */
  label: string;
  columns: KanbanColumn[];
  /** Controlled cards. Order in the array is order within each column. */
  cards?: KanbanCard[];
  /** Starting cards when the board manages its own order. */
  defaultCards?: KanbanCard[];
  /** Called once per drop. toIndex counts cards in the target column after the move. */
  onMove?: (cardId: string, toColumn: string, toIndex: number) => void;
  /** Replaces the card body. The card itself stays the drag handle and focus target. */
  renderCard?: (card: KanbanCard) => ReactNode;
};

type Held = {
  id: string;
  column: string;
  index: number;
  from: { column: string; index: number };
  mode: "keyboard" | "pointer";
};

type Press = {
  id: string;
  pointerId: number;
  x: number;
  y: number;
  dx: number;
  dy: number;
  width: number;
  height: number;
  started: boolean;
};

function inColumn(cards: KanbanCard[], column: string) {
  return cards.filter((c) => c.column === column);
}

function applyMove(cards: KanbanCard[], id: string, column: string, index: number) {
  const card = cards.find((c) => c.id === id);
  if (!card) return cards;
  const rest = cards.filter((c) => c.id !== id);
  const target = inColumn(rest, column);
  const before = target[index];
  const at = before
    ? rest.indexOf(before)
    : target.length > 0
      ? rest.indexOf(target[target.length - 1]) + 1
      : rest.length;
  return [...rest.slice(0, at), { ...card, column }, ...rest.slice(at)];
}

export function Kanban({
  label,
  columns,
  cards,
  defaultCards,
  onMove,
  renderCard,
  className,
  ref,
  ...rest
}: KanbanProps) {
  const uid = useId();
  const rootRef = useRef<HTMLDivElement | null>(null);
  const ghostRef = useRef<HTMLDivElement>(null);
  const heldRef = useRef<Held | null>(null);
  const press = useRef<Press | null>(null);
  const snap = useRef<Map<string, DOMRect> | null>(null);
  const refocus = useRef<string | null>(null);

  const [inner, setInner] = useState<KanbanCard[]>(defaultCards ?? []);
  const [held, setHeldState] = useState<Held | null>(null);
  const [ghost, setGhost] = useState<{ id: string; width: number; height: number; x: number; y: number } | null>(null);
  const [message, setMessage] = useState("");

  const current = cards ?? inner;
  const shown = held ? applyMove(current, held.id, held.column, held.index) : current;

  function setHeld(next: Held | null) {
    heldRef.current = next;
    setHeldState(next);
  }

  function setRoot(el: HTMLDivElement | null) {
    rootRef.current = el;
    if (typeof ref === "function") ref(el);
    else if (ref) ref.current = el;
  }

  function titleOf(id: string) {
    return current.find((c) => c.id === id)?.title ?? "";
  }

  function where(list: KanbanCard[], id: string) {
    const card = list.find((c) => c.id === id);
    if (!card) return "";
    const col = inColumn(list, card.column);
    const name = columns.find((c) => c.id === card.column)?.title ?? card.column;
    return `position ${col.indexOf(card) + 1} of ${col.length} in ${name}.`;
  }

  function snapshot(id?: string, rect?: DOMRect) {
    const map = new Map<string, DOMRect>();
    rootRef.current?.querySelectorAll<HTMLElement>("[data-card]").forEach((el) => {
      const key = el.dataset.card;
      if (key) map.set(key, el.getBoundingClientRect());
    });
    if (id && rect) map.set(id, rect);
    snap.current = map;
  }

  // Cards that change place slide from where they were (FLIP), and a held card keeps focus
  // when it is remounted in another column.
  useLayoutEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    const before = snap.current;
    if (before) {
      snap.current = null;
      root.querySelectorAll<HTMLElement>("[data-card]").forEach((el) => {
        const prev = el.dataset.card ? before.get(el.dataset.card) : undefined;
        if (!prev) return;
        el.style.transition = "none";
        el.style.translate = "";
        const now = el.getBoundingClientRect();
        const dx = prev.left - now.left;
        const dy = prev.top - now.top;
        if (Math.abs(dx) >= 1 || Math.abs(dy) >= 1) {
          el.style.translate = `${dx}px ${dy}px`;
          void el.offsetWidth;
          el.style.translate = "";
        }
        el.style.transition = "";
      });
    }
    const focusId = held?.id ?? refocus.current;
    refocus.current = null;
    if (focusId) {
      const el = root.querySelector<HTMLElement>(`[data-card="${CSS.escape(focusId)}"] > .eq-kanban-card`);
      if (el && document.activeElement !== el) el.focus({ preventScroll: held?.mode !== "keyboard" });
    }
  });

  function pickUp(card: KanbanCard, mode: Held["mode"]) {
    const col = inColumn(current, card.column);
    const index = col.indexOf(card);
    setHeld({ id: card.id, column: card.column, index, from: { column: card.column, index }, mode });
    setMessage(`Card ${card.title} picked up. ${where(current, card.id).replace(/^p/, "P")}`);
  }

  function moveTo(column: string, index: number) {
    const h = heldRef.current;
    if (!h || (h.column === column && h.index === index)) return;
    snapshot();
    setHeld({ ...h, column, index });
    const next = applyMove(current, h.id, column, index);
    setMessage(`Card ${titleOf(h.id)} moved. ${where(next, h.id).replace(/^p/, "P")}`);
  }

  function drop(rect?: DOMRect) {
    const h = heldRef.current;
    if (!h) return;
    snapshot(h.id, rect);
    refocus.current = h.id;
    setHeld(null);
    setGhost(null);
    const next = applyMove(current, h.id, h.column, h.index);
    if (h.column !== h.from.column || h.index !== h.from.index) {
      if (cards === undefined) setInner(next);
      onMove?.(h.id, h.column, h.index);
    }
    setMessage(`Card ${titleOf(h.id)} dropped. ${where(next, h.id).replace(/^p/, "P")}`);
  }

  function cancel() {
    const h = heldRef.current;
    if (!h) return;
    snapshot(h.id, ghostRef.current?.getBoundingClientRect());
    refocus.current = h.id;
    setHeld(null);
    setGhost(null);
    setMessage(`Movement cancelled. Card ${titleOf(h.id)} returned to ${where(current, h.id)}`);
  }

  function onCardKeyDown(e: KeyboardEvent<HTMLDivElement>, card: KanbanCard) {
    const h = heldRef.current;
    if (!h) {
      if (e.key !== " " && e.key !== "Enter") return;
      pickUp(card, "keyboard");
    } else if (h.mode === "pointer") {
      if (e.key !== "Escape") return;
      const p = press.current;
      press.current = null;
      if (p && rootRef.current?.hasPointerCapture(p.pointerId)) rootRef.current.releasePointerCapture(p.pointerId);
      cancel();
    } else {
      const colIndex = columns.findIndex((c) => c.id === h.column);
      const rtl = getComputedStyle(e.currentTarget).direction === "rtl";
      const others = current.filter((c) => c.id !== h.id);
      switch (e.key) {
        case "ArrowUp":
          moveTo(h.column, Math.max(0, h.index - 1));
          break;
        case "ArrowDown":
          moveTo(h.column, Math.min(inColumn(others, h.column).length, h.index + 1));
          break;
        case "ArrowLeft":
        case "ArrowRight": {
          const step = (e.key === "ArrowRight") !== rtl ? 1 : -1;
          const target = columns[colIndex + step];
          if (target) moveTo(target.id, Math.min(h.index, inColumn(others, target.id).length));
          break;
        }
        case " ":
        case "Enter":
          drop();
          break;
        case "Escape":
          cancel();
          break;
        case "Tab":
          cancel();
          return;
        default:
          return;
      }
    }
    e.preventDefault();
    e.stopPropagation();
  }

  function onCardPointerDown(e: PointerEvent<HTMLDivElement>, card: KanbanCard) {
    const root = rootRef.current;
    if (e.button !== 0 || heldRef.current || !root) return;
    const r = e.currentTarget.getBoundingClientRect();
    press.current = {
      id: card.id,
      pointerId: e.pointerId,
      x: e.clientX,
      y: e.clientY,
      dx: e.clientX - r.left,
      dy: e.clientY - r.top,
      width: r.width,
      height: r.height,
      started: false,
    };
    root.setPointerCapture(e.pointerId);
  }

  function ghostAt(p: Press, x: number, y: number) {
    const r = rootRef.current?.getBoundingClientRect();
    return { x: x - (r?.left ?? 0) - p.dx, y: y - (r?.top ?? 0) - p.dy };
  }

  function hitTest(x: number, y: number, id: string) {
    const root = rootRef.current;
    if (!root) return null;
    const cols = Array.from(root.querySelectorAll<HTMLElement>("[data-column]"));
    const gap = (col: HTMLElement) => {
      const r = col.getBoundingClientRect();
      return x < r.left ? r.left - x : x > r.right ? x - r.right : 0;
    };
    const best = cols.reduce<HTMLElement | undefined>((a, b) => (a && gap(a) <= gap(b) ? a : b), undefined);
    const list = best?.querySelector<HTMLElement>(".eq-kanban-list");
    const column = best?.dataset.column;
    if (!list || !column) return null;
    const top = list.getBoundingClientRect().top;
    let index = 0;
    for (const el of Array.from(list.querySelectorAll<HTMLElement>(":scope > [data-card]"))) {
      if (el.dataset.card !== id && el.offsetTop + el.offsetHeight / 2 < y - top) index++;
    }
    return { column, index };
  }

  function onPointerMove(e: PointerEvent<HTMLDivElement>) {
    const p = press.current;
    if (!p || e.pointerId !== p.pointerId) return;
    if (!p.started) {
      if (Math.hypot(e.clientX - p.x, e.clientY - p.y) < 4) return;
      const card = current.find((c) => c.id === p.id);
      if (!card) return;
      p.started = true;
      pickUp(card, "pointer");
      setGhost({ id: p.id, width: p.width, height: p.height, ...ghostAt(p, e.clientX, e.clientY) });
    } else if (ghostRef.current) {
      const { x, y } = ghostAt(p, e.clientX, e.clientY);
      ghostRef.current.style.translate = `${x}px ${y}px`;
    }
    const hit = hitTest(e.clientX, e.clientY, p.id);
    if (hit) moveTo(hit.column, hit.index);
  }

  function onPointerUp(e: PointerEvent<HTMLDivElement>) {
    const p = press.current;
    if (!p || e.pointerId !== p.pointerId) return;
    press.current = null;
    if (p.started) drop(ghostRef.current?.getBoundingClientRect());
  }

  function onPointerCancel(e: PointerEvent<HTMLDivElement>) {
    const p = press.current;
    if (!p || e.pointerId !== p.pointerId) return;
    press.current = null;
    if (p.started) cancel();
  }

  const hintId = `${uid}-hint`;
  const ghostCard = ghost ? current.find((c) => c.id === ghost.id) : undefined;

  return (
    <div
      {...rest}
      ref={setRoot}
      className={["eq-kanban", className].filter(Boolean).join(" ")}
      role="group"
      aria-label={label}
      onPointerMove={onPointerMove}
      onPointerUp={onPointerUp}
      onPointerCancel={onPointerCancel}
      onLostPointerCapture={onPointerCancel}
    >
      <div className="eq-kanban-board">
        {columns.map((col, ci) => {
          const list = inColumn(shown, col.id);
          const over = col.limit != null && list.length > col.limit;
          const titleId = `${uid}-col-${ci}`;
          return (
            <section
              key={col.id}
              className="eq-kanban-column"
              data-column={col.id}
              data-target={held?.mode === "pointer" && held.column === col.id ? "" : undefined}
              aria-labelledby={titleId}
            >
              <div className="eq-kanban-head">
                <span id={titleId} className="eq-kanban-column-title">
                  {col.title}
                </span>
                <span className="eq-kanban-count" data-over={over || undefined}>
                  <span key={list.length} className="eq-kanban-count-value">
                    {list.length}
                  </span>
                  {col.limit != null && ` / ${col.limit}`}
                  {over && " over limit"}
                </span>
              </div>
              <ol className="eq-kanban-list" aria-labelledby={titleId}>
                {list.map((card) => {
                  const isHeld = held?.id === card.id;
                  return (
                    <li
                      key={card.id}
                      className="eq-kanban-item"
                      data-card={card.id}
                      data-placeholder={(isHeld && held?.mode === "pointer") || undefined}
                    >
                      <div
                        className="eq-kanban-card"
                        role="button"
                        tabIndex={0}
                        aria-describedby={hintId}
                        data-lifted={(isHeld && held?.mode === "keyboard") || undefined}
                        onKeyDown={(e) => onCardKeyDown(e, card)}
                        onPointerDown={(e) => onCardPointerDown(e, card)}
                      >
                        {renderCard ? renderCard(card) : <CardBody card={card} />}
                      </div>
                    </li>
                  );
                })}
              </ol>
            </section>
          );
        })}
      </div>
      {ghost && ghostCard && (
        <div
          ref={ghostRef}
          className="eq-kanban-ghost"
          aria-hidden="true"
          style={{ width: ghost.width, height: ghost.height, translate: `${ghost.x}px ${ghost.y}px` }}
        >
          <div className="eq-kanban-card">{renderCard ? renderCard(ghostCard) : <CardBody card={ghostCard} />}</div>
        </div>
      )}
      <span id={hintId} hidden>
        Press Space or Enter to pick up. Use the arrow keys to move, Space or Enter to drop, Escape to cancel.
      </span>
      <span className="eq-kanban-status" role="status">
        {message}
      </span>
    </div>
  );
}

function CardBody({ card }: { card: KanbanCard }) {
  return (
    <>
      <span className="eq-kanban-card-title">{card.title}</span>
      {card.meta && <span className="eq-kanban-card-meta">{card.meta}</span>}
    </>
  );
}