import { useCanvasStore } from '../../../hooks/useCanvasStore';
import {
  ModelNodeData,
  SolverNodeData,
  DesignVarNodeData,
  AlgorithmNodeData,
  ObjectiveNodeData,
  ExtractorNodeData,
  ConstraintNodeData,
  SurrogateNodeData
} from '../../../lib/canvas/schema';

interface NodeConfigPanelProps {
  nodeId: string;
}

export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
  const { nodes, updateNodeData, deleteSelected } = useCanvasStore();
  const node = nodes.find((n) => n.id === nodeId);

  if (!node) return null;

  const { data } = node;

  const handleChange = (field: string, value: unknown) => {
    updateNodeData(nodeId, { [field]: value, configured: true });
  };

  return (
    <div className="w-80 bg-white border-l border-gray-200 p-4 overflow-y-auto">
      <div className="flex justify-between items-center mb-4">
        <h3 className="font-semibold text-gray-800">Configure {data.label}</h3>
        <button
          onClick={deleteSelected}
          className="text-red-500 hover:text-red-700 text-sm"
        >
          Delete
        </button>
      </div>

      <div className="space-y-4">
        {/* Common: Label */}
        <div>
          <label className="block text-sm font-medium text-gray-600 mb-1">
            Label
          </label>
          <input
            type="text"
            value={data.label}
            onChange={(e) => handleChange('label', e.target.value)}
            className="w-full px-3 py-2 border rounded-lg"
          />
        </div>

        {/* Type-specific fields */}
        {data.type === 'model' && (
          <>
            <div>
              <label className="block text-sm font-medium text-gray-600 mb-1">
                File Path
              </label>
              <input
                type="text"
                value={(data as ModelNodeData).filePath || ''}
                onChange={(e) => handleChange('filePath', e.target.value)}
                placeholder="path/to/model.prt"
                className="w-full px-3 py-2 border rounded-lg font-mono text-sm"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-600 mb-1">
                File Type
              </label>
              <select
                value={(data as ModelNodeData).fileType || ''}
                onChange={(e) => handleChange('fileType', e.target.value)}
                className="w-full px-3 py-2 border rounded-lg"
              >
                <option value="">Select...</option>
                <option value="prt">Part (.prt)</option>
                <option value="fem">FEM (.fem)</option>
                <option value="sim">Simulation (.sim)</option>
              </select>
            </div>
          </>
        )}

        {data.type === 'solver' && (
          <div>
            <label className="block text-sm font-medium text-gray-600 mb-1">
              Solution Type
            </label>
            <select
              value={(data as SolverNodeData).solverType || ''}
              onChange={(e) => handleChange('solverType', e.target.value)}
              className="w-full px-3 py-2 border rounded-lg"
            >
              <option value="">Select...</option>
              <option value="SOL101">SOL 101 - Linear Static</option>
              <option value="SOL103">SOL 103 - Modal Analysis</option>
              <option value="SOL105">SOL 105 - Buckling</option>
              <option value="SOL106">SOL 106 - Nonlinear Static</option>
              <option value="SOL111">SOL 111 - Frequency Response</option>
              <option value="SOL112">SOL 112 - Transient Response</option>
            </select>
          </div>
        )}

        {data.type === 'designVar' && (
          <>
            <div>
              <label className="block text-sm font-medium text-gray-600 mb-1">
                Expression Name
              </label>
              <input
                type="text"
                value={(data as DesignVarNodeData).expressionName || ''}
                onChange={(e) => handleChange('expressionName', e.target.value)}
                placeholder="thickness"
                className="w-full px-3 py-2 border rounded-lg font-mono"
              />
            </div>
            <div className="grid grid-cols-2 gap-2">
              <div>
                <label className="block text-sm font-medium text-gray-600 mb-1">
                  Min
                </label>
                <input
                  type="number"
                  value={(data as DesignVarNodeData).minValue ?? ''}
                  onChange={(e) => handleChange('minValue', parseFloat(e.target.value))}
                  className="w-full px-3 py-2 border rounded-lg"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-600 mb-1">
                  Max
                </label>
                <input
                  type="number"
                  value={(data as DesignVarNodeData).maxValue ?? ''}
                  onChange={(e) => handleChange('maxValue', parseFloat(e.target.value))}
                  className="w-full px-3 py-2 border rounded-lg"
                />
              </div>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-600 mb-1">
                Unit
              </label>
              <input
                type="text"
                value={(data as DesignVarNodeData).unit || ''}
                onChange={(e) => handleChange('unit', e.target.value)}
                placeholder="mm"
                className="w-full px-3 py-2 border rounded-lg"
              />
            </div>
          </>
        )}

        {data.type === 'extractor' && (
          <>
            <div>
              <label className="block text-sm font-medium text-gray-600 mb-1">
                Extractor ID
              </label>
              <select
                value={(data as ExtractorNodeData).extractorId || ''}
                onChange={(e) => {
                  const id = e.target.value;
                  const names: Record<string, string> = {
                    'E1': 'Displacement',
                    'E2': 'Frequency',
                    'E3': 'Solid Stress',
                    'E4': 'BDF Mass',
                    'E5': 'CAD Mass',
                    'E8': 'Zernike (OP2)',
                    'E9': 'Zernike (CSV)',
                    'E10': 'Zernike (RMS)',
                  };
                  handleChange('extractorId', id);
                  handleChange('extractorName', names[id] || id);
                }}
                className="w-full px-3 py-2 border rounded-lg"
              >
                <option value="">Select...</option>
                <option value="E1">E1 - Displacement</option>
                <option value="E2">E2 - Frequency</option>
                <option value="E3">E3 - Solid Stress</option>
                <option value="E4">E4 - BDF Mass</option>
                <option value="E5">E5 - CAD Mass</option>
                <option value="E8">E8 - Zernike (OP2)</option>
                <option value="E9">E9 - Zernike (CSV)</option>
                <option value="E10">E10 - Zernike (RMS)</option>
              </select>
            </div>
          </>
        )}

        {data.type === 'algorithm' && (
          <>
            <div>
              <label className="block text-sm font-medium text-gray-600 mb-1">
                Method
              </label>
              <select
                value={(data as AlgorithmNodeData).method || ''}
                onChange={(e) => handleChange('method', e.target.value)}
                className="w-full px-3 py-2 border rounded-lg"
              >
                <option value="">Select...</option>
                <option value="TPE">TPE (Tree Parzen Estimator)</option>
                <option value="CMA-ES">CMA-ES (Evolution Strategy)</option>
                <option value="NSGA-II">NSGA-II (Multi-Objective)</option>
                <option value="GP-BO">GP-BO (Gaussian Process)</option>
                <option value="RandomSearch">Random Search</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-600 mb-1">
                Max Trials
              </label>
              <input
                type="number"
                value={(data as AlgorithmNodeData).maxTrials ?? ''}
                onChange={(e) => handleChange('maxTrials', parseInt(e.target.value))}
                placeholder="100"
                className="w-full px-3 py-2 border rounded-lg"
              />
            </div>
          </>
        )}

        {data.type === 'objective' && (
          <>
            <div>
              <label className="block text-sm font-medium text-gray-600 mb-1">
                Objective Name
              </label>
              <input
                type="text"
                value={(data as ObjectiveNodeData).name || ''}
                onChange={(e) => handleChange('name', e.target.value)}
                placeholder="mass"
                className="w-full px-3 py-2 border rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-600 mb-1">
                Direction
              </label>
              <select
                value={(data as ObjectiveNodeData).direction || 'minimize'}
                onChange={(e) => handleChange('direction', e.target.value)}
                className="w-full px-3 py-2 border rounded-lg"
              >
                <option value="minimize">Minimize</option>
                <option value="maximize">Maximize</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-600 mb-1">
                Weight
              </label>
              <input
                type="number"
                step="0.1"
                value={(data as ObjectiveNodeData).weight ?? 1}
                onChange={(e) => handleChange('weight', parseFloat(e.target.value))}
                className="w-full px-3 py-2 border rounded-lg"
              />
            </div>
          </>
        )}

        {data.type === 'constraint' && (
          <>
            <div>
              <label className="block text-sm font-medium text-gray-600 mb-1">
                Constraint Name
              </label>
              <input
                type="text"
                value={(data as ConstraintNodeData).name || ''}
                onChange={(e) => handleChange('name', e.target.value)}
                placeholder="max_stress"
                className="w-full px-3 py-2 border rounded-lg"
              />
            </div>
            <div className="grid grid-cols-2 gap-2">
              <div>
                <label className="block text-sm font-medium text-gray-600 mb-1">
                  Operator
                </label>
                <select
                  value={(data as ConstraintNodeData).operator || '<='}
                  onChange={(e) => handleChange('operator', e.target.value)}
                  className="w-full px-3 py-2 border rounded-lg"
                >
                  <option value="<">&lt;</option>
                  <option value="<=">&lt;=</option>
                  <option value=">">&gt;</option>
                  <option value=">=">&gt;=</option>
                  <option value="==">==</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-600 mb-1">
                  Value
                </label>
                <input
                  type="number"
                  value={(data as ConstraintNodeData).value ?? ''}
                  onChange={(e) => handleChange('value', parseFloat(e.target.value))}
                  className="w-full px-3 py-2 border rounded-lg"
                />
              </div>
            </div>
          </>
        )}

        {data.type === 'surrogate' && (
          <>
            <div className="flex items-center gap-2">
              <input
                type="checkbox"
                id="surrogate-enabled"
                checked={(data as SurrogateNodeData).enabled || false}
                onChange={(e) => handleChange('enabled', e.target.checked)}
                className="w-4 h-4"
              />
              <label htmlFor="surrogate-enabled" className="text-sm font-medium text-gray-600">
                Enable Neural Surrogate
              </label>
            </div>
            {(data as SurrogateNodeData).enabled && (
              <>
                <div>
                  <label className="block text-sm font-medium text-gray-600 mb-1">
                    Model Type
                  </label>
                  <select
                    value={(data as SurrogateNodeData).modelType || ''}
                    onChange={(e) => handleChange('modelType', e.target.value)}
                    className="w-full px-3 py-2 border rounded-lg"
                  >
                    <option value="">Select...</option>
                    <option value="MLP">MLP (Multi-Layer Perceptron)</option>
                    <option value="GNN">GNN (Graph Neural Network)</option>
                    <option value="Ensemble">Ensemble</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-600 mb-1">
                    Min Trials Before Activation
                  </label>
                  <input
                    type="number"
                    value={(data as SurrogateNodeData).minTrials ?? 20}
                    onChange={(e) => handleChange('minTrials', parseInt(e.target.value))}
                    className="w-full px-3 py-2 border rounded-lg"
                  />
                </div>
              </>
            )}
          </>
        )}
      </div>
    </div>
  );
}