import { memo, useEffect } from 'react';
import { useUpdateNodeInternals } from '@xyflow/react';
import NodeShell from '../components/NodeShell.jsx';
import { NodeDraftInput } from '../components/NodeDraftField.jsx';
import { useWorkflow } from '../context/WorkflowContext.jsx';
import { createBrowserId } from '../lib/ids.js';
import { getNodeAccent } from '../lib/nodeRegistry.js';

function IfElseFlowNode({ id, data, selected, type }) {
  const { getNodeHandles, replaceNodeData, removeHandleConnections } = useWorkflow();
  const updateNodeInternals = useUpdateNodeInternals();
  const handles = getNodeHandles(type, data);
  const runtime = data.runtime || {};

  useEffect(() => {
    updateNodeInternals(id);
  }, [id, data.conditions.length, updateNodeInternals]);

  const addCondition = () => {
    replaceNodeData(id, (current) => ({
      ...current,
      conditions: [...current.conditions, { id: createBrowserId('condition'), keyword: '' }],
    }));
  };

  const updateCondition = (conditionId, keyword) => {
    replaceNodeData(id, (current) => ({
      ...current,
      conditions: current.conditions.map((condition) =>
        condition.id === conditionId ? { ...condition, keyword } : condition,
      ),
    }));
  };

  const removeCondition = (conditionId) => {
    if (data.conditions.length <= 1) {
      return;
    }

    removeHandleConnections(id, conditionId, 'source');
    replaceNodeData(id, (current) => ({
      ...current,
      conditions: current.conditions.filter((condition) => condition.id !== conditionId),
    }));
  };

  return (
    <NodeShell
      nodeId={id}
      title={data.title}
      accent={getNodeAccent(type)}
      selected={selected}
      status={runtime.status}
      inputs={handles.inputs}
      outputs={handles.outputs}
    >
      <div className="field-stack">
        <div className="condition-list">
          {data.conditions.map((condition, index) => (
            <div key={condition.id} className="condition-row">
              <NodeDraftInput
                className="nodrag node-input"
                type="text"
                value={condition.keyword}
                placeholder={`condition ${index}`}
                onCommit={(value) => updateCondition(condition.id, value)}
              />
              <button
                type="button"
                className="nodrag chip__remove"
                onClick={() => removeCondition(condition.id)}
                disabled={data.conditions.length <= 1}
              >
                x
              </button>
            </div>
          ))}
        </div>

        <button type="button" className="nodrag node-button node-button--ghost" onClick={addCondition}>
          + Add Condition
        </button>

        <div className="node-note">
          {runtime.matchId
            ? `Matched condition: ${data.conditions.findIndex((condition) => condition.id === runtime.matchId)}`
            : 'Точное совпадение строки активирует один из выходов.'}
        </div>

        {runtime.error ? <div className="node-error">{runtime.error}</div> : null}
      </div>
    </NodeShell>
  );
}

export default memo(IfElseFlowNode);