'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { usePathname } from 'next/navigation';
import { Home, Brain, Plus } from 'lucide-react';
import { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarRail, useSidebar, } from '../../ui/sidebar';
import { ScrollArea } from '../../ui/scroll-area';
import { SidebarNavItem } from '../../common/sidebar-nav-item';
import { SidebarCollapseToggle } from '../../common/sidebar-collapse-toggle';
import { ShepLogo } from '../../common/shep-logo';
import { FeatureListItem } from '../../common/feature-list-item';
import { FeatureStatusGroup } from '../../common/feature-status-group';
import { SidebarSectionHeader } from '../../common/sidebar-section-header';
import { featureStatusConfig, featureStatusOrder } from '../../common/feature-status-config';
import { useDeferredMount } from '../../../hooks/use-deferred-mount';
export function AppSidebar({ features, onNewFeature, onFeatureClick, onFeaturesFolderClick, onFeaturesMenuClick, }) {
    const pathname = usePathname();
    const { state } = useSidebar();
    const collapsed = state === 'collapsed';
    const { mounted: showExpanded, visible: expandedVisible } = useDeferredMount(collapsed, 200);
    const grouped = featureStatusOrder.map((key) => {
        const { label } = featureStatusConfig[key];
        const items = features.filter((f) => f.status === key);
        return { key, label, items };
    });
    return (_jsxs(Sidebar, { "data-testid": "app-sidebar", collapsible: "icon", children: [_jsx(SidebarHeader, { children: _jsxs(SidebarMenu, { children: [_jsx(SidebarMenuItem, { children: _jsxs("div", { className: "flex h-8 items-center group-data-[collapsible=icon]:justify-center", children: [showExpanded ? (_jsxs("div", { className: [
                                            'flex min-w-0 flex-1 items-center gap-2 overflow-hidden px-2',
                                            'transition-opacity duration-200 ease-out',
                                            expandedVisible ? 'opacity-100' : 'opacity-0',
                                        ].join(' '), "aria-hidden": !expandedVisible, children: [_jsx(ShepLogo, { className: "shrink-0", size: 20 }), _jsx("span", { className: "truncate text-sm font-semibold tracking-tight", children: "Shep" })] })) : null, _jsx(SidebarCollapseToggle, { className: "shrink-0 transition-all duration-200" })] }) }), _jsx(SidebarNavItem, { icon: Home, label: "Control Center", href: "/", active: pathname === '/' }), _jsx(SidebarNavItem, { icon: Brain, label: "Memory", href: "/memory", active: pathname === '/memory' })] }) }), _jsx(SidebarContent, { children: showExpanded ? (_jsxs("div", { className: [
                        'min-w-0 overflow-hidden transition-opacity duration-200 ease-out',
                        '[&_[data-sidebar=group-label]]:!mt-0 [&_[data-sidebar=group-label]]:!opacity-100 [&_[data-sidebar=group-label]]:!transition-none',
                        expandedVisible ? 'opacity-100' : 'opacity-0',
                    ].join(' '), children: [_jsx(SidebarSectionHeader, { label: "Features", onFolderClick: onFeaturesFolderClick, onMenuClick: onFeaturesMenuClick }), _jsx(ScrollArea, { children: grouped.map(({ key, label, items }) => items.length > 0 ? (_jsx(FeatureStatusGroup, { label: label, count: items.length, children: items.map((feature) => (_jsx(FeatureListItem, { name: feature.name, status: feature.status, startedAt: feature.startedAt, duration: feature.duration, onClick: onFeatureClick ? () => onFeatureClick(feature.name) : undefined }, feature.name))) }, key)) : null) })] })) : null }), _jsx(SidebarFooter, { children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { onClick: onNewFeature, tooltip: "New feature", children: [_jsx(Plus, {}), _jsx("span", { children: "New feature" })] }) }) }) }), _jsx(SidebarRail, {})] }));
}
