import { Search } from "lucide-react";
import { useEffect, useState } from "react";
import { Button } from "~/components/ui/button.tsx";
import { cn } from "~/lib/utils.ts";
import { openSearchPalette, searchShortcutLabel } from "./search-store.ts";

/** 顶栏搜索入口:桌面是带快捷键提示的输入框样按钮,手机是图标按钮;都打开命令面板 */
export function SearchTrigger({ className }: { className?: string }) {
  // 快捷键文案依赖 navigator,挂载后再算,避免水合不一致
  const [shortcut, setShortcut] = useState("Ctrl K");
  useEffect(() => setShortcut(searchShortcutLabel()), []);
  return (
    <>
      <button
        type="button"
        onClick={() => openSearchPalette()}
        aria-label="搜索"
        aria-keyshortcuts="Control+K Meta+K"
        className={cn(
          "hidden h-8 w-56 cursor-pointer items-center gap-2 rounded-full border border-border/80 bg-foreground/[0.03] px-3 text-caption text-muted-foreground transition-colors duration-micro outline-none hover:bg-foreground/[0.06] hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 md:flex lg:w-72",
          className,
        )}
      >
        <Search className="h-3.5 w-3.5 shrink-0" />
        <span className="flex-1 truncate text-left">搜索作品、页面</span>
        <kbd className="rounded-tight border border-border/70 px-1 font-sans text-label leading-4 font-medium">
          {shortcut}
        </kbd>
      </button>
      <Button
        variant="ghost"
        size="icon"
        className="h-8 w-8 md:hidden"
        aria-label="搜索"
        onClick={() => openSearchPalette()}
      >
        <Search className="h-4 w-4" />
      </Button>
    </>
  );
}