'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useTransition } from 'react';
import { Loader2, Rocket, Download, Monitor, Terminal, GitBranch, CircleX, Circle, CheckCircle2, Package, } from 'lucide-react';
import { Button } from '../../ui/button.js';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.js';
import { cn } from '../../../lib/utils.js';
import { ToolDetailDrawer } from './tool-detail-drawer.js';
const TAG_CONFIG = {
    ide: { label: 'IDE', icon: Monitor },
    'cli-agent': { label: 'CLI Agent', icon: Terminal },
    vcs: { label: 'VCS', icon: GitBranch },
    terminal: { label: 'Terminal', icon: Terminal },
};
export function ToolCard({ tool, onRefresh, className }) {
    const [drawerOpen, setDrawerOpen] = useState(false);
    const [autoStartInstall, setAutoStartInstall] = useState(false);
    const [isPending, startTransition] = useTransition();
    const isInstalled = tool.status.status === 'available';
    const isError = tool.status.status === 'error';
    const canLaunch = isInstalled && Boolean(tool.openDirectory);
    function handleLaunch(e) {
        e.stopPropagation();
        startTransition(async () => {
            await fetch(`/api/tools/${tool.id}/launch`, { method: 'POST' });
        });
    }
    function handleCardClick() {
        setAutoStartInstall(false);
        setDrawerOpen(true);
    }
    function handleInstallClick(e) {
        e.stopPropagation();
        setAutoStartInstall(tool.autoInstall);
        setDrawerOpen(true);
    }
    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-testid": "tool-card", onClick: handleCardClick, className: cn('bg-card group flex h-30 w-full cursor-pointer flex-col rounded-lg border p-3 transition-shadow hover:shadow-md', className), children: [_jsxs("div", { className: "mb-2 flex items-start justify-between gap-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [tool.iconUrl ? (
                                    /* eslint-disable-next-line @next/next/no-img-element */
                                    _jsx("img", { src: tool.iconUrl, alt: "", width: 20, height: 20, className: "shrink-0 dark:invert" })) : (_jsx(Package, { className: "text-muted-foreground h-5 w-5 shrink-0" })), _jsx("h3", { "data-testid": "tool-card-name", className: "truncate text-sm font-bold", children: tool.name })] }), _jsx("div", { "data-testid": "tool-card-tags", className: "flex shrink-0 items-center gap-1", children: tool.tags.map((tag) => {
                                    const config = TAG_CONFIG[tag] ?? { label: tag, icon: Monitor };
                                    const TagIcon = config.icon;
                                    return (_jsxs("span", { className: "text-muted-foreground/70 inline-flex items-center gap-0.5 text-[9px]", children: [_jsx(TagIcon, { className: "h-2.5 w-2.5" }), config.label] }, tag));
                                }) })] }), _jsx("p", { "data-testid": "tool-card-summary", className: "text-muted-foreground mt-1 truncate text-xs", children: tool.summary }), _jsxs("div", { className: "mt-auto flex items-center justify-between pt-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [isError && tool.status.status === 'error' ? (_jsxs("span", { className: "flex items-center gap-1 truncate text-[10px] text-red-600 dark:text-red-400", title: tool.status.errorMessage, children: [_jsx(CircleX, { className: "h-3 w-3 shrink-0" }), tool.status.errorMessage ?? 'Error'] })) : isInstalled ? (_jsxs("span", { className: "flex items-center gap-1 text-[10px] text-emerald-600 dark:text-emerald-400", children: [_jsx(CheckCircle2, { className: "h-3 w-3" }), "Installed"] })) : (_jsxs("span", { className: "text-muted-foreground flex items-center gap-1 text-[10px]", children: [_jsx(Circle, { className: "h-3 w-3" }), "Not installed"] })), tool.required ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "rounded bg-amber-100 px-1.5 py-0.5 text-[9px] font-medium text-amber-700 dark:bg-amber-900/50 dark:text-amber-400", children: "Required" }) }), _jsx(TooltipContent, { side: "top", children: "This tool is required for Shep to function properly" })] }) })) : null] }), _jsx("div", { className: "flex items-center gap-1", children: isInstalled && canLaunch ? (_jsxs(Button, { size: "sm", variant: "outline", onClick: handleLaunch, disabled: isPending, "aria-label": `Launch ${tool.name}`, "data-testid": "tool-card-launch-button", className: "h-7 cursor-pointer rounded-md px-3 text-xs", children: [isPending ? (_jsx(Loader2, { className: "me-1 h-3 w-3 animate-spin" })) : (_jsx(Rocket, { className: "me-1 h-3 w-3" })), "Launch"] })) : !isInstalled && !isError ? (_jsxs(Button, { size: "sm", variant: "default", onClick: handleInstallClick, "aria-label": `Install ${tool.name}`, "data-testid": "tool-card-install-button", className: "h-7 cursor-pointer rounded-md px-3 text-xs", children: [_jsx(Download, { className: "me-1 h-3 w-3" }), "Install"] })) : null })] })] }), _jsx(ToolDetailDrawer, { tool: tool, open: drawerOpen, onClose: () => setDrawerOpen(false), onRefresh: onRefresh, autoStart: autoStartInstall })] }));
}
