'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useState } from 'react';
import { useRouter } from 'next/navigation';
import { Plus, X } from 'lucide-react';
import { toast } from 'sonner';
import { Badge } from '../../ui/badge.js';
import { Button } from '../../ui/button.js';
import { Card, CardContent, CardHeader, CardTitle } from '../../ui/card.js';
import { removeInjectedSkill } from '../../../app/actions/remove-injected-skill.js';
import { AddSkillDialog } from './add-skill-dialog.js';
export function AutoInjectedSkillsSection({ config, discoveredSkills, }) {
    const router = useRouter();
    const [addDialogOpen, setAddDialogOpen] = useState(false);
    const [removingSkill, setRemovingSkill] = useState(null);
    const skillDescriptions = useMemo(() => {
        const map = new Map();
        for (const s of discoveredSkills) {
            map.set(s.name, s.description);
        }
        return map;
    }, [discoveredSkills]);
    const handleRemove = async (skillName) => {
        setRemovingSkill(skillName);
        const result = await removeInjectedSkill(skillName);
        setRemovingSkill(null);
        if (!result.success) {
            toast.error(result.error ?? 'Failed to remove skill');
            return;
        }
        toast.success(`Removed "${skillName}" from feature skills`);
        router.refresh();
    };
    const handleAdded = () => {
        setAddDialogOpen(false);
        router.refresh();
    };
    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-base font-semibold", children: "Feature Skills" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "Curated skills included in new feature worktrees to guide the agent" })] }), config.skills.length > 0 ? (_jsx("div", { className: "grid gap-2 sm:grid-cols-2 lg:grid-cols-3", children: config.skills.map((skill) => (_jsx(InjectedSkillCard, { skill: skill, description: skillDescriptions.get(skill.name), onRemove: () => handleRemove(skill.name), isRemoving: removingSkill === skill.name }, skill.name))) })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: "No skills configured. Add skills to guide the agent when working on new features." })), _jsx("div", { children: _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setAddDialogOpen(true), "data-testid": "add-injected-skill-button", children: [_jsx(Plus, { className: "mr-1.5 size-4" }), "Add Skill"] }) }), _jsx(AddSkillDialog, { open: addDialogOpen, onOpenChange: setAddDialogOpen, onAdded: handleAdded, discoveredSkills: discoveredSkills, existingSkillNames: config.skills.map((s) => s.name) })] }));
}
function InjectedSkillCard({ skill, description, onRemove, isRemoving, }) {
    return (_jsxs(Card, { "data-testid": `injected-skill-${skill.name}`, children: [_jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-2 pb-2", children: [_jsx("div", { className: "min-w-0", children: _jsx(CardTitle, { className: "truncate text-sm", children: skill.name }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", className: "shrink-0", onClick: onRemove, disabled: isRemoving, "aria-label": `Remove ${skill.name}`, "data-testid": `remove-injected-skill-${skill.name}`, children: _jsx(X, { className: "size-4" }) })] }), _jsxs(CardContent, { className: "space-y-2 pt-0", children: [description ? (_jsx("p", { className: "text-muted-foreground line-clamp-2 text-xs", children: description })) : null, _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Badge, { variant: skill.type === 'local' ? 'secondary' : 'outline', className: "text-xs", children: skill.type === 'local' ? 'Local' : 'Remote' }), _jsx("span", { className: "text-muted-foreground max-w-37.5 truncate text-xs", children: skill.source })] })] })] }));
}
