"use client";

/**
 * UPSERT 액션 노드 속성 편집 (개선 버전)
 */

import { useEffect, useState } from "react";
import { Plus, Trash2, Check, ChevronsUpDown, ArrowRight } 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 { Checkbox } from "@/components/ui/checkbox";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { cn } from "@/lib/utils";
import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
import { tableTypeApi } from "@/lib/api/screen";
import type { UpsertActionNodeData } from "@/types/node-editor";

interface UpsertActionPropertiesProps {
  nodeId: string;
  data: UpsertActionNodeData;
}

interface TableOption {
  tableName: string;
  displayName: string;
  description: string;
  label: string;
}

interface ColumnInfo {
  columnName: string;
  columnLabel?: string;
  dataType: string;
  isNullable: boolean;
}

export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesProps) {
  const { updateNode, nodes, edges } = useFlowEditorStore();

  const [displayName, setDisplayName] = useState(data.displayName || data.targetTable);
  const [targetTable, setTargetTable] = useState(data.targetTable);
  const [conflictKeys, setConflictKeys] = useState<string[]>(data.conflictKeys || []);
  const [conflictKeyLabels, setConflictKeyLabels] = useState<string[]>(data.conflictKeyLabels || []);
  const [fieldMappings, setFieldMappings] = useState(data.fieldMappings || []);
  const [batchSize, setBatchSize] = useState(data.options?.batchSize?.toString() || "");
  const [updateOnConflict, setUpdateOnConflict] = useState(data.options?.updateOnConflict ?? true);

  // 테이블 관련 상태
  const [tables, setTables] = useState<TableOption[]>([]);
  const [tablesLoading, setTablesLoading] = useState(false);
  const [tablesOpen, setTablesOpen] = useState(false);

  // 컬럼 관련 상태
  const [targetColumns, setTargetColumns] = useState<ColumnInfo[]>([]);
  const [columnsLoading, setColumnsLoading] = useState(false);

  // 소스 필드 목록 (연결된 입력 노드에서 가져오기)
  const [sourceFields, setSourceFields] = useState<Array<{ name: string; label?: string }>>([]);

  // 데이터 변경 시 로컬 상태 업데이트
  useEffect(() => {
    setDisplayName(data.displayName || data.targetTable);
    setTargetTable(data.targetTable);
    setConflictKeys(data.conflictKeys || []);
    setConflictKeyLabels(data.conflictKeyLabels || []);
    setFieldMappings(data.fieldMappings || []);
    setBatchSize(data.options?.batchSize?.toString() || "");
    setUpdateOnConflict(data.options?.updateOnConflict ?? true);
  }, [data]);

  // 테이블 목록 로딩
  useEffect(() => {
    loadTables();
  }, []);

  // 타겟 테이블 변경 시 컬럼 로딩
  useEffect(() => {
    if (targetTable) {
      loadColumns(targetTable);
    }
  }, [targetTable]);

  // 연결된 소스 노드에서 필드 가져오기 (재귀적으로 모든 상위 노드 탐색)
  useEffect(() => {
    const getAllSourceFields = (
      targetNodeId: string,
      visitedNodes = new Set<string>(),
    ): Array<{ name: string; label?: string }> => {
      if (visitedNodes.has(targetNodeId)) {
        return [];
      }
      visitedNodes.add(targetNodeId);

      const inputEdges = edges.filter((edge) => edge.target === targetNodeId);
      const sourceNodeIds = inputEdges.map((edge) => edge.source);
      const sourceNodes = nodes.filter((node) => sourceNodeIds.includes(node.id));

      const fields: Array<{ name: string; label?: string }> = [];

      sourceNodes.forEach((node) => {
        // 데이터 변환 노드인 경우: 변환된 필드 + 상위 노드의 원본 필드
        if (node.type === "dataTransform") {
          // 상위 노드의 원본 필드 먼저 수집
          const upperFields = getAllSourceFields(node.id, visitedNodes);

          // 변환된 필드 추가 (in-place 변환 고려)
          if (node.data.transformations && Array.isArray(node.data.transformations)) {
            const inPlaceFields = new Set<string>();

            node.data.transformations.forEach((transform: any) => {
              const targetField = transform.targetField || transform.sourceField;
              const isInPlace = !transform.targetField || transform.targetField === transform.sourceField;

              if (isInPlace) {
                inPlaceFields.add(transform.sourceField);
              } else if (targetField) {
                fields.push({
                  name: targetField,
                  label: transform.targetFieldLabel || targetField,
                });
              }
            });

            // 상위 필드 추가 (모두 포함, in-place는 변환 후 값)
            upperFields.forEach((field) => {
              fields.push(field);
            });
          } else {
            fields.push(...upperFields);
          }
        }
        // 일반 소스 노드인 경우
        else if (node.type === "tableSource" && node.data.fields) {
          node.data.fields.forEach((field: any) => {
            fields.push({
              name: field.name,
              label: field.label || field.displayName,
            });
          });
        } else if (node.type === "externalDBSource" && node.data.fields) {
          node.data.fields.forEach((field: any) => {
            fields.push({
              name: field.name,
              label: field.label || field.displayName,
            });
          });
        }
      });

      return fields;
    };

    const allFields = getAllSourceFields(nodeId);

    // 중복 제거
    const uniqueFields = Array.from(new Map(allFields.map((field) => [field.name, field])).values());

    setSourceFields(uniqueFields);
  }, [nodeId, nodes, edges]);

  const loadTables = async () => {
    try {
      setTablesLoading(true);
      const tableList = await tableTypeApi.getTables();

      const options: TableOption[] = tableList.map((table) => {
        const label = (table as any).tableLabel || table.displayName || table.tableName || "알 수 없는 테이블";

        return {
          tableName: table.tableName,
          displayName: table.displayName || table.tableName,
          description: table.description || "",
          label,
        };
      });

      setTables(options);
    } catch (error) {
      console.error("❌ UPSERT 노드 - 테이블 목록 로딩 실패:", error);
    } finally {
      setTablesLoading(false);
    }
  };

  const loadColumns = async (tableName: string) => {
    try {
      setColumnsLoading(true);
      const columns = await tableTypeApi.getColumns(tableName);

      const columnInfo: ColumnInfo[] = columns.map((col: any) => ({
        columnName: col.column_name || col.columnName,
        columnLabel: col.label_ko || col.columnLabel,
        dataType: col.data_type || col.dataType || "unknown",
        isNullable: col.is_nullable === "YES" || col.isNullable === true,
      }));

      setTargetColumns(columnInfo);
    } catch (error) {
      console.error("❌ UPSERT 노드 - 컬럼 목록 로딩 실패:", error);
      setTargetColumns([]);
    } finally {
      setColumnsLoading(false);
    }
  };

  const handleTableSelect = async (newTableName: string) => {
    const selectedTable = tables.find((t) => t.tableName === newTableName);
    const newDisplayName = selectedTable?.label || selectedTable?.displayName || newTableName;

    setTargetTable(newTableName);
    setDisplayName(newDisplayName);

    await loadColumns(newTableName);

    // 즉시 반영
    updateNode(nodeId, {
      displayName: newDisplayName,
      targetTable: newTableName,
      conflictKeys,
      conflictKeyLabels,
      fieldMappings,
      options: {
        batchSize: batchSize ? parseInt(batchSize) : undefined,
        updateOnConflict,
      },
    });

    setTablesOpen(false);
  };

  const handleAddConflictKey = (columnName: string) => {
    if (!conflictKeys.includes(columnName)) {
      const column = targetColumns.find((c) => c.columnName === columnName);
      const newConflictKeys = [...conflictKeys, columnName];
      const newConflictKeyLabels = [...conflictKeyLabels, column?.columnLabel || columnName];

      setConflictKeys(newConflictKeys);
      setConflictKeyLabels(newConflictKeyLabels);
    }
  };

  const handleRemoveConflictKey = (index: number) => {
    const newKeys = conflictKeys.filter((_, i) => i !== index);
    const newLabels = conflictKeyLabels.filter((_, i) => i !== index);

    setConflictKeys(newKeys);
    setConflictKeyLabels(newLabels);

    // 즉시 반영
    updateNode(nodeId, {
      displayName,
      targetTable,
      conflictKeys: newKeys,
      conflictKeyLabels: newLabels,
      fieldMappings,
      options: {
        batchSize: batchSize ? parseInt(batchSize) : undefined,
        updateOnConflict,
      },
    });
  };

  const handleAddMapping = () => {
    setFieldMappings([
      ...fieldMappings,
      {
        sourceField: null,
        targetField: "",
        staticValue: undefined,
      },
    ]);
  };

  const handleRemoveMapping = (index: number) => {
    const newMappings = fieldMappings.filter((_, i) => i !== index);
    setFieldMappings(newMappings);

    // 즉시 반영
    updateNode(nodeId, {
      displayName,
      targetTable,
      conflictKeys,
      conflictKeyLabels,
      fieldMappings: newMappings,
      options: {
        batchSize: batchSize ? parseInt(batchSize) : undefined,
        updateOnConflict,
      },
    });
  };

  const handleMappingChange = (index: number, field: string, value: any) => {
    const newMappings = [...fieldMappings];

    // 필드 변경 시 라벨도 함께 저장
    if (field === "sourceField") {
      const sourceField = sourceFields.find((f) => f.name === value);
      newMappings[index] = {
        ...newMappings[index],
        sourceField: value,
        sourceFieldLabel: sourceField?.label,
      };
    } else if (field === "targetField") {
      const targetColumn = targetColumns.find((c) => c.columnName === value);
      newMappings[index] = {
        ...newMappings[index],
        targetField: value,
        targetFieldLabel: targetColumn?.columnLabel,
      };
    } else {
      newMappings[index] = { ...newMappings[index], [field]: value };
    }

    setFieldMappings(newMappings);
  };

  const handleSave = () => {
    updateNode(nodeId, {
      displayName,
      targetTable,
      conflictKeys,
      conflictKeyLabels,
      fieldMappings,
      options: {
        batchSize: batchSize ? parseInt(batchSize) : undefined,
        updateOnConflict,
      },
    });
  };

  const selectedTableLabel = tables.find((t) => t.tableName === targetTable)?.label || targetTable;

  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>

            {/* 타겟 테이블 Combobox */}
            <div>
              <Label className="text-xs">타겟 테이블</Label>
              <Popover open={tablesOpen} onOpenChange={setTablesOpen}>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    role="combobox"
                    aria-expanded={tablesOpen}
                    className="mt-1 w-full justify-between"
                    disabled={tablesLoading}
                  >
                    {tablesLoading ? (
                      <span className="text-muted-foreground">로딩 중...</span>
                    ) : targetTable ? (
                      <span className="truncate">{selectedTableLabel}</span>
                    ) : (
                      <span className="text-muted-foreground">테이블을 선택하세요</span>
                    )}
                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-[320px] p-0" align="start">
                  <Command>
                    <CommandInput placeholder="테이블 검색..." className="h-9" />
                    <CommandEmpty>테이블을 찾을 수 없습니다.</CommandEmpty>
                    <CommandList>
                      <CommandGroup>
                        {tables.map((table) => (
                          <CommandItem
                            key={table.tableName}
                            value={`${table.label} ${table.displayName} ${table.tableName}`}
                            onSelect={() => handleTableSelect(table.tableName)}
                          >
                            <Check
                              className={cn(
                                "mr-2 h-4 w-4",
                                targetTable === table.tableName ? "opacity-100" : "opacity-0",
                              )}
                            />
                            <div className="flex flex-col">
                              <span className="font-medium">{table.label || table.displayName}</span>
                              <span className="text-muted-foreground text-xs">{table.tableName}</span>
                            </div>
                          </CommandItem>
                        ))}
                      </CommandGroup>
                    </CommandList>
                  </Command>
                </PopoverContent>
              </Popover>
            </div>
          </div>
        </div>

        {/* 충돌 키 (ON CONFLICT) */}
        <div>
          <div className="mb-2 flex items-center justify-between">
            <div>
              <h3 className="text-sm font-semibold">충돌 키 (ON CONFLICT)</h3>
              <p className="text-xs text-gray-500">중복 체크에 사용할 키를 선택하세요</p>
            </div>
          </div>

          {!targetTable && (
            <div className="rounded border border-dashed bg-yellow-50 p-3 text-center text-xs text-yellow-700">
              ⚠️ 먼저 타겟 테이블을 선택하세요
            </div>
          )}

          {targetTable && targetColumns.length > 0 && (
            <>
              {/* 선택된 충돌 키 */}
              {conflictKeys.length > 0 ? (
                <div className="mb-3 flex flex-wrap gap-2">
                  {conflictKeys.map((key, idx) => (
                    <div key={idx} className="flex items-center gap-1 rounded bg-purple-100 px-2 py-1 text-xs">
                      <span className="font-medium text-purple-700">{conflictKeyLabels[idx] || key}</span>
                      <button
                        onClick={() => handleRemoveConflictKey(idx)}
                        className="ml-1 text-purple-600 hover:text-purple-800"
                      >
                        <Trash2 className="h-3 w-3" />
                      </button>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="mb-3 rounded border border-dashed bg-gray-50 p-3 text-center text-xs text-gray-500">
                  충돌 키를 추가하세요
                </div>
              )}

              {/* 충돌 키 추가 드롭다운 */}
              <Select onValueChange={handleAddConflictKey}>
                <SelectTrigger className="h-8 text-xs">
                  <SelectValue placeholder="충돌 키 추가..." />
                </SelectTrigger>
                <SelectContent>
                  {targetColumns
                    .filter((col) => !conflictKeys.includes(col.columnName))
                    .map((col) => (
                      <SelectItem key={col.columnName} value={col.columnName} className="text-xs">
                        <div className="flex items-center justify-between gap-2">
                          <span className="font-mono">{col.columnLabel || col.columnName}</span>
                          <span className="text-muted-foreground">{col.dataType}</span>
                        </div>
                      </SelectItem>
                    ))}
                </SelectContent>
              </Select>
            </>
          )}
        </div>

        {/* 필드 매핑 */}
        <div>
          <div className="mb-2 flex items-center justify-between">
            <h3 className="text-sm font-semibold">필드 매핑</h3>
            <Button size="sm" variant="outline" onClick={handleAddMapping} className="h-7 px-2 text-xs">
              <Plus className="mr-1 h-3 w-3" />
              매핑 추가
            </Button>
          </div>

          {!targetTable && !columnsLoading && (
            <div className="rounded border border-dashed bg-yellow-50 p-3 text-center text-xs text-yellow-700">
              ⚠️ 먼저 타겟 테이블을 선택하세요
            </div>
          )}

          {targetTable && !columnsLoading && targetColumns.length === 0 && (
            <div className="rounded border border-dashed bg-red-50 p-3 text-center text-xs text-red-700">
              ❌ 컬럼 정보를 불러올 수 없습니다
            </div>
          )}

          {targetTable && targetColumns.length > 0 && (
            <>
              {fieldMappings.length > 0 ? (
                <div className="space-y-3">
                  {fieldMappings.map((mapping, index) => (
                    <div key={index} className="rounded border bg-gray-50 p-3">
                      <div className="mb-2 flex items-center justify-between">
                        <span className="text-xs font-medium text-gray-700">매핑 #{index + 1}</span>
                        <Button
                          size="sm"
                          variant="ghost"
                          onClick={() => handleRemoveMapping(index)}
                          className="h-6 w-6 p-0 text-red-600 hover:text-red-700"
                        >
                          <Trash2 className="h-3 w-3" />
                        </Button>
                      </div>

                      <div className="space-y-2">
                        {/* 소스 필드 드롭다운 */}
                        <div>
                          <Label className="text-xs text-gray-600">소스 필드</Label>
                          <Select
                            value={mapping.sourceField || ""}
                            onValueChange={(value) => handleMappingChange(index, "sourceField", value || null)}
                          >
                            <SelectTrigger className="mt-1 h-8 text-xs">
                              <SelectValue placeholder="소스 필드 선택" />
                            </SelectTrigger>
                            <SelectContent>
                              {sourceFields.length === 0 ? (
                                <div className="p-2 text-center text-xs text-gray-400">연결된 소스 노드가 없습니다</div>
                              ) : (
                                sourceFields.map((field) => (
                                  <SelectItem key={field.name} value={field.name} className="text-xs">
                                    <div className="flex items-center justify-between gap-2">
                                      <span className="font-medium">{field.label || field.name}</span>
                                      {field.label && field.label !== field.name && (
                                        <span className="text-muted-foreground font-mono text-xs">{field.name}</span>
                                      )}
                                    </div>
                                  </SelectItem>
                                ))
                              )}
                            </SelectContent>
                          </Select>
                        </div>

                        <div className="flex items-center justify-center py-1">
                          <ArrowRight className="h-4 w-4 text-purple-600" />
                        </div>

                        {/* 타겟 필드 드롭다운 */}
                        <div>
                          <Label className="text-xs text-gray-600">타겟 필드</Label>
                          <Select
                            value={mapping.targetField}
                            onValueChange={(value) => handleMappingChange(index, "targetField", value)}
                          >
                            <SelectTrigger className="mt-1 h-8 text-xs">
                              <SelectValue placeholder="타겟 필드 선택" />
                            </SelectTrigger>
                            <SelectContent>
                              {targetColumns.map((col) => (
                                <SelectItem key={col.columnName} value={col.columnName} className="text-xs">
                                  <div className="flex items-center justify-between gap-2">
                                    <span className="font-mono">{col.columnLabel || col.columnName}</span>
                                    <span className="text-muted-foreground">
                                      {col.dataType}
                                      {!col.isNullable && <span className="text-red-500">*</span>}
                                    </span>
                                  </div>
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </div>

                        {/* 정적 값 */}
                        <div>
                          <Label className="text-xs text-gray-600">정적 값 (선택)</Label>
                          <Input
                            value={mapping.staticValue || ""}
                            onChange={(e) => handleMappingChange(index, "staticValue", e.target.value || undefined)}
                            placeholder="소스 필드 대신 고정 값 사용"
                            className="mt-1 h-8 text-xs"
                          />
                          <p className="mt-1 text-xs text-gray-400">소스 필드가 비어있을 때만 사용됩니다</p>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="rounded border border-dashed bg-gray-50 p-3 text-center text-xs text-gray-500">
                  UPSERT할 필드를 추가하세요
                </div>
              )}
            </>
          )}
        </div>

        {/* 옵션 */}
        <div>
          <h3 className="mb-3 text-sm font-semibold">옵션</h3>
          <div className="space-y-3">
            <div>
              <Label htmlFor="batchSize" className="text-xs">
                배치 크기
              </Label>
              <Input
                id="batchSize"
                type="number"
                value={batchSize}
                onChange={(e) => setBatchSize(e.target.value)}
                className="mt-1"
                placeholder="예: 100"
              />
            </div>

            <div className="flex items-center space-x-2">
              <Checkbox
                id="updateOnConflict"
                checked={updateOnConflict}
                onCheckedChange={(checked) => setUpdateOnConflict(checked as boolean)}
              />
              <Label htmlFor="updateOnConflict" className="cursor-pointer text-xs font-normal">
                충돌 시 업데이트 (ON CONFLICT DO UPDATE)
              </Label>
            </div>
          </div>
        </div>

        {/* 적용 버튼 */}
        <div className="sticky bottom-0 border-t bg-white pt-3">
          <Button onClick={handleSave} className="w-full" size="sm">
            적용
          </Button>
          <p className="mt-2 text-center text-xs text-gray-500">✅ 변경 사항이 즉시 노드에 반영됩니다.</p>
        </div>
      </div>
    </ScrollArea>
  );
}