Sauci/apps/admin/src/components/ModelCombobox.tsx

import { useState, useRef, useEffect, useMemo } from 'react';
import { Input } from '@/components/ui/input';
import { useOpenRouterModels, formatContextLength, formatModelPricing, OpenRouterModel } from '@/hooks/useOpenRouterModels';
import { ChevronDown, Loader2, Search, Sparkles } from 'lucide-react';
import { cn } from '@/lib/utils';

interface ModelComboboxProps {
    value: string;
    onChange: (value: string) => void;
    placeholder?: string;
    className?: string;
    disabled?: boolean;
}

export function ModelCombobox({
    value,
    onChange,
    placeholder = 'Select or type model ID...',
    className,
    disabled = false,
}: ModelComboboxProps) {
    const { models, loading } = useOpenRouterModels();
    const [isOpen, setIsOpen] = useState(false);
    const [search, setSearch] = useState('');
    const containerRef = useRef<HTMLDivElement>(null);
    const inputRef = useRef<HTMLInputElement>(null);

    // Filter models based on search
    const filteredModels = useMemo(() => {
        const query = (search || value).toLowerCase().trim();
        if (!query) {
            // Show featured models when no search
            return models.slice(0, 15);
        }

        return models
            .filter(m =>
                m.id.toLowerCase().includes(query) ||
                m.name.toLowerCase().includes(query)
            )
            .slice(0, 20);
    }, [models, search, value]);

    // Find current model info
    const currentModel = useMemo(() => {
        return models.find(m => m.id === value);
    }, [models, value]);

    // Close on click outside
    useEffect(() => {
        function handleClickOutside(event: MouseEvent) {
            if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
                setIsOpen(false);
                setSearch('');
            }
        }

        document.addEventListener('mousedown', handleClickOutside);
        return () => document.removeEventListener('mousedown', handleClickOutside);
    }, []);

    // Handle keyboard navigation
    const handleKeyDown = (e: React.KeyboardEvent) => {
        if (e.key === 'Escape') {
            setIsOpen(false);
            setSearch('');
        } else if (e.key === 'ArrowDown' && !isOpen) {
            setIsOpen(true);
        }
    };

    const handleSelect = (model: OpenRouterModel) => {
        onChange(model.id);
        setIsOpen(false);
        setSearch('');
    };

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const newValue = e.target.value;
        setSearch(newValue);
        onChange(newValue);
        if (!isOpen && newValue) {
            setIsOpen(true);
        }
    };

    const handleInputFocus = () => {
        setIsOpen(true);
    };

    return (
        <div ref={containerRef} className={cn('relative', className)}>
            {/* Input with dropdown trigger */}
            <div className="relative">
                <Input
                    ref={inputRef}
                    value={search || value}
                    onChange={handleInputChange}
                    onFocus={handleInputFocus}
                    onKeyDown={handleKeyDown}
                    placeholder={placeholder}
                    disabled={disabled}
                    className="pr-8 font-mono text-sm"
                />
                <button
                    type="button"
                    onClick={() => setIsOpen(!isOpen)}
                    disabled={disabled}
                    className="absolute right-0 top-0 h-full px-2 text-muted-foreground hover:text-foreground disabled:opacity-50"
                >
                    {loading ? (
                        <Loader2 className="h-4 w-4 animate-spin" />
                    ) : (
                        <ChevronDown className={cn('h-4 w-4 transition-transform', isOpen && 'rotate-180')} />
                    )}
                </button>
            </div>

            {/* Current model info */}
            {currentModel && !isOpen && (
                <p className="text-xs text-muted-foreground mt-1 truncate">
                    {currentModel.name} - {formatContextLength(currentModel.context_length)} context
                </p>
            )}

            {/* Dropdown */}
            {isOpen && (
                <div className="absolute z-50 mt-1 w-full max-h-80 overflow-auto rounded-md border bg-popover shadow-lg">
                    {loading ? (
                        <div className="flex items-center justify-center py-6 text-muted-foreground">
                            <Loader2 className="h-4 w-4 animate-spin mr-2" />
                            Loading models...
                        </div>
                    ) : filteredModels.length === 0 ? (
                        <div className="py-6 text-center text-muted-foreground">
                            <Search className="h-4 w-4 mx-auto mb-2" />
                            <p className="text-sm">No models found</p>
                            <p className="text-xs mt-1">Type a custom model ID or refine your search</p>
                        </div>
                    ) : (
                        <div className="py-1">
                            {filteredModels.map((model, index) => {
                                const isFeatured = index < 8 && !search && !value;
                                return (
                                    <button
                                        key={model.id}
                                        type="button"
                                        onClick={() => handleSelect(model)}
                                        className={cn(
                                            'w-full px-3 py-2 text-left hover:bg-accent focus:bg-accent outline-none',
                                            model.id === value && 'bg-accent'
                                        )}
                                    >
                                        <div className="flex items-start gap-2">
                                            {isFeatured && (
                                                <Sparkles className="h-3 w-3 text-yellow-500 mt-1 flex-shrink-0" />
                                            )}
                                            <div className="flex-1 min-w-0">
                                                <div className="font-mono text-sm truncate">
                                                    {model.id}
                                                </div>
                                                <div className="flex items-center gap-2 text-xs text-muted-foreground mt-0.5">
                                                    <span>{formatContextLength(model.context_length)}</span>
                                                    <span>-</span>
                                                    <span>{formatModelPricing(model)}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </button>
                                );
                            })}
                        </div>
                    )}
                </div>
            )}
        </div>
    );
}