import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Text, useInput } from 'ink';
import { useMemo, useState } from 'react';
import { getColors } from '../../config/index.js';
const MODEL_SELECTION_VISIBLE_ITEMS = 12;
const PAGE_SIZE = MODEL_SELECTION_VISIBLE_ITEMS;
export function ModelSelectionList({ models, selectedIds, title, error, isNarrow, onToggle, onSelectAll, onDone, onBack, onManualEntry, }) {
    const colors = getColors();
    const [selectedIndex, setSelectedIndex] = useState(0);
    const [searchMode, setSearchMode] = useState(false);
    const [searchQuery, setSearchQuery] = useState('');
    const filteredModels = useMemo(() => {
        const normalizedQuery = searchQuery.trim().toLowerCase();
        if (!normalizedQuery)
            return models;
        return models.filter(model => model.name.toLowerCase().includes(normalizedQuery) ||
            model.id.toLowerCase().includes(normalizedQuery));
    }, [models, searchQuery]);
    const maxIndex = Math.max(0, filteredModels.length - 1);
    const highlightedIndex = Math.min(selectedIndex, maxIndex);
    const highlightedModel = filteredModels[highlightedIndex];
    const scrollStart = Math.max(0, Math.min(highlightedIndex - Math.floor(MODEL_SELECTION_VISIBLE_ITEMS / 2), filteredModels.length - MODEL_SELECTION_VISIBLE_ITEMS));
    const visibleModels = filteredModels.slice(scrollStart, scrollStart + MODEL_SELECTION_VISIBLE_ITEMS);
    const allSelected = models.length > 0 && selectedIds.size === models.length;
    const resultStart = filteredModels.length === 0 ? 0 : scrollStart + 1;
    const resultEnd = scrollStart + visibleModels.length;
    const toggleHighlightedModel = () => {
        if (highlightedModel) {
            onToggle(highlightedModel.id);
        }
    };
    useInput((input, key) => {
        if (key.escape) {
            if (searchMode) {
                setSearchMode(false);
                setSearchQuery('');
                setSelectedIndex(0);
            }
            else {
                onBack();
            }
            return;
        }
        if (key.shift && key.tab) {
            onBack();
            return;
        }
        if (searchMode) {
            if (key.backspace || key.delete) {
                setSearchQuery(prev => {
                    const nextQuery = prev.slice(0, -1);
                    if (nextQuery === '') {
                        setSearchMode(false);
                    }
                    return nextQuery;
                });
                setSelectedIndex(0);
            }
            else if (key.upArrow) {
                setSelectedIndex(prev => Math.max(0, prev - 1));
            }
            else if (key.downArrow) {
                setSelectedIndex(prev => Math.min(maxIndex, prev + 1));
            }
            else if (key.pageUp) {
                setSelectedIndex(prev => Math.max(0, prev - PAGE_SIZE));
            }
            else if (key.pageDown) {
                setSelectedIndex(prev => Math.min(maxIndex, prev + PAGE_SIZE));
            }
            else if (key.return || input === ' ') {
                toggleHighlightedModel();
            }
            else if (input && input.length === 1 && !key.ctrl && !key.meta) {
                setSearchQuery(prev => prev + input);
                setSelectedIndex(0);
            }
            return;
        }
        if (key.upArrow) {
            setSelectedIndex(prev => Math.max(0, prev - 1));
        }
        else if (key.downArrow) {
            setSelectedIndex(prev => Math.min(maxIndex, prev + 1));
        }
        else if (key.pageUp) {
            setSelectedIndex(prev => Math.max(0, prev - PAGE_SIZE));
        }
        else if (key.pageDown) {
            setSelectedIndex(prev => Math.min(maxIndex, prev + PAGE_SIZE));
        }
        else if (key.return || input === ' ') {
            toggleHighlightedModel();
        }
        else if (input === '/') {
            setSearchMode(true);
            setSelectedIndex(0);
        }
        else if (input === 'a') {
            onSelectAll();
        }
        else if (input === 'd') {
            onDone();
        }
        else if (input === 'm') {
            onManualEntry();
        }
    });
    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: colors.primary, children: title }) }), _jsxs(Box, { marginBottom: 1, flexDirection: "column", children: [_jsxs(Text, { children: [selectedIds.size, " selected | ", resultStart, "-", resultEnd, "/", filteredModels.length, " models", searchQuery ? ` | filter: ${searchQuery}` : ''] }), _jsx(Text, { color: allSelected ? colors.success : colors.secondary, children: allSelected
                            ? '[✓] All models selected (press a to deselect all)'
                            : '[ ] Press a to select all models' })] }), searchMode && (_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: colors.primary, children: ["Search models: ", _jsx(Text, { bold: true, children: searchQuery || '_' })] }) })), _jsx(Box, { flexDirection: "column", children: visibleModels.length === 0 ? (_jsx(Text, { color: colors.secondary, children: searchQuery ? 'No matching models' : 'No models available' })) : (visibleModels.map((model, index) => {
                    const actualIndex = scrollStart + index;
                    const isHighlighted = actualIndex === highlightedIndex;
                    const isSelected = selectedIds.has(model.id);
                    return (_jsxs(Text, { wrap: "truncate-end", color: isHighlighted ? colors.primary : colors.text, bold: isHighlighted, children: [isHighlighted ? '❯' : ' ', " ", isSelected ? '[✓]' : '[ ]', ' ', model.name === model.id
                                ? model.id
                                : `${model.name} — ${model.id}`] }, model.id));
                })) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.success, children: "Done is always available: press d" }) }), error && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.error, children: error }) })), isNarrow ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: colors.secondary, children: "\u2191/\u2193: navigate" }), _jsx(Text, { color: colors.secondary, children: "Enter/Space: toggle" }), _jsx(Text, { color: colors.secondary, children: "/: search | a: all | d: done | m: manual" }), _jsx(Text, { color: colors.secondary, children: "Esc/Shift+Tab: back" })] })) : (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.secondary, children: "Up/Down: navigate | Enter/Space: toggle | /: search | a: select all | d: done | m: manual entry | Esc/Shift+Tab: back" }) }))] }));
}
//# sourceMappingURL=model-selection-list.js.map