import { useEffect, useState } from "react";
import { Search } from "lucide-react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import { SidebarMenuButton } from "@/components/ui/sidebar";
import {
  searchableFeatures,
  featureSearchScore,
} from "@/lib/feature-navigation";
import type { PageId } from "@/contexts/navigation-context";

export function FeatureSearch({
  isPro,
  onNavigate,
}: {
  isPro: boolean;
  onNavigate: (page: PageId) => void;
}) {
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const shortcut = (event: KeyboardEvent) => {
      if (
        event.key.toLowerCase() === "k" &&
        (event.metaKey || event.ctrlKey) &&
        !event.altKey &&
        !event.repeat
      ) {
        event.preventDefault();
        setOpen((previous) => !previous);
      }
    };
    document.addEventListener("keydown", shortcut);
    return () => document.removeEventListener("keydown", shortcut);
  }, []);
  return (
    <>
      <SidebarMenuButton
        tooltip="Find a feature"
        onClick={() => setOpen(true)}
        aria-label="Find a feature"
        className="border bg-background"
      >
        <Search aria-hidden="true" />
        <span>Find a feature</span>
        <kbd className="ml-auto text-[11px] text-muted-foreground group-data-[collapsible=icon]:hidden">
          Ctrl/⌘ K
        </kbd>
      </SidebarMenuButton>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="overflow-hidden p-0">
          <DialogTitle className="sr-only">Find a feature</DialogTitle>
          <DialogDescription className="sr-only">
            Search Swift Commerce features by name or task.
          </DialogDescription>
          <Command filter={featureSearchScore}>
            <CommandInput
              aria-label="Search features"
              placeholder="Search features or tasks…"
              className="pr-10"
            />
            <CommandList className="max-h-[min(60vh,420px)]">
              <CommandEmpty>
                No matching features. Try a name such as registration or
                tracking.
              </CommandEmpty>
              <CommandGroup heading="Features">
                {searchableFeatures(isPro).map((feature) => (
                  <CommandItem
                    key={feature.pageId}
                    value={`${feature.title} ${feature.group || ""} ${feature.keywords.join(" ")}`}
                    onSelect={() => {
                      setOpen(false);
                      onNavigate(feature.pageId);
                    }}
                    className="gap-3 py-3"
                  >
                    <feature.icon
                      className="size-4 shrink-0 text-muted-foreground"
                      aria-hidden="true"
                    />
                    <span className="flex min-w-0 flex-1 flex-wrap items-center justify-between gap-x-3 gap-y-1">
                      <span>{feature.title}</span>
                      {feature.group && (
                        <span className="text-xs text-muted-foreground">
                          {feature.group}
                        </span>
                      )}
                    </span>
                  </CommandItem>
                ))}
              </CommandGroup>
            </CommandList>
          </Command>
        </DialogContent>
      </Dialog>
    </>
  );
}