ERP-node/frontend/components/dataflow/connection/redesigned/RightPanel/ConnectionStep.tsx

"use client";

import React, { useState, useEffect, useCallback } from "react";
import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";
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 { Badge } from "@/components/ui/badge";
import { ArrowRight, Database, Globe, Loader2, AlertTriangle, CheckCircle } from "lucide-react";
import { toast } from "sonner";

// API import
import { getActiveConnections, ConnectionInfo } from "@/lib/api/multiConnection";
import { checkRelationshipNameDuplicate } from "@/lib/api/dataflowSave";

// 타입 import
import { Connection } from "@/lib/types/multiConnection";

interface ConnectionStepProps {
  connectionType: "data_save" | "external_call";
  fromConnection?: Connection;
  toConnection?: Connection;
  relationshipName?: string;
  description?: string;
  diagramId?: number; // 🔧 수정 모드 감지용
  onSelectConnection: (type: "from" | "to", connection: Connection) => void;
  onSetRelationshipName: (name: string) => void;
  onSetDescription: (description: string) => void;
  onNext: () => void;
}

/**
 * 🔗 1단계: 연결 선택
 * - FROM/TO 데이터베이스 연결 선택
 * - 연결 상태 표시
 * - 지연시간 정보
 */
const ConnectionStep: React.FC<ConnectionStepProps> = React.memo(
  ({
    connectionType,
    fromConnection,
    toConnection,
    relationshipName,
    description,
    diagramId,
    onSelectConnection,
    onSetRelationshipName,
    onSetDescription,
    onNext,
  }) => {
    const [connections, setConnections] = useState<Connection[]>([]);
    const [isLoading, setIsLoading] = useState(true);
    const [nameCheckStatus, setNameCheckStatus] = useState<"idle" | "checking" | "valid" | "duplicate">("idle");

    // API 응답을 Connection 타입으로 변환
    const convertToConnection = (connectionInfo: ConnectionInfo): Connection => ({
      id: connectionInfo.id,
      name: connectionInfo.connection_name,
      type: connectionInfo.db_type,
      host: connectionInfo.host,
      port: connectionInfo.port,
      database: connectionInfo.database_name,
      username: connectionInfo.username,
      isActive: connectionInfo.is_active === "Y",
      companyCode: connectionInfo.company_code,
      createdDate: connectionInfo.created_date,
      updatedDate: connectionInfo.updated_date,
    });

    // 🔍 관계명 중복 체크 (디바운스 적용)
    const checkNameDuplicate = useCallback(
      async (name: string) => {
        if (!name.trim()) {
          setNameCheckStatus("idle");
          return;
        }

        setNameCheckStatus("checking");

        try {
          const result = await checkRelationshipNameDuplicate(name, diagramId);
          setNameCheckStatus(result.isDuplicate ? "duplicate" : "valid");

          if (result.isDuplicate) {
            toast.warning(`"${name}" 이름이 이미 사용 중입니다. (${result.duplicateCount}개 발견)`);
          }
        } catch (error) {
          console.error("중복 체크 실패:", error);
          setNameCheckStatus("idle");
        }
      },
      [diagramId],
    );

    // 관계명 변경 시 중복 체크 (디바운스)
    useEffect(() => {
      if (!relationshipName) {
        setNameCheckStatus("idle");
        return;
      }

      const timeoutId = setTimeout(() => {
        checkNameDuplicate(relationshipName);
      }, 500); // 500ms 디바운스

      return () => clearTimeout(timeoutId);
    }, [relationshipName, checkNameDuplicate]);

    // 연결 목록 로드
    useEffect(() => {
      const loadConnections = async () => {
        try {
          setIsLoading(true);
          const data = await getActiveConnections();

          // 메인 DB 연결 추가
          const mainConnection: Connection = {
            id: 0,
            name: "메인 데이터베이스",
            type: "postgresql",
            host: "localhost",
            port: 5432,
            database: "main",
            username: "main_user",
            isActive: true,
          };

          // API 응답을 Connection 타입으로 변환
          const convertedConnections = data.map(convertToConnection);

          // 중복 방지: 기존에 메인 연결이 없는 경우에만 추가
          const hasMainConnection = convertedConnections.some((conn) => conn.id === 0);
          const preliminaryConnections = hasMainConnection
            ? convertedConnections
            : [mainConnection, ...convertedConnections];

          // ID 중복 제거 (Set 사용)
          const uniqueConnections = preliminaryConnections.filter(
            (conn, index, arr) => arr.findIndex((c) => c.id === conn.id) === index,
          );

          console.log("🔗 연결 목록 로드 완료:", uniqueConnections);
          setConnections(uniqueConnections);
        } catch (error) {
          console.error("❌ 연결 목록 로드 실패:", error);
          toast.error("연결 목록을 불러오는데 실패했습니다.");

          // 에러 시에도 메인 연결은 제공
          const mainConnection: Connection = {
            id: 0,
            name: "메인 데이터베이스",
            type: "postgresql",
            host: "localhost",
            port: 5432,
            database: "main",
            username: "main_user",
            isActive: true,
          };
          setConnections([mainConnection]);
        } finally {
          setIsLoading(false);
        }
      };

      loadConnections();
    }, []);

    const handleConnectionSelect = (type: "from" | "to", connectionId: string) => {
      const connection = connections.find((c) => c.id.toString() === connectionId);
      if (connection) {
        onSelectConnection(type, connection);
      }
    };

    const canProceed = fromConnection && toConnection;

    const getConnectionIcon = (connection: Connection) => {
      return connection.id === 0 ? <Database className="h-4 w-4" /> : <Globe className="h-4 w-4" />;
    };

    const getConnectionBadge = (connection: Connection) => {
      if (connection.id === 0) {
        return (
          <Badge variant="default" className="text-xs">
            메인 DB
          </Badge>
        );
      }
      return (
        <Badge variant="secondary" className="text-xs">
          {connection.type?.toUpperCase()}
        </Badge>
      );
    };

    return (
      <>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Database className="h-5 w-5" />
            1단계: 연결 선택
          </CardTitle>
          <p className="text-muted-foreground text-sm">
            {connectionType === "data_save"
              ? "데이터를 저장할 소스와 대상 데이터베이스를 선택하세요."
              : "외부 호출을 위한 소스와 대상 연결을 선택하세요."}
          </p>
        </CardHeader>

        <CardContent className="max-h-[calc(100vh-400px)] min-h-[400px] space-y-6 overflow-y-auto">
          {/* 관계 정보 입력 */}
          <div className="bg-muted/30 space-y-4 rounded-lg border p-4">
            <h3 className="font-medium">관계 정보</h3>
            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="relationshipName">관계 이름 *</Label>
                <div className="relative">
                  <Input
                    id="relationshipName"
                    placeholder="예: 사용자 데이터 동기화"
                    value={relationshipName || ""}
                    onChange={(e) => onSetRelationshipName(e.target.value)}
                    className={`pr-10 ${
                      nameCheckStatus === "duplicate"
                        ? "border-red-500 focus:border-red-500"
                        : nameCheckStatus === "valid"
                          ? "border-green-500 focus:border-green-500"
                          : ""
                    }`}
                  />
                  <div className="absolute top-1/2 right-3 -translate-y-1/2">
                    {nameCheckStatus === "checking" && (
                      <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
                    )}
                    {nameCheckStatus === "valid" && <CheckCircle className="h-4 w-4 text-green-500" />}
                    {nameCheckStatus === "duplicate" && <AlertTriangle className="h-4 w-4 text-red-500" />}
                  </div>
                </div>
                {nameCheckStatus === "duplicate" && <p className="text-sm text-red-600">이미 사용 중인 이름입니다.</p>}
                {nameCheckStatus === "valid" && <p className="text-sm text-green-600">사용 가능한 이름입니다.</p>}
              </div>
              <div className="space-y-2">
                <Label htmlFor="description">설명</Label>
                <Textarea
                  id="description"
                  placeholder="이 관계에 대한 설명을 입력하세요"
                  value={description || ""}
                  onChange={(e) => onSetDescription(e.target.value)}
                  rows={2}
                />
              </div>
            </div>
          </div>

          {isLoading ? (
            <div className="flex items-center justify-center py-8">
              <Loader2 className="mr-2 h-6 w-6 animate-spin" />
              <span>연결 목록을 불러오는 중...</span>
            </div>
          ) : (
            <>
              {/* FROM 연결 선택 */}
              <div className="space-y-3">
                <div className="flex items-center gap-2">
                  <h3 className="font-medium">FROM 연결 (소스)</h3>
                  {fromConnection && (
                    <div className="flex items-center gap-2">
                      <Badge variant="outline" className="text-green-600">
                        🟢 연결됨
                      </Badge>
                      <span className="text-muted-foreground text-xs">지연시간: ~23ms</span>
                    </div>
                  )}
                </div>

                <Select
                  value={fromConnection?.id.toString() || ""}
                  onValueChange={(value) => handleConnectionSelect("from", value)}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="소스 연결을 선택하세요" />
                  </SelectTrigger>
                  <SelectContent>
                    {connections.length === 0 ? (
                      <div className="text-muted-foreground p-4 text-center">연결 정보가 없습니다.</div>
                    ) : (
                      connections.map((connection, index) => (
                        <SelectItem key={`from_${connection.id}_${index}`} value={connection.id.toString()}>
                          <div className="flex items-center gap-2">
                            {getConnectionIcon(connection)}
                            <span>{connection.name}</span>
                            {getConnectionBadge(connection)}
                          </div>
                        </SelectItem>
                      ))
                    )}
                  </SelectContent>
                </Select>

                {fromConnection && (
                  <div className="bg-muted/50 rounded-lg p-3">
                    <div className="mb-2 flex items-center gap-2">
                      {getConnectionIcon(fromConnection)}
                      <span className="font-medium">{fromConnection.name}</span>
                      {getConnectionBadge(fromConnection)}
                    </div>
                    <div className="text-muted-foreground space-y-1 text-xs">
                      <p>
                        호스트: {fromConnection.host}:{fromConnection.port}
                      </p>
                      <p>데이터베이스: {fromConnection.database}</p>
                    </div>
                  </div>
                )}
              </div>

              {/* TO 연결 선택 */}
              <div className="space-y-3">
                <div className="flex items-center gap-2">
                  <h3 className="font-medium">TO 연결 (대상)</h3>
                  {toConnection && (
                    <div className="flex items-center gap-2">
                      <Badge variant="outline" className="text-green-600">
                        🟢 연결됨
                      </Badge>
                      <span className="text-muted-foreground text-xs">지연시간: ~45ms</span>
                    </div>
                  )}
                </div>

                <Select
                  value={toConnection?.id.toString() || ""}
                  onValueChange={(value) => handleConnectionSelect("to", value)}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="대상 연결을 선택하세요" />
                  </SelectTrigger>
                  <SelectContent>
                    {connections.length === 0 ? (
                      <div className="text-muted-foreground p-4 text-center">연결 정보가 없습니다.</div>
                    ) : (
                      connections.map((connection, index) => (
                        <SelectItem key={`to_${connection.id}_${index}`} value={connection.id.toString()}>
                          <div className="flex items-center gap-2">
                            {getConnectionIcon(connection)}
                            <span>{connection.name}</span>
                            {getConnectionBadge(connection)}
                          </div>
                        </SelectItem>
                      ))
                    )}
                  </SelectContent>
                </Select>

                {toConnection && (
                  <div className="bg-muted/50 rounded-lg p-3">
                    <div className="mb-2 flex items-center gap-2">
                      {getConnectionIcon(toConnection)}
                      <span className="font-medium">{toConnection.name}</span>
                      {getConnectionBadge(toConnection)}
                    </div>
                    <div className="text-muted-foreground space-y-1 text-xs">
                      <p>
                        호스트: {toConnection.host}:{toConnection.port}
                      </p>
                      <p>데이터베이스: {toConnection.database}</p>
                    </div>
                  </div>
                )}
              </div>

              {/* 연결 매핑 표시 */}
              {fromConnection && toConnection && (
                <div className="bg-primary/5 border-primary/20 rounded-lg border p-4">
                  <div className="flex items-center justify-center gap-4">
                    <div className="text-center">
                      <div className="font-medium">{fromConnection.name}</div>
                      <div className="text-muted-foreground text-xs">소스</div>
                    </div>

                    <ArrowRight className="text-primary h-5 w-5" />

                    <div className="text-center">
                      <div className="font-medium">{toConnection.name}</div>
                      <div className="text-muted-foreground text-xs">대상</div>
                    </div>
                  </div>

                  <div className="mt-3 text-center">
                    <Badge variant="outline" className="text-primary">
                      💡 연결 매핑 설정 완료
                    </Badge>
                  </div>
                </div>
              )}

              {/* 다음 단계 버튼 */}
              <div className="flex justify-end pt-4">
                <Button onClick={onNext} disabled={!canProceed} className="flex items-center gap-2">
                  다음: 테이블 선택
                  <ArrowRight className="h-4 w-4" />
                </Button>
              </div>
            </>
          )}
        </CardContent>
      </>
    );
  },
);

ConnectionStep.displayName = "ConnectionStep";

export default ConnectionStep;