"use client";

import * as React from "react";
import { useDroppable } from "@dnd-kit/core";
import { cn } from "@/lib/utils";
import { registerKanbanColumnDropTarget } from "./kanban-column-drop-highlight";

/** Drop zone; column highlight is imperative (see kanban-column-drop-highlight) — not dnd-kit isOver. */
export const DroppableColumn = React.forwardRef<
  HTMLDivElement,
  {
    stageId: string;
    dropTargetStageIds: string[];
    children: React.ReactNode;
  }
>(function DroppableColumn({ stageId, dropTargetStageIds, children }, ref) {
  const { setNodeRef } = useDroppable({ id: stageId });
  const dropTargetKey = dropTargetStageIds.join("|");

  React.useEffect(() => {
    return () => registerKanbanColumnDropTarget(dropTargetStageIds, null);
  }, [dropTargetKey, dropTargetStageIds]);

  return (
    <div
      ref={(node) => {
        setNodeRef(node);
        registerKanbanColumnDropTarget(
          dropTargetStageIds,
          node,
        );
        if (!ref) return;
        if (typeof ref === "function") ref(node);
        else {
          (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
        }
      }}
      className={cn(
        "w-[305px] flex flex-col shrink-0 group/column border rounded-[14px] p-5 gap-3 relative",
        "bg-[rgba(116,116,116,0.14)] border-white/60",
        "data-[drop-active=true]:bg-accent/20 data-[drop-active=true]:border-accent/60",
        "data-[drop-active=true]:shadow-[inset_0_0_0_2px_rgba(99,102,241,0.35)]",
      )}
      style={{
        minHeight: 280,
        height: "clamp(280px, calc(100vh - 300px), min(100vh - 120px, 1400px))",
      }}
    >
      {children}
    </div>
  );
});