'use client'

import { COLOR_OPTIONS } from './gridTableConstants'

interface GridTableColorMenuProps {
  cellId: string
  x: number
  y: number
  onSetCellColor: (cellId: string, color: string | null | undefined) => void
  onClose: () => void
}

export function GridTableColorMenu({
  cellId,
  x,
  y,
  onSetCellColor,
  onClose,
}: GridTableColorMenuProps) {
  return (
    <div
      className="fixed inset-0 z-50"
      onClick={onClose}
      onContextMenu={(e) => { e.preventDefault(); onClose() }}
    >
      <div
        className="absolute bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1 min-w-[140px]"
        style={{ left: x, top: y }}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="px-3 py-1 text-[10px] text-gray-400 dark:text-gray-500 font-medium uppercase tracking-wider">
          Textfarbe
        </div>
        {COLOR_OPTIONS.map((opt) => (
          <button
            key={opt.label}
            className="w-full px-3 py-1.5 text-xs text-left hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
            onClick={() => {
              onSetCellColor(cellId, opt.value)
              onClose()
            }}
          >
            {opt.value ? (
              <span className="w-3 h-3 rounded-full flex-shrink-0" style={{ backgroundColor: opt.value }} />
            ) : (
              <span className="w-3 h-3 rounded-full flex-shrink-0 border border-gray-300 dark:border-gray-600" />
            )}
            <span>{opt.label}</span>
          </button>
        ))}
        <div className="border-t border-gray-100 dark:border-gray-700 mt-1 pt-1">
          <button
            className="w-full px-3 py-1.5 text-xs text-left hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400"
            onClick={() => {
              onSetCellColor(cellId, undefined)
              onClose()
            }}
          >
            Farbe zuruecksetzen (OCR)
          </button>
        </div>
      </div>
    </div>
  )
}
