'use client'

import { useDraggable } from '@dnd-kit/core'

interface FloorPlanTableProps {
  id: string
  number: number
  name?: string | null
  capacity: number
  shape: string
  posX: number
  posY: number
  isSelected: boolean
  onClick: () => void
}

export default function FloorPlanTable({
  id,
  number,
  name,
  capacity,
  shape,
  posX,
  posY,
  isSelected,
  onClick,
}: FloorPlanTableProps) {
  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
    id: `canvas-${id}`,
    data: { tableId: id, source: 'canvas' },
  })

  const style: React.CSSProperties = {
    position: 'absolute',
    left: `${posX}%`,
    top: `${posY}%`,
    transform: transform
      ? `translate(${transform.x}px, ${transform.y}px)`
      : undefined,
    zIndex: isDragging ? 50 : isSelected ? 10 : 1,
    cursor: 'grab',
    touchAction: 'none',
  }

  const isCircle = shape === 'circle'

  return (
    <div
      ref={setNodeRef}
      style={style}
      {...listeners}
      {...attributes}
      onClick={(e) => {
        e.stopPropagation()
        onClick()
      }}
      className={`
        flex flex-col items-center justify-center
        w-16 h-16 select-none
        ${isCircle ? 'rounded-full' : 'rounded-lg'}
        ${isDragging ? 'opacity-70 shadow-xl scale-110' : 'shadow-md'}
        ${isSelected
          ? 'bg-orange-100 border-2 border-orange-500 dark:bg-orange-900/40 dark:border-orange-400 ring-2 ring-orange-300 dark:ring-orange-600'
          : 'bg-white border-2 border-gray-300 dark:bg-gray-700 dark:border-gray-500 hover:border-orange-400 dark:hover:border-orange-500'
        }
        transition-colors duration-150
      `}
    >
      <span className={`font-bold text-lg leading-none ${isSelected ? 'text-orange-700 dark:text-orange-300' : 'text-gray-800 dark:text-gray-100'}`}>
        {number}
      </span>
      <span className={`text-[10px] leading-tight mt-0.5 ${isSelected ? 'text-orange-600 dark:text-orange-400' : 'text-gray-500 dark:text-gray-400'}`}>
        {capacity}p
      </span>
    </div>
  )
}