"use client";

import { AlertCircle, FileText, LayoutGrid, Users } from "lucide-react";
import Link from "next/link";
import { useEffect, useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { type AdminStats, adminService } from "@/services/admin.service";

export default function AdminDashboardPage() {
	const [stats, setStats] = useState<AdminStats | null>(null);
	const [loading, setLoading] = useState(true);
	const [error, setError] = useState<string | null>(null);

	useEffect(() => {
		adminService
			.getStats()
			.then(setStats)
			.catch((err) => {
				console.error(err);
				setError("Impossible de charger les statistiques.");
			})
			.finally(() => setLoading(false));
	}, []);

	if (error) {
		return (
			<div className="flex h-[50vh] flex-col items-center justify-center gap-4 text-center">
				<AlertCircle className="h-12 w-12 text-destructive" />
				<p className="text-xl font-semibold">{error}</p>
			</div>
		);
	}

	const statCards = [
		{
			title: "Utilisateurs",
			value: stats?.users,
			icon: Users,
			href: "/admin/users",
			color: "text-blue-500",
		},
		{
			title: "Contenus",
			value: stats?.contents,
			icon: FileText,
			href: "/admin/contents",
			color: "text-green-500",
		},
		{
			title: "Catégories",
			value: stats?.categories,
			icon: LayoutGrid,
			href: "/admin/categories",
			color: "text-purple-500",
		},
	];

	return (
		<div className="flex-1 space-y-8 p-4 pt-6 md:p-8">
			<div className="flex items-center justify-between space-y-2">
				<h2 className="text-3xl font-bold tracking-tight">Dashboard Admin</h2>
			</div>
			<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
				{statCards.map((card) => (
					<Link key={card.title} href={card.href}>
						<Card className="hover:bg-accent transition-colors cursor-pointer">
							<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
								<CardTitle className="text-sm font-medium">{card.title}</CardTitle>
								<card.icon className={`h-4 w-4 ${card.color}`} />
							</CardHeader>
							<CardContent>
								{loading ? (
									<Skeleton className="h-8 w-20" />
								) : (
									<div className="text-2xl font-bold">{card.value}</div>
								)}
							</CardContent>
						</Card>
					</Link>
				))}
			</div>
		</div>
	);
}