import { Button } from '@/components/ui/button';
import { router } from '@inertiajs/react';
import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from 'cmdk';
import {
    BarChart3,
    Blocks,
    CalendarDays,
    FileImage,
    FileInput,
    FileText,
    Images,
    LayoutDashboard,
    LayoutGrid,
    Menu,
    Newspaper,
    Search,
    ShieldCheck,
    Upload,
    Users,
} from '@/lib/icons';
import { useEffect, useState } from 'react';
const pages = [
    { label: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
    { label: 'CMS Overview', href: '/dashboard/cms', icon: LayoutGrid },
    { label: 'Pages', href: '/dashboard/cms/pages', icon: FileText },
    { label: 'Page Content', href: '/dashboard/cms/page-content', icon: FileInput },
    { label: 'Hero Slides', href: '/dashboard/cms/hero-slides', icon: FileImage },
    { label: 'Blocks', href: '/dashboard/cms/blocks', icon: Blocks },
    { label: 'Menus', href: '/dashboard/cms/menus', icon: Menu },
    { label: 'Media', href: '/dashboard/cms/media', icon: Upload },
    { label: 'News', href: '/dashboard/cms/news', icon: Newspaper },
    { label: 'Branding', href: '/dashboard/cms/branding', icon: Images },
    { label: 'Gallery', href: '/dashboard/cms/gallery', icon: Images },
    { label: 'Staff', href: '/dashboard/cms/staff', icon: Users },
    { label: 'Events', href: '/dashboard/cms/events', icon: CalendarDays },
    { label: 'Roles', href: '/dashboard/cms/roles', icon: ShieldCheck },
    { label: 'Analytics', href: '/dashboard/cms/analytics', icon: BarChart3 },
];
export function CommandPalette() {
    const [open, setOpen] = useState(false);
    useEffect(() => {
        function handleKeyDown(event: KeyboardEvent) {
            if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
                event.preventDefault();
                setOpen((prev) => !prev);
            }
        }
        document.addEventListener('keydown', handleKeyDown);
        return () => document.removeEventListener('keydown', handleKeyDown);
    }, []);
    function navigate(href: string) {
        setOpen(false);
        router.visit(href);
    }
    return (
        <>
            {' '}
            <Button variant="outline" size="sm" onClick={() => setOpen(true)} className="text-muted-foreground flex items-center gap-2">
                {' '}
                <Search className="size-4" /> <span className="hidden sm:inline">Search pages...</span>{' '}
                <kbd className="bg-muted/50 text-muted-foreground ml-auto hidden rounded-md border px-1.5 text-[10px] font-medium lg:inline">
                    {' '}
                    ⌘K{' '}
                </kbd>{' '}
            </Button>{' '}
            <CommandDialog open={open} onOpenChange={setOpen}>
                {' '}
                <CommandInput placeholder="Search admin pages..." />{' '}
                <CommandList>
                    {' '}
                    <CommandEmpty>No results found.</CommandEmpty>{' '}
                    <CommandGroup heading="Navigation">
                        {' '}
                        {pages.map((page) => (
                            <CommandItem key={page.href} onSelect={() => navigate(page.href)}>
                                {' '}
                                <page.icon className="mr-2 size-4" /> {page.label}{' '}
                            </CommandItem>
                        ))}{' '}
                    </CommandGroup>{' '}
                </CommandList>{' '}
            </CommandDialog>{' '}
        </>
    );
}