NetMesh/components/ui/combobox.tsx

import { Check, ChevronDown, Plus, X } from "lucide-react"
import * as React from "react"
import { cn } from "../../lib/utils"
import { Popover, PopoverContent, PopoverTrigger } from "./popover"

export interface ComboboxOption {
    value: string;
    label: string;
    sublabel?: string;
    icon?: React.ReactNode;
    labelStyle?: React.CSSProperties;
}

interface ComboboxProps {
    options: ComboboxOption[];
    value?: string;
    onValueChange?: (value: string) => void;
    placeholder?: string;
    emptyText?: string;
    allowCreate?: boolean;
    onCreateNew?: (value: string) => void;
    createText?: string;
    icon?: React.ReactNode;
    className?: string;
    triggerClassName?: string;
    inputStyle?: React.CSSProperties;
    onInputValueChange?: (value: string) => void;
    disabled?: boolean;
    clearable?: boolean;
    selectValueOnFocus?: boolean;
    ariaLabel?: string;
}

export const comboboxWheelDeltaToPixels = (deltaY: number, deltaMode: number): number => {
    if (deltaMode === 1) return deltaY * 16
    if (deltaMode === 2) return deltaY * 280
    return deltaY
}

export type ComboboxScrollableTarget = {
    clientHeight: number;
    scrollHeight: number;
    scrollTop: number;
}

export const filterComboboxOptions = (
    options: ComboboxOption[],
    inputValue: string,
    isSearching: boolean,
): ComboboxOption[] => {
    if (!isSearching || !inputValue.trim()) return options
    const lower = inputValue.trim().toLowerCase()
    return options.filter(
        (option) =>
            option.label.toLowerCase().includes(lower) ||
            option.value.toLowerCase().includes(lower) ||
            option.sublabel?.toLowerCase().includes(lower)
    )
}

export const applyComboboxWheelScroll = (
    target: ComboboxScrollableTarget,
    deltaY: number,
    deltaMode: number,
): boolean => {
    if (target.scrollHeight <= target.clientHeight) return false

    target.scrollTop += comboboxWheelDeltaToPixels(deltaY, deltaMode)
    return true
}

export const getNextComboboxActiveIndex = (
    currentIndex: number,
    optionCount: number,
    direction: 1 | -1,
): number => {
    if (optionCount <= 0) return -1
    if (currentIndex < 0 || currentIndex >= optionCount) {
        return direction === 1 ? 0 : optionCount - 1
    }
    return (currentIndex + direction + optionCount) % optionCount
}

export type ComboboxFocusableInput = Pick<HTMLInputElement, "focus" | "select">;

export const focusComboboxInput = (
    input: ComboboxFocusableInput | null,
    selectValue: boolean,
): void => {
    input?.focus()
    if (selectValue) input?.select()
}

export const selectComboboxInputIfFocused = (
    input: ComboboxFocusableInput | null,
    activeElement: Element | null,
): void => {
    if (input && input === activeElement) input.select()
}

export const canComboboxOpen = (disabled: boolean, nextOpen: boolean): boolean =>
    !disabled || !nextOpen

/**
 * Incremental rendering limits for large option lists (e.g. the font pickers
 * can list hundreds of locally installed fonts). Rendering every option at
 * once freezes the UI, so we mount an initial slice and grow the window as
 * the user scrolls deeper, and slide the bounded window when arrow
 * navigation jumps to an option beyond it.
 */
export const COMBOBOX_INITIAL_RENDER_LIMIT = 60
export const COMBOBOX_RENDER_LIMIT_STEP = 120
const COMBOBOX_EXPAND_SCROLL_THRESHOLD_PX = 80

export const comboboxNextRenderLimit = (
    currentLimit: number,
    optionCount: number,
): number | null => {
    if (optionCount <= currentLimit) return null
    return Math.min(currentLimit + COMBOBOX_RENDER_LIMIT_STEP, optionCount)
}

export const shouldExpandComboboxWindow = (
    target: ComboboxScrollableTarget,
    renderedCount: number,
    optionCount: number,
): boolean => {
    if (renderedCount >= optionCount) return false
    const distanceFromBottom = target.scrollHeight - (target.scrollTop + target.clientHeight)
    return distanceFromBottom <= COMBOBOX_EXPAND_SCROLL_THRESHOLD_PX
}

