"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 type { AdminSearchResult } from "@/app/api/admin/search/route";
import {
	Command,
	CommandEmpty,
	CommandGroup,
	CommandInput,
	CommandItem,
	CommandList,
} from "@/components/ui/command";
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogTitle,
	DialogTrigger,
} from "@/components/ui/dialog";
import { useDebounce } from "@/hooks/use-debounce";
import { confirmUnsavedNavigation } from "@/hooks/use-unsaved-changes";
import {
	type AdminNavigationOptions,
	visibleAdminNavigation,
} from "@/lib/admin-navigation";
import { AdminSearchRequest } from "@/lib/admin-search-request";

type SearchResult = AdminSearchResult;

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

export function SearchDialog({
	navigation,
}: {
	navigation: AdminNavigationOptions;
}) {
	const tNav = useTranslations("pages.admin.nav");
	const getPages = (queryPlaceholder: string) =>
		visibleAdminNavigation(navigation)
			.flatMap((group) =>
				group.items.map((item) => ({ ...item, group: tNav(group.labelKey) })),
			)
			.filter((item) =>
				[tNav(item.labelKey), item.group, item.href]
					.join(" ")
					.toLocaleLowerCase()
					.includes(queryPlaceholder),
			);
	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 [failed, setFailed] = useState(false);
	const [partial, setPartial] = useState(false);
	const debouncedQuery = useDebounce(query, 250);
	const requestRef = useRef(new AdminSearchRequest());

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

	const fetchResults = useCallback(async (q: string) => {
		requestRef.current.cancel();
		setFailed(false);
		setPartial(false);
		setResults([]);
		if (!canSearchRecords(q)) {
			setResults([]);
			setLoading(false);
			return;
		}
		const controller = requestRef.current.start();
		setLoading(true);
		try {
			const res = await fetch(`/api/admin/search?q=${encodeURIComponent(q)}`, {
				signal: controller.signal,
			});
			if (!res.ok) throw new Error("Search request failed");
			const data: SearchResponse = await res.json();
			if (!requestRef.current.accepts(controller)) return;
			if (data.ok) {
				setResults(data.results);
				setPartial(Boolean(data.partial));
			} else setFailed(true);
		} catch (error) {
			if (error instanceof DOMException && error.name === "AbortError") return;
			if (requestRef.current.accepts(controller)) {
				setResults([]);
				setFailed(true);
			}
		} finally {
			if (requestRef.current.accepts(controller)) setLoading(false);
		}
	}, []);

	useEffect(() => {
		if (!open || query !== debouncedQuery) return;
		fetchResults(debouncedQuery);
		return () => requestRef.current.cancel();
	}, [debouncedQuery, fetchResults, open, query]);

	useEffect(() => {
		return () => requestRef.current.cancel();
	}, []);

	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 handleQueryChange(value: string) {
		requestRef.current.cancel();
		setQuery(value.slice(0, 64));
		setResults([]);
		setFailed(false);
		setPartial(false);
		setLoading(canSearchRecords(value));
	}

	function handleOpenChange(next: boolean) {
		if (!next) {
			requestRef.current.cancel();
			setQuery("");
			setResults([]);
			setFailed(false);
			setPartial(false);
			setLoading(false);
		}
		setOpen(next);
	}

	function handleSelect(url: string) {
		if (!confirmUnsavedNavigation()) return;
		handleOpenChange(false);
		setQuery("");
		setResults([]);
		router.push(url);
	}

	const grouped = groupResults(query === debouncedQuery ? results : []);
	const pages = getPages(query.trim().toLocaleLowerCase()).slice(0, 8);

	return (
		<Dialog open={open} onOpenChange={handleOpenChange}>
			<DialogTrigger
				type="button"
				aria-label={t("placeholder")}
				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">
					Ctrl/⌘ K
				</kbd>
			</DialogTrigger>
			<DialogContent className="sm:max-w-lg p-0 gap-0 overflow-hidden">
				<DialogTitle className="sr-only">{t("placeholder")}</DialogTitle>
				<DialogDescription className="sr-only">
					{t("description")}
				</DialogDescription>
				<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={handleQueryChange}
						aria-label={t("placeholder")}
						maxLength={64}
						className="h-12"
					/>
					<CommandList className="max-h-[400px]">
						{loading && canSearchRecords(query) ? (
							<div className="py-6 text-center text-sm text-muted-foreground">
								…
							</div>
						) : null}
						{!loading && !failed && !partial && canSearchRecords(query) && (
							<CommandEmpty>{t("noResults")}</CommandEmpty>
						)}
						{!canSearchRecords(query) && (
							<p className="p-4 text-sm text-muted-foreground">{t("hint")}</p>
						)}
						{(failed || partial) && (
							<p role="alert" className="p-4 text-sm">
								{t(partial ? "partialError" : "loadError")}
								<button
									type="button"
									onClick={() => fetchResults(query)}
									className="ml-2 underline"
								>
									{t("retry")}
								</button>
							</p>
						)}
						{pages.length > 0 && (
							<CommandGroup heading={t("pages")}>
								{pages.map((item) => (
									<CommandItem
										key={item.href}
										value={item.href}
										onSelect={() => handleSelect(item.href)}
									>
										<item.icon size={16} />
										<span>{tNav(item.labelKey)}</span>
										<span className="ml-auto text-xs text-muted-foreground">
											{item.group}
										</span>
									</CommandItem>
								))}
							</CommandGroup>
						)}
						{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="w-full min-w-0 truncate 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 canSearchRecords(value: string) {
	const q = value.trim();
	return q.length >= 2 || /^[1-9]$/.test(q);
}

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