"use client";
import * as React from "react";
import { usePathname, useRouter } from "next/navigation";
import { Command } from "cmdk";
import { useTheme } from "next-themes";
import { ArrowLeft, BarChart3, Boxes, Check, ChevronRight, Clock, Download, FolderKanban, Ghost, Keyboard, Library, Link2, MessageSquare, Monitor, Moon, PanelLeft, Paperclip, Plus, Search, SearchX, Settings, Share2, ShieldCheck, Sparkles, Sun, SunMoon, Swords, WandSparkles, Wand2, X } from "lucide-react";
import { useApp, AUTO_MODEL_KEY } from "./store";
import { useApi } from "@/lib/client/api";
import type { Project, SearchGroup } from "@/lib/client/types";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { ResponsiveDialog } from "@/components/ui/sheet";
import { Kbd, Spinner } from "@/components/ui/misc";
import { toast } from "@/components/ui/toast";
import { useIsMobile } from "@/lib/client/hooks";
import { providerName } from "@/lib/client/providers";
import { cn } from "@/lib/utils";
import { SearchSheet } from "@/components/search/search-sheet";
import { useSearch, useRecentSearches, SEARCH_EXAMPLES } from "@/components/search/use-search";
import { ConversationHitContent, MessageHitContent, ModelHitContent, PromptHitContent, ProjectHitContent, PresetHitContent, GROUP_LABELS, GROUP_ORDER, useSearchNavigation } from "@/components/search/hits";
import { FilterChips } from "@/components/search/filter-chips";
import { ShareSheetHost, openShareSheet } from "@/components/share/share-sheet";
import { EXPORT_OPTIONS, exportConversation } from "@/components/share/export";
import { EXPORT_ICONS } from "@/components/share/export-menu";

/**
 * Universal command palette (⌘K) — keyboard-first on desktop, bottom sheet with large rows on phones.
 *
 * Modes: root commands → sub-lists (Switch model, Open project, Export, Theme). Typing ≥ 2 characters in the
 * root shows matching commands AND live search results; a leading `/` forces search mode.
 * Backspace on an empty input goes back to the root; Esc closes.
 *
 * Window events emitted for other workstreams (documented in docs/upgrade-notes/G-search-share.md):
 *   polyllm:open-attach   → composer opens its attachment sheet / file picker
 *   polyllm:switch-model  → { detail: { modelKey } } chat view applies the model to the current conversation
 * This component also mounts <SearchSheet /> (phone search) and <ShareSheetHost /> once for the app.
 */
type Mode = "root" | "search" | "models" | "projects" | "export" | "theme";

interface Cmd {
  id: string;
  label: string;
  group: "Actions" | "Navigate" | "Conversation" | "View" | "Help";
  icon: React.ReactNode;
  keywords?: string;
  shortcut?: string;
  hint?: string;
  /** Opens a sub-list instead of running. */
  submode?: Mode;
  run?: () => void;
}

