ERP-node/frontend/components/admin/ExternalDbConnectionModal.tsx

"use client";

import React, { useState, useEffect } from "react";
import { Eye, EyeOff, ChevronDown, ChevronRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { useToast } from "@/hooks/use-toast";
import {
  ExternalDbConnectionAPI,
  ExternalDbConnection,
  ConnectionTestRequest,
  ConnectionTestResult,
} from "@/lib/api/externalDbConnection";

interface ExternalDbConnectionModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: () => void;
  connection?: ExternalDbConnection;
  supportedDbTypes: Array<{ value: string; label: string }>;
}

// 기본 포트 설정
const DEFAULT_PORTS: Record<string, number> = {
  mysql: 3306,
  postgresql: 5432,
  oracle: 1521,
  mssql: 1433,
  sqlite: 0, // SQLite는 파일 기반이므로 포트 없음
};

export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps> = ({
  isOpen,
  onClose,
  onSave,
  connection,
  supportedDbTypes,
}) => {
  const { toast } = useToast();

  // 상태 관리
  const [loading, setSaving] = useState(false);
  const [showPassword, setShowPassword] = useState(false);
  const [showAdvanced, setShowAdvanced] = useState(false);
  const [testingConnection, setTestingConnection] = useState(false);
  const [testResult, setTestResult] = useState<ConnectionTestResult | null>(null);

  // 폼 데이터
  const [formData, setFormData] = useState<ExternalDbConnection>({
    connection_name: "",
    description: "",
    db_type: "postgresql",
    host: "localhost",
    port: DEFAULT_PORTS.postgresql,
    database_name: "",
    username: "",
    password: "",
    connection_timeout: 30,
    query_timeout: 60,
    max_connections: 10,
    ssl_enabled: "N",
    ssl_cert_path: "",
    company_code: "*",
    is_active: "Y",
  });

  // 편집 모드인지 확인
  const isEditMode = !!connection;

  // 연결 정보가 변경될 때 폼 데이터 업데이트
  useEffect(() => {
    if (connection) {
      setFormData({
        ...connection,
        // 편집 시에는 비밀번호를 빈 문자열로 설정 (보안상 기존 비밀번호는 보여주지 않음)
        password: "",
      });
    } else {
      // 새 연결 생성 시 기본값 설정
      setFormData({
        connection_name: "",
        description: "",
        db_type: "postgresql",
        host: "localhost",
        port: DEFAULT_PORTS.postgresql,
        database_name: "",
        username: "",
        password: "",
        connection_timeout: 30,
        query_timeout: 60,
        max_connections: 10,
        ssl_enabled: "N",
        ssl_cert_path: "",
        company_code: "*",
        is_active: "Y",
      });
    }
  }, [connection]);

  // DB 타입 변경 시 기본 포트 설정
  const handleDbTypeChange = (dbType: string) => {
    setFormData({
      ...formData,
      db_type: dbType as ExternalDbConnection["db_type"],
      port: DEFAULT_PORTS[dbType] || 5432,
    });
  };

  // 입력값 변경 처리
  const handleInputChange = (field: keyof ExternalDbConnection, value: string | number) => {
    setFormData({
      ...formData,
      [field]: value,
    });
  };

  // 폼 검증
  const validateForm = (): boolean => {
    if (!formData.connection_name.trim()) {
      toast({
        title: "검증 오류",
        description: "연결명을 입력해주세요.",
        variant: "destructive",
      });
      return false;
    }

    if (!formData.host.trim()) {
      toast({
        title: "검증 오류",
        description: "호스트를 입력해주세요.",
        variant: "destructive",
      });
      return false;
    }

    if (!formData.database_name.trim()) {
      toast({
        title: "검증 오류",
        description: "데이터베이스명을 입력해주세요.",
        variant: "destructive",
      });
      return false;
    }

    if (!formData.username.trim()) {
      toast({
        title: "검증 오류",
        description: "사용자명을 입력해주세요.",
        variant: "destructive",
      });
      return false;
    }

    if (!isEditMode && !formData.password.trim()) {
      toast({
        title: "검증 오류",
        description: "비밀번호를 입력해주세요.",
        variant: "destructive",
      });
      return false;
    }

    return true;
  };

  // 연결 테스트 처리
  const handleTestConnection = async () => {
    // 기본 필수 필드 검증
    if (!formData.host.trim()) {
      toast({
        title: "검증 오류",
        description: "호스트를 입력해주세요.",
        variant: "destructive",
      });
      return;
    }

    if (!formData.database_name.trim()) {
      toast({
        title: "검증 오류",
        description: "데이터베이스명을 입력해주세요.",
        variant: "destructive",
      });
      return;
    }

    if (!formData.username.trim()) {
      toast({
        title: "검증 오류",
        description: "사용자명을 입력해주세요.",
        variant: "destructive",
      });
      return;
    }

    if (!formData.password.trim()) {
      toast({
        title: "검증 오류",
        description: "비밀번호를 입력해주세요.",
        variant: "destructive",
      });
      return;
    }

    try {
      setTestingConnection(true);
      setTestResult(null);

      // 편집 모드일 때만 연결 테스트 실행
      if (!isEditMode || !connection?.id) {
        toast({
          title: "연결 테스트 불가",
          description: "연결을 먼저 저장한 후 테스트할 수 있습니다.",
          variant: "destructive",
        });
        return;
      }

      const result = await ExternalDbConnectionAPI.testConnection(connection.id, formData.password);
      setTestResult(result);

      if (result.success) {
        toast({
          title: "연결 테스트 성공",
          description: result.message,
        });
      } else {
        toast({
          title: "연결 테스트 실패",
          description: result.message,
          variant: "destructive",
        });
      }
    } catch (error) {
      console.error("연결 테스트 오류:", error);
      const errorResult: ConnectionTestResult = {
        success: false,
        message: "연결 테스트 중 오류가 발생했습니다.",
        error: {
          code: "TEST_ERROR",
          details: error instanceof Error ? error.message : "알 수 없는 오류",
        },
      };
      setTestResult(errorResult);

      toast({
        title: "연결 테스트 오류",
        description: errorResult.message,
        variant: "destructive",
      });
    } finally {
      setTestingConnection(false);
    }
  };

  // 저장 처리
  const handleSave = async () => {
    if (!validateForm()) return;

    try {
      setSaving(true);

      // 편집 모드에서 비밀번호가 비어있으면 기존 비밀번호 유지
      let dataToSave = { ...formData };
      if (isEditMode && !dataToSave.password.trim()) {
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        const { password, ...dataWithoutPassword } = dataToSave;
        dataToSave = dataWithoutPassword as ExternalDbConnection;
      }

      if (isEditMode && connection?.id) {
        await ExternalDbConnectionAPI.updateConnection(connection.id, dataToSave);
        toast({
          title: "성공",
          description: "연결 정보가 수정되었습니다.",
        });
      } else {
        await ExternalDbConnectionAPI.createConnection(dataToSave);
        toast({
          title: "성공",
          description: "새 연결이 생성되었습니다.",
        });
      }

      onSave();
    } catch (error) {
      console.error("연결 저장 오류:", error);
      toast({
        title: "오류",
        description: error instanceof Error ? error.message : "연결 저장에 실패했습니다.",
        variant: "destructive",
      });
    } finally {
      setSaving(false);
    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-h-[90vh] max-w-[95vw] overflow-y-auto sm:max-w-2xl">
        <DialogHeader>
          <DialogTitle className="text-base sm:text-lg">{isEditMode ? "연결 정보 수정" : "새 외부 DB 연결 추가"}</DialogTitle>
        </DialogHeader>

        <div className="space-y-3 sm:space-y-4">
          {/* 기본 정보 */}
          <div className="space-y-3 sm:space-y-4">
            <h3 className="text-sm font-semibold sm:text-base">기본 정보</h3>

            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4">
              <div>
                <Label htmlFor="connection_name" className="text-xs sm:text-sm">
                  연결명 <span className="text-destructive">*</span>
                </Label>
                <Input
                  id="connection_name"
                  value={formData.connection_name}
                  onChange={(e) => handleInputChange("connection_name", e.target.value)}
                  placeholder="예: 운영 DB"
                  className="h-8 text-xs sm:h-10 sm:text-sm"
                />
              </div>

              <div>
                <Label htmlFor="db_type" className="text-xs sm:text-sm">
                  DB 타입 <span className="text-destructive">*</span>
                </Label>
                <Select value={formData.db_type} onValueChange={handleDbTypeChange}>
                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {supportedDbTypes.map((type) => (
                      <SelectItem key={type.value} value={type.value}>
                        {type.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

            <div>
              <Label htmlFor="description" className="text-xs sm:text-sm">
                설명
              </Label>
              <Textarea
                id="description"
                value={formData.description || ""}
                onChange={(e) => handleInputChange("description", e.target.value)}
                placeholder="연결에 대한 설명을 입력하세요"
                rows={2}
                className="text-xs sm:text-sm"
              />
            </div>
          </div>

          {/* 연결 정보 */}
          <div className="space-y-3 sm:space-y-4">
            <h3 className="text-sm font-semibold sm:text-base">연결 정보</h3>

            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4">
              <div>
                <Label htmlFor="host" className="text-xs sm:text-sm">
                  호스트 <span className="text-destructive">*</span>
                </Label>
                <Input
                  id="host"
                  value={formData.host}
                  onChange={(e) => handleInputChange("host", e.target.value)}
                  placeholder="localhost"
                  className="h-8 text-xs sm:h-10 sm:text-sm"
                />
              </div>

              <div>
                <Label htmlFor="port" className="text-xs sm:text-sm">
                  포트 <span className="text-destructive">*</span>
                </Label>
                <Input
                  id="port"
                  type="number"
                  value={formData.port}
                  onChange={(e) => handleInputChange("port", parseInt(e.target.value) || 0)}
                  placeholder="5432"
                  className="h-8 text-xs sm:h-10 sm:text-sm"
                />
              </div>
            </div>

            <div>
              <Label htmlFor="database_name" className="text-xs sm:text-sm">
                데이터베이스명 <span className="text-destructive">*</span>
              </Label>
              <Input
                id="database_name"
                value={formData.database_name}
                onChange={(e) => handleInputChange("database_name", e.target.value)}
                placeholder="database_name"
                className="h-8 text-xs sm:h-10 sm:text-sm"
              />
            </div>

            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4">
              <div>
                <Label htmlFor="username" className="text-xs sm:text-sm">
                  사용자명 <span className="text-destructive">*</span>
                </Label>
                <Input
                  id="username"
                  value={formData.username}
                  onChange={(e) => handleInputChange("username", e.target.value)}
                  placeholder="username"
                  className="h-8 text-xs sm:h-10 sm:text-sm"
                />
              </div>

              <div>
                <Label htmlFor="password" className="text-xs sm:text-sm">
                  비밀번호 {isEditMode ? "(변경 시에만 입력)" : <span className="text-destructive">*</span>}
                </Label>
                <div className="relative">
                  <Input
                    id="password"
                    type={showPassword ? "text" : "password"}
                    value={formData.password}
                    onChange={(e) => handleInputChange("password", e.target.value)}
                    placeholder={isEditMode ? "변경하지 않으려면 비워두세요" : "password"}
                    className="h-8 text-xs sm:h-10 sm:text-sm"
                  />
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                    onClick={() => setShowPassword(!showPassword)}
                  >
                    {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                  </Button>
                </div>
              </div>
            </div>

            {/* 연결 테스트 */}
            <div className="space-y-3">
              <div className="flex items-center gap-3">
                <Button
                  type="button"
                  variant="outline"
                  onClick={handleTestConnection}
                  disabled={
                    testingConnection ||
                    !formData.host ||
                    !formData.database_name ||
                    !formData.username ||
                    !formData.password
                  }
                  className="w-32"
                >
                  {testingConnection ? "테스트 중..." : "연결 테스트"}
                </Button>
                {testingConnection && <div className="text-sm text-gray-500">연결을 확인하고 있습니다...</div>}
              </div>

              {/* 테스트 결과 표시 */}
              {testResult && (
                <div
                  className={`rounded-md border p-3 text-sm ${
                    testResult.success
                      ? "border-green-200 bg-green-50 text-green-800"
                      : "border-destructive/20 bg-destructive/10 text-red-800"
                  }`}
                >
                  <div className="font-medium">{testResult.success ? "✅ 연결 성공" : "❌ 연결 실패"}</div>
                  <div className="mt-1">{testResult.message}</div>

                  {testResult.success && testResult.details && (
                    <div className="mt-2 space-y-1 text-xs">
                      {testResult.details.response_time && <div>응답 시간: {testResult.details.response_time}ms</div>}
                      {testResult.details.server_version && <div>서버 버전: {testResult.details.server_version}</div>}
                      {testResult.details.database_size && (
                        <div>데이터베이스 크기: {testResult.details.database_size}</div>
                      )}
                    </div>
                  )}

                  {!testResult.success && testResult.error && (
                    <div className="mt-2 text-xs">
                      <div>오류 코드: {testResult.error.code}</div>
                      {testResult.error.details && <div className="mt-1 text-destructive">{testResult.error.details}</div>}
                    </div>
                  )}
                </div>
              )}
            </div>
          </div>

          {/* 고급 설정 */}
          <div className="space-y-4">
            <Button
              type="button"
              variant="ghost"
              onClick={() => setShowAdvanced(!showAdvanced)}
              className="flex h-auto items-center gap-2 p-0 font-medium"
            >
              {showAdvanced ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
              고급 설정
            </Button>

            {showAdvanced && (
              <div className="space-y-4 border-l-2 border-gray-200 pl-6">
                <div className="grid grid-cols-3 gap-4">
                  <div>
                    <Label htmlFor="connection_timeout">연결 타임아웃 (초)</Label>
                    <Input
                      id="connection_timeout"
                      type="number"
                      value={formData.connection_timeout || 30}
                      onChange={(e) => handleInputChange("connection_timeout", parseInt(e.target.value) || 30)}
                    />
                  </div>

                  <div>
                    <Label htmlFor="query_timeout">쿼리 타임아웃 (초)</Label>
                    <Input
                      id="query_timeout"
                      type="number"
                      value={formData.query_timeout || 60}
                      onChange={(e) => handleInputChange("query_timeout", parseInt(e.target.value) || 60)}
                    />
                  </div>

                  <div>
                    <Label htmlFor="max_connections">최대 연결 수</Label>
                    <Input
                      id="max_connections"
                      type="number"
                      value={formData.max_connections || 10}
                      onChange={(e) => handleInputChange("max_connections", parseInt(e.target.value) || 10)}
                    />
                  </div>
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="ssl_enabled">SSL 사용</Label>
                    <Select
                      value={formData.ssl_enabled || "N"}
                      onValueChange={(value) => handleInputChange("ssl_enabled", value)}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="Y">사용</SelectItem>
                        <SelectItem value="N">사용 안함</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div>
                    <Label htmlFor="is_active">활성 상태</Label>
                    <Select value={formData.is_active} onValueChange={(value) => handleInputChange("is_active", value)}>
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="Y">활성</SelectItem>
                        <SelectItem value="N">비활성</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

                {formData.ssl_enabled === "Y" && (
                  <div>
                    <Label htmlFor="ssl_cert_path">SSL 인증서 경로</Label>
                    <Input
                      id="ssl_cert_path"
                      value={formData.ssl_cert_path || ""}
                      onChange={(e) => handleInputChange("ssl_cert_path", e.target.value)}
                      placeholder="/path/to/ssl/cert.pem"
                    />
                  </div>
                )}
              </div>
            )}
          </div>
        </div>

        <DialogFooter className="gap-2 sm:gap-0">
          <Button
            variant="outline"
            onClick={onClose}
            disabled={loading}
            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
          >
            취소
          </Button>
          <Button onClick={handleSave} disabled={loading} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
            {loading ? "저장 중..." : isEditMode ? "수정" : "생성"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};