'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useMemo } from 'react';
import { usePathname } from 'next/navigation';
import { Home, LayoutGrid, Moon, Sun, Volume2, VolumeOff, Zap, ZapOff, Wrench, Puzzle, Settings, TableProperties, FolderKanban, KanbanSquare, MessageCircleQuestion, ShieldCheck, Bot, GraduationCap, } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarRail, useSidebar, } from '../../ui/sidebar.js';
import { ScrollArea } from '../../ui/scroll-area.js';
import { SidebarNavItem } from '../../common/sidebar-nav-item/index.js';
import { SidebarCollapseToggle } from '../../common/sidebar-collapse-toggle/index.js';
import { ShepLogo } from '../../common/shep-logo/index.js';
import { VersionBadge } from '../../common/version-badge/index.js';
import { FeatureListItem } from '../../common/feature-list-item/index.js';
import { useSoundEnabled } from '../../../hooks/use-sound-enabled.js';
import { useAnimationsEnabled } from '../../../hooks/use-animations-enabled.js';
import { useTheme } from '../../../hooks/useTheme.js';
import { useSoundAction } from '../../../hooks/use-sound-action.js';
import { FeatureStatusGroup } from '../../common/feature-status-group/index.js';
import { RepoGroup } from '../../common/repo-group/index.js';
import { SidebarSectionHeader } from '../../common/sidebar-section-header/index.js';
import { featureStatusConfig, featureStatusOrder } from '../../common/feature-status-config.js';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.js';
import { useDeferredMount } from '../../../hooks/use-deferred-mount.js';
import { useVersion } from '../../../hooks/use-version.js';
import { useOptionalAgentEventsContext } from '../../../hooks/agent-events-provider.js';
import { AgentQuestionKind, AgentQuestionStatus } from '../../../../../../packages/core/src/domain/generated/output.js';
export function AppSidebar({ features, featureFlags, onFeatureClick, onAddFeature, }) {
    const { t, i18n } = useTranslation('web');
    const pathname = usePathname();
    const { state } = useSidebar();
    const collapsed = state === 'collapsed';
    const { mounted: showExpanded, visible: expandedVisible } = useDeferredMount(collapsed, 200);
    const versionData = useVersion();
    const { enabled: soundEnabled, toggle: toggleSound } = useSoundEnabled();
    const { enabled: animationsEnabled, toggle: toggleAnimations } = useAnimationsEnabled();
    const { resolvedTheme, theme, setTheme } = useTheme();
    const toggleOnSound = useSoundAction('toggle-on');
    const toggleOffSound = useSoundAction('toggle-off');
    const clickSound = useSoundAction('navigate');
    const eventsCtx = useOptionalAgentEventsContext();
    const pendingQuestionCount = useMemo(() => {
        if (!featureFlags.collaboration || !eventsCtx)
            return 0;
        return eventsCtx.agentQuestions.filter((q) => q.status === AgentQuestionStatus.pending &&
            (q.questionKind === AgentQuestionKind.blocking ||
                q.questionKind === AgentQuestionKind.question)).length;
    }, [featureFlags.collaboration, eventsCtx]);
    // Group features by repository, then by status within each repo
    const repoGroups = useMemo(() => {
        const byRepo = new Map();
        for (const feature of features) {
            const key = feature.repositoryPath;
            let group = byRepo.get(key);
            if (!group) {
                group = { repoName: feature.repositoryName, features: [] };
                byRepo.set(key, group);
            }
            group.features.push(feature);
        }
        return Array.from(byRepo.entries()).map(([repoPath, { repoName, features: repoFeatures }]) => ({
            repoPath,
            repoName,
            featureCount: repoFeatures.length,
            statusGroups: featureStatusOrder
                .map((statusKey) => ({
                statusKey,
                label: t(featureStatusConfig[statusKey].labelKey),
                items: repoFeatures.filter((f) => f.status === statusKey),
            }))
                .filter((g) => g.items.length > 0),
        }));
    }, [features, t]);
    return (_jsxs(Sidebar, { "data-testid": "app-sidebar", "data-no-drawer-close": true, collapsible: "icon", side: i18n.dir() === 'rtl' ? 'right' : 'left', 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, variant: versionData.isDev ? 'dev' : 'default' }), _jsx("span", { className: "truncate text-sm font-semibold tracking-tight", children: "Shep" }), _jsx(VersionBadge, { version: versionData.version, branch: versionData.branch || undefined, commitHash: versionData.commitHash || undefined, isDev: versionData.isDev, packageName: versionData.packageName, description: versionData.description, instancePath: versionData.instancePath || undefined })] })) : null, _jsx(SidebarCollapseToggle, { className: "shrink-0 transition-all duration-200" })] }) }), _jsx(SidebarNavItem, { icon: Home, label: t('navigation.applications'), href: "/applications", active: pathname === '/applications' }), _jsx(SidebarNavItem, { icon: LayoutGrid, label: t('navigation.controlCenter'), href: "/control-center", active: pathname === '/control-center' }), _jsx(SidebarNavItem, { icon: TableProperties, label: t('navigation.inventory'), href: "/features", active: pathname === '/features' }), _jsx(SidebarNavItem, { icon: KanbanSquare, label: "SDLC Board", href: "/sdlc", active: pathname?.startsWith('/sdlc') ?? false }), _jsx(SidebarNavItem, { icon: Wrench, label: t('navigation.tools'), href: "/tools", active: pathname === '/tools' }), featureFlags.projects ? (_jsx(SidebarNavItem, { icon: FolderKanban, label: "Projects", href: "/projects", active: pathname?.startsWith('/projects') ?? false })) : null, _jsx(SidebarNavItem, { icon: Puzzle, label: t('navigation.skills'), href: "/skills", active: pathname === '/skills' }), featureFlags.collaboration ? (_jsxs(_Fragment, { children: [_jsx(SidebarNavItem, { icon: MessageCircleQuestion, label: t('navigation.agentQuestions'), href: "/agent-questions", active: pathname === '/agent-questions', badge: pendingQuestionCount }), _jsx(SidebarNavItem, { icon: ShieldCheck, label: "Supervisor", href: "/supervisor", active: pathname?.startsWith('/supervisor') ?? false }), _jsx(SidebarNavItem, { icon: Bot, label: "Agents", href: "/agents", active: pathname?.startsWith('/agents') ?? false }), _jsx(SidebarNavItem, { icon: GraduationCap, label: "Get started", href: "/onboarding", active: pathname?.startsWith('/onboarding') ?? false })] })) : null, _jsx(SidebarNavItem, { icon: Settings, label: t('navigation.settings'), href: "/settings", active: pathname === '/settings' })] }) }), _jsx(SidebarContent, { children: showExpanded ? (_jsxs("div", { className: [
                        'flex min-h-0 flex-1 flex-col 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: t('sidebar.features') }), _jsx(ScrollArea, { className: "min-h-0 flex-1", children: repoGroups.map(({ repoPath, repoName, featureCount, statusGroups }) => (_jsx(RepoGroup, { repoName: repoName, featureCount: featureCount, onAddFeature: onAddFeature ? () => onAddFeature(repoPath) : undefined, children: statusGroups.map(({ statusKey, label, items }) => (_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, agentType: feature.agentType, modelId: feature.modelId, onClick: onFeatureClick ? () => onFeatureClick(feature.featureId) : undefined }, feature.featureId))) }, statusKey))) }, repoPath))) })] })) : null }), _jsx(SidebarFooter, { className: "border-t p-2", children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsx("div", { className: "flex items-center gap-1", children: _jsxs(TooltipProvider, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { className: "w-auto flex-none", onClick: (e) => {
                                                        const currentResolved = theme === 'system' ? resolvedTheme : theme;
                                                        const goingToDark = currentResolved !== 'dark';
                                                        const newTheme = theme === 'system'
                                                            ? resolvedTheme === 'dark'
                                                                ? 'light'
                                                                : 'dark'
                                                            : theme === 'dark'
                                                                ? 'light'
                                                                : 'dark';
                                                        if (goingToDark) {
                                                            toggleOnSound.play();
                                                        }
                                                        else {
                                                            toggleOffSound.play();
                                                        }
                                                        const prefersReducedMotion = typeof window !== 'undefined' &&
                                                            window.matchMedia('(prefers-reduced-motion: reduce)').matches;
                                                        if (!('startViewTransition' in document) || prefersReducedMotion) {
                                                            setTheme(newTheme);
                                                            return;
                                                        }
                                                        document.documentElement.style.setProperty('--x', `${e.clientX}px`);
                                                        document.documentElement.style.setProperty('--y', `${e.clientY}px`);
                                                        document.startViewTransition(() => {
                                                            setTheme(newTheme);
                                                        });
                                                    }, "aria-label": resolvedTheme === 'dark'
                                                        ? t('sidebar.switchToLight')
                                                        : t('sidebar.switchToDark'), children: [_jsx(Sun, { className: "h-4 w-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" }), _jsx(Moon, { className: "absolute h-4 w-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" })] }) }), _jsx(TooltipContent, { side: "top", children: resolvedTheme === 'dark'
                                                    ? t('sidebar.switchToLight')
                                                    : t('sidebar.switchToDark') })] }), !collapsed && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(SidebarMenuButton, { className: "w-auto flex-none", onClick: () => {
                                                        clickSound.play();
                                                        toggleSound();
                                                    }, "aria-label": soundEnabled ? t('sidebar.muteSounds') : t('sidebar.unmuteSounds'), children: soundEnabled ? (_jsx(Volume2, { className: "h-4 w-4" })) : (_jsx(VolumeOff, { className: "h-4 w-4" })) }) }), _jsx(TooltipContent, { side: "top", children: soundEnabled ? t('sidebar.muteSounds') : t('sidebar.unmuteSounds') })] })), !collapsed && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(SidebarMenuButton, { className: "w-auto flex-none", onClick: () => {
                                                        clickSound.play();
                                                        toggleAnimations();
                                                    }, "aria-label": animationsEnabled ? 'Disable animations' : 'Enable animations', children: animationsEnabled ? (_jsx(Zap, { className: "h-4 w-4" })) : (_jsx(ZapOff, { className: "h-4 w-4" })) }) }), _jsx(TooltipContent, { side: "top", children: animationsEnabled ? 'Disable animations' : 'Enable animations' })] }))] }) }) }) }) }), _jsx(SidebarRail, {})] }));
}
