import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { Box, Text, useInput } from "ink";
import { useState } from "react";
export function SkillSelector({ skills, onComplete, onSkip }) {
    // Start with all skills selected
    const [selectedSkills, setSelectedSkills] = useState(new Set(skills.map((s) => s.name)));
    const [highlightedIndex, setHighlightedIndex] = useState(0);
    // Item 0 is "All Skills", rest are individual skills
    const totalItems = skills.length + 1; // +1 for "All Skills" option
    const allSelected = selectedSkills.size === skills.length;
    useInput((input, key) => {
        if (key.escape) {
            onSkip();
            return;
        }
        if (key.return) {
            const selected = skills.filter((s) => selectedSkills.has(s.name));
            onComplete(selected);
            return;
        }
        if (key.upArrow) {
            setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : totalItems - 1));
            return;
        }
        if (key.downArrow) {
            setHighlightedIndex((prev) => (prev < totalItems - 1 ? prev + 1 : 0));
            return;
        }
        if (input === " ") {
            if (highlightedIndex === 0) {
                // Toggle all
                if (allSelected) {
                    setSelectedSkills(new Set());
                }
                else {
                    setSelectedSkills(new Set(skills.map((s) => s.name)));
                }
            }
            else {
                // Toggle individual skill
                const skill = skills[highlightedIndex - 1];
                const newSelected = new Set(selectedSkills);
                if (newSelected.has(skill.name)) {
                    newSelected.delete(skill.name);
                }
                else {
                    newSelected.add(skill.name);
                }
                setSelectedSkills(newSelected);
            }
        }
    });
    const renderCheckbox = (checked, highlighted) => {
        const box = checked ? "[x]" : "[ ]";
        return (_jsxs(Text, { color: highlighted ? "#A18CE5" : undefined, children: [highlighted ? ">" : " ", " ", box] }));
    };
    const truncateDescription = (desc, maxLen = 50) => {
        if (desc.length <= maxLen)
            return desc;
        return `${desc.substring(0, maxLen - 3)}...`;
    };
    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "#A18CE5", bold: true, children: "d3k Skill Installer" }) }), _jsx(Text, { dimColor: true, children: "Skills available from Vercel:" }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { children: [renderCheckbox(allSelected, highlightedIndex === 0), _jsxs(Text, { color: highlightedIndex === 0 ? "#A18CE5" : undefined, bold: true, children: [" ", "All Skills"] })] }), skills.map((skill, index) => {
                        const itemIndex = index + 1;
                        const isHighlighted = highlightedIndex === itemIndex;
                        const isSelected = selectedSkills.has(skill.name);
                        const label = skill.isNew ? "(new)" : "(update)";
                        return (_jsxs(Box, { children: [renderCheckbox(isSelected, isHighlighted), _jsxs(Text, { color: isHighlighted ? "#A18CE5" : undefined, children: [" ", skill.name, " ", _jsx(Text, { color: skill.isNew ? "green" : "yellow", children: label }), _jsxs(Text, { dimColor: true, children: [" - ", truncateDescription(skill.description)] })] })] }, skill.name));
                    })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Space to toggle, Enter to install, Esc to skip" }) })] }));
}
//# sourceMappingURL=SkillSelector.js.map