import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState, useEffect } from "react";
import { Box, Text, useInput } from "ink";
import { useTheme } from "../theme/theme.js";
import { useTerminalSize } from "../hooks/useTerminalSize.js";
import { discoverSkills } from "../../core/skills.js";
import { getAppPaths } from "../../config.js";
// ── Banner ───────────────────────────────────────────────
const SKILL_LOGO = [
    " \u2588\u2580\u2580\u2580 \u2580\u2580\u2580\u2588",
    " \u2588\u2580\u2580   \u2584\u2580 ",
    " \u2588\u2584\u2584\u2584 \u2588\u2584\u2584\u2584",
];
const GRADIENT = [
    "#a78bfa",
    "#b49afa",
    "#c1a9f4",
    "#ceb8ee",
    "#60a5fa",
    "#ceb8ee",
    "#c1a9f4",
    "#b49afa",
];
const GAP = "   ";
const LOGO_WIDTH = 9;
const SIDE_BY_SIDE_MIN = LOGO_WIDTH + GAP.length + 20;
function SkillGradientText({ text }) {
    const chars = [];
    let colorIdx = 0;
    for (let i = 0; i < text.length; i++) {
        const ch = text[i];
        if (ch === " ") {
            chars.push(ch);
        }
        else {
            const color = GRADIENT[colorIdx % GRADIENT.length];
            chars.push(_jsx(Text, { color: color, children: ch }, i));
            colorIdx++;
        }
    }
    return _jsx(Text, { children: chars });
}
export function SkillsOverlay({ cwd, onClose }) {
    const theme = useTheme();
    const { columns } = useTerminalSize();
    const [skills, setSkills] = useState([]);
    const [selectedIndex, setSelectedIndex] = useState(0);
    const [loaded, setLoaded] = useState(false);
    const [expandedSkill, setExpandedSkill] = useState(null);
    // Load skills on mount — delegate to the canonical loader so flat (.md)
    // and directory-layout (<dir>/SKILL.md) skills both show up.
    useEffect(() => {
        void discoverSkills({ globalSkillsDir: getAppPaths().skillsDir, projectDir: cwd }).then((s) => {
            setSkills(s);
            setLoaded(true);
        });
    }, [cwd]);
    // Clamp index
    useEffect(() => {
        if (skills.length === 0) {
            setSelectedIndex(0);
        }
        else if (selectedIndex >= skills.length) {
            setSelectedIndex(skills.length - 1);
        }
    }, [skills.length, selectedIndex]);
    useInput((input, key) => {
        // Close overlay
        if (key.escape) {
            onClose();
            return;
        }
        if (key.upArrow || input === "k") {
            setSelectedIndex((i) => Math.max(0, i - 1));
            setExpandedSkill(null);
            return;
        }
        if (key.downArrow || input === "j") {
            setSelectedIndex((i) => Math.min(skills.length - 1, i + 1));
            setExpandedSkill(null);
            return;
        }
        // Toggle expand/collapse skill content preview
        if (key.return || input === " ") {
            const skill = skills[selectedIndex];
            if (skill) {
                setExpandedSkill((prev) => (prev === skill.name ? null : skill.name));
            }
            return;
        }
    });
    const maxVisible = 15;
    const startIdx = Math.max(0, selectedIndex - maxVisible + 1);
    const visibleSkills = skills.slice(startIdx, startIdx + maxVisible);
    const home = process.env.HOME ?? "";
    const displayPath = home && cwd.startsWith(home) ? "~" + cwd.slice(home.length) : cwd;
    const projectCount = skills.filter((s) => s.source === "project").length;
    const globalCount = skills.filter((s) => s.source === "global").length;
    return (_jsxs(Box, { flexDirection: "column", children: [columns < SIDE_BY_SIDE_MIN ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, width: columns, children: [_jsx(SkillGradientText, { text: SKILL_LOGO[0] }), _jsx(SkillGradientText, { text: SKILL_LOGO[1] }), _jsx(SkillGradientText, { text: SKILL_LOGO[2] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "#a78bfa", bold: true, children: "Skills Pane" }) }), _jsx(Text, { color: theme.textDim, wrap: "truncate", children: displayPath }), _jsxs(Text, { children: [_jsxs(Text, { color: "#a78bfa", children: [projectCount, " project"] }), _jsx(Text, { color: theme.textDim, children: " \u00B7 " }), _jsxs(Text, { color: "#60a5fa", children: [globalCount, " global"] }), _jsx(Text, { color: theme.textDim, children: " \u00B7 " }), _jsxs(Text, { color: theme.text, children: [skills.length, " total"] })] })] })) : (_jsxs(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, width: columns, children: [_jsxs(Box, { children: [_jsx(SkillGradientText, { text: SKILL_LOGO[0] }), _jsx(Text, { children: GAP }), _jsx(Text, { color: "#a78bfa", bold: true, children: "Skills Pane" })] }), _jsxs(Box, { children: [_jsx(SkillGradientText, { text: SKILL_LOGO[1] }), _jsx(Text, { children: GAP }), _jsx(Text, { color: theme.textDim, wrap: "truncate", children: displayPath })] }), _jsxs(Box, { children: [_jsx(SkillGradientText, { text: SKILL_LOGO[2] }), _jsx(Text, { children: GAP }), _jsxs(Text, { children: [_jsxs(Text, { color: "#a78bfa", children: [projectCount, " project"] }), _jsx(Text, { color: theme.textDim, children: " \u00B7 " }), _jsxs(Text, { color: "#60a5fa", children: [globalCount, " global"] }), _jsx(Text, { color: theme.textDim, children: " \u00B7 " }), _jsxs(Text, { color: theme.text, children: [skills.length, " total"] })] })] })] })), loaded && skills.length === 0 && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: theme.textDim, children: ["  No skills found. Add ", _jsx(Text, { color: theme.primary, children: ".md" }), " files to ", _jsx(Text, { color: theme.primary, children: ".ezcoder/skills/" })] }), _jsxs(Text, { color: theme.textDim, children: ["  ", _jsx(Text, { color: theme.textDim, children: "Skills are invoked by the agent via the skill tool." })] })] })), visibleSkills.map((skill, vi) => {
                const realIdx = startIdx + vi;
                const selected = realIdx === selectedIndex;
                const prefix = selected ? "❯ " : "  ";
                const sourceTag = skill.source === "project" ? "local" : "global";
                const sourceColor = skill.source === "project" ? "#a78bfa" : "#60a5fa";
                const isExpanded = expandedSkill === skill.name;
                return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: selected ? theme.primary : theme.text, bold: selected, children: [prefix, _jsx(Text, { color: selected ? theme.primary : "#e5e7eb", children: skill.name }), _jsx(Text, { color: theme.textDim, children: " " }), _jsxs(Text, { color: sourceColor, dimColor: !selected, children: ["[", sourceTag, "]"] })] }), isExpanded && skill.description && (_jsx(Box, { marginLeft: 4, children: _jsx(Text, { color: theme.text, children: skill.description }) }))] }, `${skill.source}:${skill.name}`));
            }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.textDim, children: [_jsx(Text, { color: theme.primary, children: "\u2191\u2193" }), " move · ", _jsx(Text, { color: theme.primary, children: "Enter" }), " expand · ", _jsx(Text, { color: theme.primary, children: "ESC" }), " close"] }) })] }));
}
//# sourceMappingURL=SkillsOverlay.js.map