ERP-node/frontend/components/dataflow/connection/SimpleExternalCallSettings.tsx

"use client";

import React, { useState, useEffect } from "react";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { ExternalCallConfigAPI, ExternalCallConfig } from "@/lib/api/externalCallConfig";
import { ExternalCallAPI } from "@/lib/api/externalCall";
import { toast } from "sonner";
import { Globe, TestTube, RefreshCw } from "lucide-react";

// 단순화된 외부 호출 설정 타입
export interface SimpleExternalCallSettings {
  configId?: number; // 선택된 외부 호출 설정 ID
  configName?: string; // 설정 이름 (표시용)
  message: string; // 메시지 템플릿
}

interface SimpleExternalCallSettingsProps {
  settings: SimpleExternalCallSettings;
  onSettingsChange: (settings: SimpleExternalCallSettings) => void;
}

export function SimpleExternalCallSettings({ settings, onSettingsChange }: SimpleExternalCallSettingsProps) {
  const [availableConfigs, setAvailableConfigs] = useState<ExternalCallConfig[]>([]);
  const [loading, setLoading] = useState(true);
  const [testLoading, setTestLoading] = useState(false);

  // 사용 가능한 외부 호출 설정 목록 조회
  const fetchAvailableConfigs = async () => {
    try {
      setLoading(true);
      const response = await ExternalCallConfigAPI.getConfigs({
        is_active: "Y", // 활성화된 설정만 조회
      });

      if (response.success) {
        setAvailableConfigs(response.data || []);
      } else {
        toast.error("외부 호출 설정 목록 조회 실패");
      }
    } catch (error) {
      console.error("외부 호출 설정 목록 조회 오류:", error);
      toast.error("외부 호출 설정을 불러올 수 없습니다.");
    } finally {
      setLoading(false);
    }
  };

  // 컴포넌트 마운트 시 설정 목록 조회
  useEffect(() => {
    fetchAvailableConfigs();
  }, []);

  // 외부 호출 설정 선택
  const handleConfigChange = (configId: string) => {
    if (configId === "none") {
      onSettingsChange({
        ...settings,
        configId: undefined,
        configName: undefined,
      });
      return;
    }

    const selectedConfig = availableConfigs.find((config) => config.id?.toString() === configId);
    if (selectedConfig) {
      onSettingsChange({
        ...settings,
        configId: selectedConfig.id,
        configName: selectedConfig.config_name,
      });
    }
  };

  // 메시지 변경
  const handleMessageChange = (message: string) => {
    onSettingsChange({
      ...settings,
      message,
    });
  };

  // 테스트 실행
  const handleTest = async () => {
    if (!settings.configId) {
      toast.error("외부 호출 설정을 선택해주세요.");
      return;
    }

    if (!settings.message.trim()) {
      toast.error("메시지를 입력해주세요.");
      return;
    }

    try {
      setTestLoading(true);

      // 선택된 설정 정보 가져오기
      const configResponse = await ExternalCallConfigAPI.getConfigById(settings.configId);
      if (!configResponse.success || !configResponse.data) {
        toast.error("외부 호출 설정을 찾을 수 없습니다.");
        return;
      }

      const config = configResponse.data;
      const configData = config.config_data as any;

      // 백엔드 API용 설정 변환
      const backendSettings: Record<string, unknown> = {
        callType: config.call_type,
        apiType: config.api_type,
        message: settings.message,
        timeout: 10000,
      };

      // API 타입별 설정 추가
      switch (config.api_type) {
        case "discord":
          backendSettings.webhookUrl = configData.webhookUrl;
          backendSettings.username = configData.username;
          if (configData.avatarUrl) {
            backendSettings.avatarUrl = configData.avatarUrl;
          }
          break;

        case "slack":
          backendSettings.webhookUrl = configData.webhookUrl;
          if (configData.channel) {
            backendSettings.channel = configData.channel;
          }
          if (configData.username) {
            backendSettings.username = configData.username;
          }
          break;

        case "kakao-talk":
          backendSettings.accessToken = configData.accessToken;
          if (configData.templateId) {
            backendSettings.templateId = configData.templateId;
          }
          break;

        case "generic":
          backendSettings.url = configData.url;
          backendSettings.method = configData.method || "POST";
          backendSettings.headers = configData.headers || {};
          if (configData.timeout) {
            backendSettings.timeout = configData.timeout;
          }
          break;
      }

      // 테스트 실행 (10초 타임아웃)
      const testPromise = ExternalCallAPI.testExternalCall({
        settings: backendSettings,
        templateData: { recordCount: 5, timestamp: new Date().toISOString() },
      });

      const timeoutPromise = new Promise((_, reject) =>
        setTimeout(() => reject(new Error("테스트가 10초 내에 완료되지 않았습니다.")), 10000),
      );

      const result = await Promise.race([testPromise, timeoutPromise]);

      if ((result as any).success) {
        toast.success(`테스트 성공: ${config.config_name}`);
      } else {
        toast.error(`테스트 실패: ${(result as any).message || "알 수 없는 오류"}`);
      }
    } catch (error) {
      console.error("외부 호출 테스트 오류:", error);
      if (error instanceof Error && error.message.includes("10초")) {
        toast.error("테스트 타임아웃: 10초 내에 응답이 없습니다.");
      } else {
        toast.error("테스트 실행 중 오류가 발생했습니다.");
      }
    } finally {
      setTestLoading(false);
    }
  };

  // 선택된 설정 정보
  const selectedConfig = availableConfigs.find((config) => config.id === settings.configId);

  return (
    <div className="space-y-4">
      <div className="mb-4 flex items-center gap-2">
        <Globe size={18} />
        <h3 className="text-lg font-medium">외부 호출 설정</h3>
      </div>

      {/* 외부 호출 설정 선택 */}
      <div>
        <div className="mb-2 flex items-center justify-between">
          <Label htmlFor="external-call-config">외부 호출 선택 *</Label>
          <Button variant="ghost" size="sm" onClick={fetchAvailableConfigs} disabled={loading} className="h-6 px-2">
            <RefreshCw size={12} className={loading ? "animate-spin" : ""} />
          </Button>
        </div>

        <Select value={settings.configId?.toString() || "none"} onValueChange={handleConfigChange} disabled={loading}>
          <SelectTrigger>
            <SelectValue placeholder={loading ? "로딩 중..." : "외부 호출 설정을 선택하세요"} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="none">선택 안함</SelectItem>
            {availableConfigs.map((config) => (
              <SelectItem key={config.id} value={config.id!.toString()}>
                <div className="flex flex-col">
                  <span className="font-medium">{config.config_name}</span>
                  <span className="text-muted-foreground text-xs">
                    {config.call_type === "rest-api" && config.api_type
                      ? `${config.call_type} - ${config.api_type}`
                      : config.call_type}
                  </span>
                </div>
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

        {/* 선택된 설정 정보 표시 */}
        {selectedConfig && (
          <div className="bg-muted/50 mt-2 rounded-lg p-3 text-sm">
            <div className="font-medium">{selectedConfig.config_name}</div>
            {selectedConfig.description && (
              <div className="text-muted-foreground mt-1">{selectedConfig.description}</div>
            )}
          </div>
        )}
      </div>

      {/* 메시지 템플릿 */}
      <div>
        <Label htmlFor="external-call-message">메시지 템플릿 *</Label>
        <Textarea
          id="external-call-message"
          value={settings.message}
          onChange={(e) => handleMessageChange(e.target.value)}
          placeholder="데이터 처리가 완료되었습니다! 총 {{recordCount}}건이 처리되었습니다."
          rows={3}
          className="text-sm"
        />
        <div className="text-muted-foreground mt-1 text-xs">
          템플릿 변수: {{ recordCount }}, {{ timestamp }}, {{ tableName }} 등을 사용할 수 있습니다.
        </div>
      </div>

      {/* 테스트 버튼 */}
      <div className="flex justify-end">
        <Button
          variant="outline"
          size="sm"
          onClick={handleTest}
          disabled={!settings.configId || !settings.message.trim() || testLoading}
          className="flex items-center gap-2"
        >
          <TestTube size={14} />
          {testLoading ? "테스트 중..." : "테스트"}
        </Button>
      </div>

      {/* 설정이 없는 경우 안내 */}
      {!loading && availableConfigs.length === 0 && (
        <div className="text-muted-foreground rounded-lg border p-4 text-center">
          <Globe size={32} className="mx-auto mb-2 opacity-50" />
          <p className="font-medium">사용 가능한 외부 호출 설정이 없습니다.</p>
          <p className="text-sm">관리자 페이지에서 외부 호출 설정을 먼저 등록해주세요.</p>
        </div>
      )}
    </div>
  );
}