"use client";

import React, { useState, useEffect } from "react";
import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { ArrowRight, Database, Globe, Loader2 } from "lucide-react";
import { toast } from "sonner";

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

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

interface ConnectionStepProps {
  connectionType: "data_save" | "external_call";
  fromConnection?: Connection;
  toConnection?: Connection;
  onSelectConnection: (type: "from" | "to", connection: Connection) => void;
  onNext: () => void;
}

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

    // 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,
    });

    // 연결 목록 로드
    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">
          {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;