import { useQuery } from "@tanstack/react-query";
import {
	ArrowUpRight,
	BookMarked,
	BookText,
	FileText,
	MessageCircle,
	PenSquare,
	Users,
} from "lucide-react";
import { Link } from "wouter";
import { DashboardLayout } from "@/components/layout/DashboardLayout";
import { Button } from "@/components/ui/button";
import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { useAuth } from "@/hooks/use-auth";

export default function Dashboard() {
	const { canManageContent, canReviewContent } = useAuth();

	// Fetch statistics
	const { data: workStats, isLoading: workStatsLoading } = useQuery({
		queryKey: ["/api/stats/works"],
		enabled: canReviewContent || canManageContent,
	});

	const { data: userStats, isLoading: userStatsLoading } = useQuery({
		queryKey: ["/api/stats/users"],
		enabled: canManageContent,
	});

	const { data: blogStats, isLoading: blogStatsLoading } = useQuery({
		queryKey: ["/api/stats/blog"],
		enabled: canReviewContent || canManageContent,
	});

	const { data: commentStats, isLoading: commentStatsLoading } = useQuery({
		queryKey: ["/api/stats/comments"],
		enabled: canReviewContent || canManageContent,
	});

	const { data: recentWorks, isLoading: recentWorksLoading } = useQuery({
		queryKey: ["/api/works", { limit: 5 }],
	});

	// Get dummy data if API doesn't return real statistics yet
	const getStatValue = (loading: boolean, data: any, defaultValue: number) => {
		if (loading) return <Skeleton className="h-8 w-24" />;
		return data?.count || defaultValue;
	};

	// For the demo, provide sensible defaults
	const totalWorks = getStatValue(workStatsLoading, workStats, 6);
	const totalUsers = getStatValue(userStatsLoading, userStats, 5);
	const totalPosts = getStatValue(blogStatsLoading, blogStats, 3);
	const totalComments = getStatValue(commentStatsLoading, commentStats, 12);

	return (
		<DashboardLayout title="Dashboard Overview">
			{/* Stats cards */}
			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
				<Card>
					<CardHeader className="flex flex-row items-center justify-between pb-2">
						<CardTitle className="text-sm font-medium">Total Works</CardTitle>
						<BookText className="h-4 w-4 text-muted-foreground" />
					</CardHeader>
					<CardContent>
						<div className="text-2xl font-bold">{totalWorks}</div>
						<p className="text-xs text-muted-foreground">
							Literary works in library
						</p>
					</CardContent>
				</Card>

				<Card>
					<CardHeader className="flex flex-row items-center justify-between pb-2">
						<CardTitle className="text-sm font-medium">Blog Posts</CardTitle>
						<FileText className="h-4 w-4 text-muted-foreground" />
					</CardHeader>
					<CardContent>
						<div className="text-2xl font-bold">{totalPosts}</div>
						<p className="text-xs text-muted-foreground">Published articles</p>
					</CardContent>
				</Card>

				<Card>
					<CardHeader className="flex flex-row items-center justify-between pb-2">
						<CardTitle className="text-sm font-medium">Users</CardTitle>
						<Users className="h-4 w-4 text-muted-foreground" />
					</CardHeader>
					<CardContent>
						<div className="text-2xl font-bold">{totalUsers}</div>
						<p className="text-xs text-muted-foreground">Registered accounts</p>
					</CardContent>
				</Card>

				<Card>
					<CardHeader className="flex flex-row items-center justify-between pb-2">
						<CardTitle className="text-sm font-medium">Comments</CardTitle>
						<MessageCircle className="h-4 w-4 text-muted-foreground" />
					</CardHeader>
					<CardContent>
						<div className="text-2xl font-bold">{totalComments}</div>
						<p className="text-xs text-muted-foreground">User discussions</p>
					</CardContent>
				</Card>
			</div>

			<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
				{/* Quick Actions */}
				<Card>
					<CardHeader>
						<CardTitle>Quick Actions</CardTitle>
						<CardDescription>
							Common tasks and content management
						</CardDescription>
					</CardHeader>
					<CardContent>
						<div className="grid grid-cols-2 gap-4">
							<Link href="/dashboard/blog/create">
								<Button
									variant="outline"
									className="w-full justify-start h-auto py-4"
								>
									<FileText className="h-5 w-5 mr-2" />
									<div className="flex flex-col items-start">
										<span>Create Post</span>
										<span className="text-xs text-muted-foreground">
											Add a new blog post
										</span>
									</div>
								</Button>
							</Link>

							<Link href="/dashboard/works/add">
								<Button
									variant="outline"
									className="w-full justify-start h-auto py-4"
								>
									<BookText className="h-5 w-5 mr-2" />
									<div className="flex flex-col items-start">
										<span>Add Work</span>
										<span className="text-xs text-muted-foreground">
											New literary work
										</span>
									</div>
								</Button>
							</Link>

							<Link href="/dashboard/collections/create">
								<Button
									variant="outline"
									className="w-full justify-start h-auto py-4"
								>
									<BookMarked className="h-5 w-5 mr-2" />
									<div className="flex flex-col items-start">
										<span>Create Collection</span>
										<span className="text-xs text-muted-foreground">
											Curate works
										</span>
									</div>
								</Button>
							</Link>

							<Link href="/dashboard/annotations">
								<Button
									variant="outline"
									className="w-full justify-start h-auto py-4"
								>
									<PenSquare className="h-5 w-5 mr-2" />
									<div className="flex flex-col items-start">
										<span>Manage Annotations</span>
										<span className="text-xs text-muted-foreground">
											Review & edit
										</span>
									</div>
								</Button>
							</Link>
						</div>
					</CardContent>
				</Card>

				{/* Recent Activity */}
				<Card>
					<CardHeader className="flex flex-row items-center justify-between">
						<div>
							<CardTitle>Recent Content</CardTitle>
							<CardDescription>
								Latest additions to the platform
							</CardDescription>
						</div>
						<Link href="/dashboard/works">
							<Button variant="ghost" size="sm" className="gap-1">
								<span>View all</span>
								<ArrowUpRight className="h-4 w-4" />
							</Button>
						</Link>
					</CardHeader>
					<CardContent>
						<div className="space-y-4">
							{recentWorksLoading
								? Array.from({ length: 3 }).map((_, i) => (
										<div key={i} className="flex items-center gap-4">
											<Skeleton className="h-12 w-12 rounded-md" />
											<div className="space-y-2">
												<Skeleton className="h-4 w-48" />
												<Skeleton className="h-3 w-32" />
											</div>
										</div>
									))
								: Array.isArray(recentWorks) && recentWorks.slice(0, 3).map((work: any) => (
										<Link key={work.id} href={`/works/${work.slug}`}>
											<div className="flex items-center gap-4 group cursor-pointer">
												<div className="h-12 w-12 rounded-md bg-muted flex items-center justify-center">
													<BookText className="h-6 w-6 text-muted-foreground" />
												</div>
												<div>
													<h4 className="font-medium group-hover:text-primary">
														{work.title}
													</h4>
													<p className="text-sm text-muted-foreground">
														{work.type} - Added recently
													</p>
												</div>
											</div>
										</Link>
									))}
						</div>
					</CardContent>
				</Card>
			</div>
		</DashboardLayout>
	);
}