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";

/**
 * 顶栏搜索入口,放在右侧玻璃胶囊里的第一格(与 uhd_web 流媒体顶栏的搜索同一做法):
 * 桌面是一枚平涂淡底的胶囊(搜索图标 + 提示 + 快捷键),手机只留图标;都打开命令面板。
 * 胶囊本身已经是玻璃,里面不再套 .field-glass 或描边。
 */
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-48 cursor-pointer items-center gap-2 rounded-full bg-foreground/[0.05] pr-1.5 pl-3 text-caption text-muted-foreground outline-none transition-colors duration-base hover:bg-foreground/[0.08] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 md:flex lg:w-60",
          className,
        )}
      >
        <Search className="h-3.5 w-3.5 shrink-0" />
        <span className="flex-1 truncate text-left">搜索作品、页面</span>
        <kbd className="rounded-full bg-foreground/[0.06] px-1.5 font-sans text-label leading-5 font-medium">
          {shortcut}
        </kbd>
      </button>
      <Button
        variant="ghost"
        size="icon-sm"
        className="md:hidden"
        aria-label="搜索"
        onClick={() => openSearchPalette()}
      >
        <Search className="h-4 w-4" />
      </Button>
    </>
  );
}