import { useMutation, useQuery } from "@tanstack/react-query";
import {
	createFileRoute,
	Link,
	redirect,
	useNavigate,
} from "@tanstack/react-router";
import { Check, Download, LogOut, Search, Users, X } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { authClient } from "@/lib/auth-client";
import { orpc } from "@/utils/orpc";

export const Route = createFileRoute("/admin")({
	component: AdminPage,
	beforeLoad: async () => {
		const session = await authClient.getSession();
		if (!session.data?.user) {
			throw redirect({ to: "/login" });
		}
		const user = session.data.user as { role?: string };
		if (user.role !== "admin") {
			throw redirect({ to: "/login" });
		}
	},
});

function AdminPage() {
	const navigate = useNavigate();
	const [search, setSearch] = useState("");
	const [artForm, setArtForm] = useState("");
	const [fromDate, setFromDate] = useState("");
	const [toDate, setToDate] = useState("");
	const [page, setPage] = useState(1);
	const pageSize = 20;

	const statsQuery = useQuery(orpc.getRegistrationStats.queryOptions());

	const registrationsQuery = useQuery(
		orpc.getRegistrations.queryOptions({
			input: {
				search: search || undefined,
				artForm: artForm || undefined,
				fromDate: fromDate || undefined,
				toDate: toDate || undefined,
				page,
				pageSize,
			},
		}),
	);

	const adminRequestsQuery = useQuery(orpc.getAdminRequests.queryOptions());

	const exportMutation = useMutation({
		...orpc.exportRegistrations.mutationOptions(),
		onSuccess: (data: { csv: string; filename: string }) => {
			const blob = new Blob([data.csv], { type: "text/csv" });
			const url = window.URL.createObjectURL(blob);
			const a = document.createElement("a");
			a.href = url;
			a.download = data.filename;
			document.body.appendChild(a);
			a.click();
			document.body.removeChild(a);
			window.URL.revokeObjectURL(url);
		},
	});

	const approveRequestMutation = useMutation({
		...orpc.approveAdminRequest.mutationOptions(),
		onSuccess: () => {
			toast.success("Admin toegang goedgekeurd");
			adminRequestsQuery.refetch();
		},
		onError: (error) => {
			toast.error(`Fout: ${error.message}`);
		},
	});

	const rejectRequestMutation = useMutation({
		...orpc.rejectAdminRequest.mutationOptions(),
		onSuccess: () => {
			toast.success("Admin toegang geweigerd");
			adminRequestsQuery.refetch();
		},
		onError: (error) => {
			toast.error(`Fout: ${error.message}`);
		},
	});

	const handleSignOut = async () => {
		await authClient.signOut();
		navigate({ to: "/" });
	};

	const handleExport = () => {
		exportMutation.mutate(undefined);
	};

	const handleApprove = (requestId: string) => {
		approveRequestMutation.mutate({ requestId });
	};

	const handleReject = (requestId: string) => {
		rejectRequestMutation.mutate({ requestId });
	};

	const stats = statsQuery.data;
	const registrations = registrationsQuery.data?.data ?? [];
	const pagination = registrationsQuery.data?.pagination;
	const adminRequests = adminRequestsQuery.data ?? [];
	const pendingRequests = adminRequests.filter((r) => r.status === "pending");

	return (
		<div className="min-h-screen bg-[#214e51]">
			{/* Header */}
			<header className="border-white/10 border-b bg-[#214e51]/95 px-8 py-6">
				<div className="mx-auto flex max-w-7xl items-center justify-between">
					<div className="flex items-center gap-4">
						<Link to="/" className="text-white hover:opacity-80">
							← Terug naar website
						</Link>
						<h1 className="font-['Intro',sans-serif] text-3xl text-white">
							Admin Dashboard
						</h1>
					</div>
					<Button
						onClick={handleSignOut}
						variant="outline"
						className="border-white/30 bg-transparent text-white hover:bg-white/10"
					>
						<LogOut className="mr-2 h-4 w-4" />
						Uitloggen
					</Button>
				</div>
			</header>

			{/* Main Content */}
			<main className="mx-auto max-w-7xl p-8">
				{/* Pending Admin Requests */}
				{pendingRequests.length > 0 && (
					<Card className="mb-6 border-yellow-500/30 bg-yellow-500/10">
						<CardHeader>
							<CardTitle className="font-['Intro',sans-serif] text-xl text-yellow-200">
								Openstaande Admin Aanvragen ({pendingRequests.length})
							</CardTitle>
							<CardDescription className="text-yellow-200/60">
								Gebruikers die admin toegang hebben aangevraagd
							</CardDescription>
						</CardHeader>
						<CardContent>
							<div className="space-y-3">
								{pendingRequests.map((request) => (
									<div
										key={request.id}
										className="flex items-center justify-between rounded-lg border border-yellow-500/20 bg-yellow-500/5 p-4"
									>
										<div>
											<p className="font-medium text-white">
												{request.userName}
											</p>
											<p className="text-sm text-white/60">
												{request.userEmail}
											</p>
											<p className="text-white/40 text-xs">
												Aangevraagd:{" "}
												{new Date(request.requestedAt).toLocaleDateString(
													"nl-BE",
												)}
											</p>
										</div>
										<div className="flex gap-2">
											<Button
												onClick={() => handleApprove(request.id)}
												disabled={approveRequestMutation.isPending}
												size="sm"
												className="bg-green-600 text-white hover:bg-green-700"
											>
												<Check className="mr-1 h-4 w-4" />
												Goedkeuren
											</Button>
											<Button
												onClick={() => handleReject(request.id)}
												disabled={rejectRequestMutation.isPending}
												size="sm"
												variant="outline"
												className="border-red-500/30 text-red-400 hover:bg-red-500/10"
											>
												<X className="mr-1 h-4 w-4" />
												Weigeren
											</Button>
										</div>
									</div>
								))}
							</div>
						</CardContent>
					</Card>
				)}

				{/* Stats Cards */}
				<div className="mb-8 grid grid-cols-1 gap-6 md:grid-cols-3">
					<Card className="border-white/10 bg-white/5">
						<CardHeader className="pb-2">
							<CardDescription className="text-white/60">
								Totaal inschrijvingen
							</CardDescription>
							<CardTitle className="font-['Intro',sans-serif] text-4xl text-white">
								{stats?.total ?? 0}
							</CardTitle>
						</CardHeader>
						<CardContent>
							<Users className="h-5 w-5 text-white/40" />
						</CardContent>
					</Card>

					<Card className="border-white/10 bg-white/5">
						<CardHeader className="pb-2">
							<CardDescription className="text-white/60">
								Vandaag ingeschreven
							</CardDescription>
							<CardTitle className="font-['Intro',sans-serif] text-4xl text-white">
								{stats?.today ?? 0}
							</CardTitle>
						</CardHeader>
						<CardContent>
							<span className="text-sm text-white/40">
								Nieuwe registraties vandaag
							</span>
						</CardContent>
					</Card>

					<Card className="border-white/10 bg-white/5">
						<CardHeader className="pb-2">
							<CardDescription className="text-white/60">
								Per kunstvorm
							</CardDescription>
							<div className="mt-2 space-y-1">
								{stats?.byArtForm.slice(0, 5).map((item) => (
									<div
										key={item.artForm}
										className="flex items-center justify-between text-sm"
									>
										<span className="text-white/80">{item.artForm}</span>
										<span className="text-white">{item.count}</span>
									</div>
								))}
							</div>
						</CardHeader>
					</Card>
				</div>

				{/* Filters */}
				<Card className="mb-6 border-white/10 bg-white/5">
					<CardHeader>
						<CardTitle className="font-['Intro',sans-serif] text-white text-xl">
							Filters
						</CardTitle>
					</CardHeader>
					<CardContent>
						<div className="grid grid-cols-1 gap-4 md:grid-cols-4">
							<div>
								<label
									htmlFor="search"
									className="mb-2 block text-sm text-white/60"
								>
									Zoeken
								</label>
								<div className="relative">
									<Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-white/40" />
									<Input
										id="search"
										placeholder="Naam of email..."
										value={search}
										onChange={(e) => setSearch(e.target.value)}
										className="border-white/20 bg-white/10 pl-10 text-white placeholder:text-white/40"
									/>
								</div>
							</div>

							<div>
								<label
									htmlFor="artForm"
									className="mb-2 block text-sm text-white/60"
								>
									Kunstvorm
								</label>
								<Input
									id="artForm"
									placeholder="Filter op kunstvorm..."
									value={artForm}
									onChange={(e) => setArtForm(e.target.value)}
									className="border-white/20 bg-white/10 text-white placeholder:text-white/40"
								/>
							</div>

							<div>
								<label
									htmlFor="fromDate"
									className="mb-2 block text-sm text-white/60"
								>
									Vanaf
								</label>
								<Input
									id="fromDate"
									type="date"
									value={fromDate}
									onChange={(e) => setFromDate(e.target.value)}
									className="border-white/20 bg-white/10 text-white [color-scheme:dark]"
								/>
							</div>

							<div>
								<label
									htmlFor="toDate"
									className="mb-2 block text-sm text-white/60"
								>
									Tot
								</label>
								<Input
									id="toDate"
									type="date"
									value={toDate}
									onChange={(e) => setToDate(e.target.value)}
									className="border-white/20 bg-white/10 text-white [color-scheme:dark]"
								/>
							</div>
						</div>
					</CardContent>
				</Card>

				{/* Export Button */}
				<div className="mb-6 flex items-center justify-between">
					<p className="text-white/60">
						{pagination?.total ?? 0} registraties gevonden
					</p>
					<Button
						onClick={handleExport}
						disabled={exportMutation.isPending}
						className="bg-white text-[#214e51] hover:bg-white/90"
					>
						<Download className="mr-2 h-4 w-4" />
						{exportMutation.isPending ? "Exporteren..." : "Exporteer CSV"}
					</Button>
				</div>

				{/* Registrations Table */}
				<Card className="border-white/10 bg-white/5">
					<CardContent className="p-0">
						<div className="overflow-x-auto">
							<table className="w-full">
								<thead>
									<tr className="border-white/10 border-b">
										<th className="px-6 py-4 text-left font-medium text-sm text-white/60">
											Naam
										</th>
										<th className="px-6 py-4 text-left font-medium text-sm text-white/60">
											Email
										</th>
										<th className="px-6 py-4 text-left font-medium text-sm text-white/60">
											Telefoon
										</th>
										<th className="px-6 py-4 text-left font-medium text-sm text-white/60">
											Kunstvorm
										</th>
										<th className="px-6 py-4 text-left font-medium text-sm text-white/60">
											Ervaring
										</th>
										<th className="px-6 py-4 text-left font-medium text-sm text-white/60">
											Datum
										</th>
									</tr>
								</thead>
								<tbody>
									{registrationsQuery.isLoading ? (
										<tr>
											<td
												colSpan={6}
												className="px-6 py-8 text-center text-white/60"
											>
												Laden...
											</td>
										</tr>
									) : registrations.length === 0 ? (
										<tr>
											<td
												colSpan={6}
												className="px-6 py-8 text-center text-white/60"
											>
												Geen registraties gevonden
											</td>
										</tr>
									) : (
										registrations.map((reg) => (
											<tr
												key={reg.id}
												className="border-white/5 border-b hover:bg-white/5"
											>
												<td className="px-6 py-4 text-white">
													{reg.firstName} {reg.lastName}
												</td>
												<td className="px-6 py-4 text-white/80">{reg.email}</td>
												<td className="px-6 py-4 text-white/80">
													{reg.phone || "-"}
												</td>
												<td className="px-6 py-4 text-white/80">
													{reg.artForm}
												</td>
												<td className="px-6 py-4 text-white/80">
													{reg.experience || "-"}
												</td>
												<td className="px-6 py-4 text-white/60">
													{new Date(reg.createdAt).toLocaleDateString("nl-BE")}
												</td>
											</tr>
										))
									)}
								</tbody>
							</table>
						</div>
					</CardContent>
				</Card>

				{/* Pagination */}
				{pagination && pagination.totalPages > 1 && (
					<div className="mt-6 flex items-center justify-center gap-2">
						<Button
							onClick={() => setPage((p) => Math.max(1, p - 1))}
							disabled={page === 1}
							variant="outline"
							className="border-white/20 bg-transparent text-white hover:bg-white/10 disabled:opacity-50"
						>
							Vorige
						</Button>
						<span className="mx-4 text-white">
							Pagina {page} van {pagination.totalPages}
						</span>
						<Button
							onClick={() =>
								setPage((p) => Math.min(pagination.totalPages, p + 1))
							}
							disabled={page === pagination.totalPages}
							variant="outline"
							className="border-white/20 bg-transparent text-white hover:bg-white/10 disabled:opacity-50"
						>
							Volgende
						</Button>
					</div>
				)}
			</main>
		</div>
	);
}