import React, { useEffect, useRef, useState } from 'react'
import { ChevronDown, Check, Pencil } from 'lucide-react'

/**
 * Header form switcher (the reference builder Radix Select, F:7432-7516): borderless trigger truncated at 150px, list with a check
 * on the current form, "No forms available" empty state, pencil (rename) shown on hover.
 * Props: forms [{ id, name }], currentId, currentName, onSelect(id), onRename() (optional).
 */
export default function FormSwitcher({ forms = [], currentId, currentName = 'Untitled', onSelect, onRename }) {
  const [open, setOpen] = useState(false)
  const [focusIdx, setFocusIdx] = useState(-1)
  const rootRef = useRef(null)
  const listRef = useRef(null)
  const list = forms.some((f) => String(f.id) === String(currentId)) || !currentId ? forms : [{ id: currentId, name: currentName }, ...forms]
  const current = list.find((f) => String(f.id) === String(currentId))
  const label = (current && current.name) || currentName || 'Untitled'

  useEffect(() => {
    if (!open) return undefined
    const onDoc = (e) => { if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false) }
    document.addEventListener('mousedown', onDoc)
    return () => document.removeEventListener('mousedown', onDoc)
  }, [open])

  useEffect(() => {
    if (open && listRef.current && focusIdx >= 0) {
      const el = listRef.current.querySelectorAll('[role="option"]')[focusIdx]
      if (el) el.focus()
    }
  }, [open, focusIdx])

  const choose = (id) => {
    setOpen(false)
    if (String(id) !== String(currentId) && onSelect) onSelect(id)
  }

  const onKeyDown = (e) => {
    if (e.key === 'Escape') { setOpen(false); return }
    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
      e.preventDefault()
      if (!open) { setOpen(true); setFocusIdx(Math.max(0, list.findIndex((f) => String(f.id) === String(currentId)))); return }
      setFocusIdx((i) => {
        const n = list.length
        if (!n) return -1
        return e.key === 'ArrowDown' ? (i + 1) % n : (i - 1 + n) % n
      })
    }
  }

  return (
    <div ref={rootRef} className="relative flex items-center gap-1 group min-w-0" onKeyDown={onKeyDown} data-testid="form-switcher">
      <button
        type="button"
        aria-haspopup="listbox"
        aria-expanded={open}
        aria-label={`Current form: ${label}. Switch form`}
        title="Switch between your forms"
        onClick={() => { setOpen((o) => !o); setFocusIdx(Math.max(0, list.findIndex((f) => String(f.id) === String(currentId)))) }}
        className="flex items-center gap-1 h-8 px-1.5 rounded-md text-sm font-semibold text-slate-800 hover:bg-slate-100 min-w-0 cursor-pointer"
      >
        <span className="truncate max-w-[150px]">{label}</span>
        <ChevronDown className="w-4 h-4 text-slate-500 flex-shrink-0" aria-hidden="true" />
      </button>
      {onRename && (
        <button
          type="button"
          onClick={onRename}
          aria-label="Rename form"
          title="Rename form"
          className="w-7 h-7 flex items-center justify-center rounded text-slate-400 hover:text-slate-700 hover:bg-slate-100 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity cursor-pointer"
        >
          <Pencil className="w-3.5 h-3.5" aria-hidden="true" />
        </button>
      )}
      {open && (
        <div ref={listRef} role="listbox" aria-label="Your forms" className="absolute left-0 top-full mt-1 z-[60] w-64 max-h-80 overflow-y-auto rounded-lg border border-slate-200 bg-white shadow-lg py-1">
          {list.length === 0 ? (
            <div className="px-3 py-2 text-sm text-slate-500">No forms available. Create one first.</div>
          ) : list.map((f, i) => {
            const selected = String(f.id) === String(currentId)
            return (
              <div
                key={f.id}
                role="option"
                tabIndex={-1}
                aria-selected={selected}
                onClick={() => choose(f.id)}
                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); choose(f.id) } }}
                className={`flex items-center gap-2 px-3 py-2 text-sm cursor-pointer outline-none ${selected ? 'text-slate-900 font-semibold' : 'text-slate-700'} ${i === focusIdx ? 'bg-slate-100' : 'hover:bg-slate-50'}`}
              >
                <span className="w-4 flex-shrink-0">{selected && <Check className="w-4 h-4 text-blue-600" aria-hidden="true" />}</span>
                <span className="truncate">{f.name || 'Untitled'}</span>
              </div>
            )
          })}
        </div>
      )}
    </div>
  )
}