'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { toast } from 'sonner';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, } from '../../ui/dialog.js';
import { Button } from '../../ui/button.js';
import { Input } from '../../ui/input.js';
import { Label } from '../../ui/label.js';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../ui/tabs.js';
import { addInjectedSkill } from '../../../app/actions/add-injected-skill.js';
export function AddSkillDialog({ open, onOpenChange, onAdded, discoveredSkills, existingSkillNames, }) {
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [remoteName, setRemoteName] = useState('');
    const [remoteSource, setRemoteSource] = useState('');
    const [remoteSkillName, setRemoteSkillName] = useState('');
    const availableSkills = discoveredSkills.filter((s) => !existingSkillNames.includes(s.name));
    const handleAddLocal = async (skill) => {
        setIsSubmitting(true);
        const result = await addInjectedSkill({
            name: skill.name,
            type: 'local',
            source: `.claude/skills/${skill.name}`,
        });
        setIsSubmitting(false);
        if (!result.success) {
            toast.error(result.error ?? 'Failed to add skill');
            return;
        }
        toast.success(`Added "${skill.name}" to feature skills`);
        onAdded();
    };
    const handleAddRemote = async () => {
        if (!remoteName.trim() || !remoteSource.trim()) {
            toast.error('Name and source are required');
            return;
        }
        setIsSubmitting(true);
        const result = await addInjectedSkill({
            name: remoteName.trim(),
            type: 'remote',
            source: remoteSource.trim(),
            ...(remoteSkillName.trim() && { remoteSkillName: remoteSkillName.trim() }),
        });
        setIsSubmitting(false);
        if (!result.success) {
            toast.error(result.error ?? 'Failed to add skill');
            return;
        }
        toast.success(`Added "${remoteName.trim()}" to feature skills`);
        setRemoteName('');
        setRemoteSource('');
        setRemoteSkillName('');
        onAdded();
    };
    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-md", "data-testid": "add-skill-dialog", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Add Skill to Features" }) }), _jsxs(Tabs, { defaultValue: "local", children: [_jsxs(TabsList, { className: "w-full", children: [_jsx(TabsTrigger, { value: "local", className: "flex-1", children: "Local" }), _jsx(TabsTrigger, { value: "remote", className: "flex-1", children: "Remote" })] }), _jsx(TabsContent, { value: "local", className: "mt-4", children: availableSkills.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-sm", children: "All discovered skills are already configured." })) : (_jsx("div", { className: "flex max-h-60 flex-col gap-2 overflow-y-auto", children: availableSkills.map((skill) => (_jsxs("button", { type: "button", className: "hover:bg-accent flex flex-col gap-0.5 rounded-md border p-3 text-left transition-colors", onClick: () => handleAddLocal(skill), disabled: isSubmitting, "data-testid": `add-local-skill-${skill.name}`, children: [_jsx("span", { className: "text-sm font-medium", children: skill.displayName }), _jsx("span", { className: "text-muted-foreground line-clamp-1 text-xs", children: skill.description })] }, skill.name))) })) }), _jsx(TabsContent, { value: "remote", className: "mt-4", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "remote-name", children: "Name" }), _jsx(Input, { id: "remote-name", placeholder: "e.g. remotion-best-practices", value: remoteName, onChange: (e) => setRemoteName(e.target.value), "data-testid": "remote-skill-name" })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "remote-source", children: "Source (npm package or URL)" }), _jsx(Input, { id: "remote-source", placeholder: "e.g. @anthropic/remotion-skills", value: remoteSource, onChange: (e) => setRemoteSource(e.target.value), "data-testid": "remote-skill-source" })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "remote-skill-name", children: "Skill Name (optional)" }), _jsx(Input, { id: "remote-skill-name", placeholder: "e.g. remotion-best-practices", value: remoteSkillName, onChange: (e) => setRemoteSkillName(e.target.value), "data-testid": "remote-skill-skill-name" })] }), _jsx(DialogFooter, { children: _jsx(Button, { onClick: handleAddRemote, disabled: isSubmitting || !remoteName.trim() || !remoteSource.trim(), "data-testid": "add-remote-skill-submit", children: "Add Remote Skill" }) })] }) })] })] }) }));
}
