pipeline/frontend/components/admin/RestApiConnectionList.tsx

"use client";

import React, { useState, useEffect } from "react";
import { Plus, Search, Pencil, Trash2, Globe } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { useToast } from "@/hooks/use-toast";
import {
  ExternalRestApiConnectionAPI,
  ExternalRestApiConnection,
  ExternalRestApiConnectionFilter,
} from "@/lib/api/externalRestApiConnection";
import { RestApiConnectionModal } from "./RestApiConnectionModal";

// 인증 타입 라벨
const AUTH_TYPE_LABELS: Record<string, string> = {
  none: "인증 없음",
  "api-key": "API Key",
  bearer: "Bearer",
  basic: "Basic Auth",
  oauth2: "OAuth 2.0",
  "db-token": "DB 토큰",
};

// 인증 타입 색상
const AUTH_TYPE_COLORS: Record<string, string> = {
  none: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400",
  "api-key": "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400",
  bearer: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
  basic: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
  oauth2: "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400",
  "db-token": "bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400",
};

// 활성 상태 옵션
const ACTIVE_STATUS_OPTIONS = [
  { value: "ALL", label: "전체" },
  { value: "Y", label: "활성" },
  { value: "N", label: "비활성" },
];

export function RestApiConnectionList() {
  const { toast } = useToast();

  const [connections, setConnections] = useState<ExternalRestApiConnection[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState("");
  const [authTypeFilter, setAuthTypeFilter] = useState("ALL");
  const [activeStatusFilter, setActiveStatusFilter] = useState("ALL");
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingConnection, setEditingConnection] = useState<ExternalRestApiConnection | undefined>();
  const [supportedAuthTypes, setSupportedAuthTypes] = useState<Array<{ value: string; label: string }>>([]);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [connectionToDelete, setConnectionToDelete] = useState<ExternalRestApiConnection | null>(null);
  const [testingConnections, setTestingConnections] = useState<Set<number>>(new Set());
  const [testResults, setTestResults] = useState<Map<number, boolean>>(new Map());

  const loadConnections = async () => {
    try {
      setLoading(true);
      const filter: ExternalRestApiConnectionFilter = {
        search: searchTerm.trim() || undefined,
        auth_type: authTypeFilter === "ALL" ? undefined : authTypeFilter,
        is_active: activeStatusFilter === "ALL" ? undefined : activeStatusFilter,
      };
      const data = await ExternalRestApiConnectionAPI.getConnections(filter);
      setConnections(data);
    } catch (error) {
      toast({ title: "오류", description: "연결 목록을 불러오는데 실패했습니다.", variant: "destructive" });
    } finally {
      setLoading(false);
    }
  };

  const loadSupportedAuthTypes = () => {
    const types = ExternalRestApiConnectionAPI.getSupportedAuthTypes();
    setSupportedAuthTypes([{ value: "ALL", label: "전체" }, ...types]);
  };

  useEffect(() => { loadConnections(); loadSupportedAuthTypes(); }, []);
  useEffect(() => { loadConnections(); }, [searchTerm, authTypeFilter, activeStatusFilter]);

  const handleAddConnection = () => { setEditingConnection(undefined); setIsModalOpen(true); };
  const handleEditConnection = (conn: ExternalRestApiConnection) => { setEditingConnection(conn); setIsModalOpen(true); };
  const handleDeleteConnection = (conn: ExternalRestApiConnection) => { setConnectionToDelete(conn); setDeleteDialogOpen(true); };

  const confirmDeleteConnection = async () => {
    if (!connectionToDelete?.id) return;
    try {
      await ExternalRestApiConnectionAPI.deleteConnection(connectionToDelete.id);
      toast({ title: "성공", description: "연결이 삭제되었습니다." });
      loadConnections();
    } catch (error) {
      toast({ title: "오류", description: error instanceof Error ? error.message : "연결 삭제에 실패했습니다.", variant: "destructive" });
    } finally {
      setDeleteDialogOpen(false);
      setConnectionToDelete(null);
    }
  };

  const cancelDeleteConnection = () => { setDeleteDialogOpen(false); setConnectionToDelete(null); };

  const handleTestConnection = async (connection: ExternalRestApiConnection) => {
    if (!connection.id) return;
    setTestingConnections((prev) => new Set(prev).add(connection.id!));
    try {
      const result = await ExternalRestApiConnectionAPI.testConnectionById(connection.id);
      setTestResults((prev) => new Map(prev).set(connection.id!, result.success));
      const nowIso = new Date().toISOString();
      setConnections((prev) =>
        prev.map((c) =>
          c.id === connection.id
            ? { ...c, last_test_date: nowIso as any, last_test_result: result.success ? "Y" : "N", last_test_message: result.message }
            : c
        )
      );
      if (result.success) {
        toast({ title: "연결 성공", description: `${connection.connection_name} 연결이 성공했습니다.` });
      } else {
        toast({ title: "연결 실패", description: result.message || `${connection.connection_name} 연결에 실패했습니다.`, variant: "destructive" });
      }
    } catch (error) {
      setTestResults((prev) => new Map(prev).set(connection.id!, false));
      toast({ title: "연결 테스트 오류", description: "연결 테스트 중 오류가 발생했습니다.", variant: "destructive" });
    } finally {
      setTestingConnections((prev) => { const s = new Set(prev); s.delete(connection.id!); return s; });
    }
  };

  const handleModalSave = () => { setIsModalOpen(false); setEditingConnection(undefined); loadConnections(); };
  const handleModalCancel = () => { setIsModalOpen(false); setEditingConnection(undefined); };

  return (
    <>
      {/* 검색 및 필터 */}
      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
          <div className="relative w-full sm:w-56">
            <Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
            <Input
              placeholder="연결명 또는 URL로 검색..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="h-8 pl-8 text-xs"
            />
          </div>
          <Select value={authTypeFilter} onValueChange={setAuthTypeFilter}>
            <SelectTrigger className="h-8 w-full text-xs sm:w-32">
              <SelectValue placeholder="인증 타입" />
            </SelectTrigger>
            <SelectContent>
              {supportedAuthTypes.map((type) => (
                <SelectItem key={type.value} value={type.value} className="text-xs">{type.label}</SelectItem>
              ))}
            </SelectContent>
          </Select>
          <Select value={activeStatusFilter} onValueChange={setActiveStatusFilter}>
            <SelectTrigger className="h-8 w-full text-xs sm:w-24">
              <SelectValue placeholder="상태" />
            </SelectTrigger>
            <SelectContent>
              {ACTIVE_STATUS_OPTIONS.map((opt) => (
                <SelectItem key={opt.value} value={opt.value} className="text-xs">{opt.label}</SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <Button onClick={handleAddConnection} size="sm" className="h-8 gap-1 text-xs">
          <Plus className="h-3.5 w-3.5" />
          새 연결
        </Button>
      </div>

      {/* 그리드 카드 목록 */}
      {loading ? (
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {Array.from({ length: 8 }).map((_, i) => (
            <div key={i} className="h-36 animate-pulse rounded-lg border bg-muted/30" />
          ))}
        </div>
      ) : connections.length === 0 ? (
        <div className="flex h-48 flex-col items-center justify-center rounded-lg border border-dashed">
          <Globe className="mb-2 h-5 w-5 text-muted-foreground" />
          <p className="text-xs text-muted-foreground">등록된 REST API 연결이 없습니다</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {connections.map((conn) => {
            const isTesting = testingConnections.has(conn.id!);
            const testResult = testResults.get(conn.id!);
            const authColor = AUTH_TYPE_COLORS[conn.auth_type] || "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400";
            const headerCount = Object.keys(conn.default_headers || {}).length;

            return (
              <div
                key={conn.id}
                className="group relative flex flex-col rounded-lg border bg-card p-3.5 transition-all hover:shadow-md"
              >
                {/* 상단: 인증타입 + 상태 */}
                <div className="mb-2 flex items-center justify-between">
                  <span className={`inline-flex items-center rounded-md px-2 py-0.5 text-[10px] font-semibold ${authColor}`}>
                    {AUTH_TYPE_LABELS[conn.auth_type] || conn.auth_type}
                  </span>
                  <Badge variant={conn.is_active === "Y" ? "default" : "secondary"} className="h-5 text-[10px]">
                    {conn.is_active === "Y" ? "활성" : "비활성"}
                  </Badge>
                </div>

                {/* 연결명 */}
                <h3 className="mb-0.5 truncate text-xs font-semibold" title={conn.connection_name}>
                  {conn.connection_name}
                </h3>

                {/* 회사 */}
                <p className="mb-2 truncate text-[11px] text-muted-foreground">
                  {(conn as any).company_name || conn.company_code || "공통"}
                </p>

                {/* URL 정보 */}
                <div className="mb-3 space-y-0.5 rounded-md bg-muted/50 px-2 py-1.5">
                  <p className="truncate font-mono text-[10px] text-muted-foreground" title={conn.base_url}>
                    {conn.base_url}
                  </p>
                  <div className="flex items-center gap-2 text-[10px]">
                    {headerCount > 0 && (
                      <span className="text-muted-foreground">헤더 {headerCount}개</span>
                    )}
                    {conn.last_test_result && (
                      <Badge variant={conn.last_test_result === "Y" ? "default" : "destructive"} className="h-4 text-[9px]">
                        {conn.last_test_result === "Y" ? "성공" : "실패"}
                      </Badge>
                    )}
                  </div>
                </div>

                {/* 하단 버튼 */}
                <div className="mt-auto flex items-center gap-1">
                  <Button
                    variant="outline" size="sm"
                    onClick={() => handleTestConnection(conn)}
                    disabled={isTesting}
                    className="h-6 flex-1 text-[10px]"
                  >
                    {isTesting ? "테스트 중..." : testResult !== undefined ? (testResult ? "성공" : "실패") : "테스트"}
                  </Button>
                  <Button
                    variant="outline" size="sm"
                    onClick={() => handleEditConnection(conn)}
                    className="h-6 px-2 text-[10px]"
                  >
                    <Pencil className="h-3 w-3" />
                  </Button>
                  <Button
                    variant="outline" size="sm"
                    onClick={() => handleDeleteConnection(conn)}
                    className="h-6 px-2 text-[10px] text-destructive hover:bg-destructive/10"
                  >
                    <Trash2 className="h-3 w-3" />
                  </Button>
                </div>
              </div>
            );
          })}
        </div>
      )}

      {/* 모달 */}
      {isModalOpen && (
        <RestApiConnectionModal
          isOpen={isModalOpen}
          onClose={handleModalCancel}
          onSave={handleModalSave}
          connection={editingConnection}
        />
      )}

      {/* 삭제 확인 */}
      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent className="max-w-[95vw] sm:max-w-[420px]">
          <AlertDialogHeader>
            <AlertDialogTitle className="text-sm">연결 삭제</AlertDialogTitle>
            <AlertDialogDescription className="text-xs">
              &ldquo;{connectionToDelete?.connection_name}&rdquo; 연결을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter className="gap-2 sm:gap-0">
            <AlertDialogCancel onClick={cancelDeleteConnection} className="h-8 text-xs">취소</AlertDialogCancel>
            <AlertDialogAction onClick={confirmDeleteConnection} className="h-8 bg-destructive text-xs hover:bg-destructive/90">삭제</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}