export const shouldResetComboboxWindow = (target: ComboboxScrollableTarget): boolean =>
    target.scrollTop <= COMBOBOX_EXPAND_SCROLL_THRESHOLD_PX

/**
 * Keyboard navigation can land beyond the mounted window (e.g. ArrowUp wraps
 * straight to the last option). Instead of growing the prefix until that
 * index is mounted — which mounts every row for large lists — slide the
 * bounded window so the destination sits at its edge. Returns the new window
 * start, or null when the active option is already mounted.
 */
export const comboboxWindowStartForActiveIndex = (
    activeOptionIndex: number,
    windowStart: number,
    renderLimit: number,
    optionCount: number,
): number | null => {
    if (optionCount <= 0 || activeOptionIndex < 0) return null
    if (activeOptionIndex < windowStart) return activeOptionIndex
    if (activeOptionIndex >= windowStart + renderLimit) {
        return Math.max(0, Math.min(activeOptionIndex - renderLimit + 1, optionCount - renderLimit))
    }
    return null
}

function ComboboxOptionsList({
    children,
    id,
    listbox = false,
    onScrollCapture,
    scrollRef,
}: {
    children: React.ReactNode;
    id?: string;
    listbox?: boolean;
    onScrollCapture?: React.UIEventHandler<HTMLDivElement>;
    scrollRef?: React.RefObject<HTMLDivElement | null>;
}) {
    const handleWheelCapture = (event: React.WheelEvent<HTMLDivElement>) => {
        const handled = applyComboboxWheelScroll(event.currentTarget, event.deltaY, event.deltaMode)
        if (!handled) return

        event.preventDefault()
        event.stopPropagation()
        event.nativeEvent.stopImmediatePropagation()
    }

    return (
        <div
            id={id}
            ref={scrollRef}
            role={listbox ? "listbox" : undefined}
            className="max-h-[280px] overflow-y-auto overscroll-contain p-1"
            onWheelCapture={handleWheelCapture}
            onScrollCapture={onScrollCapture}
        >
            {children}
        </div>
    )
}

