import React from "react";
import styles from "./TopologyBuilder.module.css";
import type { TopologyNode } from "./model";
import MachineSelector from "../../assets/Selector/MachineSelector";
import ModuleSlots from "../../assets/Selector/ModuleSlots";
import BeaconConfigurator, { type BeaconGroup } from "../../assets/Selector/BeaconConfigurator";
import { ContainerType } from "../simulator";

export default function NodeInspector({ node, onChange }: { node: TopologyNode; onChange: (n: TopologyNode) => void }) {
  const updateName = (e: React.ChangeEvent<HTMLInputElement>) => onChange({ ...node, name: e.target.value });

  const updateMachineConfig = (updates: Partial<TopologyNode["machineConfig"]>) => {
    if (!node.machineConfig) return;
    onChange({
      ...node,
      machineConfig: { ...node.machineConfig, ...updates },
    });
  };

  return (
    <div className={styles.panel}>
      <h2>Edit {node.type}</h2>

      <div className={styles.formGroup}>
        <label>Node Name (ID: {node.id.split("_")[1]})</label>
        <input value={node.name} onChange={updateName} />
      </div>

      {node.type === ContainerType.Machine && node.machineConfig && (
        <div className={styles.machineConfig}>
          <div className={styles.formGroup}>
            <label>Multiplier (Parallel Instances)</label>
            <input
              type="number"
              min="1"
              value={node.machineConfig.multiplier}
              onChange={(e) => updateMachineConfig({ multiplier: parseInt(e.target.value, 10) || 1 })}
            />
          </div>

          <div className={styles.formGroup}>
            <label>Machine Type</label>
            <MachineSelector
              key={node.id}
              value={{
                machine: node.machineConfig.setup.machine,
                qualityLevel: node.machineConfig.setup.machineQualityLevel || 0,
                recipe: node.machineConfig.recipe,
              }}
              onChange={({ machine, qualityLevel, recipe }) =>
                updateMachineConfig({
                  setup: {
                    ...node.machineConfig!.setup,
                    machine: machine as any,
                    machineQualityLevel: qualityLevel,
                  },
                  recipe,
                })
              }
            />
          </div>

          <div className={styles.formGroup}>
            <label>Modules</label>
            <ModuleSlots
              value={node.machineConfig.setup.machineModules}
              maxSlots={node.machineConfig.setup.machine?.module_slots || 0}
              allowedEffects={node.machineConfig.setup.machine?.allowed_effects as string[]}
              onChange={(modules) =>
                updateMachineConfig({
                  setup: { ...node.machineConfig!.setup, machineModules: modules },
                })
              }
            />
          </div>

          <div className={styles.formGroup}>
            <label>Beacons</label>
            <BeaconConfigurator
              groups={node.machineConfig.setup.beacons as BeaconGroup[]}
              onChange={(beacons) =>
                updateMachineConfig({
                  setup: { ...node.machineConfig!.setup, beacons },
                })
              }
            />
          </div>
        </div>
      )}
    </div>
  );
}