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="mb-2 text-2xl font-bold text-gray-900">연결 선택</h2>
        <p className="text-muted-foreground">데이터를 가져올 연결과 저장할 연결을 선택하세요</p>
      </div>

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

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

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

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