'use client'

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

interface TableData {
  id: string
  number: number
  name?: string | null
  capacity: number
  shape: string
}

interface UnplacedTablesSidebarProps {
  tables: TableData[]
  onAutoArrange: () => void
}

function DraggableSidebarItem({ table }: { table: TableData }) {
  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
    id: `sidebar-${table.id}`,
    data: { tableId: table.id, source: 'sidebar' },
  })

  const style: React.CSSProperties = {
    transform: transform
      ? `translate(${transform.x}px, ${transform.y}px)`
      : undefined,
    zIndex: isDragging ? 100 : undefined,
    cursor: 'grab',
    touchAction: 'none',
  }

  return (
    <div
      ref={setNodeRef}
      style={style}
      {...listeners}
      {...attributes}
      className={`
        flex items-center gap-2 px-3 py-2 rounded-lg border
        ${isDragging
          ? 'bg-orange-100 border-orange-400 dark:bg-orange-900/40 dark:border-orange-500 shadow-lg opacity-80'
          : 'bg-white border-gray-200 dark:bg-gray-700 dark:border-gray-600 hover:border-orange-300 dark:hover:border-orange-500'
        }
        transition-colors duration-150
      `}
    >
      <div className={`w-8 h-8 flex items-center justify-center font-bold text-sm rounded ${table.shape === 'circle' ? 'rounded-full' : ''} bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-200`}>
        {table.number}
      </div>
      <div className="flex-1 min-w-0">
        <p className="text-sm font-medium text-gray-800 dark:text-gray-200 truncate">
          {table.name || `Meja ${table.number}`}
        </p>
        <p className="text-xs text-gray-500 dark:text-gray-400">{table.capacity} orang</p>
      </div>
    </div>
  )
}

export default function UnplacedTablesSidebar({ tables, onAutoArrange }: UnplacedTablesSidebarProps) {
  return (
    <div className="w-48 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 flex flex-col">
      <div className="p-3 border-b border-gray-200 dark:border-gray-700">
        <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-200">
          Belum Ditaruh
        </h3>
        <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
          Drag ke canvas →
        </p>
      </div>

      <div className="flex-1 overflow-y-auto p-2 space-y-1.5">
        {tables.length === 0 ? (
          <p className="text-xs text-gray-400 dark:text-gray-500 text-center py-4">
            Semua meja sudah ditaruh
          </p>
        ) : (
          tables.map(table => (
            <DraggableSidebarItem key={table.id} table={table} />
          ))
        )}
      </div>

      {tables.length > 0 && (
        <div className="p-2 border-t border-gray-200 dark:border-gray-700">
          <button
            onClick={onAutoArrange}
            className="w-full text-xs btn-secondary flex items-center justify-center gap-1.5 py-1.5"
          >
            <LayoutGrid className="w-3.5 h-3.5" />
            Auto Arrange
          </button>
        </div>
      )}
    </div>
  )
}