// src/components/backlink/planning/planning-board.tsx
"use client";

import {
  DndContext,
  type DragEndEvent,
  PointerSensor,
  useSensor,
  useSensors,
} from "@dnd-kit/core";
import type { PlanningCard } from "@/lib/backlink/planning";
import type { BacklinkStatus } from "@/lib/db/domain-schema";
import { PlanningColumn } from "./planning-column";

export const COLUMNS: { status: BacklinkStatus; label: string }[] = [
  { status: "prospect", label: "Prospect" },
  { status: "planned", label: "Planifié" },
  { status: "in_progress", label: "Outreach" },
  { status: "live", label: "Live" },
  { status: "lost", label: "Perdu" },
];

const STATUS_SET = new Set<string>(COLUMNS.map((c) => c.status));

export function PlanningBoard({
  cards,
  onMove,
  onOpen,
}: {
  cards: PlanningCard[];
  onMove: (backlinkId: string, status: BacklinkStatus) => void;
  onOpen: (card: PlanningCard) => void;
}) {
  const sensors = useSensors(
    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
  );

  function onDragEnd(e: DragEndEvent) {
    const id = String(e.active.id);
    const over = e.over ? String(e.over.id) : null;
    if (!over || !STATUS_SET.has(over)) return;
    onMove(id, over as BacklinkStatus);
  }

  return (
    <DndContext sensors={sensors} onDragEnd={onDragEnd}>
      <div className="flex gap-3 overflow-x-auto pb-2">
        {COLUMNS.map((c) => (
          <PlanningColumn
            key={c.status}
            status={c.status}
            label={c.label}
            cards={cards.filter((x) => x.status === c.status)}
            onOpen={onOpen}
          />
        ))}
      </div>
    </DndContext>
  );
}