export const CHAT_ROUTE_RE = /^\/app\/chat\/([^/?#]+)/;

export function CommandPalette() {
  return (
    <>
      <PaletteDialog />
      <SearchSheet />
      <ShareSheetHost />
    </>
  );
}

function PaletteDialog() {
  const { paletteOpen, setPaletteOpen, searchOpen, setSearchOpen, setSidebarOpen, models, connectedProviders, favorites, labels, selectedModelKey, setSelectedModelKey, activeProjectId, setActiveProjectId } = useApp();
  const router = useRouter();
  const pathname = usePathname();
  const isMobile = useIsMobile();
  const { theme, setTheme } = useTheme();
  const [mode, setMode] = React.useState<Mode>("root");
  const [q, setQ] = React.useState("");
  const [shortcutsOpen, setShortcutsOpen] = React.useState(false);
  const inputRef = React.useRef<HTMLInputElement>(null);
  const recent = useRecentSearches();
  const activeChatId = pathname.match(CHAT_ROUTE_RE)?.[1] ?? null;

  // Reset when closed.
  React.useEffect(() => {
    if (!paletteOpen) {
      // eslint-disable-next-line react-hooks/set-state-in-effect
      setMode("root");
      setQ("");
    }
  }, [paletteOpen]);

  // Desktop: `store.searchOpen` (sidebar search button, bottom nav on tablets) opens the palette in search mode.
  React.useEffect(() => {
    if (searchOpen && !isMobile) {
      // eslint-disable-next-line react-hooks/set-state-in-effect
      setMode("search");
      setSearchOpen(false);
      setPaletteOpen(true);
    }
  }, [searchOpen, isMobile, setSearchOpen, setPaletteOpen]);

  const close = React.useCallback(() => setPaletteOpen(false), [setPaletteOpen]);
  const go = React.useCallback(
    (href: string) => {
      close();
      router.push(href);
    },
    [close, router],
  );

  /* ---- search --------------------------------------------------------------------------------- */
  const slash = q.startsWith("/");
  const searchQuery = mode === "search" ? q : slash ? q.slice(1) : q.trim().length >= 2 ? q : "";
  const search = useSearch(searchQuery, { enabled: paletteOpen && searchQuery.length > 0, limit: isMobile ? 8 : 6 });
  const nav = useSearchNavigation({
    onNavigate: () => {
      recent.add(searchQuery);
      close();
    },
  });

  /* ---- commands ------------------------------------------------------------------------------- */
  const commands = React.useMemo<Cmd[]>(() => {
    const list: Cmd[] = [
      { id: "new-chat", label: "New chat", group: "Actions", icon: <Plus />, shortcut: "⌘N", keywords: "create conversation start", run: () => go("/app/chat") },
      { id: "temp-chat", label: "New temporary chat", group: "Actions", icon: <Ghost />, keywords: "incognito private ephemeral not stored", hint: "Not stored in history", run: () => go("/app/chat?temporary=1") },
      { id: "search", label: "Search conversations", group: "Actions", icon: <Search />, shortcut: "/", keywords: "find messages history", submode: "search" },
      { id: "switch-model", label: "Switch model", group: "Actions", icon: <Boxes />, keywords: "change model auto router pick", submode: "models" },
      { id: "upload", label: "Upload file", group: "Actions", icon: <Paperclip />, keywords: "attach image document pdf camera", run: () => uploadFile() },
      { id: "open-project", label: "Open project", group: "Navigate", icon: <FolderKanban />, keywords: "workspace projects", submode: "projects" },
      { id: "nav-chat", label: "Go to Chat", group: "Navigate", icon: <MessageSquare />, run: () => go("/app/chat") },
      { id: "nav-arena", label: "Open Arena", group: "Navigate", icon: <Swords />, keywords: "compare battle models side by side", run: () => go("/app/arena") },
      { id: "nav-models", label: "Browse models", group: "Navigate", icon: <Boxes />, keywords: "catalog registry", run: () => go("/app/models") },
      { id: "nav-usage", label: "Usage & costs", group: "Navigate", icon: <BarChart3 />, keywords: "analytics tokens spend dashboard", run: () => go("/app/usage") },
      { id: "nav-providers", label: "Providers & API keys", group: "Navigate", icon: <ShieldCheck />, keywords: "keys connect openai anthropic settings", run: () => go("/app/settings/providers") },
      { id: "nav-projects", label: "Projects", group: "Navigate", icon: <FolderKanban />, run: () => go("/app/projects") },
      { id: "nav-library", label: "Library", group: "Navigate", icon: <Library />, keywords: "files context documents", run: () => go("/app/library") },
      { id: "nav-prompts", label: "Prompts", group: "Navigate", icon: <WandSparkles />, keywords: "prompt library templates presets", run: () => go("/app/prompts") },
      { id: "nav-presets", label: "Model presets", group: "Navigate", icon: <Sparkles />, run: () => go("/app/presets") },
      { id: "nav-settings", label: "Settings", group: "Navigate", icon: <Settings />, keywords: "account appearance data security", run: () => go("/app/settings/account") },
      { id: "theme", label: "Toggle theme", group: "View", icon: <SunMoon />, keywords: "dark light system appearance mode", submode: "theme" },
      { id: "sidebar", label: isMobile ? "Open sidebar" : "Toggle sidebar", group: "View", icon: <PanelLeft />, shortcut: isMobile ? undefined : "⌘B", keywords: "collapse expand drawer conversations", run: () => toggleSidebar() },
      { id: "shortcuts", label: "Keyboard shortcuts", group: "Help", icon: <Keyboard />, shortcut: "?", keywords: "help keys hotkeys", run: () => { close(); setShortcutsOpen(true); } },
    ];
    if (activeChatId) {
      list.splice(
        5,
        0,
        { id: "copy-url", label: "Copy conversation URL", group: "Conversation", icon: <Link2 />, keywords: "link address clipboard", run: () => copyUrl() },
        { id: "share", label: "Share conversation", group: "Conversation", icon: <Share2 />, keywords: "public link publish", run: () => { close(); openShareSheet({ conversationId: activeChatId }); } },
        { id: "export", label: "Export conversation", group: "Conversation", icon: <Download />, keywords: "download markdown json txt pdf print html", submode: "export" },
      );
    }
    return list;

    function copyUrl() {
      const url = `${window.location.origin}/app/chat/${activeChatId}`;
      navigator.clipboard
        .writeText(url)
        .then(() => toast.success("Conversation URL copied", url))
        .catch(() => toast.error("Could not copy", url));
      close();
    }
    function uploadFile() {
      close();
      if (/^\/app\/chat/.test(pathname)) {
        window.dispatchEvent(new CustomEvent("polyllm:open-attach"));
      } else {
        router.push("/app/chat");
        setTimeout(() => window.dispatchEvent(new CustomEvent("polyllm:open-attach")), 450);
      }
    }
    function toggleSidebar() {
      close();
      if (isMobile) setSidebarOpen(true);
      // Desktop: the shell owns the collapsed state and listens for ⌘B on window.
      // TODO(integration: shell) expose `toggleSidebarCollapsed` in the store instead of a synthetic key event.
      else window.dispatchEvent(new KeyboardEvent("keydown", { key: "b", metaKey: true, bubbles: true }));
    }
  }, [activeChatId, close, go, isMobile, pathname, router, setSidebarOpen]);

  const filteredCommands = React.useMemo(() => {
    if (mode !== "root" || slash) return [];
    const tokens = q.toLowerCase().split(/\s+/).filter(Boolean);
    if (!tokens.length) return commands;
    return commands.filter((c) => {
      const hay = `${c.label} ${c.keywords ?? ""} ${c.group}`.toLowerCase();
      return tokens.every((t) => hay.includes(t));
    });
  }, [commands, mode, q, slash]);

  const showSearch = mode === "search" || slash || (mode === "root" && q.trim().length >= 2);

  /* ---- sub-lists ------------------------------------------------------------------------------ */
  const usableModels = React.useMemo(() => {
    const list = models.filter((m) => connectedProviders.has(m.provider) && m.status !== "deprecated");
    const needle = q.trim().toLowerCase();
    const filtered = needle ? list.filter((m) => `${m.displayName} ${m.key} ${labels[m.key] ?? ""} ${providerName(m.provider)}`.toLowerCase().includes(needle)) : list;
    return [...filtered].sort((a, b) => Number(favorites.has(b.key)) - Number(favorites.has(a.key)) || a.displayName.localeCompare(b.displayName)).slice(0, 40);
  }, [models, connectedProviders, favorites, labels, q]);

  const projectsQ = useApi<{ projects: Project[] }>(paletteOpen && mode === "projects" ? "/api/projects" : null, { shouldRetryOnError: false });
  const projectList = React.useMemo(() => {
    const needle = q.trim().toLowerCase();
    return (projectsQ.data?.projects ?? []).filter((p) => !p.archived && (!needle || p.name.toLowerCase().includes(needle)));
  }, [projectsQ.data, q]);

  const enter = (m: Mode) => {
    setMode(m);
    setQ("");
    inputRef.current?.focus();
  };
  const back = () => enter("root");

  const onKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Backspace" && q === "" && mode !== "root") {
      e.preventDefault();
      back();
    }
  };

  const placeholder: Record<Mode, string> = {
    root: "Type a command or search…  (/ to search)",
    search: 'Search chats, messages, models…  model:claude after:7d "phrase"',
    models: "Filter models…",
    projects: "Filter projects…",
    export: "Choose a format",
    theme: "Choose a theme",
  };

  const modeLabel: Partial<Record<Mode, string>> = { search: "Search", models: "Switch model", projects: "Open project", export: "Export", theme: "Theme" };

  const itemCls = cn("flex cursor-default select-none items-center gap-3 rounded-lg px-2.5 text-fg-muted transition-colors data-[selected=true]:bg-bg-muted data-[selected=true]:text-fg [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-fg-subtle", isMobile ? "min-h-[52px] py-2 text-[15px]" : "min-h-[38px] py-1.5 text-sm");
  const groupCls = "[&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:pb-1 [&_[cmdk-group-heading]]:pt-2.5 [&_[cmdk-group-heading]]:text-[11px] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wide [&_[cmdk-group-heading]]:text-fg-subtle";

  return (
    <>
      <ResponsiveDialog
        open={paletteOpen}
        onOpenChange={setPaletteOpen}
        title="Command palette"
        hideTitle
        showClose={false}
        size="lg"
        snap="full"
        expandable={false}
        flush
        desktopFlush
        className={cn("overflow-hidden", !isMobile && "md:top-[14%] md:translate-y-0 md:max-h-[min(72vh,760px)]")}
        bodyClassName="flex min-h-0 flex-col"
      >
        <Command label="Command palette" shouldFilter={false} loop onKeyDown={onKeyDown} className="flex min-h-0 flex-1 flex-col">
          <div className={cn("flex items-center gap-2 border-b border-border px-3", isMobile ? "h-14" : "h-12")}>
            {mode !== "root" ? (
              <button type="button" onClick={back} className="tap -ml-1 rounded-md p-1 text-fg-muted hover:bg-bg-muted hover:text-fg" aria-label="Back to commands">
                <ArrowLeft className="size-4" />
              </button>
            ) : (
              <Search className="size-4 shrink-0 text-fg-subtle" aria-hidden />
            )}
            {mode !== "root" ? <span className="shrink-0 rounded-md bg-bg-muted px-1.5 py-0.5 text-[11px] font-medium text-fg-muted">{modeLabel[mode]}</span> : null}
            <Command.Input ref={inputRef} autoFocus value={q} onValueChange={setQ} placeholder={placeholder[mode]} className={cn("h-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-fg-subtle", isMobile ? "text-[16px]" : "text-[15px]")} />
            {search.loading && showSearch ? <Spinner className="size-3.5" /> : null}
            {isMobile ? (
              <button type="button" onClick={close} className="tap rounded-md p-1 text-fg-muted" aria-label="Close">
                <X className="size-4" />
              </button>
            ) : (
              <Kbd>esc</Kbd>
            )}
          </div>

          {(mode === "search" || slash) ? (
            <div className="border-b border-border px-3 py-2">
              <FilterChips query={searchQuery} onChange={(next) => { setQ(mode === "search" ? next : `/${next}`); inputRef.current?.focus(); }} compact />
            </div>
          ) : null}

          <Command.List className={cn("min-h-0 flex-1 overflow-y-auto p-2 scrollbar-thin contain-scroll", groupCls, isMobile ? "pb-[max(12px,var(--sab))]" : "max-h-[60vh]")}>
            {/* ---- root commands ---- */}
            {mode === "root" && !slash ? (
              <>
                {filteredCommands.length === 0 && !showSearch ? <Command.Empty className="px-3 py-8 text-center text-sm text-fg-muted">No matching command.</Command.Empty> : null}
                {(["Conversation", "Actions", "Navigate", "View", "Help"] as Cmd["group"][]).map((g) => {
                  const items = filteredCommands.filter((c) => c.group === g);
                  if (!items.length) return null;
                  return (
                    <Command.Group key={g} heading={g}>
                      {items.map((c) => (
                        <Command.Item key={c.id} value={`cmd:${c.id}`} onSelect={() => (c.submode ? enter(c.submode) : c.run?.())} className={itemCls}>
                          {c.icon}
                          <span className="min-w-0 flex-1 truncate">{c.label}</span>
                          {c.hint ? <span className="truncate text-[11px] text-fg-subtle">{c.hint}</span> : null}
                          {c.shortcut && !isMobile ? <Kbd>{c.shortcut}</Kbd> : null}
                          {c.submode ? <ChevronRight className="size-3.5 text-fg-subtle" /> : null}
                        </Command.Item>
                      ))}
                    </Command.Group>
                  );
                })}
              </>
            ) : null}

            {/* ---- search results (search mode, slash, or hybrid root) ---- */}
            {showSearch ? (
              <SearchResults
                searchQuery={searchQuery}
                search={search}
                nav={nav}
                itemCls={itemCls}
                isMobile={isMobile}
                recent={recent}
                onPickRecent={(v) => setQ(mode === "search" ? v : `/${v}`)}
                hybrid={mode === "root" && !slash}
              />
            ) : null}

            {/* ---- switch model ---- */}
            {mode === "models" ? (
              <>
                <Command.Group heading="Smart router">
                  <Command.Item value="model:auto" onSelect={() => { setSelectedModelKey(AUTO_MODEL_KEY); window.dispatchEvent(new CustomEvent("polyllm:switch-model", { detail: { modelKey: AUTO_MODEL_KEY } })); close(); if (!activeChatId && !/^\/app\/chat/.test(pathname)) router.push("/app/chat"); }} className={itemCls}>
                    <Wand2 />
                    <span className="min-w-0 flex-1">
                      <span className="block truncate text-fg">AUTO — Smart Router</span>
                      <span className="block truncate text-[11.5px] text-fg-subtle">Picks the best connected model for each prompt</span>
                    </span>
                    {selectedModelKey === AUTO_MODEL_KEY ? <Check className="size-4 text-accent" /> : null}
                  </Command.Item>
                </Command.Group>
                <Command.Group heading={`Connected models${usableModels.length ? ` · ${usableModels.length}` : ""}`}>
                  {usableModels.length === 0 ? <p className="px-3 py-6 text-center text-sm text-fg-muted">{models.length ? "No model matches." : "Connect a provider first (Settings → Providers)."}</p> : null}
                  {usableModels.map((m) => (
                    <Command.Item key={m.key} value={`model:${m.key}`} onSelect={() => { setSelectedModelKey(m.key); window.dispatchEvent(new CustomEvent("polyllm:switch-model", { detail: { modelKey: m.key } })); close(); if (!/^\/app\/chat/.test(pathname)) router.push("/app/chat"); }} className={itemCls}>
                      <ProviderIcon provider={m.provider} size={16} />
                      <span className="min-w-0 flex-1">
                        <span className="block truncate text-fg">{labels[m.key] ?? m.displayName}</span>
                        <span className="block truncate text-[11.5px] text-fg-subtle">
                          {providerName(m.provider)}
                          {labels[m.key] ? ` · ${m.displayName}` : ""}
                          {favorites.has(m.key) ? " · ★" : ""}
                        </span>
                      </span>
                      {selectedModelKey === m.key ? <Check className="size-4 text-accent" /> : null}
                    </Command.Item>
                  ))}
                </Command.Group>
              </>
            ) : null}

            {/* ---- open project ---- */}
            {mode === "projects" ? (
              <Command.Group heading="Projects">
                {projectsQ.isLoading ? <p className="px-3 py-6 text-center text-sm text-fg-muted">Loading projects…</p> : null}
                {projectsQ.error ? <p className="px-3 py-6 text-center text-sm text-fg-muted">Projects are not available yet.</p> : null}
                {!projectsQ.isLoading && !projectsQ.error && projectList.length === 0 ? (
                  <Command.Item value="project:new" onSelect={() => go("/app/projects?new=1")} className={itemCls}>
                    <Plus />
                    <span className="flex-1">Create your first project</span>
                  </Command.Item>
                ) : null}
                {projectList.map((p) => (
                  <Command.Item key={p.id} value={`project:${p.id}`} onSelect={() => { setActiveProjectId(p.id); go(`/app/projects/${p.id}`); }} className={itemCls}>
                    <span className="flex size-4 items-center justify-center text-[13px]" style={p.color ? { color: p.color } : undefined} aria-hidden>
                      {p.icon ?? <FolderKanban className="size-4" />}
                    </span>
                    <span className="min-w-0 flex-1">
                      <span className="block truncate text-fg">{p.name}</span>
                      {p.description ? <span className="block truncate text-[11.5px] text-fg-subtle">{p.description}</span> : null}
                    </span>
                    {activeProjectId === p.id ? <Check className="size-4 text-accent" /> : null}
                  </Command.Item>
                ))}
              </Command.Group>
            ) : null}

            {/* ---- export ---- */}
            {mode === "export" && activeChatId ? (
              <Command.Group heading="Export this conversation">
                {EXPORT_OPTIONS.map((o) => (
                  <Command.Item key={o.format} value={`export:${o.format}`} onSelect={() => { close(); void exportConversation(activeChatId, o.format).catch(() => {}); }} className={itemCls}>
                    {EXPORT_ICONS[o.format]}
                    <span className="min-w-0 flex-1">
                      <span className="block truncate text-fg">{o.label}</span>
                      <span className="block truncate text-[11.5px] text-fg-subtle">{o.description}</span>
                    </span>
                    <span className="font-mono text-[11px] text-fg-subtle">{o.hint}</span>
                  </Command.Item>
                ))}
              </Command.Group>
            ) : null}

            {/* ---- theme ---- */}
            {mode === "theme" ? (
              <Command.Group heading="Appearance">
                {(
                  [
                    { v: "light", label: "Light", icon: <Sun /> },
                    { v: "dark", label: "Dark", icon: <Moon /> },
                    { v: "system", label: "System", icon: <Monitor /> },
                  ] as { v: string; label: string; icon: React.ReactNode }[]
                ).map((t) => (
                  <Command.Item key={t.v} value={`theme:${t.v}`} onSelect={() => { setTheme(t.v); close(); }} className={itemCls}>
                    {t.icon}
                    <span className="flex-1">{t.label}</span>
                    {theme === t.v ? <Check className="size-4 text-accent" /> : null}
                  </Command.Item>
                ))}
              </Command.Group>
            ) : null}
          </Command.List>

          {!isMobile ? (
            <div className="flex items-center gap-3 border-t border-border px-3 py-1.5 text-[11px] text-fg-subtle">
              <span className="inline-flex items-center gap-1">
                <Kbd>↑↓</Kbd> navigate
              </span>
              <span className="inline-flex items-center gap-1">
                <Kbd>↵</Kbd> select
              </span>
              {mode !== "root" ? (
                <span className="inline-flex items-center gap-1">
                  <Kbd>⌫</Kbd> back
                </span>
              ) : (
                <span className="inline-flex items-center gap-1">
                  <Kbd>/</Kbd> search
                </span>
              )}
              <span className="ml-auto inline-flex items-center gap-1">
                <Kbd>esc</Kbd> close
              </span>
            </div>
          ) : null}
        </Command>
      </ResponsiveDialog>

      <ShortcutsSheet open={shortcutsOpen} onOpenChange={setShortcutsOpen} />
    </>
  );
}

