"use client";

/**
 * 조건 분기 노드 속성 편집
 */

import { useEffect, useState } from "react";
import { Plus, Trash2 } from "lucide-react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
import type { ConditionNodeData } from "@/types/node-editor";

interface ConditionPropertiesProps {
  nodeId: string;
  data: ConditionNodeData;
}

const OPERATORS = [
  { value: "EQUALS", label: "같음 (=)" },
  { value: "NOT_EQUALS", label: "같지 않음 (≠)" },
  { value: "GREATER_THAN", label: "보다 큼 (>)" },
  { value: "LESS_THAN", label: "보다 작음 (<)" },
  { value: "GREATER_THAN_OR_EQUAL", label: "크거나 같음 (≥)" },
  { value: "LESS_THAN_OR_EQUAL", label: "작거나 같음 (≤)" },
  { value: "LIKE", label: "포함 (LIKE)" },
  { value: "NOT_LIKE", label: "미포함 (NOT LIKE)" },
  { value: "IN", label: "IN" },
  { value: "NOT_IN", label: "NOT IN" },
  { value: "IS_NULL", label: "NULL" },
  { value: "IS_NOT_NULL", label: "NOT NULL" },
] as const;

export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps) {
  const { updateNode } = useFlowEditorStore();

  const [displayName, setDisplayName] = useState(data.displayName || "조건 분기");
  const [conditions, setConditions] = useState(data.conditions || []);
  const [logic, setLogic] = useState<"AND" | "OR">(data.logic || "AND");

  // 데이터 변경 시 로컬 상태 업데이트
  useEffect(() => {
    setDisplayName(data.displayName || "조건 분기");
    setConditions(data.conditions || []);
    setLogic(data.logic || "AND");
  }, [data]);

  const handleAddCondition = () => {
    setConditions([
      ...conditions,
      {
        field: "",
        operator: "EQUALS",
        value: "",
      },
    ]);
  };

  const handleRemoveCondition = (index: number) => {
    setConditions(conditions.filter((_, i) => i !== index));
  };

  const handleConditionChange = (index: number, field: string, value: any) => {
    const newConditions = [...conditions];
    newConditions[index] = { ...newConditions[index], [field]: value };
    setConditions(newConditions);
  };

  const handleSave = () => {
    updateNode(nodeId, {
      displayName,
      conditions,
      logic,
    });
  };

  return (
    <ScrollArea className="h-full">
      <div className="space-y-4 p-4">
        {/* 기본 정보 */}
        <div>
          <h3 className="mb-3 text-sm font-semibold">기본 정보</h3>

          <div className="space-y-3">
            <div>
              <Label htmlFor="displayName" className="text-xs">
                표시 이름
              </Label>
              <Input
                id="displayName"
                value={displayName}
                onChange={(e) => setDisplayName(e.target.value)}
                className="mt-1"
                placeholder="노드 표시 이름"
              />
            </div>

            <div>
              <Label htmlFor="logic" className="text-xs">
                조건 로직
              </Label>
              <Select value={logic} onValueChange={(value: "AND" | "OR") => setLogic(value)}>
                <SelectTrigger className="mt-1">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="AND">AND (모두 충족)</SelectItem>
                  <SelectItem value="OR">OR (하나라도 충족)</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </div>

        {/* 조건식 */}
        <div>
          <div className="mb-2 flex items-center justify-between">
            <h3 className="text-sm font-semibold">조건식</h3>
            <Button size="sm" variant="outline" onClick={handleAddCondition} className="h-7">
              <Plus className="mr-1 h-3 w-3" />
              추가
            </Button>
          </div>

          {conditions.length > 0 ? (
            <div className="space-y-2">
              {conditions.map((condition, index) => (
                <div key={index} className="rounded border bg-yellow-50 p-3">
                  <div className="mb-2 flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <span className="text-xs font-medium text-yellow-700">조건 #{index + 1}</span>
                      {index > 0 && (
                        <span className="rounded bg-yellow-200 px-1.5 py-0.5 text-xs font-semibold text-yellow-800">
                          {logic}
                        </span>
                      )}
                    </div>
                    <Button
                      size="sm"
                      variant="ghost"
                      onClick={() => handleRemoveCondition(index)}
                      className="h-6 w-6 p-0"
                    >
                      <Trash2 className="h-3 w-3" />
                    </Button>
                  </div>

                  <div className="space-y-2">
                    <div>
                      <Label className="text-xs text-gray-600">필드명</Label>
                      <Input
                        value={condition.field}
                        onChange={(e) => handleConditionChange(index, "field", e.target.value)}
                        placeholder="조건을 검사할 필드"
                        className="mt-1 h-8 text-xs"
                      />
                    </div>

                    <div>
                      <Label className="text-xs text-gray-600">연산자</Label>
                      <Select
                        value={condition.operator}
                        onValueChange={(value) => handleConditionChange(index, "operator", value)}
                      >
                        <SelectTrigger className="mt-1 h-8 text-xs">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          {OPERATORS.map((op) => (
                            <SelectItem key={op.value} value={op.value}>
                              {op.label}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>

                    {condition.operator !== "IS_NULL" && condition.operator !== "IS_NOT_NULL" && (
                      <div>
                        <Label className="text-xs text-gray-600">비교 값</Label>
                        <Input
                          value={condition.value as string}
                          onChange={(e) => handleConditionChange(index, "value", e.target.value)}
                          placeholder="비교할 값"
                          className="mt-1 h-8 text-xs"
                        />
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="rounded border border-dashed p-4 text-center text-xs text-gray-400">
              조건식이 없습니다. "추가" 버튼을 클릭하세요.
            </div>
          )}
        </div>

        {/* 저장 버튼 */}
        <div className="flex gap-2">
          <Button onClick={handleSave} className="flex-1" size="sm">
            적용
          </Button>
        </div>

        {/* 안내 */}
        <div className="space-y-2">
          <div className="rounded bg-yellow-50 p-3 text-xs text-yellow-700">
            💡 <strong>AND</strong>: 모든 조건이 참이어야 TRUE 출력
          </div>
          <div className="rounded bg-yellow-50 p-3 text-xs text-yellow-700">
            💡 <strong>OR</strong>: 하나라도 참이면 TRUE 출력
          </div>
          <div className="rounded bg-yellow-50 p-3 text-xs text-yellow-700">
            ⚡ TRUE 출력은 오른쪽 위, FALSE 출력은 오른쪽 아래입니다.
          </div>
        </div>
      </div>
    </ScrollArea>
  );
}