const [conditions, setConditions] = useState<ConditionDefinition[]>([]);
  const [expressionTree, setExpressionTree] = useState<ExpressionNode>({
    id: uuidv4(),
    type: "GROUP",
    children: [],
  });

  // Uppdaterar condition i listan
  const handleUpdateCondition = (id: number, updatedCondition: ConditionDefinition) => {
    setConditions((prev) =>
      prev.map((cond, index) => (index === id ? updatedCondition : cond))
    );
  };

  // Lägger till en AND/OR-grupp i trädet
  const handleAddGroup = (parentId: string, type: "AND_GROUP" | "OR_GROUP") => {
    setExpressionTree((prevTree) => addNode(prevTree, parentId, { id: uuidv4(), type, children: [] }));
  };

  // Lägger till en ny CONDITION i trädet
  const handleAddCondition = (parentId: string) => {
    const newCondition: ConditionDefinition = {
      typ: "MATH",
      signalNames: "",
      function: "ALL",
      comparisonValue: "",
      mathOperator: "EQUAL",
    };
    const newConditionId = conditions.length;
    setConditions((prev) => [...prev, newCondition]);

    setExpressionTree((prevTree) =>
      addNode(prevTree, parentId, { id: uuidv4(), type: "CONDITION", children: [], conditionId: newConditionId })
    );
  };

  return (
    <div className="min-h-screen flex flex-col items-center bg-gray-100 p-4">
      <h1 className="text-2xl font-bold mb-4">Expression Tree Editor</h1>
      <ExpressionTree
        node={expressionTree}
        conditions={conditions}
        onUpdateCondition={handleUpdateCondition}
        onAddGroup={handleAddGroup}
        onAddCondition={handleAddCondition}
      />
    </div>
  );