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

"use client";

import React from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Globe } from "lucide-react";
import { ExternalCallSettings as ExternalCallSettingsType } from "@/types/connectionTypes";

interface ExternalCallSettingsProps {
  settings: ExternalCallSettingsType;
  onSettingsChange: (settings: ExternalCallSettingsType) => void;
}

export const ExternalCallSettings: React.FC<ExternalCallSettingsProps> = ({ settings, onSettingsChange }) => {
  return (
    <div className="rounded-lg border border-l-4 border-l-orange-500 bg-orange-50/30 p-4">
      <div className="mb-3 flex items-center gap-2">
        <Globe className="h-4 w-4 text-orange-500" />
        <span className="text-sm font-medium">외부 호출 설정</span>
      </div>
      <div className="space-y-3">
        <div>
          <Label htmlFor="callType" className="text-sm">
            호출 유형
          </Label>
          <Select
            value={settings.callType}
            onValueChange={(value: "rest-api" | "email" | "webhook" | "kakao-talk" | "ftp" | "queue") =>
              onSettingsChange({ ...settings, callType: value })
            }
          >
            <SelectTrigger className="text-sm">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="rest-api">REST API 호출</SelectItem>
              <SelectItem value="kakao-talk"> 카카오톡 알림</SelectItem>
              <SelectItem value="email">이메일 전송</SelectItem>
              <SelectItem value="webhook">웹훅</SelectItem>
              <SelectItem value="ftp">FTP 업로드</SelectItem>
              <SelectItem value="queue">메시지 큐</SelectItem>
            </SelectContent>
          </Select>
        </div>

        {settings.callType === "rest-api" && (
          <>
            <div>
              <Label htmlFor="apiUrl" className="text-sm">
                API URL
              </Label>
              <Input
                id="apiUrl"
                value={settings.apiUrl}
                onChange={(e) => onSettingsChange({ ...settings, apiUrl: e.target.value })}
                placeholder="https://api.example.com/webhook"
                className="text-sm"
              />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <Label htmlFor="httpMethod" className="text-sm">
                  HTTP Method
                </Label>
                <Select
                  value={settings.httpMethod}
                  onValueChange={(value: "GET" | "POST" | "PUT" | "DELETE") =>
                    onSettingsChange({ ...settings, httpMethod: value })
                  }
                >
                  <SelectTrigger className="text-sm">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="GET">GET</SelectItem>
                    <SelectItem value="POST">POST</SelectItem>
                    <SelectItem value="PUT">PUT</SelectItem>
                    <SelectItem value="DELETE">DELETE</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label htmlFor="headers" className="text-sm">
                  Headers
                </Label>
                <Textarea
                  id="headers"
                  value={settings.headers}
                  onChange={(e) => onSettingsChange({ ...settings, headers: e.target.value })}
                  placeholder="{}"
                  rows={1}
                  className="text-sm"
                />
              </div>
            </div>
            <div>
              <Label htmlFor="bodyTemplate" className="text-sm">
                Body Template
              </Label>
              <Textarea
                id="bodyTemplate"
                value={settings.bodyTemplate}
                onChange={(e) => onSettingsChange({ ...settings, bodyTemplate: e.target.value })}
                placeholder="{}"
                rows={2}
                className="text-sm"
              />
            </div>
          </>
        )}

        {settings.callType === "kakao-talk" && (
          <>
            <div>
              <Label htmlFor="kakaoAccessToken" className="text-sm">
                카카오 액세스 토큰 <span className="text-red-500">*</span>
              </Label>
              <Input
                id="kakaoAccessToken"
                type="password"
                value={settings.kakaoAccessToken || ""}
                onChange={(e) =>
                  onSettingsChange({
                    ...settings,
                    kakaoAccessToken: e.target.value,
                  })
                }
                placeholder="카카오 개발자 센터에서 발급받은 토큰"
                className="text-sm"
              />
              <p className="mt-1 text-xs text-gray-600">
                💡{" "}
                <a
                  href="https://developers.kakao.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-blue-500 hover:underline"
                >
                  카카오 개발자 센터
                </a>
                에서 앱 등록 후 토큰을 발급받으세요
              </p>
            </div>

            <div>
              <Label htmlFor="kakaoMessage" className="text-sm">
                메시지 템플릿 <span className="text-red-500">*</span>
              </Label>
              <Textarea
                id="kakaoMessage"
                value={settings.bodyTemplate || ""}
                onChange={(e) =>
                  onSettingsChange({
                    ...settings,
                    bodyTemplate: e.target.value,
                  })
                }
                placeholder="안녕하세요! {{customer_name}}님의 주문({{order_id}})이 처리되었습니다."
                rows={3}
                className="text-sm"
              />
              <p className="mt-1 text-xs text-gray-600">
                💡 {"{{"} 필드명 {"}"} 형태로 데이터를 삽입할 수 있습니다 (예: {"{{"} user_name {"}"}, {"{{"} amount{" "}
                {"}"})
              </p>
            </div>
          </>
        )}
      </div>
    </div>
  );
};