'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useMemo } from 'react';
import { Search, Puzzle } from 'lucide-react';
import { Input } from '../../ui/input.js';
import { Button } from '../../ui/button.js';
import { PageHeader } from '../../common/page-header/index.js';
import { EmptyState } from '../../common/empty-state/index.js';
import { SkillList } from './skill-list.js';
import { CategoryFilter } from './category-filter.js';
import { SkillDetailDrawer } from './skill-detail-drawer.js';
import { Separator } from '../../ui/separator.js';
import { AutoInjectedSkillsSection } from './auto-injected-skills-section.js';
function computeCategoryCounts(skills) {
    const counts = {
        Workflow: 0,
        'Code Generation': 0,
        Analysis: 0,
        Reference: 0,
    };
    for (const skill of skills) {
        counts[skill.category]++;
    }
    return counts;
}
export function SkillsPageClient({ skills, injectionConfig }) {
    const [searchQuery, setSearchQuery] = useState('');
    const [activeCategory, setActiveCategory] = useState(null);
    const [selectedSkill, setSelectedSkill] = useState(null);
    const categoryCounts = useMemo(() => computeCategoryCounts(skills), [skills]);
    const filteredSkills = useMemo(() => {
        const query = searchQuery.toLowerCase();
        return skills.filter((skill) => {
            if (activeCategory && skill.category !== activeCategory)
                return false;
            if (query) {
                const matchesName = skill.name.toLowerCase().includes(query);
                const matchesDescription = skill.description.toLowerCase().includes(query);
                if (!matchesName && !matchesDescription)
                    return false;
            }
            return true;
        });
    }, [skills, searchQuery, activeCategory]);
    const clearFilters = () => {
        setSearchQuery('');
        setActiveCategory(null);
    };
    // No skills installed at all
    if (skills.length === 0) {
        return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsx(PageHeader, { title: "Skills", description: "Claude Code skills available to this project" }), _jsx(AutoInjectedSkillsSection, { config: injectionConfig, discoveredSkills: skills }), _jsx(Separator, {}), _jsx(EmptyState, { icon: _jsx(Puzzle, { className: "size-10" }), title: "No skills found", description: "No Claude Code skills are installed. Add skills to .claude/skills/ to get started." })] }));
    }
    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsx(PageHeader, { title: "Skills", description: "Claude Code skills available to this project" }), _jsx(AutoInjectedSkillsSection, { config: injectionConfig, discoveredSkills: skills }), _jsx(Separator, {}), _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2" }), _jsx(Input, { placeholder: "Search skills...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "ps-9" })] }), _jsx(CategoryFilter, { activeCategory: activeCategory, onCategoryChange: setActiveCategory, counts: categoryCounts }), filteredSkills.length > 0 ? (_jsx(SkillList, { skills: filteredSkills, onSkillSelect: setSelectedSkill })) : (_jsx(EmptyState, { icon: _jsx(Search, { className: "size-10" }), title: "No matching skills", description: "No skills match your current search and filter criteria.", action: _jsx(Button, { variant: "outline", onClick: clearFilters, children: "Clear filters" }) })), _jsx(SkillDetailDrawer, { skill: selectedSkill, onClose: () => setSelectedSkill(null) })] }));
}
