import { useQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
import { Database, Film, LibraryBig, Monitor, Users } from "lucide-react";

import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { useTRPC } from "@/utils/trpc";

export const Route = createFileRoute("/dashboard/")({
	component: RouteComponent,
});

function RouteComponent() {
	const trpc = useTRPC();
	const {
		data: stats,
		isLoading,
		error,
	} = useQuery(trpc.stats.getOverview.queryOptions());

	if (error) {
		return (
			<div className="flex h-full items-center justify-center p-6">
				<Card className="w-full max-w-md">
					<CardHeader>
						<CardTitle>Error Loading Statistics</CardTitle>
						<CardDescription>{error.message}</CardDescription>
					</CardHeader>
				</Card>
			</div>
		);
	}

	return (
		<div className="flex flex-1 flex-col gap-4 p-4">
			<div>
				<h2 className="font-bold text-2xl tracking-tight">Server Statistics</h2>
				<p className="text-muted-foreground text-sm">
					Overview of your server metrics
				</p>
			</div>

			<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
				<Card>
					<CardHeader>
						<div className="flex items-center justify-between">
							<CardTitle className="font-medium text-sm">Total Users</CardTitle>
							<Users className="size-4 text-muted-foreground" />
						</div>
					</CardHeader>
					<CardContent>
						{isLoading ? (
							<Skeleton className="h-8 w-20" />
						) : (
							<div className="font-bold text-2xl">{stats?.totalUsers}</div>
						)}
					</CardContent>
				</Card>

				<Card>
					<CardHeader>
						<div className="flex items-center justify-between">
							<CardTitle className="font-medium text-sm">
								Total Movies
							</CardTitle>
							<Film className="size-4 text-muted-foreground" />
						</div>
					</CardHeader>
					<CardContent>
						{isLoading ? (
							<Skeleton className="h-8 w-20" />
						) : (
							<div className="font-bold text-2xl">{stats?.totalMovies}</div>
						)}
					</CardContent>
				</Card>

				<Card>
					<CardHeader>
						<div className="flex items-center justify-between">
							<CardTitle className="font-medium text-sm">
								Total Series
							</CardTitle>
							<Monitor className="size-4 text-muted-foreground" />
						</div>
					</CardHeader>
					<CardContent>
						{isLoading ? (
							<Skeleton className="h-8 w-20" />
						) : (
							<div className="font-bold text-2xl">{stats?.totalSeries}</div>
						)}
					</CardContent>
				</Card>

				<Card>
					<CardHeader>
						<div className="flex items-center justify-between">
							<CardTitle className="font-medium text-sm">
								Total Episodes
							</CardTitle>
							<LibraryBig className="size-4 text-muted-foreground" />
						</div>
					</CardHeader>
					<CardContent>
						{isLoading ? (
							<Skeleton className="h-8 w-20" />
						) : (
							<div className="font-bold text-2xl">{stats?.totalEpisodes}</div>
						)}
					</CardContent>
				</Card>

				<Card>
					<CardHeader>
						<div className="flex items-center justify-between">
							<CardTitle className="font-medium text-sm">
								Total Libraries
							</CardTitle>
							<Database className="size-4 text-muted-foreground" />
						</div>
					</CardHeader>
					<CardContent>
						{isLoading ? (
							<Skeleton className="h-8 w-20" />
						) : (
							<div className="font-bold text-2xl">{stats?.totalLibraries}</div>
						)}
					</CardContent>
				</Card>
			</div>
		</div>
	);
}
