var _useState_TA = React.useState;
var _useRef_TA = React.useRef;
var _useEffect_TA = React.useEffect;

/**
 * Typeahead — Filterable dropdown input.
 *
 * Props:
 *   label       (string)   — Field label text
 *   options     (string[]) — Full list of options
 *   placeholder (string)   — Input placeholder (default: "Search...")
 *   value       (string)   — Controlled selected value
 *   onChange    (func)     — Called with selected option string
 */
var Typeahead = function (props) {
    var label = props.label;
    var options = props.options;
    var placeholder = props.placeholder || 'Search...';
    var value = props.value || '';
    var onChange = props.onChange;

    var queryState = _useState_TA(value);
    var query = queryState[0]; var setQuery = queryState[1];
    var openState = _useState_TA(false);
    var isOpen = openState[0]; var setIsOpen = openState[1];
    var indexState = _useState_TA(-1);
    var activeIndex = indexState[0]; var setActiveIndex = indexState[1];
    var wrapperRef = _useRef_TA(null);
    var listRef = _useRef_TA(null);

    var filtered = query
        ? options.filter(function (o) { return o.toLowerCase().indexOf(query.toLowerCase()) >= 0; })
        : options;

    _useEffect_TA(function () {
        var handleClick = function (e) {
            if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
                setIsOpen(false);
            }
        };
        document.addEventListener('mousedown', handleClick);
        return function () { document.removeEventListener('mousedown', handleClick); };
    }, []);

    _useEffect_TA(function () {
        if (listRef.current && activeIndex >= 0) {
            var item = listRef.current.children[activeIndex];
            if (item) item.scrollIntoView({ block: 'nearest' });
        }
    }, [activeIndex]);

    var select = function (option) {
        setQuery(option);
        setIsOpen(false);
        setActiveIndex(-1);
        if (onChange) onChange(option);
    };

    var handleKeyDown = function (e) {
        if (!isOpen) return;
        if (e.key === 'ArrowDown') {
            e.preventDefault();
            setActiveIndex(function (i) { return Math.min(i + 1, filtered.length - 1); });
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            setActiveIndex(function (i) { return Math.max(i - 1, 0); });
        } else if (e.key === 'Enter' && activeIndex >= 0) {
            e.preventDefault();
            select(filtered[activeIndex]);
        } else if (e.key === 'Escape') {
            setIsOpen(false);
        }
    };

    return (
        <div className="flex flex-col gap-1.5 relative" ref={wrapperRef}>
            {label && (
                <label className="text-xs font-bold text-sage ml-1">{label}</label>
            )}
            <div className="relative">
                <input
                    type="text"
                    className="w-full bg-surface border-none rounded-xl text-sm p-3 pr-9 shadow-soft ring-1 ring-sage/20 focus:ring-2 focus:ring-primary font-semibold text-forest placeholder:text-sage/60"
                    placeholder={placeholder}
                    value={query}
                    onChange={function (e) {
                        setQuery(e.target.value);
                        setIsOpen(true);
                        setActiveIndex(-1);
                    }}
                    onFocus={function () { setIsOpen(true); }}
                    onKeyDown={handleKeyDown}
                />
                <span className="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 text-sage text-[18px] pointer-events-none">
                    search
                </span>
            </div>
            {isOpen && filtered.length > 0 && (
                <ul
                    ref={listRef}
                    className="absolute top-full left-0 right-0 mt-1 bg-surface rounded-xl shadow-soft ring-1 ring-sage/20 max-h-48 overflow-y-auto z-50"
                >
                    {filtered.map(function (option, i) {
                        return (
                            <li
                                key={option}
                                className={'px-3 py-2.5 text-sm cursor-pointer transition-colors ' + (i === activeIndex ? 'bg-primary/10 text-primary font-semibold' : 'text-forest hover:bg-primary/5')}
                                onMouseDown={function () { select(option); }}
                                onMouseEnter={function () { setActiveIndex(i); }}
                            >
                                {option}
                            </li>
                        );
                    })}
                </ul>
            )}
            {isOpen && query && filtered.length === 0 && (
                <div className="absolute top-full left-0 right-0 mt-1 bg-surface rounded-xl shadow-soft ring-1 ring-sage/20 px-3 py-3 text-sm text-muted z-50">
                    No matching rooms
                </div>
            )}
        </div>
    );
};

window.Typeahead = Typeahead;