WooNooW/admin-spa/src/components/CommandPalette.tsx

import React, { useEffect, useRef } from "react";
import {
  CommandDialog,
  CommandInput,
  CommandList,
  CommandItem,
  CommandGroup,
  CommandSeparator,
  CommandEmpty,
} from "@/components/ui/command";
import { LayoutDashboard, ReceiptText, Maximize2, Terminal } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { useCommandStore } from "@/lib/useCommandStore";
import { __ } from "@/lib/i18n";

type Action = {
  label: string;
  icon: React.ComponentType<{ className?: string }>;
  run: () => void;
  shortcut?: string; // e.g. "D", "O", "⌘⇧F"
  group: "Navigation" | "Actions";
};

export function CommandPalette({ toggleFullscreen }: { toggleFullscreen?: () => void }) {
  const { open, setOpen } = useCommandStore();
  const navigate = useNavigate();

  const inputRef = useRef<HTMLInputElement | null>(null);

  useEffect(() => {
    if (open) {
      // Focus the input shortly after opening to avoid dialog focus race
      const id = setTimeout(() => inputRef.current?.focus(), 0);
      return () => clearTimeout(id);
    }
  }, [open]);

  const actions: Action[] = [
    { label: __("Dashboard"), icon: LayoutDashboard, run: () => navigate("/"), shortcut: "D", group: "Navigation" },
    { label: __("Orders"), icon: ReceiptText, run: () => navigate("/orders"), shortcut: "O", group: "Navigation" },
    { label: __("Toggle Fullscreen"), icon: Maximize2, run: () => toggleFullscreen?.(), shortcut: "⌘⇧F / Ctrl+Shift+F", group: "Actions" },
    { label: __("Keyboard Shortcuts"), icon: Terminal, run: () => alert(__("Shortcut reference coming soon")), shortcut: "⌘K / Ctrl+K", group: "Actions" },
  ];

  // Helper: run action then close palette (close first to avoid focus glitches)
  const select = (fn: () => void) => {
    setOpen(false);
    // Allow dialog to close before navigation/action to keep focus clean
    setTimeout(fn, 0);
  };

  return (
    <CommandDialog
      open={open}
      onOpenChange={setOpen}
    >
      <CommandInput
        ref={inputRef}
        className="command-palette-search"
        placeholder={__("Type a command or search…")}
      />
      <CommandList>
        <CommandEmpty>{__("No results found.")}</CommandEmpty>

        <CommandGroup heading={__("Navigation")}>
          {actions.filter(a => a.group === "Navigation").map((a) => (
            <CommandItem key={a.label} onSelect={() => select(a.run)}>
              <a.icon className="w-4 h-4 mr-2" />
              <span className="flex-1">{a.label}</span>
              {a.shortcut ? (
                <kbd className="text-xs opacity-60 border rounded px-1 py-0.5">{a.shortcut}</kbd>
              ) : null}
            </CommandItem>
          ))}
        </CommandGroup>

        <CommandSeparator />

        <CommandGroup heading={__("Actions")}>
          {actions.filter(a => a.group === "Actions").map((a) => (
            <CommandItem key={a.label} onSelect={() => select(a.run)}>
              <a.icon className="w-4 h-4 mr-2" />
              <span className="flex-1">{a.label}</span>
              {a.shortcut ? (
                <kbd className="text-xs opacity-60 border rounded px-1 py-0.5">{a.shortcut}</kbd>
              ) : null}
            </CommandItem>
          ))}
        </CommandGroup>
      </CommandList>
    </CommandDialog>
  );
}