/**
 * NodeConfigPanel - Configures parameters for input/human nodes.
 * Delegates to config components from configs/.
 */

import React, { useState, useEffect } from 'react';
import type { CanvasNode } from './FlowCanvas';
import type { NodeType } from '../../api/automation2Api';
import { getLabel } from './utils';
import { NODE_CONFIG_REGISTRY } from './configs';
import styles from './Automation2FlowEditor.module.css';

interface NodeConfigPanelProps {
  node: CanvasNode | null;
  nodeType: NodeType | undefined;
  language: string;
  onParametersChange: (nodeId: string, parameters: Record<string, unknown>) => void;
}

export const NodeConfigPanel: React.FC<NodeConfigPanelProps> = ({
  node,
  nodeType,
  language,
  onParametersChange,
}) => {
  const [params, setParams] = useState<Record<string, unknown>>({});

  useEffect(() => {
    setParams(node?.parameters ?? {});
  }, [node?.id, node?.parameters]);

  const updateParam = (key: string, value: unknown) => {
    const next = { ...params, [key]: value };
    setParams(next);
    if (node) onParametersChange(node.id, next);
  };

  if (!node || !node.type.startsWith('input.')) return null;

  const ConfigRenderer = NODE_CONFIG_REGISTRY[node.type];
  if (!ConfigRenderer) {
    return (
      <div className={styles.nodeConfigPanel}>
        <h4>{getLabel(nodeType?.label, language) || node.type}</h4>
        <p>Keine Konfiguration für {node.type}</p>
      </div>
    );
  }

  return (
    <div className={styles.nodeConfigPanel}>
      <h4>{getLabel(nodeType?.label, language) || node.type}</h4>
      <ConfigRenderer params={params} updateParam={updateParam} />
    </div>
  );
};