import React, { useEffect, useRef, useState } from 'react'
import { Plus } from 'lucide-react'
import { getColumnFieldTypes } from './fieldTypes'

/**
 * "Add Field" button + menu of a container column (edit chrome, floats over the column). Lists every palette
 * field; picking one calls onAdd(type, label). Escape or a click outside closes the menu.
 */
export default function ColumnAddFieldMenu({ open, onToggle, onClose, onAdd }) {
  const [query, setQuery] = useState('')
  const menuRef = useRef(null)

  useEffect(() => {
    if (!open) { setQuery(''); return undefined }
    const onKey = (e) => { if (e.key === 'Escape') { e.stopPropagation(); onClose() } }
    const onDown = (e) => { if (menuRef.current && !menuRef.current.contains(e.target)) onClose() }
    document.addEventListener('keydown', onKey, true)
    document.addEventListener('mousedown', onDown)
    return () => {
      document.removeEventListener('keydown', onKey, true)
      document.removeEventListener('mousedown', onDown)
    }
  }, [open, onClose])

  const items = getColumnFieldTypes().filter((t) => t.label.toLowerCase().includes(query.trim().toLowerCase()))

  return (
    <div ref={menuRef} data-canvas-chrome="true" className={`absolute left-1/2 -translate-x-1/2 bottom-1 z-40 ${open ? 'opacity-100' : 'opacity-0 group-hover/col:opacity-100'} transition-opacity`}>
      <button
        type="button"
        data-column-add-field="true"
        onPointerDown={(e) => e.stopPropagation()}
        onClick={(e) => {
          e.stopPropagation()
          onToggle()
        }}
        className="px-2 py-1 border border-dashed border-gray-300 hover:border-gray-900 rounded-md text-[9px] font-bold uppercase tracking-wider text-gray-500 hover:text-gray-900 bg-white shadow-xs transition-all flex items-center justify-center gap-1 cursor-pointer"
      >
        <Plus className="w-3 h-3" /> Add Field
      </button>

      {open && (
        <div
          role="menu"
          data-column-add-menu="true"
          onPointerDown={(e) => e.stopPropagation()}
          onClick={(e) => e.stopPropagation()}
          className="absolute left-1/2 -translate-x-1/2 w-60 mt-1 bg-white border border-gray-200 rounded-xl shadow-lg z-50 p-2 text-[11px]"
        >
          <input
            type="text"
            autoFocus
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            onKeyDown={(e) => e.stopPropagation()}
            placeholder="Search fields..."
            aria-label="Search fields"
            className="w-full mb-1.5 px-2 py-1.5 border border-gray-200 rounded-md text-[11px] outline-none focus:border-gray-900"
            style={{ minHeight: 30 }}
          />
          <div className="grid grid-cols-2 gap-1 max-h-48 overflow-y-auto">
            {items.map((t) => (
              <button
                key={t.type}
                type="button"
                role="menuitem"
                data-add-type={t.type}
                onClick={(e) => {
                  e.stopPropagation()
                  onAdd(t.type, t.label)
                }}
                className="px-2 py-1 hover:bg-gray-50 rounded text-left text-gray-700 truncate cursor-pointer font-medium"
              >
                {t.label}
              </button>
            ))}
            {items.length === 0 && <div className="col-span-2 px-2 py-1 text-gray-400">No matching fields</div>}
          </div>
        </div>
      )}
    </div>
  )
}