Kanban

import { useState } from "react";
import {
  Kanban,
  KanbanCard,
  KanbanDnd,
  KanbanLane,
  KanbanLaneCards,
  KanbanLaneCount,
  KanbanLaneHeader,
  KanbanLaneTitle,
  type KanbanMove,
} from "@/components/ui/hiip-ui/kanban";

type KanbanDemoCard = {
  id: string;
  name: string;
  meta: string;
  /** Set and the card cannot be dragged at all — the reason is shown on it. */
  lockReason?: string;
  /** Lanes this card may not be dropped into, each with the reason. */
  lockedLanes?: Record<string, string>;
};

const KANBAN_LANES = [
  {
    id: "new",
    label: "New",
    // A STATIC class per lane, never one built from the id — see KanbanLane.
    tint: "bg-muted/60 dark:bg-muted/30",
  },
  {
    id: "contacted",
    label: "Contacted",
    tint: "bg-sky-50 dark:bg-sky-950/25",
  },
  {
    id: "accepted",
    label: "Accepted",
    tint: "bg-emerald-50 dark:bg-emerald-950/25",
  },
] as const;

function KanbanDemo() {
  const [lanes, setLanes] = useState<Record<string, KanbanDemoCard[]>>({
    new: [
      { id: "k1", name: "anhthu0349", meta: "Mosclub · 128K" },
      {
        id: "k2",
        name: "linhchi.beauty",
        meta: "Mencare · 64K",
        // Nobody has replied yet, so a deal cannot be accepted for this lead.
        lockedLanes: { accepted: "No reply yet — cannot accept" },
      },
    ],
    contacted: [{ id: "k3", name: "phucnguyen", meta: "Mosclub · 212K" }],
    accepted: [
      {
        id: "k4",
        name: "trangdao",
        meta: "Mencare · 89K",
        lockReason: "Deal signed — stage is closed",
      },
    ],
  });

  // The board reports where the card went; moving it is the caller's job.
  //
  // ⚠️ REMOVE BY ID, THEN INSERT — not a splice at `fromIndex`. That is what
  // makes ONE reducer safe for both callbacks: `onLaneChange` fires over and
  // over while the pointer is down, and re-applying a move that already
  // happened has to be a no-op.
  function applyMove({ cardId, toLaneId, toIndex }: KanbanMove) {
    setLanes((prev) => {
      const card = Object.values(prev)
        .flat()
        .find((item) => item.id === cardId);
      if (!card) return prev;
      const next: Record<string, KanbanDemoCard[]> = {};
      for (const [laneId, items] of Object.entries(prev)) {
        next[laneId] = items.filter((item) => item.id !== cardId);
      }
      const to = [...(next[toLaneId] ?? [])];
      to.splice(Math.min(toIndex, to.length), 0, card);
      next[toLaneId] = to;
      return next;
    });
  }

  const byId = new Map(
    Object.values(lanes)
      .flat()
      .map((card) => [card.id, card] as const),
  );

  function card(item: KanbanDemoCard) {
    return (
      <>
        <span className="block truncate text-sm font-medium">{item.name}</span>
        <p className="mt-0.5 text-xs text-muted-foreground">{item.meta}</p>
      </>
    );
  }

  return (
    // The height is the board's to receive, not to invent — see `Kanban`.
    <div className="flex h-96 w-full flex-col">
      <KanbanDnd
        onMove={applyMove}
        // Wired up, so the destination lane opens a gap while you are still
        // dragging instead of only accepting the card on release.
        onLaneChange={applyMove}
        renderOverlay={(cardId) => {
          const item = byId.get(cardId);
          return item ? <KanbanCard>{card(item)}</KanbanCard> : null;
        }}
      >
        <Kanban>
          {KANBAN_LANES.map((lane) => {
            const items = lanes[lane.id] ?? [];
            return (
              <KanbanLane key={lane.id} laneId={lane.id} className={lane.tint}>
                <KanbanLaneHeader>
                  <KanbanLaneTitle>{lane.label}</KanbanLaneTitle>
                  <KanbanLaneCount>{items.length}</KanbanLaneCount>
                </KanbanLaneHeader>

                <KanbanLaneCards cardIds={items.map((item) => item.id)}>
                  {items.map((item) => (
                    <KanbanCard
                      key={item.id}
                      cardId={item.id}
                      locked={Boolean(item.lockReason)}
                      lockReason={item.lockReason}
                      lockedLanes={item.lockedLanes}
                    >
                      {card(item)}
                    </KanbanCard>
                  ))}
                </KanbanLaneCards>
              </KanbanLane>
            );
          })}
        </Kanban>
      </KanbanDnd>
    </div>
  );
}