'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useCallback } from 'react';
import { Wrench } from 'lucide-react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../ui/tabs.js';
import { cn } from '../../../lib/utils.js';
import { ToolCard } from './tool-card.js';
const TAB_FILTER = {
    all: () => true,
    ide: (tool) => tool.tags.includes('ide'),
    'cli-agent': (tool) => tool.tags.includes('cli-agent'),
    vcs: (tool) => tool.tags.includes('vcs'),
    terminal: (tool) => tool.tags.includes('terminal'),
};
export function ToolsPageClient({ tools: initialTools, className }) {
    const [tools, setTools] = useState(initialTools);
    const [activeTab, setActiveTab] = useState('all');
    const refreshTools = useCallback(async () => {
        try {
            const res = await fetch('/api/tools');
            if (res.ok) {
                const updated = (await res.json());
                setTools(updated);
            }
        }
        catch {
            // Silently ignore refresh errors; user can re-navigate to refresh
        }
    }, []);
    const filtered = tools.filter(TAB_FILTER[activeTab]);
    return (_jsxs("div", { "data-testid": "tools-page-client", className: cn('space-y-4', className), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Wrench, { className: "text-muted-foreground h-4 w-4" }), _jsx("h1", { className: "text-sm font-bold tracking-tight", children: "Tools" }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: [tools.filter((t) => t.status.status === 'available').length, "/", tools.length, " installed"] })] }), _jsxs(Tabs, { value: activeTab, onValueChange: (value) => setActiveTab(value), "data-testid": "tools-page-tabs", children: [_jsxs(TabsList, { className: "h-7", children: [_jsx(TabsTrigger, { value: "all", "data-testid": "tools-tab-all", className: "px-2.5 text-xs", children: "All" }), _jsx(TabsTrigger, { value: "ide", "data-testid": "tools-tab-ide", className: "px-2.5 text-xs", children: "IDEs" }), _jsx(TabsTrigger, { value: "cli-agent", "data-testid": "tools-tab-cli-agent", className: "px-2.5 text-xs", children: "CLI Agents" }), _jsx(TabsTrigger, { value: "vcs", "data-testid": "tools-tab-vcs", className: "px-2.5 text-xs", children: "Version Control" }), _jsx(TabsTrigger, { value: "terminal", "data-testid": "tools-tab-terminal", className: "px-2.5 text-xs", children: "Terminals" })] }), _jsx(TabsContent, { value: activeTab, className: "mt-3", children: filtered.length === 0 ? (_jsxs("div", { "data-testid": "tools-page-empty", className: "text-muted-foreground flex flex-col items-center justify-center py-12 text-center", children: [_jsx(Wrench, { className: "mb-2 h-6 w-6 opacity-20" }), _jsx("p", { className: "text-xs", children: "No tools in this category." })] })) : (_jsx("div", { "data-testid": "tools-page-grid", className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: filtered.map((tool) => (_jsx(ToolCard, { tool: tool, onRefresh: refreshTools }, tool.id))) })) })] })] }));
}
