"use client";

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

interface TableStepProps {
  fromConnection?: Connection;
  toConnection?: Connection;
  fromTable?: TableInfo;
  toTable?: TableInfo;
  onFromTableChange: (table: TableInfo) => void;
  onToTableChange: (table: TableInfo) => void;
  onNext: () => void;
  onBack: () => void;
}

// 임시 테이블 데이터
const mockTables: TableInfo[] = [
  {
    name: "users",
    schema: "public",
    columns: [
      { name: "id", type: "integer", nullable: false, primaryKey: true },
      { name: "name", type: "varchar", nullable: false, primaryKey: false },
      { name: "email", type: "varchar", nullable: true, primaryKey: false },
      { name: "created_at", type: "timestamp", nullable: false, primaryKey: false }
    ],
    rowCount: 1250
  },
  {
    name: "orders",
    schema: "public", 
    columns: [
      { name: "id", type: "integer", nullable: false, primaryKey: true },
      { name: "user_id", type: "integer", nullable: false, primaryKey: false, foreignKey: true },
      { name: "product_name", type: "varchar", nullable: false, primaryKey: false },
      { name: "amount", type: "decimal", nullable: false, primaryKey: false },
      { name: "order_date", type: "timestamp", nullable: false, primaryKey: false }
    ],
    rowCount: 3420
  },
  {
    name: "products",
    schema: "public",
    columns: [
      { name: "id", type: "integer", nullable: false, primaryKey: true },
      { name: "name", type: "varchar", nullable: false, primaryKey: false },
      { name: "price", type: "decimal", nullable: false, primaryKey: false },
      { name: "category", type: "varchar", nullable: true, primaryKey: false }
    ],
    rowCount: 156
  }
];

export const TableStep: React.FC<TableStepProps> = ({
  fromConnection,
  toConnection,
  fromTable,
  toTable,
  onFromTableChange,
  onToTableChange,
  onNext,
  onBack,
}) => {
  const [selectedFromTable, setSelectedFromTable] = useState<string>(fromTable?.name || "");
  const [selectedToTable, setSelectedToTable] = useState<string>(toTable?.name || "");

  const handleFromTableSelect = (tableName: string) => {
    const table = mockTables.find(t => t.name === tableName);
    if (table) {
      setSelectedFromTable(tableName);
      onFromTableChange(table);
    }
  };

  const handleToTableSelect = (tableName: string) => {
    const table = mockTables.find(t => t.name === tableName);
    if (table) {
      setSelectedToTable(tableName);
      onToTableChange(table);
    }
  };

  const canProceed = selectedFromTable && selectedToTable;

  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-gray-600">
          소스 테이블과 대상 테이블을 선택하세요
        </p>
      </div>

      {/* 연결 정보 표시 */}
      <div className="bg-gray-50 rounded-lg p-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <Database className="w-5 h-5 text-blue-600" />
            <span className="font-medium text-gray-900">{fromConnection?.name}</span>
            <span className="text-sm text-gray-500">→</span>
            <Database className="w-5 h-5 text-green-600" />
            <span className="font-medium text-gray-900">{toConnection?.name}</span>
          </div>
        </div>
      </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-blue-100 rounded-full flex items-center justify-center">
              <span className="text-blue-600 font-bold">1</span>
            </div>
            <h3 className="text-lg font-semibold text-gray-900">소스 테이블</h3>
            <span className="text-sm text-gray-500">(FROM)</span>
          </div>
          
          <div className="space-y-2">
            {mockTables.map((table) => (
              <div
                key={table.name}
                className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
                  selectedFromTable === table.name
                    ? "border-blue-500 bg-blue-50 shadow-md"
                    : "border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-25"
                }`}
                onClick={() => handleFromTableSelect(table.name)}
              >
                <div className="flex items-center gap-3">
                  <Table className="w-6 h-6 text-blue-600" />
                  <div className="flex-1">
                    <h4 className="font-medium text-gray-900">{table.name}</h4>
                    <p className="text-sm text-gray-600">{table.columns.length}개 컬럼</p>
                    <p className="text-xs text-gray-500">{table.rowCount?.toLocaleString()}개 행</p>
                  </div>
                  {selectedFromTable === table.name && (
                    <CheckCircle className="w-5 h-5 text-blue-600" />
                  )}
                </div>
              </div>
            ))}
          </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">대상 테이블</h3>
            <span className="text-sm text-gray-500">(TO)</span>
          </div>
          
          <div className="space-y-2">
            {mockTables.map((table) => (
              <div
                key={table.name}
                className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
                  selectedToTable === table.name
                    ? "border-green-500 bg-green-50 shadow-md"
                    : "border-gray-200 bg-white hover:border-green-300 hover:bg-green-25"
                }`}
                onClick={() => handleToTableSelect(table.name)}
              >
                <div className="flex items-center gap-3">
                  <Table className="w-6 h-6 text-green-600" />
                  <div className="flex-1">
                    <h4 className="font-medium text-gray-900">{table.name}</h4>
                    <p className="text-sm text-gray-600">{table.columns.length}개 컬럼</p>
                    <p className="text-xs text-gray-500">{table.rowCount?.toLocaleString()}개 행</p>
                  </div>
                  {selectedToTable === table.name && (
                    <CheckCircle className="w-5 h-5 text-green-600" />
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* 버튼들 */}
      <div className="flex justify-between">
        <button
          onClick={onBack}
          className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 transition-all duration-200"
        >
          <ArrowLeft className="w-4 h-4" />
          이전 단계
        </button>
        
        <button
          onClick={onNext}
          disabled={!canProceed}
          className={`flex items-center gap-2 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"
          }`}
        >
          다음 단계: 필드 매핑
          <ArrowRight className="w-4 h-4" />
        </button>
      </div>
    </div>
  );
};