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

"use client";

import React, { useState } from "react";
import { Database, ArrowRight, CheckCircle } from "lucide-react";
import { Connection } from "../types/redesigned";

interface ConnectionStepProps {
  fromConnection?: Connection;
  toConnection?: Connection;
  onFromConnectionChange: (connection: Connection) => void;
  onToConnectionChange: (connection: Connection) => void;
  onNext: () => void;
}

// 임시 연결 데이터 (실제로는 API에서 가져올 것)
const mockConnections: Connection[] = [
  {
    id: "conn1",
    name: "메인 데이터베이스",
    type: "PostgreSQL",
    host: "localhost",
    port: 5432,
    database: "main_db",
    username: "admin",
    tables: []
  },
  {
    id: "conn2", 
    name: "외부 API",
    type: "REST API",
    host: "api.example.com",
    port: 443,
    database: "external",
    username: "api_user",
    tables: []
  },
  {
    id: "conn3",
    name: "백업 데이터베이스",
    type: "MySQL",
    host: "backup.local",
    port: 3306,
    database: "backup_db",
    username: "backup_user",
    tables: []
  }
];

export const ConnectionStep: React.FC<ConnectionStepProps> = ({
  fromConnection,
  toConnection,
  onFromConnectionChange,
  onToConnectionChange,
  onNext,
}) => {
  const [selectedFrom, setSelectedFrom] = useState<string>(fromConnection?.id || "");
  const [selectedTo, setSelectedTo] = useState<string>(toConnection?.id || "");

  const handleFromSelect = (connectionId: string) => {
    const connection = mockConnections.find(c => c.id === connectionId);
    if (connection) {
      setSelectedFrom(connectionId);
      onFromConnectionChange(connection);
    }
  };

  const handleToSelect = (connectionId: string) => {
    const connection = mockConnections.find(c => c.id === connectionId);
    if (connection) {
      setSelectedTo(connectionId);
      onToConnectionChange(connection);
    }
  };

  const canProceed = selectedFrom && selectedTo && selectedFrom !== selectedTo;

  return (
    <div className="space-y-8">
      <div className="text-center">
        <h2 className="text-2xl font-bold text-gray-900 mb-2">
          연결 선택
        </h2>
        <p className="text-muted-foreground">
          데이터를 가져올 연결과 저장할 연결을 선택하세요
        </p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        {/* FROM 연결 */}
        <div className="space-y-4">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-primary/20 rounded-full flex items-center justify-center">
              <span className="text-primary font-bold">1</span>
            </div>
            <h3 className="text-lg font-semibold text-gray-900">FROM 연결</h3>
            <span className="text-sm text-gray-500">(데이터 소스)</span>
          </div>
          
          <div className="space-y-2">
            {mockConnections.map((connection) => (
              <div
                key={connection.id}
                className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
                  selectedFrom === connection.id
                    ? "border-primary bg-accent shadow-md"
                    : "border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-25"
                }`}
                onClick={() => handleFromSelect(connection.id)}
              >
                <div className="flex items-center gap-3">
                  <Database className="w-6 h-6 text-primary" />
                  <div className="flex-1">
                    <h4 className="font-medium text-gray-900">{connection.name}</h4>
                    <p className="text-sm text-muted-foreground">{connection.type}</p>
                    <p className="text-xs text-gray-500">{connection.host}:{connection.port}</p>
                  </div>
                  {selectedFrom === connection.id && (
                    <CheckCircle className="w-5 h-5 text-primary" />
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 화살표 */}
        <div className="hidden lg:flex items-center justify-center">
          <div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center">
            <ArrowRight className="w-6 h-6 text-orange-600" />
          </div>
        </div>

        {/* TO 연결 */}
        <div className="space-y-4">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
              <span className="text-green-600 font-bold">2</span>
            </div>
            <h3 className="text-lg font-semibold text-gray-900">TO 연결</h3>
            <span className="text-sm text-gray-500">(데이터 대상)</span>
          </div>
          
          <div className="space-y-2">
            {mockConnections.map((connection) => (
              <div
                key={connection.id}
                className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
                  selectedTo === connection.id
                    ? "border-green-500 bg-green-50 shadow-md"
                    : "border-gray-200 bg-white hover:border-green-300 hover:bg-green-25"
                }`}
                onClick={() => handleToSelect(connection.id)}
              >
                <div className="flex items-center gap-3">
                  <Database className="w-6 h-6 text-green-600" />
                  <div className="flex-1">
                    <h4 className="font-medium text-gray-900">{connection.name}</h4>
                    <p className="text-sm text-muted-foreground">{connection.type}</p>
                    <p className="text-xs text-gray-500">{connection.host}:{connection.port}</p>
                  </div>
                  {selectedTo === connection.id && (
                    <CheckCircle className="w-5 h-5 text-green-600" />
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* 다음 버튼 */}
      <div className="flex justify-end">
        <button
          onClick={onNext}
          disabled={!canProceed}
          className={`px-6 py-3 rounded-lg font-medium transition-all duration-200 ${
            canProceed
              ? "bg-orange-500 text-white hover:bg-orange-600 shadow-md hover:shadow-lg"
              : "bg-gray-300 text-gray-500 cursor-not-allowed"
          }`}
        >
          다음 단계: 테이블 선택
        </button>
      </div>
    </div>
  );
};