export function Combobox({
    options,
    value,
    onValueChange,
    placeholder = "Select...",
    emptyText = "No results found",
    allowCreate = false,
    onCreateNew,
    createText = "Create",
    icon,
    className,
    triggerClassName,
    inputStyle,
    onInputValueChange,
    disabled = false,
    clearable = true,
    selectValueOnFocus = false,
    ariaLabel,
}: ComboboxProps) {
    const [open, setOpen] = React.useState(false)
    const [inputValue, setInputValue] = React.useState("")
    const [activeIndex, setActiveIndex] = React.useState(-1)
    // Track if user is actively searching (typed something after opening)
    const [isSearching, setIsSearching] = React.useState(false)
    // Incremental rendering window for very large option lists
    const [renderLimit, setRenderLimit] = React.useState(COMBOBOX_INITIAL_RENDER_LIMIT)
    // First mounted option index, so keyboard jumps slide the window instead
    // of mounting the entire prefix of a large list.
    const [windowStart, setWindowStart] = React.useState(0)
    const inputRef = React.useRef<HTMLInputElement>(null)
    const wasOpenRef = React.useRef(false)
    const activeOptionRef = React.useRef<HTMLButtonElement>(null)
    const optionsScrollRef = React.useRef<HTMLDivElement>(null)
    // True while scroll events on the options list are caused by this
    // component scrolling the active option into view (keyboard navigation,
    // mouse hover) rather than by the user scrolling manually.
    const navigationalScrollRef = React.useRef(false)
    const listboxId = React.useId()

    // Sync input value with external value when not focused
    React.useEffect(() => {
        const wasOpen = wasOpenRef.current
        wasOpenRef.current = open

        if (!open) {
            const selected = options.find((opt) => opt.value === value)
            setInputValue(selected?.label || value || "")
            setIsSearching(false)

            if (wasOpen && selectValueOnFocus) {
                // The restored label lands after the close event. Reselect it on the next
                // frame so the next keystroke replaces it instead of appending to it.
                requestAnimationFrame(() => {
                    selectComboboxInputIfFocused(
                        inputRef.current,
                        typeof document === "undefined" ? null : document.activeElement,
                    )
                })
            }
        }
    }, [value, options, open, selectValueOnFocus])

    // Show all options when dropdown is open but user hasn't started searching
    const filteredOptions = React.useMemo(() => {
        return filterComboboxOptions(options, inputValue, isSearching)
    }, [options, inputValue, isSearching])

    // Restart the window from its initial size whenever the picker opens or
    // the filtered result set changes (option set, search mode, or query), so
    // a previously grown or slid window never persists across a changed list.
    // The reset happens during render (React discards the render output and
    // re-renders immediately after a render-phase state update), so a changed
    // result set is never committed with a stale, oversized window.
    const [windowKey, setWindowKey] = React.useState({ open, filteredOptions })
    if (windowKey.open !== open || windowKey.filteredOptions !== filteredOptions) {
        setWindowKey({ open, filteredOptions })
        setRenderLimit(COMBOBOX_INITIAL_RENDER_LIMIT)
        setWindowStart(0)
    }

    const renderedOptions = React.useMemo(() => {
        return filteredOptions.slice(windowStart, windowStart + renderLimit)
    }, [filteredOptions, windowStart, renderLimit])

    // Resetting the render window alone is not enough: the listbox DOM node
    // keeps (or clamps) its previous scrollTop, so a fresh initial slice
    // would be displayed near its bottom instead of at its first match.
    React.useEffect(() => {
        if (optionsScrollRef.current) optionsScrollRef.current.scrollTop = 0
    }, [open, filteredOptions])

    const expandRenderWindow = React.useCallback(() => {
        setRenderLimit((current) => {
            const next = comboboxNextRenderLimit(current, options.length)
            return next ?? current
        })
    }, [options.length])

    const handleOptionsScrollCapture = React.useCallback((event: React.UIEvent<HTMLDivElement>) => {
        const target = event.currentTarget
        const scrollTarget = {
            clientHeight: target.clientHeight,
            scrollHeight: target.scrollHeight,
            scrollTop: target.scrollTop,
        }
        // Scrolling back to the top restores the initial window so options
        // above a slid window become reachable again. The active index must
        // be cleared too, otherwise the active-option effect immediately
        // slides the window back to a stale active option.
        // Scrolls emitted by scrolling the active option into view are not
        // manual scrolls: skipping the reset keeps ArrowUp navigation able to
        // slide into the preceding window without losing the active option.
        if (windowStart > 0 && shouldResetComboboxWindow(scrollTarget)) {
            if (navigationalScrollRef.current) return
            setActiveIndex(-1)
            setWindowStart(0)
            setRenderLimit(COMBOBOX_INITIAL_RENDER_LIMIT)
            return
        }
        // Programmatic scrolls from scrolling the active option into view can
        // also land near the bottom of a slid window (e.g. at the last window
        // while keyboard-navigating). Those are not manual scrolls either, so
        // skip expansion to keep the keyboard window at a fixed size instead
        // of growing it on every ArrowUp/ArrowDown wrap boundary.
        if (navigationalScrollRef.current) return
        if (!shouldExpandComboboxWindow(scrollTarget, renderedOptions.length, filteredOptions.length)) {
            return
        }
        // A slid window that already reaches the final option cannot mount
        // more rows by growing renderLimit (the slice is capped by the option
        // count), so growing it here without mounting anything would leave an
        // inflated limit behind; a later wrap back to index 0 would then reset
        // windowStart to zero and mount the entire grown prefix in one commit.
        if (windowStart + renderedOptions.length >= filteredOptions.length) return
        expandRenderWindow()
    }, [windowStart, renderedOptions.length, filteredOptions.length, expandRenderWindow])

    const showCreateOption = React.useMemo(() => {
        if (!allowCreate || !inputValue.trim() || !isSearching) return false
        const lower = inputValue.toLowerCase().trim()
        return !options.some((opt) => opt.value.toLowerCase() === lower || opt.label.toLowerCase() === lower)
    }, [allowCreate, inputValue, options, isSearching])

    const selectableOptionCount = filteredOptions.length + (showCreateOption ? 1 : 0)
    const hasActiveOption = activeIndex >= 0 && activeIndex < selectableOptionCount

    // Keyboard navigation must never land on an option that is not mounted
    // yet, otherwise its aria-activedescendant id would not exist. Slide the
    // bounded window so the destination is mounted without mounting the
    // entire prefix of a large list. This runs during render (React discards
    // the render and re-renders immediately after a render-phase state
    // update), so the commit that exposes a new active descendant already
    // has that option mounted — a post-commit effect would commit an
    // aria-activedescendant id that does not exist in the DOM yet.
    const [activeWindowKey, setActiveWindowKey] = React.useState({
        activeIndex,
        showCreateOption,
        windowStart,
        renderLimit,
        filteredCount: filteredOptions.length,
    })
    if (
        activeIndex >= 0 &&
        (activeWindowKey.activeIndex !== activeIndex ||
            activeWindowKey.showCreateOption !== showCreateOption ||
            activeWindowKey.windowStart !== windowStart ||
            activeWindowKey.renderLimit !== renderLimit ||
            activeWindowKey.filteredCount !== filteredOptions.length)
    ) {
        setActiveWindowKey({
            activeIndex,
            showCreateOption,
            windowStart,
            renderLimit,
            filteredCount: filteredOptions.length,
        })
        const optionIndex = activeIndex - (showCreateOption ? 1 : 0)
        const nextWindowStart = comboboxWindowStartForActiveIndex(
            optionIndex,
            windowStart,
            renderLimit,
            filteredOptions.length,
        )
        if (nextWindowStart !== null) setWindowStart(nextWindowStart)
    }

    React.useEffect(() => {
        // Scrolling the active option into view emits scroll events even when
        // keyboard navigation slides the window toward the top of the list.
        // Mark them as navigational so the manual-scroll reset below does not
        // mistake them for the user scrolling back to the top, which would
        // clear the active option and make preceding windows unreachable by
        // ArrowUp. The flag is cleared on the next frame, once the scroll
        // events for this update have been dispatched.
        navigationalScrollRef.current = true
        activeOptionRef.current?.scrollIntoView({ block: 'nearest' })
        requestAnimationFrame(() => {
            navigationalScrollRef.current = false
        })
    }, [activeIndex, renderedOptions.length, windowStart])

    React.useEffect(() => {
        if (!disabled || !open) return
        setOpen(false)
        setActiveIndex(-1)
        setIsSearching(false)
        onInputValueChange?.(value ?? "")
    }, [disabled, open, onInputValueChange, value])

    const handleSelect = (optValue: string) => {
        if (disabled) return
        onValueChange?.(optValue)
        onInputValueChange?.(optValue)
        setOpen(false)
        setActiveIndex(-1)
        const selected = options.find((opt) => opt.value === optValue)
        setInputValue(selected?.label || optValue)
    }

    const handleCreate = () => {
        if (disabled) return
        const newValue = inputValue.trim()
        if (newValue) {
            onCreateNew?.(newValue)
            onValueChange?.(newValue)
            onInputValueChange?.(newValue)
            setOpen(false)
            setActiveIndex(-1)
        }
    }

    const focusAndSelectInput = () => {
        // Defer so selection wins over click-to-place-caret on focus.
        requestAnimationFrame(() => {
            focusComboboxInput(inputRef.current, true)
        })
    }

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setInputValue(e.target.value)
        onInputValueChange?.(e.target.value)
        setIsSearching(true)
        setActiveIndex(-1)
        if (!open) setOpen(true)
    }

    const handleInputFocus = () => {
        if (selectValueOnFocus) focusAndSelectInput()
    }

    const handleOpenChange = (nextOpen: boolean) => {
        if (!canComboboxOpen(disabled, nextOpen)) return
        setOpen(nextOpen)
        setActiveIndex(-1)
        if (nextOpen) {
            if (selectValueOnFocus) {
                // Opening a closed picker from its chevron should also replace on first keystroke.
                focusAndSelectInput()
            }
        } else {
            onInputValueChange?.(value ?? "")
        }
    }

    const handleInputKeyDown = (e: React.KeyboardEvent) => {
        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
            e.preventDefault()
            if (!open) setOpen(true)
            const direction = e.key === 'ArrowDown' ? 1 : -1
            setActiveIndex((current) =>
                getNextComboboxActiveIndex(current, selectableOptionCount, direction)
            )
        } else if (e.key === 'Enter') {
            e.preventDefault()
            if (hasActiveOption) {
                if (showCreateOption && activeIndex === 0) {
                    handleCreate()
                } else {
                    const optionIndex = activeIndex - (showCreateOption ? 1 : 0)
                    const activeOption = filteredOptions[optionIndex]
                    if (activeOption) handleSelect(activeOption.value)
                }
            } else if (showCreateOption) {
                handleCreate()
            } else if (filteredOptions.length === 1) {
                handleSelect(filteredOptions[0].value)
            }
        } else if (e.key === 'Escape') {
            handleOpenChange(false)
        }
    }

    const handleClear = (e: React.MouseEvent) => {
        if (disabled) return
        e.stopPropagation()
        setInputValue("")
        onInputValueChange?.("")
        onValueChange?.("")
        inputRef.current?.focus()
    }

    return (
        <Popover open={open && !disabled} onOpenChange={handleOpenChange}>
            <PopoverTrigger asChild disabled={disabled}>
                <div
                    aria-disabled={disabled}
                    className={cn(
                        "flex h-10 w-full items-center rounded-md border border-input bg-background text-sm min-w-0 overflow-hidden",
                        "hover:bg-secondary/50 transition-colors",
                        "focus-within:outline-none focus-within:ring-1 focus-within:ring-ring",
                        disabled && "cursor-not-allowed opacity-50 hover:bg-background",
                        triggerClassName
                    )}
                >
                    {icon && <span className="pl-3 shrink-0 text-muted-foreground">{icon}</span>}
                    <input
                        ref={inputRef}
                        type="text"
                        value={inputValue}
                        onChange={handleInputChange}
                        onFocus={handleInputFocus}
                        onKeyDown={handleInputKeyDown}
                        role="combobox"
                        aria-label={ariaLabel}
                        aria-autocomplete="list"
                        aria-expanded={open && !disabled}
                        aria-controls={listboxId}
                        aria-activedescendant={
                            open && !disabled && hasActiveOption
                                ? `${listboxId}-option-${activeIndex}`
                                : undefined
                        }
                        placeholder={placeholder}
                        style={inputStyle}
                        className="flex-1 min-w-0 h-full px-3 bg-transparent outline-none placeholder:text-muted-foreground"
                        disabled={disabled}
                    />
                    {clearable && !disabled && inputValue && (
                        <button
                            type="button"
                            onClick={handleClear}
                            className="pr-1 text-muted-foreground hover:text-foreground"
                        >
                            <X size={14} />
                        </button>
                    )}
                    <ChevronDown className="h-4 w-4 shrink-0 opacity-50 pr-3 box-content" />
                </div>
            </PopoverTrigger>
            <PopoverContent
                className={cn("app-no-drag p-0 border-border/60", className)}
                align="start"
                sideOffset={4}
                onOpenAutoFocus={(e) => e.preventDefault()}
                style={{ width: 'var(--radix-popover-trigger-width)' }}
            >
                {/* Options List */}
                <ComboboxOptionsList id={listboxId} listbox scrollRef={optionsScrollRef} onScrollCapture={handleOptionsScrollCapture}>
                    {filteredOptions.length === 0 && !showCreateOption ? (
                        <div className="py-4 text-center text-sm text-muted-foreground">
                            {emptyText}
                        </div>
                    ) : (
                        <>
                            {/* Create new option */}
                            {showCreateOption && (
                                <button
                                    ref={activeIndex === 0 ? activeOptionRef : undefined}
                                    id={`${listboxId}-option-0`}
                                    role="option"
                                    aria-selected={false}
                                    aria-posinset={1}
                                    aria-setsize={selectableOptionCount}
                                    tabIndex={-1}
                                    type="button"
                                    className={cn(
                                        "flex w-full items-center gap-3 px-3 py-2.5 rounded-md text-sm hover:bg-secondary/80 transition-colors text-left",
                                        activeIndex === 0 && "bg-secondary/80",
                                    )}
                                    onClick={handleCreate}
                                    onMouseEnter={() => setActiveIndex(0)}
                                >
                                    <Plus size={16} className="text-primary shrink-0" />
                                    <span className="text-muted-foreground">{createText}</span>
                                    <span className="font-medium text-foreground">{inputValue}</span>
                                </button>
                            )}

                            {/* Separator if both create and options exist */}
                            {showCreateOption && filteredOptions.length > 0 && (
                                <div className="h-px bg-border/60 my-1" />
                            )}

                            {/* Existing options (rendered incrementally for large lists) */}
                            {renderedOptions.map((option, optionIndex) => {
                                const selectableIndex = optionIndex + windowStart + (showCreateOption ? 1 : 0)
                                return (
                                    <button
                                        key={option.value}
                                        ref={activeIndex === selectableIndex ? activeOptionRef : undefined}
                                        id={`${listboxId}-option-${selectableIndex}`}
                                        role="option"
                                        aria-selected={value === option.value}
                                        aria-posinset={selectableIndex + 1}
                                        aria-setsize={selectableOptionCount}
                                        tabIndex={-1}
                                        type="button"
                                        className={cn(
                                            "flex w-full items-center gap-3 px-3 py-2.5 rounded-md text-sm transition-colors text-left",
                                            value === option.value
                                                ? "bg-primary/10 text-foreground"
                                                : "hover:bg-secondary/80",
                                            activeIndex === selectableIndex && "bg-secondary/80",
                                        )}
                                        onClick={() => handleSelect(option.value)}
                                        onMouseEnter={() => setActiveIndex(selectableIndex)}
                                    >
                                        {option.icon && (
                                            <span className="shrink-0 text-muted-foreground">{option.icon}</span>
                                        )}
                                        <div className="flex-1 min-w-0">
                                            <div className="truncate font-medium" style={option.labelStyle}>{option.label}</div>
                                            {option.sublabel && (
                                                <div className="text-xs text-muted-foreground truncate">
                                                    {option.sublabel}
                                                </div>
                                            )}
                                        </div>
                                        {value === option.value && (
                                            <Check size={16} className="shrink-0 text-primary" />
                                        )}
                                    </button>
                                )
                            })}
                        </>
                    )}
                </ComboboxOptionsList>
            </PopoverContent>
        </Popover>
    )
}

