Atomizer/atomizer-dashboard/frontend/src/components/canvas/palette/NodePalette.tsx

import { DragEvent } from 'react';
import { NodeType } from '../../../lib/canvas/schema';
import {
  Box,
  Cpu,
  SlidersHorizontal,
  FlaskConical,
  Target,
  ShieldAlert,
  BrainCircuit,
  Rocket,
} from 'lucide-react';

interface PaletteItem {
  type: NodeType;
  label: string;
  icon: React.ReactNode;
  description: string;
  color: string;
}

const PALETTE_ITEMS: PaletteItem[] = [
  { type: 'model', label: 'Model', icon: <Box size={18} />, description: 'NX model file (.prt, .sim)', color: 'text-blue-400' },
  { type: 'solver', label: 'Solver', icon: <Cpu size={18} />, description: 'Nastran solution type', color: 'text-violet-400' },
  { type: 'designVar', label: 'Design Variable', icon: <SlidersHorizontal size={18} />, description: 'Parameter to optimize', color: 'text-emerald-400' },
  { type: 'extractor', label: 'Extractor', icon: <FlaskConical size={18} />, description: 'Physics result extraction', color: 'text-cyan-400' },
  { type: 'objective', label: 'Objective', icon: <Target size={18} />, description: 'Optimization goal', color: 'text-rose-400' },
  { type: 'constraint', label: 'Constraint', icon: <ShieldAlert size={18} />, description: 'Design constraint', color: 'text-amber-400' },
  { type: 'algorithm', label: 'Algorithm', icon: <BrainCircuit size={18} />, description: 'Optimization method', color: 'text-indigo-400' },
  { type: 'surrogate', label: 'Surrogate', icon: <Rocket size={18} />, description: 'Neural acceleration', color: 'text-pink-400' },
];

export function NodePalette() {
  const onDragStart = (event: DragEvent, nodeType: NodeType) => {
    event.dataTransfer.setData('application/reactflow', nodeType);
    event.dataTransfer.effectAllowed = 'move';
  };

  return (
    <div className="w-56 bg-dark-850 border-r border-dark-700 flex flex-col">
      <div className="p-4 border-b border-dark-700">
        <h3 className="text-xs font-semibold text-dark-400 uppercase tracking-wider">
          Components
        </h3>
        <p className="text-xs text-dark-500 mt-1">
          Drag to canvas
        </p>
      </div>
      <div className="flex-1 overflow-y-auto p-3 space-y-1.5">
        {PALETTE_ITEMS.map((item) => (
          <div
            key={item.type}
            draggable
            onDragStart={(e) => onDragStart(e, item.type)}
            className="flex items-center gap-2.5 px-3 py-2.5 bg-dark-800/50 rounded-lg border border-dark-700/50
                       cursor-grab hover:border-primary-500/50 hover:bg-dark-800
                       active:cursor-grabbing transition-all group"
          >
            <div className={`${item.color} opacity-80 group-hover:opacity-100 transition-opacity`}>
              {item.icon}
            </div>
            <div className="flex-1 min-w-0">
              <div className="font-medium text-dark-200 text-sm leading-tight">{item.label}</div>
              <div className="text-[10px] text-dark-500 truncate">{item.description}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}