"use client"

import * as React from "react"
import {
    Calculator,
    Calendar,
    CreditCard,
    Settings,
    Smile,
    User,
    LayoutDashboard,
    Package,
    ShoppingCart,
    Users,
    BarChart3,
    RefreshCcw,
    RotateCcw,
    Search,
    MessageSquare,
    Truck
} from "lucide-react"

import {
    CommandDialog,
    CommandEmpty,
    CommandGroup,
    CommandInput,
    CommandItem,
    CommandList,
    CommandSeparator,
    CommandShortcut,
} from "@/components/common/command"
import { useRouter } from "next/navigation"

interface CommandPaletteProps {
    onResetLayout?: () => void
    onToggleWidget?: (id: string) => void
    availableWidgets?: Array<{ id: string; title: string; visible: boolean }>
}

export function CommandPalette({ onResetLayout, onToggleWidget, availableWidgets }: CommandPaletteProps) {
    const [open, setOpen] = React.useState(false)
    const router = useRouter()

    React.useEffect(() => {
        const down = (e: KeyboardEvent) => {
            if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
                e.preventDefault()
                setOpen((open) => !open)
            }
        }

        document.addEventListener("keydown", down)
        return () => document.removeEventListener("keydown", down)
    }, [])

    const runCommand = React.useCallback((command: () => void) => {
        setOpen(false)
        command()
    }, [])

    return (
        <CommandDialog open={open} onOpenChange={setOpen}>
            <CommandInput placeholder="Type a command or search..." />
            <CommandList className="max-h-[450px]">
                <CommandEmpty>No results found.</CommandEmpty>
                <CommandGroup heading="Navigation">
                    <CommandItem onSelect={() => runCommand(() => router.push("/dashboard"))}>
                        <LayoutDashboard className="mr-2 h-4 w-4" />
                        <span>Dashboard</span>
                    </CommandItem>
                    <CommandItem onSelect={() => runCommand(() => router.push("/dashboard/orders"))}>
                        <ShoppingCart className="mr-2 h-4 w-4" />
                        <span>Manage Orders</span>
                    </CommandItem>
                    <CommandItem onSelect={() => runCommand(() => router.push("/dashboard/stock"))}>
                        <Package className="mr-2 h-4 w-4" />
                        <span>Inventory & Stock</span>
                    </CommandItem>
                    <CommandItem onSelect={() => runCommand(() => router.push("/dashboard/customers"))}>
                        <Users className="mr-2 h-4 w-4" />
                        <span>Customers</span>
                    </CommandItem>
                    <CommandItem onSelect={() => runCommand(() => router.push("/dashboard/analytics"))}>
                        <BarChart3 className="mr-2 h-4 w-4" />
                        <span>Advanced Analytics</span>
                    </CommandItem>
                    <CommandItem onSelect={() => runCommand(() => router.push("/dashboard/shipping"))}>
                        <Truck className="mr-2 h-4 w-4" />
                        <span>Shipping Options</span>
                    </CommandItem>
                </CommandGroup>

                <CommandSeparator />

                <CommandGroup heading="Dashboard Actions">
                    <CommandItem onSelect={() => runCommand(() => window.location.reload())}>
                        <RefreshCcw className="mr-2 h-4 w-4" />
                        <span>Reload Data</span>
                    </CommandItem>
                    {onResetLayout && (
                        <CommandItem onSelect={() => runCommand(onResetLayout)}>
                            <RotateCcw className="mr-2 h-4 w-4" />
                            <span>Reset Widget Layout</span>
                        </CommandItem>
                    )}
                </CommandGroup>

                {availableWidgets && availableWidgets.length > 0 && (
                    <>
                        <CommandSeparator />
                        <CommandGroup heading="Toggle Widgets">
                            {availableWidgets.map((widget) => (
                                <CommandItem
                                    key={widget.id}
                                    onSelect={() => runCommand(() => onToggleWidget?.(widget.id))}
                                >
                                    <div className={`mr-2 h-2 w-2 rounded-full ${widget.visible ? "bg-primary" : "bg-muted"}`} />
                                    <span>{widget.visible ? "Hide" : "Show"} {widget.title}</span>
                                </CommandItem>
                            ))}
                        </CommandGroup>
                    </>
                )}

                <CommandSeparator />

                <CommandGroup heading="Settings">
                    <CommandItem onSelect={() => runCommand(() => router.push("/dashboard/settings"))}>
                        <Settings className="mr-2 h-4 w-4" />
                        <span>General Settings</span>
                        <CommandShortcut>⌘S</CommandShortcut>
                    </CommandItem>
                </CommandGroup>
            </CommandList>
        </CommandDialog>
    )
}