import { useId, useMemo, useRef, useState } from 'react';
import { ChevronDown } from 'lucide-react';

export interface PractitionerComboOption {
    key: string;
    name: string;
    /** Role and specialty, when the record carries them. */
    detail?: string;
    /** The signed-in viewer. */
    isYou?: boolean;
}

interface PractitionerComboboxProps {
    label: string;
    allLabel: string;
    options: PractitionerComboOption[];
    /** `undefined` is the all-practitioners state. */
    selectedKey: string | undefined;
    onSelect: (key: string | undefined) => void;
}

const termsOf = (query: string) => query.trim().toLocaleLowerCase().split(/\s+/).filter(Boolean);

/** The "(you)" mark: a tag to the eye, the words in parentheses to a screen reader. */
const YouTag = ({ id }: { id?: string }) => (
    <span id={id} className="ahr-practitioner-combo__you">
        <span className="sr-only">(</span>you<span className="sr-only">)</span>
    </span>
);

export const matchSentence = (matched: number, total: number, query: string) =>
    `${matched} of ${total} ${total === 1 ? 'practitioner' : 'practitioners'} ${matched === 1 ? 'matches' : 'match'} “${query.trim()}”`;

export const noMatchSentence = (query: string) => `No practitioner matches “${query.trim()}”.`;

export const clearTheBoxSentence = (total: number) =>
    `Clear the box to see ${total === 1 ? 'the one practitioner' : `all ${total}`}.`;

/** A type-ahead combobox: holds the current value, filters as you type, Escape restores. */
const PractitionerCombobox = ({ label, allLabel, options, selectedKey, onSelect }: PractitionerComboboxProps) => {
    const baseId = useId();
    const inputId = `${baseId}-input`;
    const listId = `${baseId}-list`;
    const youId = `${baseId}-you`;
    const inputRef = useRef<HTMLInputElement>(null);
    const [open, setOpen] = useState(false);
    // null while not typing, so the field shows what it holds.
    const [query, setQuery] = useState<string | null>(null);
    const [activeIndex, setActiveIndex] = useState(-1);

    const selected = selectedKey ? options.find((option) => option.key === selectedKey) : undefined;
    const typing = query !== null && query.trim() !== '';

    const shown = useMemo<(PractitionerComboOption | null)[]>(() => {
        if (!typing) return [null, ...options];
        const terms = termsOf(query ?? '');
        return options.filter((option) => {
            const name = option.name.toLocaleLowerCase();
            return terms.every((term) => name.includes(term));
        });
    }, [options, query, typing]);

    const close = () => {
        setOpen(false);
        setQuery(null);
        setActiveIndex(-1);
    };

    const choose = (option: PractitionerComboOption | null) => {
        onSelect(option?.key);
        close();
    };

    const optionId = (index: number) => `${baseId}-opt-${index}`;

    return (
        <div
            className="ahr-practitioner-combo"
            onBlurCapture={(event) => {
                if (!event.currentTarget.contains(event.relatedTarget as Node | null)) close();
            }}
        >
            <label className="ahr-practitioner-combo__label" htmlFor={inputId}>{label}</label>
            {/* The box only hands a pointer press to the input, which keyboard users reach directly. */}
            <div
                role="presentation"
                className={`ak-field-shell ahr-practitioner-combo__box${open ? ' is-open' : ''}`}
                onMouseDown={(event) => {
                    if (event.target !== inputRef.current) {
                        event.preventDefault();
                        inputRef.current?.focus();
                    }
                }}
            >
                <input
                    ref={inputRef}
                    id={inputId}
                    className={`ahr-practitioner-combo__input${query !== null ? ' is-typing' : ''}`}
                    role="combobox"
                    aria-autocomplete="list"
                    aria-expanded={open}
                    aria-controls={listId}
                    aria-describedby={query === null && selected?.isYou ? youId : undefined}
                    aria-activedescendant={open && activeIndex >= 0 ? optionId(activeIndex) : undefined}
                    autoComplete="off"
                    spellCheck={false}
                    value={query ?? (selected ? selected.name : allLabel)}
                    onFocus={(event) => {
                        setOpen(true);
                        event.currentTarget.select();
                    }}
                    onChange={(event) => {
                        setQuery(event.target.value);
                        setOpen(true);
                        setActiveIndex(event.target.value.trim() ? 0 : -1);
                    }}
                    onKeyDown={(event) => {
                        if (event.key === 'Escape') {
                            event.preventDefault();
                            close();
                            return;
                        }
                        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
                            event.preventDefault();
                            setOpen(true);
                            if (shown.length > 0) {
                                const step = event.key === 'ArrowDown' ? 1 : -1;
                                setActiveIndex((current) => (current + step + shown.length) % shown.length);
                            }
                            return;
                        }
                        if (event.key === 'Enter' && open && activeIndex >= 0 && activeIndex < shown.length) {
                            event.preventDefault();
                            choose(shown[activeIndex]);
                        }
                    }}
                />
                {query === null && selected?.isYou && <YouTag id={youId} />}
                <ChevronDown className="ahr-practitioner-combo__chevron" aria-hidden="true" />
            </div>

            {open && (
                <div className="ahr-practitioner-combo__menu">
                    <ul id={listId} role="listbox" aria-label={label} className="ahr-practitioner-combo__list">
                        {shown.map((option, index) => (
                            <li
                                key={option?.key ?? 'all'}
                                id={optionId(index)}
                                role="option"
                                aria-selected={(option?.key ?? undefined) === selectedKey}
                                className={`ahr-practitioner-combo__option${index === activeIndex ? ' is-active' : ''}`}
                                // Chosen on mousedown, as in the shared combobox: the keyboard picks through the input, and
                                // preventing the default keeps focus there.
                                onMouseDown={(event) => {
                                    event.preventDefault();
                                    choose(option);
                                }}
                                onMouseEnter={() => setActiveIndex(index)}
                            >
                                <span className="ahr-practitioner-combo__name">
                                    {option ? option.name : allLabel}
                                    {option?.isYou && <> <YouTag /></>}
                                </span>
                                {option?.detail && (
                                    <span className="ahr-practitioner-combo__detail">{option.detail}</span>
                                )}
                            </li>
                        ))}
                    </ul>
                    {typing && (shown.length > 0 ? (
                        <p className="ahr-practitioner-combo__count" role="status">
                            {matchSentence(shown.length, options.length, query ?? '')}
                        </p>
                    ) : (
                        <p className="ahr-practitioner-combo__zero" role="status">
                            {noMatchSentence(query ?? '')}
                            <span className="ahr-practitioner-combo__zero-hint">{clearTheBoxSentence(options.length)}</span>
                        </p>
                    ))}
                </div>
            )}
        </div>
    );
};

export default PractitionerCombobox;