import React, { useEffect, useMemo, useRef, useState } from 'react'
import { Braces, Search } from 'lucide-react'
import { mergeTagOptions } from './mergeTags'

/**
 * "Insert tag" button with a searchable list of merge tags (form tags + every field, grid columns included).
 * `onInsert(tag)` receives the tag text, e.g. "{field_email}".
 */
export default function MergeTagPicker({ fields, onInsert, allFields = true, label = 'Insert tag', testId, align = 'right' }) {
  const [open, setOpen] = useState(false)
  const [query, setQuery] = useState('')
  const ref = useRef(null)
  const options = useMemo(() => mergeTagOptions(fields, { allFields }), [fields, allFields])

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

  const q = query.trim().toLowerCase()
  const shown = q ? options.filter((o) => o.label.toLowerCase().includes(q) || o.tag.toLowerCase().includes(q)) : options
  const groups = ['Form', 'Fields'].map((g) => [g, shown.filter((o) => o.group === g)]).filter(([, list]) => list.length)

  return (
    <div className="relative inline-block" ref={ref}>
      <button
        type="button"
        // Keep the caret / selection of the editor the tag goes into.
        onMouseDown={(e) => e.preventDefault()}
        onClick={() => { setOpen((v) => !v); setQuery('') }}
        aria-expanded={open}
        aria-haspopup="listbox"
        data-testid={testId}
        className="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium text-gray-700 bg-white border border-gray-200 rounded-md hover:bg-gray-50 hover:border-gray-300 cursor-pointer"
      >
        <Braces className="w-3.5 h-3.5 text-gray-500" aria-hidden="true" /> {label}
      </button>
      {open && (
        <div className={`absolute z-20 mt-1 w-72 bg-white border border-gray-200 rounded-lg shadow-lg ${align === 'left' ? 'left-0' : 'right-0'}`} data-merge-tag-menu>
          <div className="p-2 border-b border-gray-100">
            <div className="relative">
              <Search className="w-3.5 h-3.5 text-gray-400 absolute left-2.5 top-1/2 -translate-y-1/2" aria-hidden="true" />
              <input
                type="text"
                autoFocus
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Search tags..."
                aria-label="Search merge tags"
                className="w-full pl-8 pr-2 py-1.5 text-xs border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-900"
              />
            </div>
          </div>
          <div className="max-h-64 overflow-y-auto py-1" role="listbox">
            {groups.length === 0 && <p className="px-3 py-2 text-xs text-gray-500">No matching tags</p>}
            {groups.map(([group, list]) => (
              <div key={group}>
                <div className="px-3 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400">{group}</div>
                {list.map((o) => (
                  <button
                    key={o.tag}
                    type="button"
                    role="option"
                    aria-selected="false"
                    data-merge-tag={o.tag}
                    onMouseDown={(e) => e.preventDefault()}
                    onClick={() => { onInsert && onInsert(o.tag); setOpen(false) }}
                    className="w-full flex items-center justify-between gap-2 px-3 py-1.5 text-left text-xs hover:bg-gray-50 cursor-pointer"
                  >
                    <span className="text-gray-800 truncate">{o.label}</span>
                    <code className="text-[10px] text-gray-500 font-mono flex-shrink-0 max-w-[45%] truncate">{o.tag}</code>
                  </button>
                ))}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}

/**
 * Text input (or textarea) with an "Insert tag" picker; the tag goes where the caret was.
 * Extra props are passed to the <input>/<textarea>.
 */
export function TagTextInput({ value, onChange, fields, multiline = false, allFields = false, pickerTestId, className = '', ...rest }) {
  const caret = useRef(null)
  const remember = (e) => { caret.current = { start: e.target.selectionStart, end: e.target.selectionEnd } }
  const insert = (tag) => {
    const v = value || ''
    const pos = caret.current
    const next = pos && typeof pos.start === 'number' ? v.slice(0, pos.start) + tag + v.slice(pos.end) : v + tag
    caret.current = pos && typeof pos.start === 'number' ? { start: pos.start + tag.length, end: pos.start + tag.length } : null
    onChange(next)
  }
  const Tag = multiline ? 'textarea' : 'input'
  return (
    <div className="relative">
      <Tag
        {...(multiline ? {} : { type: 'text' })}
        {...rest}
        value={value || ''}
        onChange={(e) => { remember(e); onChange(e.target.value) }}
        onSelect={remember}
        onKeyUp={remember}
        onClick={remember}
        className={`${className} ${multiline ? 'pb-10' : 'pr-28'}`}
      />
      <div className={multiline ? 'absolute right-2 bottom-2' : 'absolute right-1.5 top-1/2 -translate-y-1/2'}>
        <MergeTagPicker fields={fields} onInsert={insert} allFields={allFields} testId={pickerTestId} label="Tag" />
      </div>
    </div>
  )
}