// Multi-select Combobox for tags
interface MultiComboboxProps {
    options: ComboboxOption[];
    values: string[];
    onValuesChange?: (values: string[]) => void;
    placeholder?: string;
    emptyText?: string;
    allowCreate?: boolean;
    onCreateNew?: (value: string) => void;
    createText?: string;
    icon?: React.ReactNode;
    className?: string;
    triggerClassName?: string;
    disabled?: boolean;
}

export function MultiCombobox({
    options,
    values,
    onValuesChange,
    placeholder = "Add...",
    emptyText = "No results found",
    allowCreate = false,
    onCreateNew,
    createText = "Create Tag",
    icon,
    className,
    triggerClassName,
    disabled = false,
}: MultiComboboxProps) {
    const [open, setOpen] = React.useState(false)
    const [inputValue, setInputValue] = React.useState("")
    const inputRef = React.useRef<HTMLInputElement>(null)

    const filteredOptions = React.useMemo(() => {
        if (!inputValue.trim()) return options
        const lower = inputValue.toLowerCase()
        return options.filter(
            (opt) =>
                opt.label.toLowerCase().includes(lower) ||
                opt.value.toLowerCase().includes(lower)
        )
    }, [options, inputValue])

    const showCreateOption = React.useMemo(() => {
        if (!allowCreate || !inputValue.trim()) return false
        const lower = inputValue.toLowerCase().trim()
        return !options.some((opt) => opt.value.toLowerCase() === lower || opt.label.toLowerCase() === lower)
    }, [allowCreate, inputValue, options])

    const handleToggle = (optValue: string) => {
        const newValues = values.includes(optValue)
            ? values.filter((v) => v !== optValue)
            : [...values, optValue]
        onValuesChange?.(newValues)
    }

    const handleCreate = () => {
        const newValue = inputValue.trim()
        if (newValue && !values.includes(newValue)) {
            onCreateNew?.(newValue)
            onValuesChange?.([...values, newValue])
            setInputValue("")
        }
    }

    const handleRemove = (e: React.MouseEvent, val: string) => {
        e.stopPropagation()
        onValuesChange?.(values.filter((v) => v !== val))
    }

    const handleInputKeyDown = (e: React.KeyboardEvent) => {
        if (e.key === 'Enter') {
            e.preventDefault()
            if (showCreateOption) {
                handleCreate()
            } else if (filteredOptions.length === 1 && !values.includes(filteredOptions[0].value)) {
                handleToggle(filteredOptions[0].value)
                setInputValue("")
            }
        } else if (e.key === 'Escape') {
            setOpen(false)
        } else if (e.key === 'Backspace' && !inputValue && values.length > 0) {
            // Remove last tag on backspace when input is empty
            onValuesChange?.(values.slice(0, -1))
        }
    }

    return (
        <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild disabled={disabled}>
                <div
                    className={cn(
                        "flex min-h-10 w-full items-center gap-1 rounded-md border border-input bg-background px-2 py-1.5 text-sm",
                        "hover:bg-secondary/50 transition-colors cursor-text",
                        "disabled:cursor-not-allowed disabled:opacity-50",
                        triggerClassName
                    )}
                    onClick={() => inputRef.current?.focus()}
                >
                    {icon && <span className="pl-1 shrink-0 text-muted-foreground">{icon}</span>}
                    <div className="flex-1 flex flex-wrap gap-1.5 items-center min-w-0">
                        {values.map((val) => (
                            <span
                                key={val}
                                className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-primary/10 text-primary text-xs font-medium"
                            >
                                {val}
                                <button
                                    type="button"
                                    onClick={(e) => handleRemove(e, val)}
                                    className="hover:bg-primary/20 rounded p-0.5"
                                >
                                    <X size={12} />
                                </button>
                            </span>
                        ))}
                        <input
                            ref={inputRef}
                            type="text"
                            value={inputValue}
                            onChange={(e) => {
                                setInputValue(e.target.value)
                                if (!open) setOpen(true)
                            }}
                            onKeyDown={handleInputKeyDown}
                            placeholder={values.length === 0 ? placeholder : ""}
                            className="flex-1 min-w-[60px] h-6 bg-transparent outline-none placeholder:text-muted-foreground text-sm"
                            disabled={disabled}
                        />
                    </div>
                </div>
            </PopoverTrigger>
            <PopoverContent
                className={cn("app-no-drag p-0 border-border/60", className)}
                align="start"
                sideOffset={4}
                onOpenAutoFocus={(e) => e.preventDefault()}
                style={{ width: 'var(--radix-popover-trigger-width)' }}
            >
                {/* Options List */}
                <ComboboxOptionsList>
                    {filteredOptions.length === 0 && !showCreateOption ? (
                        <div className="py-4 text-center text-sm text-muted-foreground">
                            {emptyText}
                        </div>
                    ) : (
                        <>
                            {/* Create new option */}
                            {showCreateOption && (
                                <button
                                    type="button"
                                    className="flex w-full items-center gap-3 px-3 py-2.5 rounded-md text-sm hover:bg-secondary/80 transition-colors text-left"
                                    onClick={handleCreate}
                                >
                                    <Plus size={16} className="text-primary shrink-0" />
                                    <span className="text-muted-foreground">{createText}</span>
                                    <span className="font-medium text-foreground">{inputValue}</span>
                                </button>
                            )}

                            {/* Separator if both create and options exist */}
                            {showCreateOption && filteredOptions.length > 0 && (
                                <div className="h-px bg-border/60 my-1" />
                            )}

                            {/* Existing options */}
                            {filteredOptions.map((option) => {
                                const isSelected = values.includes(option.value)
                                return (
                                    <button
                                        key={option.value}
                                        type="button"
                                        className={cn(
                                            "flex w-full items-center gap-3 px-3 py-2.5 rounded-md text-sm transition-colors text-left",
                                            isSelected
                                                ? "bg-primary/10 text-foreground"
                                                : "hover:bg-secondary/80"
                                        )}
                                        onClick={() => {
                                            handleToggle(option.value)
                                            setInputValue("")
                                        }}
                                    >
                                        <div className={cn(
                                            "w-4 h-4 rounded border flex items-center justify-center shrink-0",
                                            isSelected ? "bg-primary border-primary" : "border-muted-foreground/40"
                                        )}>
                                            {isSelected && <Check size={12} className="text-primary-foreground" />}
                                        </div>
                                        <span className="truncate flex-1">{option.label}</span>
                                    </button>
                                )
                            })}
                        </>
                    )}
                </ComboboxOptionsList>
            </PopoverContent>
        </Popover>
    )
}

export default Combobox