rack-planner/client/src/components/rack/RackPlanner.tsx

import { useEffect, useRef, useState } from 'react';
import {
  DndContext,
  DragOverlay,
  PointerSensor,
  closestCenter,
  useSensor,
  useSensors,
  type DragStartEvent,
  type DragEndEvent,
  type DragMoveEvent,
} from '@dnd-kit/core';
import { SortableContext, horizontalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
import { toast } from 'sonner';
import { useRackStore } from '../../store/useRackStore';
import { apiClient } from '../../api/client';
import { RackToolbar } from './RackToolbar';
import { RackColumn } from './RackColumn';
import { DevicePalette } from './DevicePalette';
import { AddModuleModal } from '../modals/AddModuleModal';
import { RackSkeleton } from '../ui/Skeleton';
import type { ModuleType } from '../../types';
import { MODULE_TYPE_COLORS, MODULE_TYPE_LABELS } from '../../lib/constants';
import { cn } from '../../lib/utils';

interface PendingDrop {
  rackId: string;
  uPosition: number;
  type: ModuleType;
}

interface HoverSlot {
  rackId: string;
  uPosition: number;
}

function DragOverlayItem({ type }: { type: ModuleType }) {
  const colors = MODULE_TYPE_COLORS[type];
  return (
    <div
      className={cn(
        'px-3 py-1.5 rounded border text-xs font-semibold text-white shadow-2xl opacity-90 pointer-events-none',
        colors.bg,
        colors.border
      )}
    >
      {MODULE_TYPE_LABELS[type]}
    </div>
  );
}

function ModuleDragOverlay({ label }: { label: string }) {
  return (
    <div className="px-3 py-1.5 rounded border bg-slate-600 border-slate-400 text-xs font-semibold text-white shadow-2xl opacity-90 pointer-events-none">
      {label}
    </div>
  );
}

/**
 * Resolve which rack slot (if any) is under the pointer during a drag.
 *
 * Strategy: elementFromPoint at the current pointer coordinates.
 * - ModuleBlock has pointer-events:none when isDragging, so it is transparent.
 * - DragOverlay has pointer-events:none natively (dnd-kit).
 * - RackSlot divs carry data-rack-id / data-u-pos attributes that we read here.
 *
 * This is intentionally independent of dnd-kit's collision detection, which
 * cannot reliably distinguish 44px slot elements from large (~1800px) rack
 * column sortable containers that share the same DndContext.
 */
function resolveSlotFromPoint(clientX: number, clientY: number): HoverSlot | null {
  const el = document.elementFromPoint(clientX, clientY);
  if (!el) return null;

  const slotEl = el.closest('[data-rack-id][data-u-pos]') as HTMLElement | null;
  if (!slotEl) return null;

  const rackId = slotEl.dataset.rackId;
  const uPos = parseInt(slotEl.dataset.uPos ?? '', 10);
  if (!rackId || isNaN(uPos)) return null;

  return { rackId, uPosition: uPos };
}

export function RackPlanner() {
  const { racks, loading, fetchRacks, moveModule } = useRackStore();
  const canvasRef = useRef<HTMLDivElement>(null);

  // Drag state
  const [activePaletteType, setActivePaletteType] = useState<ModuleType | null>(null);
  const [activeDragModuleLabel, setActiveDragModuleLabel] = useState<string | null>(null);
  const [draggingModuleId, setDraggingModuleId] = useState<string | null>(null);
  const [pendingDrop, setPendingDrop] = useState<PendingDrop | null>(null);

  // hoverSlot drives the blue highlight on slots during drag.
  // hoverSlotRef is the reliable read-path inside async handleDragEnd
  // (avoids stale-closure issues with state).
  const [hoverSlot, setHoverSlot] = useState<HoverSlot | null>(null);
  const hoverSlotRef = useRef<HoverSlot | null>(null);

  function updateHoverSlot(slot: HoverSlot | null) {
    hoverSlotRef.current = slot;
    setHoverSlot(slot);
  }

  const sensors = useSensors(
    useSensor(PointerSensor, { activationConstraint: { distance: 6 } })
  );

  useEffect(() => {
    fetchRacks().catch(() => toast.error('Failed to load racks'));
  }, [fetchRacks]);

  function handleDragStart(event: DragStartEvent) {
    const data = event.active.data.current as Record<string, unknown>;
    if (data?.dragType === 'palette') {
      setActivePaletteType(data.type as ModuleType);
    } else if (data?.dragType === 'module') {
      setDraggingModuleId(data.moduleId as string);
      setActiveDragModuleLabel(data.label as string);
    }
    updateHoverSlot(null);
  }

  function handleDragMove(event: DragMoveEvent) {
    const data = event.active.data.current as Record<string, unknown>;
    // Only track slot hover for module and palette drags
    if (data?.dragType !== 'module' && data?.dragType !== 'palette') {
      updateHoverSlot(null);
      return;
    }

    // Compute current pointer position from the activating event + accumulated delta
    const activatorEvent = event.activatorEvent as PointerEvent;
    const clientX = activatorEvent.clientX + event.delta.x;
    const clientY = activatorEvent.clientY + event.delta.y;

    updateHoverSlot(resolveSlotFromPoint(clientX, clientY));
  }

  async function handleDragEnd(event: DragEndEvent) {
    const { active, over } = event;

    // Capture hoverSlot BEFORE resetting state
    const slot = hoverSlotRef.current;

    setActivePaletteType(null);
    setActiveDragModuleLabel(null);
    setDraggingModuleId(null);
    updateHoverSlot(null);

    const dragData = active.data.current as Record<string, unknown>;

    // --- Palette → slot: open AddModuleModal pre-filled ---
    if (dragData?.dragType === 'palette' && slot) {
      setPendingDrop({
        type: dragData.type as ModuleType,
        rackId: slot.rackId,
        uPosition: slot.uPosition,
      });
      return;
    }

    // --- Module → slot: move the module ---
    if (dragData?.dragType === 'module' && slot) {
      const moduleId = dragData.moduleId as string;

      // No-op if dropped on own position
      if (dragData.fromRackId === slot.rackId && dragData.fromUPosition === slot.uPosition) return;

      try {
        await moveModule(moduleId, slot.rackId, slot.uPosition);
        toast.success('Module moved');
      } catch (err) {
        toast.error(err instanceof Error ? err.message : 'Move failed');
      }
      return;
    }

    // --- Rack header → rack header: reorder racks ---
    if (!over) return;
    const dropData = over.data.current as Record<string, unknown> | undefined;
    if (dragData?.dragType === 'rack' && dropData?.dragType === 'rack') {
      const oldIndex = racks.findIndex((r) => r.id === active.id);
      const newIndex = racks.findIndex((r) => r.id === over.id);
      if (oldIndex === newIndex) return;

      const reordered = arrayMove(racks, oldIndex, newIndex);
      try {
        await Promise.all(
          reordered.map((rack, idx) =>
            rack.displayOrder !== idx
              ? apiClient.racks.update(rack.id, { displayOrder: idx })
              : Promise.resolve(rack)
          )
        );
        await fetchRacks();
      } catch {
        toast.error('Failed to save rack order');
        await fetchRacks();
      }
    }
  }

  const rackIds = racks.map((r) => r.id);

  return (
    <DndContext
      sensors={sensors}
      collisionDetection={closestCenter}
      onDragStart={handleDragStart}
      onDragMove={handleDragMove}
      onDragEnd={handleDragEnd}
    >
      <div className="flex flex-col h-screen bg-[#0f1117]">
        <RackToolbar rackCanvasRef={canvasRef} />

        <div className="flex flex-1 overflow-hidden">
          <DevicePalette />

          <div className="flex-1 overflow-auto">
            {loading ? (
              <RackSkeleton />
            ) : racks.length === 0 ? (
              <div className="flex flex-col items-center justify-center h-full gap-3 text-center px-4">
                <div className="w-16 h-16 bg-slate-800 rounded-xl border border-slate-700 flex items-center justify-center">
                  <svg width="32" height="32" viewBox="0 0 18 18" fill="none">
                    <rect x="1" y="2" width="16" height="3" rx="1" fill="#475569" />
                    <rect x="1" y="7" width="16" height="3" rx="1" fill="#475569" opacity="0.7" />
                    <rect x="1" y="12" width="16" height="3" rx="1" fill="#475569" opacity="0.4" />
                  </svg>
                </div>
                <div>
                  <p className="text-slate-300 font-medium">No racks yet</p>
                  <p className="text-slate-500 text-sm mt-1">
                    Click <strong className="text-slate-300">Add Rack</strong> in the toolbar to create your first rack.
                  </p>
                </div>
              </div>
            ) : (
              <SortableContext items={rackIds} strategy={horizontalListSortingStrategy}>
                <div
                  ref={canvasRef}
                  className="flex gap-4 p-4 min-h-full items-start"
                  style={{ background: '#0f1117' }}
                >
                  {racks.map((rack) => (
                    <RackColumn
                      key={rack.id}
                      rack={rack}
                      draggingModuleId={draggingModuleId}
                      hoverSlot={hoverSlot}
                    />
                  ))}
                </div>
              </SortableContext>
            )}
          </div>
        </div>
      </div>

      <DragOverlay dropAnimation={null}>
        {activePaletteType && <DragOverlayItem type={activePaletteType} />}
        {activeDragModuleLabel && <ModuleDragOverlay label={activeDragModuleLabel} />}
      </DragOverlay>

      {pendingDrop && (
        <AddModuleModal
          open={true}
          onClose={() => setPendingDrop(null)}
          rackId={pendingDrop.rackId}
          uPosition={pendingDrop.uPosition}
          initialType={pendingDrop.type}
        />
      )}
    </DndContext>
  );
}