"use client";

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

interface RestAPISourcePropertiesProps {
  nodeId: string;
  data: RestAPISourceNodeData;
}

const HTTP_METHODS = ["GET", "POST", "PUT", "DELETE", "PATCH"];
const AUTH_TYPES = [
  { value: "none", label: "인증 없음" },
  { value: "bearer", label: "Bearer Token" },
  { value: "basic", label: "Basic Auth" },
  { value: "apikey", label: "API Key" },
];

export function RestAPISourceProperties({ nodeId, data }: RestAPISourcePropertiesProps) {
  const { updateNode } = useFlowEditorStore();

  const [displayName, setDisplayName] = useState(data.displayName || "");
  const [url, setUrl] = useState(data.url || "");
  const [method, setMethod] = useState(data.method || "GET");
  const [headers, setHeaders] = useState(data.headers || {});
  const [newHeaderKey, setNewHeaderKey] = useState("");
  const [newHeaderValue, setNewHeaderValue] = useState("");
  const [body, setBody] = useState(JSON.stringify(data.body || {}, null, 2));
  const [authType, setAuthType] = useState(data.authentication?.type || "none");
  const [authToken, setAuthToken] = useState(data.authentication?.token || "");
  const [timeout, setTimeout] = useState(data.timeout?.toString() || "30000");
  const [responseMapping, setResponseMapping] = useState(data.responseMapping || "");
  const [responseFields, setResponseFields] = useState(data.responseFields || []);

  useEffect(() => {
    setDisplayName(data.displayName || "");
    setUrl(data.url || "");
    setMethod(data.method || "GET");
    setHeaders(data.headers || {});
    setBody(JSON.stringify(data.body || {}, null, 2));
    setAuthType(data.authentication?.type || "none");
    setAuthToken(data.authentication?.token || "");
    setTimeout(data.timeout?.toString() || "30000");
    setResponseMapping(data.responseMapping || "");
    setResponseFields(data.responseFields || []);
  }, [data]);

  const handleApply = () => {
    let parsedBody = {};
    try {
      parsedBody = body.trim() ? JSON.parse(body) : {};
    } catch (e) {
      alert("Body JSON 형식이 올바르지 않습니다.");
      return;
    }

    console.log("🔧 REST API 노드 업데이트 중...");
    console.log("📦 responseFields:", responseFields);
    console.log("📊 responseFields 개수:", responseFields.length);

    updateNode(nodeId, {
      displayName,
      url,
      method: method as any,
      headers,
      body: parsedBody,
      authentication: {
        type: authType as any,
        token: authToken || undefined,
      },
      timeout: parseInt(timeout) || 30000,
      responseMapping,
      responseFields,
    });

    console.log("✅ REST API 노드 업데이트 완료");
  };

  const addHeader = () => {
    if (newHeaderKey.trim() && newHeaderValue.trim()) {
      setHeaders({ ...headers, [newHeaderKey.trim()]: newHeaderValue.trim() });
      setNewHeaderKey("");
      setNewHeaderValue("");
    }
  };

  const removeHeader = (key: string) => {
    const newHeaders = { ...headers };
    delete newHeaders[key];
    setHeaders(newHeaders);
  };

  const addResponseField = () => {
    const newFields = [
      ...responseFields,
      {
        name: "",
        label: "",
        dataType: "TEXT",
      },
    ];
    console.log("➕ 응답 필드 추가:", newFields);
    setResponseFields(newFields);
  };

  const updateResponseField = (index: number, field: string, value: string) => {
    const updated = [...responseFields];
    updated[index] = { ...updated[index], [field]: value };
    console.log(`✏️ 응답 필드 ${index} 업데이트 (${field}=${value}):`, updated);
    setResponseFields(updated);
  };

  const removeResponseField = (index: number) => {
    const newFields = responseFields.filter((_, i) => i !== index);
    console.log("🗑️ 응답 필드 삭제:", newFields);
    setResponseFields(newFields);
  };

  return (
    <div className="space-y-4 p-4 pb-8">
      <div className="flex items-center gap-2 rounded-md bg-teal-50 p-2">
        <Globe className="h-4 w-4 text-teal-600" />
        <span className="font-semibold text-teal-600">REST API 소스</span>
      </div>

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

      <div>
        <Label htmlFor="url" className="text-xs">
          API URL
        </Label>
        <Input
          id="url"
          value={url}
          onChange={(e) => setUrl(e.target.value)}
          placeholder="https://api.example.com/data"
          className="mt-1 text-sm"
        />
      </div>

      <div>
        <Label className="text-xs">HTTP 메서드</Label>
        <Select value={method} onValueChange={setMethod}>
          <SelectTrigger className="mt-1">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {HTTP_METHODS.map((m) => (
              <SelectItem key={m} value={m}>
                {m}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <div>
        <Label className="text-xs">헤더</Label>
        <div className="mt-1 space-y-2">
          <div className="flex gap-2">
            <Input
              value={newHeaderKey}
              onChange={(e) => setNewHeaderKey(e.target.value)}
              placeholder="Key"
              className="text-sm"
            />
            <Input
              value={newHeaderValue}
              onChange={(e) => setNewHeaderValue(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && addHeader()}
              placeholder="Value"
              className="text-sm"
            />
            <Button size="sm" onClick={addHeader}>
              <Plus className="h-4 w-4" />
            </Button>
          </div>
          <div className="max-h-[100px] space-y-1 overflow-y-auto">
            {Object.entries(headers).map(([key, value]) => (
              <div key={key} className="flex items-center justify-between rounded bg-teal-50 px-2 py-1">
                <span className="text-xs">
                  <span className="font-medium">{key}:</span> {value}
                </span>
                <Button variant="ghost" size="sm" onClick={() => removeHeader(key)}>
                  <Trash2 className="h-3 w-3 text-red-500" />
                </Button>
              </div>
            ))}
          </div>
        </div>
      </div>

      {(method === "POST" || method === "PUT" || method === "PATCH") && (
        <div>
          <Label htmlFor="body" className="text-xs">
            Body (JSON)
          </Label>
          <Textarea
            id="body"
            value={body}
            onChange={(e) => setBody(e.target.value)}
            placeholder='{"key": "value"}'
            className="mt-1 font-mono text-sm"
            rows={5}
          />
        </div>
      )}

      <div>
        <Label className="text-xs">인증</Label>
        <Select value={authType} onValueChange={setAuthType}>
          <SelectTrigger className="mt-1">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {AUTH_TYPES.map((type) => (
              <SelectItem key={type.value} value={type.value}>
                {type.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        {authType !== "none" && (
          <Input
            value={authToken}
            onChange={(e) => setAuthToken(e.target.value)}
            placeholder="토큰/키 입력"
            className="mt-2 text-sm"
            type="password"
          />
        )}
      </div>

      <div>
        <Label htmlFor="timeout" className="text-xs">
          타임아웃 (ms)
        </Label>
        <Input
          id="timeout"
          type="number"
          value={timeout}
          onChange={(e) => setTimeout(e.target.value)}
          className="mt-1 text-sm"
        />
      </div>

      <div>
        <Label htmlFor="responseMapping" className="text-xs">
          응답 매핑 (JSON 경로)
        </Label>
        <Input
          id="responseMapping"
          value={responseMapping}
          onChange={(e) => setResponseMapping(e.target.value)}
          placeholder="예: data.items"
          className="mt-1 text-sm"
        />
        <p className="mt-1 text-xs text-gray-500">배열 데이터의 경로를 지정하세요 (예: data.items, result.users)</p>
      </div>

      <div>
        <div className="mb-2 flex items-center justify-between">
          <Label className="text-xs">응답 필드 정의</Label>
          <Button size="sm" variant="outline" onClick={addResponseField}>
            <Plus className="mr-1 h-3 w-3" />
            필드 추가
          </Button>
        </div>
        <div className="max-h-[300px] space-y-2 overflow-y-auto">
          {responseFields.length === 0 ? (
            <div className="rounded border border-dashed p-3 text-center text-xs text-gray-400">
              응답 필드를 추가하여 데이터 구조를 정의하세요
            </div>
          ) : (
            responseFields.map((field, index) => (
              <div key={index} className="rounded border bg-gray-50 p-2">
                <div className="mb-2 flex items-center justify-between">
                  <span className="text-xs font-medium text-gray-700">필드 {index + 1}</span>
                  <Button variant="ghost" size="sm" onClick={() => removeResponseField(index)}>
                    <Trash2 className="h-3 w-3 text-red-500" />
                  </Button>
                </div>
                <div className="space-y-2">
                  <Input
                    value={field.name}
                    onChange={(e) => updateResponseField(index, "name", e.target.value)}
                    placeholder="필드명 (예: userId)"
                    className="text-xs"
                  />
                  <Input
                    value={field.label || ""}
                    onChange={(e) => updateResponseField(index, "label", e.target.value)}
                    placeholder="표시명 (예: 사용자 ID)"
                    className="text-xs"
                  />
                  <Select
                    value={field.dataType || "TEXT"}
                    onValueChange={(value) => updateResponseField(index, "dataType", value)}
                  >
                    <SelectTrigger className="text-xs">
                      <SelectValue placeholder="데이터 타입" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="TEXT">텍스트</SelectItem>
                      <SelectItem value="NUMBER">숫자</SelectItem>
                      <SelectItem value="DATE">날짜</SelectItem>
                      <SelectItem value="BOOLEAN">참/거짓</SelectItem>
                      <SelectItem value="JSON">JSON</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            ))
          )}
        </div>
      </div>

      <Button onClick={handleApply} className="w-full">
        적용
      </Button>
    </div>
  );
}