"use client";

import React from "react";
import { Handle, Position, NodeResizer } 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;
  selected?: boolean;
  selectedColumns?: string[]; // 선택된 컬럼 목록
}

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

  // 컬럼 개수에 따른 높이 계산
  // 헤더: ~80px (제목 + 설명 + 패딩)
  const headerHeight = table.description ? 80 : 65;

  // 컬럼 높이: 각 컬럼은 실제로 더 높음 (px-2 py-1 + 텍스트 2줄 + 설명 + space-y-1)
  // 설명이 있는 컬럼: ~45px, 없는 컬럼: ~35px, 간격: ~4px
  const avgColumnHeight = 45; // 여유있게 계산
  const idealColumnHeight = table.columns.length * avgColumnHeight;

  // 컨테이너 패딩
  const padding = 20;

  // 이상적인 높이 vs 최대 허용 높이 (너무 길면 스크롤)
  const idealHeight = headerHeight + idealColumnHeight + padding;
  const maxAllowedHeight = 800; // 최대 800px
  const calculatedHeight = Math.max(200, Math.min(idealHeight, maxAllowedHeight));

  // 스크롤이 필요한지 판단
  const needsScroll = idealHeight > maxAllowedHeight;

  return (
    <div
      className="relative flex min-w-[280px] flex-col overflow-hidden rounded-lg border-2 border-gray-300 bg-white shadow-lg"
      style={{ height: `${calculatedHeight}px`, minHeight: `${calculatedHeight}px` }}
    >
      {/* NodeResizer for resizing functionality */}
      <NodeResizer
        color="#ff0071"
        isVisible={selected}
        minWidth={280}
        minHeight={calculatedHeight}
        keepAspectRatio={false}
        handleStyle={{
          width: 8,
          height: 8,
          backgroundColor: "#ff0071",
          border: "1px solid white",
        }}
      />

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

      {/* 컬럼 목록 */}
      <div
        className={`flex-1 p-2 ${needsScroll ? "overflow-y-auto" : "overflow-hidden"}`}
        onMouseEnter={onScrollAreaEnter}
        onMouseLeave={onScrollAreaLeave}
      >
        <div className="space-y-1">
          {table.columns.map((column) => {
            const isSelected = selectedColumns.includes(column.name);

            return (
              <div
                key={column.name}
                onClick={() => onColumnClick(table.tableName, column.name)}
                className={`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"
                }`}
              >
                <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>

      {/* React Flow Handles */}
      <Handle
        type="target"
        position={Position.Left}
        className="h-3 w-3 border-2 border-gray-400 bg-white"
        isConnectable={false}
      />
      <Handle
        type="source"
        position={Position.Right}
        className="h-3 w-3 border-2 border-gray-400 bg-white"
        isConnectable={false}
      />
    </div>
  );
};