"use client";

import React from "react";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Plus, Zap } from "lucide-react";
import { ConditionNode, ColumnInfo } from "@/lib/api/dataflow";
import { ConditionRenderer } from "./ConditionRenderer";

interface ConditionalSettingsProps {
  conditions: ConditionNode[];
  fromTableColumns: ColumnInfo[];
  fromTableName?: string;
  onAddCondition: () => void;
  onAddGroupStart: () => void;
  onAddGroupEnd: () => void;
  onUpdateCondition: (index: number, field: keyof ConditionNode, value: string) => void;
  onRemoveCondition: (index: number) => void;
  getCurrentGroupLevel: (index: number) => number;
}

export const ConditionalSettings: React.FC<ConditionalSettingsProps> = ({
  conditions,
  fromTableColumns,
  fromTableName,
  onAddCondition,
  onAddGroupStart,
  onAddGroupEnd,
  onUpdateCondition,
  onRemoveCondition,
  getCurrentGroupLevel,
}) => {
  return (
    <div className="rounded-lg border border-l-4 border-l-purple-500 bg-purple-50/30 p-4">
      <div className="mb-4 flex items-center gap-2">
        <Zap className="h-4 w-4 text-purple-500" />
        <span className="text-sm font-medium">전체 실행 조건 (언제 이 연결이 동작할지)</span>
      </div>

      {/* 실행 조건 설정 */}
      <div className="mb-4">
        <div className="mb-2 flex items-center justify-between">
          <Label className="text-sm font-medium">실행 조건</Label>
          <div className="flex gap-1">
            <Button size="sm" variant="outline" onClick={onAddCondition} className="h-7 text-xs">
              <Plus className="mr-1 h-3 w-3" />
              조건 추가
            </Button>
            <Button size="sm" variant="outline" onClick={onAddGroupStart} className="h-7 text-xs">
              그룹 시작 (
            </Button>
            <Button size="sm" variant="outline" onClick={onAddGroupEnd} className="h-7 text-xs">
              그룹 끝 )
            </Button>
          </div>
        </div>

        {/* 조건 목록 */}
        <ConditionRenderer
          conditions={conditions}
          fromTableColumns={fromTableColumns}
          fromTableName={fromTableName}
          onUpdateCondition={onUpdateCondition}
          onRemoveCondition={onRemoveCondition}
          getCurrentGroupLevel={getCurrentGroupLevel}
        />
      </div>
    </div>
  );
};