import React, { useMemo, useState } from 'react'

/**
 * Kombination aus Filter-Eingabe und Auswahl: Liste wird per Tippen eingeschränkt.
 * Die aktuelle Auswahl bleibt sichtbar, auch wenn sie durch den Filter ausgeblendet würde.
 */
export default function SearchableSelect({
  value,
  onChange,
  options = [],
  idKey = 'id',
  labelKey = 'label',
  allLabel = 'Alle',
  filterPlaceholder = 'Tippen zum Filtern…',
  selectClassName = 'form-input',
  className = '',
}) {
  const [q, setQ] = useState('')

  const rows = useMemo(() => {
    return options.map((o) => ({
      id: o[idKey],
      label: typeof o[labelKey] === 'function' ? o[labelKey](o) : String(o[labelKey] ?? ''),
    }))
  }, [options, idKey, labelKey])

  const filtered = useMemo(() => {
    const t = q.trim().toLowerCase()
    if (!t) return rows
    return rows.filter((r) => r.label.toLowerCase().includes(t) || String(r.id).includes(t))
  }, [rows, q])

  const withSelection = useMemo(() => {
    if (value === '' || value == null) return filtered
    const sel = String(value)
    if (filtered.some((r) => String(r.id) === sel)) return filtered
    const found = rows.find((r) => String(r.id) === sel)
    if (found) return [found, ...filtered]
    return filtered
  }, [filtered, rows, value])

  return (
    <div className={className} style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
      <input
        type="search"
        className={selectClassName}
        placeholder={filterPlaceholder}
        value={q}
        onChange={(e) => setQ(e.target.value)}
        autoComplete="off"
        aria-label="Filter"
      />
      <select
        className={selectClassName}
        value={value === '' || value == null ? '' : String(value)}
        onChange={(e) => onChange(e.target.value === '' ? '' : e.target.value)}
      >
        <option value="">{allLabel}</option>
        {withSelection.map((r) => (
          <option key={String(r.id)} value={r.id}>
            {r.label}
          </option>
        ))}
      </select>
    </div>
  )
}