"use client";

/**
 * 필드 매핑 노드 속성 편집
 */

import { useEffect, useState } from "react";
import { Plus, Trash2, 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 { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
import type { FieldMappingNodeData } from "@/types/node-editor";

interface FieldMappingPropertiesProps {
  nodeId: string;
  data: FieldMappingNodeData;
}

export function FieldMappingProperties({ nodeId, data }: FieldMappingPropertiesProps) {
  const { updateNode } = useFlowEditorStore();

  const [displayName, setDisplayName] = useState(data.displayName || "데이터 매핑");
  const [mappings, setMappings] = useState(data.mappings || []);

  // 데이터 변경 시 로컬 상태 업데이트
  useEffect(() => {
    setDisplayName(data.displayName || "데이터 매핑");
    setMappings(data.mappings || []);
  }, [data]);

  const handleAddMapping = () => {
    setMappings([
      ...mappings,
      {
        id: `mapping_${Date.now()}`,
        sourceField: "",
        targetField: "",
        transform: undefined,
        staticValue: undefined,
      },
    ]);
  };

  const handleRemoveMapping = (id: string) => {
    setMappings(mappings.filter((m) => m.id !== id));
  };

  const handleMappingChange = (id: string, field: string, value: any) => {
    const newMappings = mappings.map((m) => (m.id === id ? { ...m, [field]: value } : m));
    setMappings(newMappings);
  };

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

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

          <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>

        {/* 매핑 규칙 */}
        <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">
              <Plus className="mr-1 h-3 w-3" />
              추가
            </Button>
          </div>

          {mappings.length > 0 ? (
            <div className="space-y-2">
              {mappings.map((mapping, index) => (
                <div key={mapping.id} className="rounded border bg-purple-50 p-3">
                  <div className="mb-2 flex items-center justify-between">
                    <span className="text-xs font-medium text-purple-700">규칙 #{index + 1}</span>
                    <Button
                      size="sm"
                      variant="ghost"
                      onClick={() => handleRemoveMapping(mapping.id)}
                      className="h-6 w-6 p-0"
                    >
                      <Trash2 className="h-3 w-3" />
                    </Button>
                  </div>

                  <div className="space-y-2">
                    {/* 소스 → 타겟 */}
                    <div className="flex items-center gap-2">
                      <div className="flex-1">
                        <Label className="text-xs text-gray-600">소스 필드</Label>
                        <Input
                          value={mapping.sourceField || ""}
                          onChange={(e) => handleMappingChange(mapping.id, "sourceField", e.target.value)}
                          placeholder="입력 필드"
                          className="mt-1 h-8 text-xs"
                        />
                      </div>

                      <div className="pt-5">
                        <ArrowRight className="h-4 w-4 text-purple-500" />
                      </div>

                      <div className="flex-1">
                        <Label className="text-xs text-gray-600">타겟 필드</Label>
                        <Input
                          value={mapping.targetField}
                          onChange={(e) => handleMappingChange(mapping.id, "targetField", e.target.value)}
                          placeholder="출력 필드"
                          className="mt-1 h-8 text-xs"
                        />
                      </div>
                    </div>

                    {/* 변환 함수 */}
                    <div>
                      <Label className="text-xs text-gray-600">변환 함수 (선택)</Label>
                      <Input
                        value={mapping.transform || ""}
                        onChange={(e) => handleMappingChange(mapping.id, "transform", e.target.value)}
                        placeholder="예: UPPER(), TRIM(), CONCAT()"
                        className="mt-1 h-8 text-xs"
                      />
                    </div>

                    {/* 정적 값 */}
                    <div>
                      <Label className="text-xs text-gray-600">정적 값 (선택)</Label>
                      <Input
                        value={mapping.staticValue || ""}
                        onChange={(e) => handleMappingChange(mapping.id, "staticValue", 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-purple-50 p-3 text-xs text-purple-700">
            💡 <strong>소스 필드</strong>: 입력 데이터의 필드명
          </div>
          <div className="rounded bg-purple-50 p-3 text-xs text-purple-700">
            💡 <strong>타겟 필드</strong>: 출력 데이터의 필드명
          </div>
          <div className="rounded bg-purple-50 p-3 text-xs text-purple-700">
            💡 <strong>변환 함수</strong>: 데이터 변환 로직 (SQL 함수 형식)
          </div>
        </div>
      </div>
    </ScrollArea>
  );
}