/* ------------------------------------------------------------------------------------------------
 * Search results inside cmdk (↑↓↵ navigation)
 * ---------------------------------------------------------------------------------------------- */
function SearchResults({ searchQuery, search, nav, itemCls, isMobile, recent, onPickRecent, hybrid }: { searchQuery: string; search: ReturnType<typeof useSearch>; nav: ReturnType<typeof useSearchNavigation>; itemCls: string; isMobile: boolean; recent: ReturnType<typeof useRecentSearches>; onPickRecent: (v: string) => void; hybrid: boolean }) {
  const data = search.data;
  if (!search.searchable) {
    if (hybrid) return null;
    return (
      <>
        {recent.list.length ? (
          <Command.Group heading="Recent searches">
            {recent.list.map((r) => (
              <Command.Item key={r} value={`recent:${r}`} onSelect={() => onPickRecent(r)} className={itemCls}>
                <Clock />
                <span className="min-w-0 flex-1 truncate">{r}</span>
                <button type="button" onClick={(e) => { e.stopPropagation(); recent.remove(r); }} className="tap rounded p-1 text-fg-subtle hover:text-fg" aria-label={`Remove “${r}”`}>
                  <X className="size-3.5" />
                </button>
              </Command.Item>
            ))}
          </Command.Group>
        ) : null}
        <Command.Group heading="Search syntax">
          {SEARCH_EXAMPLES.map((e) => (
            <Command.Item key={e.label} value={`example:${e.label}`} onSelect={() => onPickRecent(e.q)} className={itemCls}>
              <Search />
              <span className="flex-1 font-mono text-[12.5px]">{e.label}</span>
            </Command.Item>
          ))}
          <p className="px-2.5 py-2 text-[11.5px] leading-5 text-fg-subtle">
            Free text + <code className="font-mono">model:</code> <code className="font-mono">provider:</code> <code className="font-mono">project:</code> <code className="font-mono">folder:</code> <code className="font-mono">after:</code> <code className="font-mono">before:</code> <code className="font-mono">role:</code> <code className="font-mono">is:</code> · quote phrases with &quot;…&quot;
          </p>
        </Command.Group>
      </>
    );
  }
  if (search.loading && !data) {
    return <p className="flex items-center justify-center gap-2 px-3 py-8 text-sm text-fg-muted"><Spinner /> Searching…</p>;
  }
  if (search.error) return <p className="px-3 py-8 text-center text-sm text-fg-muted">Search is unavailable right now.</p>;
  if (!data) return null;
  if (search.isEmpty) {
    return (
      <div className="flex flex-col items-center px-3 py-8 text-center">
        <SearchX className="size-5 text-fg-subtle" />
        <p className="mt-2 text-sm font-medium">No results for “{searchQuery.trim()}”</p>
        <p className="mt-0.5 text-[12.5px] text-fg-muted">Try fewer words or remove a filter.</p>
      </div>
    );
  }
  const terms = data.query.terms;
  const dense = !isMobile;
  const groups = GROUP_ORDER.filter((g: SearchGroup) => (data[g] as unknown[]).length > 0);
  return (
    <>
      {groups.map((g) => (
        <Command.Group key={g} heading={`${GROUP_LABELS[g]} · ${(data[g] as unknown[]).length}`}>
          {g === "conversations" &&
            data.conversations.map((c) => (
              <Command.Item key={c.id} value={`conv:${c.id}`} onSelect={() => nav.openConversation(c)} className={itemCls}>
                <ConversationHitContent hit={c} terms={terms} dense={dense} />
              </Command.Item>
            ))}
          {g === "messages" &&
            data.messages.map((m) => (
              <Command.Item key={m.id} value={`msg:${m.id}`} onSelect={() => nav.openMessage(m)} className={cn(itemCls, "items-start")}>
                <MessageHitContent hit={m} terms={terms} dense={dense} />
              </Command.Item>
            ))}
          {g === "models" &&
            data.models.map((m) => (
              <Command.Item key={m.key} value={`smodel:${m.key}`} onSelect={() => nav.openModel(m)} className={itemCls}>
                <ModelHitContent hit={m} dense={dense} />
              </Command.Item>
            ))}
          {g === "prompts" &&
            data.prompts.map((p) => (
              <Command.Item key={`${p.kind}-${p.id}`} value={`prompt:${p.kind}:${p.id}`} onSelect={() => nav.openPrompt(p)} className={itemCls}>
                <PromptHitContent hit={p} terms={terms} dense={dense} />
              </Command.Item>
            ))}
          {g === "projects" &&
            data.projects.map((p) => (
              <Command.Item key={p.id} value={`sproject:${p.id}`} onSelect={() => nav.openProject(p)} className={itemCls}>
                <ProjectHitContent hit={p} terms={terms} dense={dense} />
              </Command.Item>
            ))}
          {g === "presets" &&
            data.presets.map((p) => (
              <Command.Item key={p.id} value={`preset:${p.id}`} onSelect={() => nav.openPreset(p)} className={itemCls}>
                <PresetHitContent hit={p} terms={terms} dense={dense} />
              </Command.Item>
            ))}
        </Command.Group>
      ))}
      {search.nextCursor ? (
        <Command.Group>
          <Command.Item value="search:more" onSelect={() => void search.loadMore()} className={cn(itemCls, "justify-center text-accent data-[selected=true]:text-accent")}>
            {search.loadingMore ? <Spinner className="size-3.5" /> : null}
            <span>Load more results</span>
          </Command.Item>
        </Command.Group>
      ) : null}
      <p className="px-2.5 pt-2 text-right text-[10.5px] tabular-nums text-fg-subtle">
        {search.total} result{search.total === 1 ? "" : "s"} · {data.tookMs} ms
      </p>
    </>
  );
}

