ERP-node/frontend/app/(main)/admin/exconList/page.tsx

"use client";

import React, { useState, useEffect } from "react";
import { Plus, Search, Pencil, Trash2, Database, Terminal, Globe } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { useToast } from "@/hooks/use-toast";
import {
  ExternalDbConnectionAPI,
  ExternalDbConnection,
  ExternalDbConnectionFilter,
  ConnectionTestRequest,
} from "@/lib/api/externalDbConnection";
import { ExternalDbConnectionModal } from "@/components/admin/ExternalDbConnectionModal";
import { SqlQueryModal } from "@/components/admin/SqlQueryModal";
import { RestApiConnectionList } from "@/components/admin/RestApiConnectionList";

type ConnectionTabType = "database" | "rest-api";

// DB 타입 매핑
const DB_TYPE_LABELS: Record<string, string> = {
  mysql: "MySQL",
  postgresql: "PostgreSQL",
  oracle: "Oracle",
  mssql: "SQL Server",
  sqlite: "SQLite",
};

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

export default function ExternalConnectionsPage() {
  const { toast } = useToast();

  // 탭 상태
  const [activeTab, setActiveTab] = useState<ConnectionTabType>("database");

  // 상태 관리
  const [connections, setConnections] = useState<ExternalDbConnection[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState("");
  const [dbTypeFilter, setDbTypeFilter] = useState("ALL");
  const [activeStatusFilter, setActiveStatusFilter] = useState("ALL");
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingConnection, setEditingConnection] = useState<ExternalDbConnection | undefined>();
  const [supportedDbTypes, setSupportedDbTypes] = useState<Array<{ value: string; label: string }>>([]);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [connectionToDelete, setConnectionToDelete] = useState<ExternalDbConnection | null>(null);
  const [testingConnections, setTestingConnections] = useState<Set<number>>(new Set());
  const [testResults, setTestResults] = useState<Map<number, boolean>>(new Map());
  const [sqlModalOpen, setSqlModalOpen] = useState(false);
  const [selectedConnection, setSelectedConnection] = useState<ExternalDbConnection | null>(null);

  // 데이터 로딩
  const loadConnections = async () => {
    try {
      setLoading(true);

      const filter: ExternalDbConnectionFilter = {
        search: searchTerm.trim() || undefined,
        db_type: dbTypeFilter === "ALL" ? undefined : dbTypeFilter,
        is_active: activeStatusFilter === "ALL" ? undefined : activeStatusFilter,
      };

      const data = await ExternalDbConnectionAPI.getConnections(filter);
      setConnections(data);
    } catch (error) {
      console.error("연결 목록 로딩 오류:", error);
      toast({
        title: "오류",
        description: "연결 목록을 불러오는데 실패했습니다.",
        variant: "destructive",
      });
    } finally {
      setLoading(false);
    }
  };

  // 지원되는 DB 타입 로딩
  const loadSupportedDbTypes = async () => {
    try {
      const types = await ExternalDbConnectionAPI.getSupportedTypes();
      setSupportedDbTypes([{ value: "ALL", label: "전체" }, ...types]);
    } catch (error) {
      console.error("지원 DB 타입 로딩 오류:", error);
      // 실패 시 기본값 사용
      setSupportedDbTypes([
        { value: "ALL", label: "전체" },
        { value: "mysql", label: "MySQL" },
        { value: "postgresql", label: "PostgreSQL" },
        { value: "oracle", label: "Oracle" },
        { value: "mssql", label: "SQL Server" },
        { value: "sqlite", label: "SQLite" },
      ]);
    }
  };

  // 초기 데이터 로딩
  useEffect(() => {
    loadConnections();
    loadSupportedDbTypes();
  }, []);

  // 필터 변경 시 데이터 재로딩
  useEffect(() => {
    loadConnections();
  }, [searchTerm, dbTypeFilter, activeStatusFilter]);

  // 새 연결 추가
  const handleAddConnection = () => {
    setEditingConnection(undefined);
    setIsModalOpen(true);
  };

  // 연결 편집
  const handleEditConnection = (connection: ExternalDbConnection) => {
    setEditingConnection(connection);
    setIsModalOpen(true);
  };

  // 연결 삭제 확인 다이얼로그 열기
  const handleDeleteConnection = (connection: ExternalDbConnection) => {
    setConnectionToDelete(connection);
    setDeleteDialogOpen(true);
  };

  // 연결 삭제 실행
  const confirmDeleteConnection = async () => {
    if (!connectionToDelete?.id) return;

    try {
      await ExternalDbConnectionAPI.deleteConnection(connectionToDelete.id);
      toast({
        title: "성공",
        description: "연결이 삭제되었습니다.",
      });
      loadConnections();
    } catch (error) {
      console.error("연결 삭제 오류:", 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: ExternalDbConnection) => {
    if (!connection.id) return;

    setTestingConnections((prev) => new Set(prev).add(connection.id!));

    try {
      const result = await ExternalDbConnectionAPI.testConnection(connection.id);

      setTestResults((prev) => new Map(prev).set(connection.id!, result.success));

      if (result.success) {
        toast({
          title: "연결 성공",
          description: `${connection.connection_name} 연결이 성공했습니다.`,
        });
      } else {
        toast({
          title: "연결 실패",
          description: result.message || `${connection.connection_name} 연결에 실패했습니다.`,
          variant: "destructive",
        });
      }
    } catch (error) {
      console.error("연결 테스트 오류:", error);
      setTestResults((prev) => new Map(prev).set(connection.id!, false));
      toast({
        title: "연결 테스트 오류",
        description: "연결 테스트 중 오류가 발생했습니다.",
        variant: "destructive",
      });
    } finally {
      setTestingConnections((prev) => {
        const newSet = new Set(prev);
        newSet.delete(connection.id!);
        return newSet;
      });
    }
  };

  // 모달 저장 처리
  const handleModalSave = () => {
    setIsModalOpen(false);
    setEditingConnection(undefined);
    loadConnections();
  };

  // 모달 취소 처리
  const handleModalCancel = () => {
    setIsModalOpen(false);
    setEditingConnection(undefined);
  };

  return (
    <div className="flex min-h-screen flex-col bg-background">
      <div className="space-y-6 p-6">
        {/* 페이지 헤더 */}
        <div className="space-y-2 border-b pb-4">
          <h1 className="text-3xl font-bold tracking-tight">외부 커넥션 관리</h1>
          <p className="text-sm text-muted-foreground">외부 데이터베이스 및 REST API 연결 정보를 관리합니다</p>
        </div>

        {/* 탭 */}
        <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as ConnectionTabType)}>
          <TabsList className="grid w-[400px] grid-cols-2">
            <TabsTrigger value="database" className="flex items-center gap-2">
              <Database className="h-4 w-4" />
              데이터베이스 연결
            </TabsTrigger>
            <TabsTrigger value="rest-api" className="flex items-center gap-2">
              <Globe className="h-4 w-4" />
              REST API 연결
            </TabsTrigger>
          </TabsList>

          {/* 데이터베이스 연결 탭 */}
          <TabsContent value="database" className="space-y-6">
            {/* 검색 및 필터 */}
            <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
              <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
                {/* 검색 */}
                <div className="relative w-full sm:w-[300px]">
                  <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                  <Input
                    placeholder="연결명 또는 설명으로 검색..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="h-10 pl-10 text-sm"
                  />
                </div>

                {/* DB 타입 필터 */}
                <Select value={dbTypeFilter} onValueChange={setDbTypeFilter}>
                  <SelectTrigger className="h-10 w-full sm:w-[160px]">
                    <SelectValue placeholder="DB 타입" />
                  </SelectTrigger>
                  <SelectContent>
                    {supportedDbTypes.map((type) => (
                      <SelectItem key={type.value} value={type.value}>
                        {type.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>

                {/* 활성 상태 필터 */}
                <Select value={activeStatusFilter} onValueChange={setActiveStatusFilter}>
                  <SelectTrigger className="h-10 w-full sm:w-[120px]">
                    <SelectValue placeholder="상태" />
                  </SelectTrigger>
                  <SelectContent>
                    {ACTIVE_STATUS_OPTIONS.map((option) => (
                      <SelectItem key={option.value} value={option.value}>
                        {option.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              {/* 추가 버튼 */}
              <Button onClick={handleAddConnection} className="h-10 gap-2 text-sm font-medium">
                <Plus className="h-4 w-4" />
                새 연결 추가
              </Button>
            </div>

            {/* 연결 목록 */}
            {loading ? (
              <div className="flex h-64 items-center justify-center bg-card">
                <div className="text-sm text-muted-foreground">로딩 중...</div>
              </div>
            ) : connections.length === 0 ? (
              <div className="flex h-64 flex-col items-center justify-center bg-card">
                <div className="flex flex-col items-center gap-2 text-center">
                  <p className="text-sm text-muted-foreground">등록된 연결이 없습니다</p>
                </div>
              </div>
            ) : (
              <div className="bg-card">
                <Table>
                    <TableHeader>
                      <TableRow className="bg-background">
                        <TableHead className="h-12 px-6 py-3 text-sm font-semibold">연결명</TableHead>
                        <TableHead className="h-12 px-6 py-3 text-sm font-semibold">회사</TableHead>
                        <TableHead className="h-12 px-6 py-3 text-sm font-semibold">DB 타입</TableHead>
                        <TableHead className="h-12 px-6 py-3 text-sm font-semibold">호스트:포트</TableHead>
                        <TableHead className="h-12 px-6 py-3 text-sm font-semibold">데이터베이스</TableHead>
                        <TableHead className="h-12 px-6 py-3 text-sm font-semibold">사용자</TableHead>
                        <TableHead className="h-12 px-6 py-3 text-sm font-semibold">상태</TableHead>
                        <TableHead className="h-12 px-6 py-3 text-sm font-semibold">생성일</TableHead>
                        <TableHead className="h-12 px-6 py-3 text-sm font-semibold">연결 테스트</TableHead>
                        <TableHead className="h-12 px-6 py-3 text-right text-sm font-semibold">작업</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {connections.map((connection) => (
                        <TableRow key={connection.id} className="bg-background transition-colors hover:bg-muted/50">
                          <TableCell className="h-16 px-6 py-3 text-sm">
                            <div className="font-medium">{connection.connection_name}</div>
                          </TableCell>
                          <TableCell className="h-16 px-6 py-3 text-sm">
                            {(connection as any).company_name || connection.company_code}
                          </TableCell>
                          <TableCell className="h-16 px-6 py-3 text-sm">
                            <Badge variant="outline">
                              {DB_TYPE_LABELS[connection.db_type] || connection.db_type}
                            </Badge>
                          </TableCell>
                          <TableCell className="h-16 px-6 py-3 font-mono text-sm">
                            {connection.host}:{connection.port}
                          </TableCell>
                          <TableCell className="h-16 px-6 py-3 font-mono text-sm">{connection.database_name}</TableCell>
                          <TableCell className="h-16 px-6 py-3 font-mono text-sm">{connection.username}</TableCell>
                          <TableCell className="h-16 px-6 py-3 text-sm">
                            <Badge variant={connection.is_active === "Y" ? "default" : "secondary"}>
                              {connection.is_active === "Y" ? "활성" : "비활성"}
                            </Badge>
                          </TableCell>
                          <TableCell className="h-16 px-6 py-3 text-sm">
                            {connection.created_date ? new Date(connection.created_date).toLocaleDateString() : "N/A"}
                          </TableCell>
                          <TableCell className="h-16 px-6 py-3 text-sm">
                            <div className="flex items-center gap-2">
                              <Button
                                variant="outline"
                                size="sm"
                                onClick={() => handleTestConnection(connection)}
                                disabled={testingConnections.has(connection.id!)}
                                className="h-9 text-sm"
                              >
                                {testingConnections.has(connection.id!) ? "테스트 중..." : "테스트"}
                              </Button>
                              {testResults.has(connection.id!) && (
                                <Badge variant={testResults.get(connection.id!) ? "default" : "destructive"}>
                                  {testResults.get(connection.id!) ? "성공" : "실패"}
                                </Badge>
                              )}
                            </div>
                          </TableCell>
                          <TableCell className="h-16 px-6 py-3 text-right">
                            <div className="flex justify-end gap-2">
                              <Button
                                variant="ghost"
                                size="icon"
                                onClick={() => {
                                  console.log("SQL 쿼리 실행 버튼 클릭 - connection:", connection);
                                  setSelectedConnection(connection);
                                  setSqlModalOpen(true);
                                }}
                                className="h-8 w-8"
                                title="SQL 쿼리 실행"
                              >
                                <Terminal className="h-4 w-4" />
                              </Button>
                              <Button
                                variant="ghost"
                                size="icon"
                                onClick={() => handleEditConnection(connection)}
                                className="h-8 w-8"
                              >
                                <Pencil className="h-4 w-4" />
                              </Button>
                              <Button
                                variant="ghost"
                                size="icon"
                                onClick={() => handleDeleteConnection(connection)}
                                className="h-8 w-8 text-destructive hover:bg-destructive/10"
                              >
                                <Trash2 className="h-4 w-4" />
                              </Button>
                            </div>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
            )}

            {/* 연결 설정 모달 */}
            {isModalOpen && (
              <ExternalDbConnectionModal
                isOpen={isModalOpen}
                onClose={handleModalCancel}
                onSave={handleModalSave}
                connection={editingConnection}
                supportedDbTypes={supportedDbTypes.filter((type) => type.value !== "ALL")}
              />
            )}

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

            {/* SQL 쿼리 모달 */}
            {selectedConnection && (
              <SqlQueryModal
                isOpen={sqlModalOpen}
                onClose={() => {
                  setSqlModalOpen(false);
                  setSelectedConnection(null);
                }}
                connectionId={selectedConnection.id!}
                connectionName={selectedConnection.connection_name}
              />
            )}
          </TabsContent>

          {/* REST API 연결 탭 */}
          <TabsContent value="rest-api" className="space-y-6">
            <RestApiConnectionList />
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
}