import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// packages/ui/src/routing/GoToDialog.tsx
/**
 * @fileoverview GoToDialog - Navigation command palette implementation
 * @description Clean Cmd+K navigation with favorites, recents, and smart filtering
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
import { Link as LinkIcon, Star } from 'lucide-react';
import { useCallback, useEffect, useRef } from 'react';
import { Badge, Command, CommandDialog } from '@donotdev/components';
import { useOverlayStore, useTranslation } from '@donotdev/core';
import { useGoTo } from './useGoTo';
import { Icon } from '../components/common/icon';
/**
 * Navigation dialog content
 */
const GoToDialogContent = () => {
    const { t } = useTranslation('dndev');
    const inputRef = useRef(null);
    // Store state
    const isCommandDialogOpen = useOverlayStore((state) => state.isCommandDialogOpen);
    const closeCommandDialog = useOverlayStore((state) => state.closeCommandDialog);
    // Navigation hook
    const { navigationItems, favoriteItems, recentItems, toggleFavorite, isFavorite, navigateToItem, } = useGoTo();
    // Focus input when dialog opens
    useEffect(() => {
        if (isCommandDialogOpen) {
            requestAnimationFrame(() => {
                inputRef.current?.focus();
            });
        }
    }, [isCommandDialogOpen]);
    // Handle item selection
    const handleSelect = useCallback((path) => {
        navigateToItem(path);
        closeCommandDialog();
    }, [navigateToItem, closeCommandDialog]);
    // Build command items from navigation items
    const createItems = useCallback((items, showFavorite = true) => {
        return items.map((item) => ({
            label: item.label,
            value: item.path,
            description: item.path !== item.label ? item.path : undefined,
            icon: _jsx(Icon, { icon: item.icon, fallback: LinkIcon }),
            badge: item.badge ? _jsx(Badge, { children: item.badge }) : undefined,
            onSelect: () => handleSelect(item.path),
            rightSlot: showFavorite ? (_jsx("button", { type: "button", onClick: (e) => {
                    e.stopPropagation();
                    toggleFavorite(item.path);
                }, className: "dndev-command-favorite-button", "data-favorited": isFavorite(item.path), "aria-label": isFavorite(item.path)
                    ? t('globalGoTo.unfavorite', 'Remove from favorites')
                    : t('globalGoTo.favorite', 'Add to favorites'), children: _jsx(Icon, { icon: Star, className: "dndev-size-sm" }) })) : undefined,
        }));
    }, [handleSelect, toggleFavorite, isFavorite, t]);
    // Build command groups
    const commandGroups = [];
    if (favoriteItems.length > 0) {
        commandGroups.push({
            heading: t('globalGoTo.favorites', 'Favorites'),
            items: createItems(favoriteItems, false),
        });
    }
    if (recentItems.length > 0) {
        const recentCommandItems = recentItems.flatMap((item) => createItems([item], true));
        if (recentCommandItems.length > 0) {
            commandGroups.push({
                heading: t('globalGoTo.recent', 'Recent'),
                separator: favoriteItems.length > 0,
                items: recentCommandItems,
            });
        }
    }
    commandGroups.push({
        heading: t('globalGoTo.allPages', 'All Pages'),
        separator: favoriteItems.length > 0 || recentItems.length > 0,
        items: createItems(navigationItems),
    });
    const hasResults = navigationItems.length > 0;
    return (_jsxs(CommandDialog, { open: isCommandDialogOpen, onOpenChange: (open) => (open ? null : closeCommandDialog()), children: [_jsx(Command, { placeholder: t('globalGoTo.placeholder', 'Search pages...'), emptyMessage: hasResults
                    ? t('globalGoTo.noResults', 'No results found.')
                    : t('globalGoTo.empty', 'No pages available.'), groups: commandGroups }), _jsx("div", { className: "dndev-command-footer", children: _jsxs("div", { className: "dndev-command-footer-shortcuts", children: [_jsxs("div", { className: "dndev-command-footer-shortcut", children: [_jsx("kbd", { className: "dndev-command-footer-key", children: "\u2318K" }), _jsx("span", { children: t('globalGoTo.shortcutOpen', 'Open') })] }), _jsxs("div", { className: "dndev-command-footer-shortcut", children: [_jsx("kbd", { className: "dndev-command-footer-key", children: "\u2191" }), _jsx("kbd", { className: "dndev-command-footer-key", children: "\u2193" }), _jsx("span", { children: t('globalGoTo.shortcutNavigate', 'Navigate') })] }), _jsxs("div", { className: "dndev-command-footer-shortcut", children: [_jsx("kbd", { className: "dndev-command-footer-key", children: "\u21B5" }), _jsx("span", { children: t('globalGoTo.shortcutSelect', 'Select') })] }), _jsxs("div", { className: "dndev-command-footer-shortcut", children: [_jsx("kbd", { className: "dndev-command-footer-key", children: "Esc" }), _jsx("span", { children: t('globalGoTo.shortcutClose', 'Close') })] })] }) })] }));
};
/**
 * GoToDialog - Navigation command palette
 * Only renders when dialog is open
 */
const GoToDialog = () => {
    const isCommandDialogOpen = useOverlayStore((state) => state.isCommandDialogOpen);
    if (!isCommandDialogOpen) {
        return null;
    }
    return _jsx(GoToDialogContent, {});
};
export default GoToDialog;
