"use client";

import React from "react";
import { Handle, Position } from "@xyflow/react";

interface TableColumn {
  name: string;
  type: string;
  description: string;
}

interface Table {
  tableName: string;
  displayName: string;
  description: string;
  columns: TableColumn[];
}

interface TableNodeData {
  table: Table;
  onColumnClick: (tableName: string, columnName: string) => void;
  onScrollAreaEnter?: () => void;
  onScrollAreaLeave?: () => void;
  selectedColumns?: string[]; // 선택된 컬럼 목록
  connectedColumns?: { [columnName: string]: { direction: "source" | "target" | "both" } }; // 연결된 컬럼 정보
}

export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
  const {
    table,
    onColumnClick,
    onScrollAreaEnter,
    onScrollAreaLeave,
    selectedColumns = [],
    connectedColumns = {},
  } = data;

  return (
    <div className="relative flex min-w-[280px] flex-col overflow-hidden rounded-lg border-2 border-gray-300 bg-white shadow-lg">
      {/* React Flow Handles - 숨김 처리 */}
      <Handle type="target" position={Position.Left} id="left" className="!invisible !h-1 !w-1" />
      <Handle type="source" position={Position.Right} id="right" className="!invisible !h-1 !w-1" />

      {/* 테이블 헤더 */}
      <div className="bg-blue-600 p-3 text-white">
        <h3 className="truncate text-sm font-semibold">{table.displayName}</h3>
        {table.description && <p className="mt-1 truncate text-xs opacity-75">{table.description}</p>}
      </div>

      {/* 컬럼 목록 */}
      <div className="flex-1 overflow-hidden p-2" onMouseEnter={onScrollAreaEnter} onMouseLeave={onScrollAreaLeave}>
        <div className="space-y-1">
          {table.columns.map((column, index) => {
            const isSelected = selectedColumns.includes(column.name);
            const connectionInfo = connectedColumns[column.name];
            const isConnected = !!connectionInfo;

            // 연결된 컬럼에만 핸들 표시
            const showSourceHandle =
              isConnected && (connectionInfo.direction === "source" || connectionInfo.direction === "both");
            const showTargetHandle =
              isConnected && (connectionInfo.direction === "target" || connectionInfo.direction === "both");

            return (
              <div
                key={column.name}
                className={`relative cursor-pointer rounded px-2 py-1 text-xs transition-colors ${
                  isSelected ? "bg-blue-100 text-blue-800 ring-2 ring-blue-500" : "text-gray-700 hover:bg-gray-100"
                }`}
                onClick={() => onColumnClick(table.tableName, column.name)}
              >
                {/* Target Handle (왼쪽) - 세련된 디자인 */}
                {showTargetHandle && (
                  <Handle
                    type="target"
                    position={Position.Left}
                    id={`${table.tableName}-${column.name}-target`}
                    className="!absolute !left-[-6px] !h-2 !w-2 !rounded-full !border-0 !bg-blue-500 !shadow-sm hover:!bg-blue-600 hover:!shadow-md"
                    style={{ top: "50%", transform: "translateY(-50%)" }}
                  />
                )}

                {/* Source Handle (오른쪽) - 세련된 디자인 */}
                {showSourceHandle && (
                  <Handle
                    type="source"
                    position={Position.Right}
                    id={`${table.tableName}-${column.name}-source`}
                    className="!absolute !right-[-6px] !h-2 !w-2 !rounded-full !border-0 !bg-blue-500 !shadow-sm hover:!bg-blue-600 hover:!shadow-md"
                    style={{ top: "50%", transform: "translateY(-50%)" }}
                  />
                )}

                <div className="flex items-center justify-between">
                  <span className="font-mono font-medium">{column.name}</span>
                  <span className="text-gray-500">{column.type}</span>
                </div>
                {column.description && <div className="mt-0.5 text-gray-500">{column.description}</div>}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};