EpicNext-Cms/src/components/admin/search-dialog.tsx

"use client";

import { SearchIcon } from "lucide-react";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { useCallback, useEffect, useRef, useState } from "react";
import {
	Command,
	CommandEmpty,
	CommandGroup,
	CommandInput,
	CommandItem,
	CommandList,
} from "@/components/ui/command";
import { Dialog, DialogContent } from "@/components/ui/dialog";
import { useDebounce } from "@/hooks/use-debounce";

type SearchResult = {
	type: string;
	id: number | string;
	title: string;
	subtitle: string;
	url: string;
};

type SearchResponse = {
	ok: boolean;
	results: SearchResult[];
};

export function SearchDialog() {
	const t = useTranslations("pages.admin.search");
	const router = useRouter();
	const [open, setOpen] = useState(false);
	const [query, setQuery] = useState("");
	const [results, setResults] = useState<SearchResult[]>([]);
	const [loading, setLoading] = useState(false);
	const debouncedQuery = useDebounce(query, 250);
	const abortRef = useRef<AbortController | null>(null);

	const groupLabels: Record<string, string> = {
		users: t("users"),
		articles: t("articles"),
		rooms: t("rooms"),
		guilds: t("guilds"),
		shop: t("shop"),
		rareValues: t("rareValues"),
	};

	const fetchResults = useCallback(async (q: string) => {
		abortRef.current?.abort();
		if (q.length < 2) {
			setResults([]);
			setLoading(false);
			return;
		}
		const controller = new AbortController();
		abortRef.current = controller;
		setLoading(true);
		try {
			const res = await fetch(`/api/admin/search?q=${encodeURIComponent(q)}`, {
				signal: controller.signal,
			});
			const data: SearchResponse = await res.json();
			if (data.ok) setResults(data.results);
		} catch {}
		setLoading(false);
	}, []);

	useEffect(() => {
		fetchResults(debouncedQuery);
	}, [debouncedQuery, fetchResults]);

	useEffect(() => {
		function handleKeyDown(e: KeyboardEvent) {
			if ((e.metaKey || e.ctrlKey) && e.key === "k") {
				e.preventDefault();
				setOpen((prev) => !prev);
			}
		}
		document.addEventListener("keydown", handleKeyDown);
		return () => document.removeEventListener("keydown", handleKeyDown);
	}, []);

	function handleSelect(url: string) {
		setOpen(false);
		setQuery("");
		setResults([]);
		router.push(url);
	}

	const grouped = groupResults(results);

	return (
		<Dialog open={open} onOpenChange={setOpen}>
			<button
				type="button"
				onClick={() => setOpen(true)}
				className="flex items-center gap-2 rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-1.5 text-xs text-[var(--admin-text-muted)] hover:border-[var(--admin-accent)]/40 hover:text-[var(--admin-text)] transition-colors cursor-pointer"
			>
				<SearchIcon size={14} />
				<span className="hidden sm:inline">{t("placeholder")}</span>
				<kbd className="pointer-events-none hidden sm:inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-60">
					⌘K
				</kbd>
			</button>
			<DialogContent className="sm:max-w-lg p-0 gap-0 overflow-hidden">
				<Command
					className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground"
					shouldFilter={false}
				>
					<CommandInput
						placeholder={t("placeholder")}
						value={query}
						onValueChange={setQuery}
						className="h-12"
					/>
					<CommandList className="max-h-[400px]">
						{loading && query.length >= 2 ? (
							<div className="py-6 text-center text-sm text-muted-foreground">
								…
							</div>
						) : null}
						<CommandEmpty>{t("noResults")}</CommandEmpty>
						{Object.entries(grouped).map(([group, items]) => (
							<CommandGroup key={group} heading={groupLabels[group] ?? group}>
								{items.map((item) => (
									<CommandItem
										key={`${item.type}-${item.id}`}
										value={`${item.type}-${item.id}`}
										onSelect={() => handleSelect(item.url)}
										className="flex flex-col items-start gap-0.5 py-2"
									>
										<span className="text-sm font-medium">{item.title}</span>
										{item.subtitle ? (
											<span className="text-xs text-muted-foreground truncate w-full">
												{item.subtitle}
											</span>
										) : null}
									</CommandItem>
								))}
							</CommandGroup>
						))}
					</CommandList>
				</Command>
			</DialogContent>
		</Dialog>
	);
}

function groupResults(results: SearchResult[]) {
	const grouped: Record<string, SearchResult[]> = {};
	for (const r of results) {
		if (!grouped[r.type]) grouped[r.type] = [];
		grouped[r.type].push(r);
	}
	return grouped;
}