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

import { useState, useCallback, useRef } from 'react';
import { useDraggable } from '@dnd-kit/core';
import { Trash2, GripVertical, GripHorizontal } from 'lucide-react';
import { toast } from 'sonner';
import type { Module } from '../../types';
import { cn } from '../../lib/utils';
import { MODULE_TYPE_COLORS, U_HEIGHT_PX, PORTS_PER_ROW } from '../../lib/constants';
import { ConfirmDialog } from '../ui/ConfirmDialog';
import { ModuleEditPanel } from '../modals/ModuleEditPanel';
import { PortConfigModal } from '../modals/PortConfigModal';
import { useRackStore } from '../../store/useRackStore';
import { apiClient } from '../../api/client';

interface ModuleBlockProps {
  module: Module;
}

export function ModuleBlock({ module }: ModuleBlockProps) {
  const { racks, removeModuleLocal, updateModuleLocal } = useRackStore();
  const [hovered, setHovered] = useState(false);
  const [editOpen, setEditOpen] = useState(false);
  const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
  const [deletingLoading, setDeletingLoading] = useState(false);
  const [portModalOpen, setPortModalOpen] = useState(false);
  const [selectedPortId, setSelectedPortId] = useState<string | null>(null);

  // Resize state
  const [previewUSize, setPreviewUSize] = useState<number | null>(null);
  const isResizing = useRef(false);
  const resizeStartY = useRef(0);
  const resizeStartUSize = useRef(0);

  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
    id: `module-${module.id}`,
    disabled: isResizing.current,
    data: {
      dragType: 'module',
      moduleId: module.id,
      fromRackId: module.rackId,
      fromUPosition: module.uPosition,
      uSize: module.uSize,
      label: module.name,
    },
  });

  const colors = MODULE_TYPE_COLORS[module.type];
  const displayUSize = previewUSize ?? module.uSize;
  const height = displayUSize * U_HEIGHT_PX;
  const hasPorts = module.ports.length > 0;

  // Split ports into rows of PORTS_PER_ROW
  const portRows: (typeof module.ports)[] = [];
  for (let i = 0; i < module.ports.length; i += PORTS_PER_ROW) {
    portRows.push(module.ports.slice(i, i + PORTS_PER_ROW));
  }
  // Only show as many rows as fit within the current height
  // Each row needs ~14px (10px dot + 4px gap/padding)
  const availableForPorts = height - 16; // subtract top padding + resize handle
  const maxRows = Math.max(1, Math.floor(availableForPorts / 14));
  const visibleRows = portRows.slice(0, maxRows);
  const hiddenPortCount = module.ports.length - visibleRows.flat().length;

  // Compute the maximum allowed uSize for this module (rack bounds + collision)
  const maxResizeU = useCallback((): number => {
    const rack = racks.find((r) => r.id === module.rackId);
    if (!rack) return module.uSize;
    // Bound by rack totalU
    const rackMax = rack.totalU - module.uPosition + 1;
    // Find the first module that starts at uPosition >= module.uPosition + 1 (anything below us)
    const nextStart = rack.modules
      .filter((m) => m.id !== module.id && m.uPosition > module.uPosition)
      .reduce((min, m) => Math.min(min, m.uPosition), rack.totalU + 1);
    const collisionMax = nextStart - module.uPosition;
    return Math.min(rackMax, collisionMax);
  }, [racks, module]);

  function handleResizePointerDown(e: React.PointerEvent<HTMLDivElement>) {
    e.preventDefault();
    e.stopPropagation();
    isResizing.current = true;
    resizeStartY.current = e.clientY;
    resizeStartUSize.current = module.uSize;
    (e.currentTarget as HTMLDivElement).setPointerCapture(e.pointerId);
  }

  function handleResizePointerMove(e: React.PointerEvent<HTMLDivElement>) {
    if (!isResizing.current) return;
    const deltaY = e.clientY - resizeStartY.current;
    const deltaU = Math.round(deltaY / U_HEIGHT_PX);
    const max = maxResizeU();
    const newU = Math.max(1, Math.min(resizeStartUSize.current + deltaU, max));
    setPreviewUSize(newU);
  }

  async function handleResizePointerUp(e: React.PointerEvent<HTMLDivElement>) {
    if (!isResizing.current) return;
    isResizing.current = false;
    (e.currentTarget as HTMLDivElement).releasePointerCapture(e.pointerId);
    const finalU = previewUSize ?? module.uSize;
    setPreviewUSize(null);
    if (finalU === module.uSize) return;
    try {
      await apiClient.modules.update(module.id, { uSize: finalU });
      updateModuleLocal(module.id, { uSize: finalU });
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Resize failed');
    }
  }

  async function handleDelete() {
    setDeletingLoading(true);
    try {
      await apiClient.modules.delete(module.id);
      removeModuleLocal(module.id);
      toast.success(`${module.name} removed`);
    } catch (e) {
      toast.error(e instanceof Error ? e.message : 'Delete failed');
    } finally {
      setDeletingLoading(false);
      setConfirmDeleteOpen(false);
    }
  }

  function openPort(portId: string) {
    setSelectedPortId(portId);
    setPortModalOpen(true);
  }

  return (
    <>
      <div
        ref={setNodeRef}
        className={cn(
          'relative w-full border-l-4 select-none overflow-hidden transition-opacity',
          colors.bg,
          colors.border,
          isDragging ? 'opacity-0' : 'cursor-pointer',
          !isDragging && hovered && 'brightness-110',
          previewUSize !== null && 'ring-1 ring-white/30'
        )}
        style={{ height }}
        title={`${module.name}${module.ipAddress ? ` — ${module.ipAddress}` : ''}`}
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        onClick={() => !isDragging && !isResizing.current && setEditOpen(true)}
        role="button"
        tabIndex={0}
        aria-label={`Edit ${module.name}`}
        onKeyDown={(e) => e.key === 'Enter' && setEditOpen(true)}
      >
        {/* Drag handle — slim left strip */}
        <div
          {...listeners}
          {...attributes}
          className="absolute left-0 top-0 bottom-3 w-3 flex items-center justify-center cursor-grab active:cursor-grabbing text-white/20 hover:text-white/60 transition-colors z-10 touch-none"
          onClick={(e) => e.stopPropagation()}
          aria-label={`Drag ${module.name}`}
        >
          <GripVertical size={9} />
        </div>

        {/* Port grid — primary face content */}
        {hasPorts && previewUSize === null ? (
          <div
            className="flex flex-col gap-[3px] pl-4 pr-6 pt-[5px]"
            onClick={(e) => e.stopPropagation()}
          >
            {visibleRows.map((row, rowIdx) => (
              <div key={rowIdx} className="flex gap-[3px]">
                {row.map((port) => {
                  const hasVlan = port.vlans.length > 0;
                  return (
                    <button
                      key={port.id}
                      onClick={() => openPort(port.id)}
                      aria-label={`Port ${port.portNumber}`}
                      title={`Port ${port.portNumber}${port.label ? ` · ${port.label}` : ''}`}
                      className={cn(
                        'w-2.5 h-2.5 rounded-sm border transition-colors shrink-0',
                        hasVlan
                          ? 'bg-green-400 border-green-500 hover:bg-green-300'
                          : 'bg-slate-600 border-slate-500 hover:bg-slate-400'
                      )}
                    />
                  );
                })}
              </div>
            ))}
            {hiddenPortCount > 0 && (
              <span className="text-[9px] text-white/40 leading-none">+{hiddenPortCount} more</span>
            )}
          </div>
        ) : (
          /* No ports or resizing — show nothing (color communicates type) */
          previewUSize === null && (
            <div className="pl-4 pt-1.5 text-[10px] text-white/30 italic select-none">no ports</div>
          )
        )}

        {/* Resize preview label */}
        {previewUSize !== null && (
          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
            <span className="text-xs font-bold text-white/80 bg-black/40 px-2 py-0.5 rounded">
              {previewUSize}U
            </span>
          </div>
        )}

        {/* Delete button — hover only */}
        {hovered && previewUSize === null && (
          <button
            className="absolute top-0.5 right-0.5 p-0.5 rounded bg-red-900/80 hover:bg-red-600 text-white transition-colors z-10"
            onClick={(e) => {
              e.stopPropagation();
              setConfirmDeleteOpen(true);
            }}
            aria-label={`Delete ${module.name}`}
          >
            <Trash2 size={10} />
          </button>
        )}

        {/* Resize handle — bottom edge */}
        <div
          className={cn(
            'absolute bottom-0 left-0 right-0 h-3 flex items-center justify-center z-20',
            'cursor-ns-resize touch-none',
            hovered || previewUSize !== null ? 'opacity-100' : 'opacity-0 hover:opacity-100',
            'transition-opacity'
          )}
          onPointerDown={handleResizePointerDown}
          onPointerMove={handleResizePointerMove}
          onPointerUp={handleResizePointerUp}
          onClick={(e) => e.stopPropagation()}
          aria-label="Resize module"
          title="Drag to resize"
        >
          <GripHorizontal size={9} className="text-white/40 pointer-events-none" />
        </div>
      </div>

      <ModuleEditPanel module={module} open={editOpen} onClose={() => setEditOpen(false)} />

      <ConfirmDialog
        open={confirmDeleteOpen}
        onClose={() => setConfirmDeleteOpen(false)}
        onConfirm={handleDelete}
        title="Remove Module"
        message={`Remove "${module.name}" from the rack? This will also delete all associated port configuration.`}
        confirmLabel="Remove"
        loading={deletingLoading}
      />

      {selectedPortId && (
        <PortConfigModal
          portId={selectedPortId}
          open={portModalOpen}
          onClose={() => {
            setPortModalOpen(false);
            setSelectedPortId(null);
          }}
        />
      )}
    </>
  );
}