// src/app/[locale]/admin/import/effects/import-effects-client.tsx
"use client";

import {
	Check,
	Download,
	Loader2,
	Music,
	Package,
	Search,
	Sparkles,
	Trash2,
	X,
} from "lucide-react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { toast } from "sonner";
import { ImportErrorBanner } from "@/components/admin/import-error-banner";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { adminFetch } from "@/lib/admin-fetch";
import { runSseImport } from "@/lib/sse-client";
import { cn } from "@/lib/utils";

interface EffectItem {
	id: string;
	lib: string;
	type: string;
	revision: number;
	present: boolean;
	nitroExists: boolean;
}

type Filter = "all" | "fx" | "dance";

export function ImportEffectsClient() {
	const [searchTerm, setSearchTerm] = useState("");
	const [effects, setEffects] = useState<EffectItem[]>([]);
	const [loading, setLoading] = useState(false);
	const [error, setError] = useState("");
	const [filter, setFilter] = useState<Filter>("all");
	const [selected, setSelected] = useState<Set<string>>(new Set());
	const [batchProgress, setBatchProgress] = useState<{
		done: number;
		total: number;
	} | null>(null);
	const [busyLib, setBusyLib] = useState<string | null>(null);
	const batchAbortRef = useRef<AbortController | null>(null);

	const fetchEffects = useCallback(async (search: string) => {
		setLoading(true);
		setError("");
		try {
			const params = new URLSearchParams();
			if (search) params.set("search", search);
			const res = await adminFetch(`/api/admin/import/effects?${params}`);
			const data = await res.json();
			if (!res.ok) {
				setError(data.error || "Failed to load");
				return;
			}
			setEffects(data.effects || []);
			setSelected(new Set());
		} catch {
			setError("Network error");
		} finally {
			setLoading(false);
		}
	}, []);

	useEffect(() => {
		fetchEffects("");
	}, [fetchEffects]);

	const visible = useMemo(
		() => effects.filter((e) => filter === "all" || e.type === filter),
		[effects, filter],
	);
	const importable = useMemo(
		() => visible.filter((e) => !e.present || !e.nitroExists),
		[visible],
	);
	const importedCount = useMemo(
		() => visible.filter((e) => e.present && e.nitroExists).length,
		[visible],
	);

	function toggle(lib: string) {
		setSelected((prev) => {
			const n = new Set(prev);
			if (n.has(lib)) n.delete(lib);
			else n.add(lib);
			return n;
		});
	}

	function markDone(lib: string) {
		setEffects((prev) =>
			prev.map((e) =>
				e.lib === lib ? { ...e, present: true, nitroExists: true } : e,
			),
		);
	}

	async function importViaSse(items: EffectItem[]) {
		batchAbortRef.current?.abort();
		const abort = new AbortController();
		batchAbortRef.current = abort;
		setBatchProgress({ done: 0, total: items.length });
		let done = 0;
		try {
			await runSseImport(
				"/api/admin/import/effects/batch",
				{ items, concurrency: 3 },
				(lib) => {
					done++;
					markDone(lib);
					setBatchProgress({ done, total: items.length });
				},
				(succeeded, failed) => {
					setSelected(new Set());
					if (succeeded > 0) toast.success(`${succeeded} effect(s) imported`);
					if (failed > 0) toast.error(`${failed} failed`);
				},
				abort.signal,
				() => {
					done++;
					setBatchProgress({ done, total: items.length });
				},
			);
		} catch (err) {
			if ((err as Error)?.name === "AbortError") {
				toast.info("Import cancelled");
			} else {
				throw err;
			}
		} finally {
			if (batchAbortRef.current === abort) batchAbortRef.current = null;
			setBatchProgress(null);
		}
	}

	async function importOne(e: EffectItem) {
		setBusyLib(e.lib);
		try {
			await importViaSse([e]);
		} finally {
			setBusyLib(null);
		}
	}

	async function importSelected() {
		const items = visible.filter(
			(e) => selected.has(e.lib) && (!e.present || !e.nitroExists),
		);
		if (items.length === 0) return;
		await importViaSse(items);
	}

	async function remove(e: EffectItem) {
		setBusyLib(e.lib);
		try {
			const res = await adminFetch(
				`/api/admin/import/effects?lib=${encodeURIComponent(e.lib)}`,
				{
					method: "DELETE",
				},
			);
			const data = await res.json();
			if (res.ok) {
				toast.success(`${e.lib} removed`);
				setEffects((prev) =>
					prev.map((x) =>
						x.lib === e.lib ? { ...x, present: false, nitroExists: false } : x,
					),
				);
			} else {
				toast.error(data.error || "Delete failed");
			}
		} finally {
			setBusyLib(null);
		}
	}

	return (
		<div className="space-y-4">
			{/* Stats */}
			{effects.length > 0 && (
				<div className="flex items-center gap-3 flex-wrap">
					<div className="flex items-center gap-1.5 text-sm">
						<Package className="h-4 w-4 text-muted-foreground" />
						<span className="font-medium">{visible.length}</span>
						<span className="text-muted-foreground">effects</span>
					</div>
					<div className="flex items-center gap-1.5 text-sm">
						<Check className="h-4 w-4 text-[var(--admin-success)]" />
						<span className="font-medium text-[var(--admin-success)]">
							{importedCount}
						</span>
						<span className="text-muted-foreground">imported</span>
					</div>
					<div className="flex items-center gap-1.5 text-sm">
						<Download className="h-4 w-4 text-muted-foreground" />
						<span className="font-medium">{importable.length}</span>
						<span className="text-muted-foreground">available</span>
					</div>
				</div>
			)}

			{/* Search + filter */}
			<div className="flex gap-2 flex-wrap">
				<div className="relative flex-1 max-w-md">
					<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
					<Input
						placeholder="Search effects by lib / id..."
						value={searchTerm}
						onChange={(e) => setSearchTerm(e.target.value)}
						onKeyDown={(e) => {
							if (e.key === "Enter") fetchEffects(searchTerm);
							if (e.key === "Escape") {
								setSearchTerm("");
								fetchEffects("");
							}
						}}
						className="pl-9 pr-8"
					/>
					{searchTerm && (
						<button
							type="button"
							onClick={() => {
								setSearchTerm("");
								fetchEffects("");
							}}
							className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
						>
							<X className="h-3.5 w-3.5" />
						</button>
					)}
				</div>
				<Button
					onClick={() => fetchEffects(searchTerm)}
					size="sm"
					disabled={loading}
				>
					{loading ? (
						<Loader2 className="w-4 h-4 animate-spin" />
					) : (
						<Search className="w-4 h-4" />
					)}
				</Button>
				{(["all", "fx", "dance"] as Filter[]).map((f) => (
					<Button
						key={f}
						size="sm"
						variant={filter === f ? "default" : "outline"}
						onClick={() => setFilter(f)}
					>
						{f.toUpperCase()}
					</Button>
				))}
			</div>

			{/* Bulk actions */}
			{importable.length > 0 && (
				<div className="flex items-center gap-2 flex-wrap">
					<Button
						variant="outline"
						size="sm"
						className="text-xs h-8"
						disabled={!!batchProgress}
						onClick={() =>
							setSelected((prev) =>
								prev.size === importable.length
									? new Set()
									: new Set(importable.map((e) => e.lib)),
							)
						}
					>
						{selected.size === importable.length
							? "Deselect All"
							: `Select All (${importable.length})`}
					</Button>
					{selected.size > 0 && (
						<Button
							size="sm"
							className="h-8"
							onClick={importSelected}
							disabled={!!batchProgress}
						>
							{batchProgress ? (
								<Loader2 className="w-4 h-4 animate-spin mr-1" />
							) : (
								<Download className="w-4 h-4 mr-1" />
							)}
							Import {selected.size} selected
						</Button>
					)}
					{batchProgress && (
						<>
							<span className="text-xs text-muted-foreground">
								{batchProgress.done}/{batchProgress.total}
							</span>
							<Button
								size="sm"
								variant="outline"
								className="h-8"
								onClick={() => batchAbortRef.current?.abort()}
							>
								Cancel
							</Button>
						</>
					)}
				</div>
			)}

			{/* Error */}
			{error && <ImportErrorBanner error={error} />}

			{/* Empty */}
			{!loading && visible.length === 0 && !error && (
				<div className="text-center py-12 text-muted-foreground">
					<Sparkles className="w-12 h-12 mx-auto mb-3 opacity-50" />
					<p className="text-sm">No effects found</p>
				</div>
			)}

			{/* Grid */}
			{visible.length > 0 && (
				<div
					className={cn(
						"grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3",
						loading && "opacity-50",
					)}
				>
					{visible.map((e) => {
						const imported = e.present && e.nitroExists;
						const isSelected = selected.has(e.lib);
						return (
							<div
								key={e.lib}
								className={cn(
									"rounded-lg border overflow-hidden bg-card relative hover:border-border transition-all",
									imported && "ring-1 ring-[var(--admin-success)]/30",
									isSelected && "ring-2 ring-primary border-primary",
								)}
							>
								{!imported && (
									<button
										type="button"
										onClick={() => toggle(e.lib)}
										className={cn(
											"absolute top-1.5 left-1.5 z-10 w-5 h-5 rounded border-2 flex items-center justify-center transition-colors",
											isSelected
												? "bg-primary border-primary text-primary-foreground"
												: "bg-background/80 border-muted-foreground/30 hover:border-muted-foreground",
										)}
									>
										{isSelected && <Check className="w-3 h-3" />}
									</button>
								)}
								<div
									className={cn(
										"flex flex-col items-center justify-center h-20 gap-1",
										e.type === "dance"
											? "bg-gradient-to-br from-[var(--admin-warning)]/25 to-[var(--admin-warning)]/10"
											: "bg-gradient-to-br from-[var(--admin-accent)]/25 to-[var(--admin-accent)]/10",
									)}
								>
									{e.type === "dance" ? (
										<Music className="w-7 h-7 text-[var(--admin-warning)]/80" />
									) : (
										<Sparkles className="w-7 h-7 text-[var(--admin-accent-text)]" />
									)}
									<span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
										{e.type}
									</span>
								</div>
								<div className="px-2.5 py-2 border-t space-y-1">
									<div className="text-xs font-bold truncate">{e.lib}</div>
									<div className="text-[10px] text-muted-foreground truncate">
										id {e.id}
									</div>
									<div className="pt-1">
										{imported ? (
											<div className="flex items-center gap-1">
												<Badge className="text-[10px] px-1.5 py-0 bg-[var(--admin-success-subtle)] text-[var(--admin-success)] border-0 gap-0.5 flex-1 justify-center">
													<Check className="w-2.5 h-2.5" />
													Imported
												</Badge>
												<Button
													variant="ghost"
													size="sm"
													className="h-5 w-5 p-0 shrink-0"
													title="Remove effect"
													disabled={busyLib === e.lib || !!batchProgress}
													onClick={() => remove(e)}
												>
													<Trash2 className="w-3 h-3" />
												</Button>
											</div>
										) : (
											<Button
												size="sm"
												variant="outline"
												className="w-full text-xs h-7"
												disabled={busyLib === e.lib || !!batchProgress}
												onClick={() => importOne(e)}
											>
												{busyLib === e.lib ? (
													<Loader2 className="w-3 h-3 animate-spin mr-1" />
												) : (
													<Download className="w-3 h-3 mr-1" />
												)}
												Import
											</Button>
										)}
									</div>
								</div>
							</div>
						);
					})}
				</div>
			)}
		</div>
	);
}