/* ------------------------------------------------------------------------------------------------
 * Keyboard shortcuts help
 * ---------------------------------------------------------------------------------------------- */
const SHORTCUTS: { keys: string[]; label: string; scope: string }[] = [
  { keys: ["⌘", "K"], label: "Command palette / search", scope: "Global" },
  { keys: ["⌘", "N"], label: "New chat", scope: "Global" },
  { keys: ["⌘", "B"], label: "Toggle sidebar", scope: "Global" },
  { keys: ["⌘", "/"], label: "Focus the composer", scope: "Chat" },
  { keys: ["?"], label: "Open this help (outside inputs)", scope: "Global" },
  { keys: ["/"], label: "Search mode inside the palette", scope: "Palette" },
  { keys: ["↑", "↓"], label: "Move selection", scope: "Palette" },
  { keys: ["↵"], label: "Send message / select item", scope: "Chat · Palette" },
  { keys: ["⇧", "↵"], label: "New line in the composer", scope: "Chat" },
  { keys: ["Esc"], label: "Stop generation / close sheets and dialogs", scope: "Chat · Global" },
  { keys: ["⌫"], label: "Back to commands (empty input)", scope: "Palette" },
];

export function ShortcutsSheet({ open, onOpenChange }: { open: boolean; onOpenChange: (o: boolean) => void }) {
  const isMobile = useIsMobile();
  return (
    <ResponsiveDialog open={open} onOpenChange={onOpenChange} title="Keyboard shortcuts" description={isMobile ? "Available when a keyboard is connected." : "Press ? anywhere to open this list."} size="sm">
      <ul className="divide-y divide-hairline">
        {SHORTCUTS.map((s) => (
          <li key={s.label} className="flex min-h-[44px] items-center gap-3 py-2">
            <span className="min-w-0 flex-1">
              <span className="block text-[14px] text-fg">{s.label}</span>
              <span className="block text-[11.5px] text-fg-subtle">{s.scope}</span>
            </span>
            <span className="flex shrink-0 items-center gap-1">
              {s.keys.map((k) => (
                <Kbd key={k} className="h-6 min-w-[1.6rem] text-[11px]">
                  {k}
                </Kbd>
              ))}
            </span>
          </li>
        ))}
      </ul>
    </ResponsiveDialog>
  );
}