"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import {
	Users,
	Database,
	Settings,
	TrendingUp,
	ShieldAlert,
	Search,
	RefreshCcw,
	ArrowLeft,
	Save,
	Gift,
} from "lucide-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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { api, adminApi } from "@/lib/api";
import { useStore } from "@/lib/store";
import { formatNumber } from "@/lib/utils";

interface Analytics {
	users: { total: number; with_wallet: number; active_30d: number };
	transactions: {
		total_earned: number;
		total_spent: number;
		total_count: number;
	};
	requests: {
		total: number;
		pending: number;
		approved: number;
		declined: number;
	};
}

interface User {
	id: string;
	plexUsername: string;
	isAdmin: boolean;
	totalEarned: number;
	totalSpent: number;
}

interface SystemSettings {
	creditsPerMinute: number;
	movieRequestCost: number;
	tvRequestCost: number;
	tvPerSeasonCost: number;
	minWatchPercent: number;
	minWatchMinutes: number;
}

export default function AdminPage() {
	const router = useRouter();
	const { user, isAuthenticated } = useStore();
	const [analytics, setAnalytics] = useState<Analytics | null>(null);
	const [users, setUsers] = useState<User[]>([]);
	const [settings, setSettings] = useState<SystemSettings | null>(null);
	const [searchQuery, setSearchQuery] = useState("");
	const [isLoading, setIsLoading] = useState(true);
	const [isSavingSettings, setIsSavingSettings] = useState(false);
	const [rewardAmount, setRewardAmount] = useState<Record<string, string>>({});

	useEffect(() => {
		if (!isAuthenticated || !user?.isAdmin) {
			router.push("/dashboard");
			return;
		}
		loadData();
	}, [isAuthenticated, user, router]);

	const loadData = async () => {
		try {
			const [analyticsRes, usersRes, settingsRes] = await Promise.all([
				adminApi.getAnalytics(),
				adminApi.getUsers(),
				adminApi.getSettings(),
			]);
			setAnalytics(analyticsRes.data);
			setUsers(usersRes.data.users || []);
			setSettings(settingsRes.data);
		} catch {
			toast.error("Failed to load coop secrets");
		} finally {
			setIsLoading(false);
		}
	};

	const handleUpdateSettings = async (e: React.FormEvent) => {
		e.preventDefault();
		if (!settings) return;
		setIsSavingSettings(true);
		try {
			await adminApi.updateSettings(settings);
			toast.success("Barn rules updated!");
		} catch {
			toast.error("Failed to update rules");
		} finally {
			setIsSavingSettings(false);
		}
	};

	const adjustUser = async (userId: string, amount: number, reason: string) => {
		try {
			await adminApi.adjustUser(userId, amount, reason);
			toast.success("Feathers adjusted!");
			loadData();
		} catch {
			toast.error("Failed to adjust nest");
		}
	};

	const backfillUser = async (userId: string) => {
		toast.info("Scouring the barn for old eggs...");
		try {
			await adminApi.backfillUser(userId);
			toast.success("Backfill complete!");
			loadData();
		} catch {
			toast.error("Backfill failed");
		}
	};

	const toggleAdmin = async (userId: string, isAdmin: boolean) => {
		try {
			await api.patch(`/admin/users/${userId}`, { isAdmin });
			toast.success(isAdmin ? "Promoted to Rooster!" : "Demoted to Hen.");
			loadData();
		} catch {
			toast.error("Failed to change pecking order");
		}
	};

	const filteredUsers = users.filter((u) =>
		u.plexUsername?.toLowerCase().includes(searchQuery.toLowerCase()),
	);

	if (isLoading)
		return (
			<div className="flex min-h-screen items-center justify-center font-display text-primary bg-background uppercase">
				Peeking into the coop...
			</div>
		);

	return (
		<div className="min-h-screen bg-background p-4 sm:p-8 font-sans">
			<div className="mx-auto max-w-6xl space-y-8">
				<div className="flex flex-col items-start justify-between gap-4 rounded-3xl border-4 border-primary bg-secondary/20 p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] md:flex-row md:items-center">
					<div className="flex items-center gap-4">
						<Button
							variant="ghost"
							onClick={() => router.push("/dashboard")}
							className="rounded-full p-2 h-10 w-10 border-2 border-foreground hover:bg-background transition-all"
						>
							<ArrowLeft className="h-6 w-6" />
						</Button>
						<div>
							<h1 className="font-display text-4xl leading-none text-primary uppercase italic tracking-tighter">
								COOP CONTROL
							</h1>
							<p className="text-sm font-bold text-muted-foreground">
								The Farmer's Desk
							</p>
						</div>
					</div>
					<Button
						onClick={loadData}
						variant="outline"
						className="rounded-full border-2 border-primary font-bold shadow-[4px_4px_0px_0px_rgba(192,111,74,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none transition-all"
					>
						<RefreshCcw className="mr-2 h-4 w-4" /> REFRESH
					</Button>
				</div>

				<Tabs defaultValue="flock" className="w-full">
					<TabsList className="grid w-full grid-cols-3 gap-2 rounded-full border-4 border-foreground bg-muted/30 p-2 mb-8 h-auto">
						<TabsTrigger
							value="flock"
							className="rounded-full py-3 font-black uppercase data-[state=active]:bg-primary data-[state=active]:text-primary-foreground transition-all"
						>
							<Users className="mr-2 h-4 w-4" /> THE FLOCK
						</TabsTrigger>
						<TabsTrigger
							value="rules"
							className="rounded-full py-3 font-black uppercase data-[state=active]:bg-primary data-[state=active]:text-primary-foreground transition-all"
						>
							<Settings className="mr-2 h-4 w-4" /> BARN RULES
						</TabsTrigger>
						<TabsTrigger
							value="stats"
							className="rounded-full py-3 font-black uppercase data-[state=active]:bg-primary data-[state=active]:text-primary-foreground transition-all"
						>
							<TrendingUp className="mr-2 h-4 w-4" /> EGG STATS
						</TabsTrigger>
					</TabsList>

					<TabsContent
						value="flock"
						className="space-y-6 focus-visible:outline-none"
					>
						<div className="rounded-[2.5rem] border-4 border-foreground bg-card p-6 shadow-[10px_10px_0px_0px_rgba(0,0,0,0.05)]">
							<div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
								<h2 className="font-display text-3xl uppercase italic">
									The Peeps
								</h2>
								<div className="relative w-full sm:w-64">
									<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
									<Input
										placeholder="Search chickens..."
										value={searchQuery}
										onChange={(e) => setSearchQuery(e.target.value)}
										className="rounded-full border-2 border-foreground pl-10 focus-visible:ring-primary h-12"
									/>
								</div>
							</div>

							<div className="space-y-4">
								{filteredUsers.map((u) => (
									<div
										key={u.id}
										className="flex flex-col gap-4 rounded-2xl border-4 border-foreground bg-accent/5 p-4 sm:flex-row sm:items-center sm:justify-between hover:bg-accent/10 transition-colors"
									>
										<div className="flex-1">
											<div className="flex items-center gap-2">
												<span className="font-black text-xl">
													{u.plexUsername}
												</span>
												{u.isAdmin && (
													<span className="rounded-full bg-primary px-3 py-1 text-[10px] font-black text-white uppercase shadow-sm">
														Rooster
													</span>
												)}
											</div>
											<div className="text-sm font-bold text-muted-foreground mt-1">
												Nest Egg: {formatNumber(u.totalEarned - u.totalSpent)}{" "}
												$COOP
											</div>
										</div>

										<div className="flex flex-wrap items-center gap-2">
											<div className="flex items-center gap-1 rounded-full border-2 border-foreground bg-background p-1 pr-3 shadow-sm">
												<Input
													type="number"
													placeholder="Amount"
													value={rewardAmount[u.id] || ""}
													onChange={(e) =>
														setRewardAmount({
															...rewardAmount,
															[u.id]: e.target.value,
														})
													}
													className="h-8 w-20 border-0 bg-transparent text-center font-bold focus-visible:ring-0"
												/>
												<Button
													size="sm"
													className="h-8 rounded-full font-black px-4"
													onClick={() => {
														const val = parseInt(rewardAmount[u.id]);
														if (val) adjustUser(u.id, val, "Farmer's Reward");
													}}
												>
													<Gift className="h-3 w-3 mr-1" /> REWARD
												</Button>
											</div>

											<Button
												size="sm"
												variant="outline"
												className="h-10 rounded-full font-black border-2 border-foreground"
												onClick={() => backfillUser(u.id)}
											>
												BACKFILL
											</Button>

											<div className="h-10 w-px bg-foreground/10 mx-1 hidden sm:block" />

											<Button
												size="sm"
												variant={u.isAdmin ? "destructive" : "secondary"}
												className="h-10 rounded-full font-black border-2 border-foreground shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-none transition-all"
												onClick={() => toggleAdmin(u.id, !u.isAdmin)}
											>
												{u.isAdmin ? "DEMOTE" : "PROMOTE"}
											</Button>
										</div>
									</div>
								))}
							</div>
						</div>
					</TabsContent>

					<TabsContent value="rules" className="focus-visible:outline-none">
						<Card className="rounded-[2.5rem] border-4 border-foreground bg-card shadow-[10px_10px_0px_0px_rgba(0,0,0,0.05)] overflow-hidden">
							<CardHeader className="bg-primary/5 border-b-4 border-foreground">
								<CardTitle className="font-display text-3xl uppercase italic">
									The Barn Rules
								</CardTitle>
								<CardDescription className="font-bold text-muted-foreground italic">
									Change the physics of the coop
								</CardDescription>
							</CardHeader>
							<CardContent className="p-8">
								{settings && (
									<form
										onSubmit={handleUpdateSettings}
										className="grid gap-8 md:grid-cols-2"
									>
										<div className="space-y-4">
											<h3 className="font-black uppercase tracking-widest text-primary text-sm flex items-center gap-2">
												<TrendingUp className="h-4 w-4" /> Earning Logic
											</h3>
											<div className="space-y-2">
												<label
													htmlFor="creditsPerMinute"
													className="text-xs font-black uppercase text-muted-foreground"
												>
													Credits Per Minute
												</label>
												<Input
													id="creditsPerMinute"
													type="number"
													value={settings.creditsPerMinute}
													onChange={(e) =>
														setSettings({
															...settings,
															creditsPerMinute: Number(e.target.value),
														})
													}
													className="border-2 border-foreground h-12 font-bold focus-visible:ring-primary"
												/>
											</div>
											<div className="space-y-2">
												<label
													htmlFor="minWatchPercent"
													className="text-xs font-black uppercase text-muted-foreground"
												>
													Min Watch % for Credit
												</label>
												<Input
													id="minWatchPercent"
													type="number"
													value={settings.minWatchPercent}
													onChange={(e) =>
														setSettings({
															...settings,
															minWatchPercent: Number(e.target.value),
														})
													}
													className="border-2 border-foreground h-12 font-bold focus-visible:ring-primary"
												/>
											</div>
										</div>

										<div className="space-y-4">
											<h3 className="font-black uppercase tracking-widest text-primary text-sm flex items-center gap-2">
												<Database className="h-4 w-4" /> Request Costs
											</h3>
											<div className="space-y-2">
												<label
													htmlFor="movieRequestCost"
													className="text-xs font-black uppercase text-muted-foreground"
												>
													Movie Request Cost
												</label>
												<Input
													id="movieRequestCost"
													type="number"
													value={settings.movieRequestCost}
													onChange={(e) =>
														setSettings({
															...settings,
															movieRequestCost: Number(e.target.value),
														})
													}
													className="border-2 border-foreground h-12 font-bold focus-visible:ring-primary"
												/>
											</div>
											<div className="space-y-2">
												<label
													htmlFor="tvRequestCost"
													className="text-xs font-black uppercase text-muted-foreground"
												>
													TV Request Cost
												</label>
												<Input
													id="tvRequestCost"
													type="number"
													value={settings.tvRequestCost}
													onChange={(e) =>
														setSettings({
															...settings,
															tvRequestCost: Number(e.target.value),
														})
													}
													className="border-2 border-foreground h-12 font-bold focus-visible:ring-primary"
												/>
											</div>
										</div>

										<div className="md:col-span-2 pt-4">
											<Button
												type="submit"
												disabled={isSavingSettings}
												className="w-full h-14 rounded-full font-black text-xl shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none transition-all border-4 border-foreground"
											>
												{isSavingSettings
													? "SAVING..."
													: "NAIL RULES TO THE DOOR"}{" "}
												<Save className="ml-2 h-6 w-6" />
											</Button>
										</div>
									</form>
								)}
							</CardContent>
						</Card>
					</TabsContent>

					<TabsContent value="stats" className="focus-visible:outline-none">
						<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
							<div className="rounded-3xl border-4 border-foreground bg-card p-6 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]">
								<div className="text-xs font-black uppercase tracking-widest text-muted-foreground mb-2 flex items-center gap-2">
									<Users className="h-3 w-3" /> Flock Size
								</div>
								<div className="text-4xl font-black">
									{analytics?.users.total || 0}
								</div>
							</div>
							<div className="rounded-3xl border-4 border-foreground bg-card p-6 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]">
								<div className="text-xs font-black uppercase tracking-widest text-muted-foreground mb-2 flex items-center gap-2">
									<Database className="h-3 w-3" /> Total $COOP
								</div>
								<div className="text-4xl font-black">
									{formatNumber(analytics?.transactions.total_earned || 0)}
								</div>
							</div>
							<div className="rounded-3xl border-4 border-foreground bg-card p-6 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]">
								<div className="text-xs font-black uppercase tracking-widest text-muted-foreground mb-2 flex items-center gap-2">
									<TrendingUp className="h-3 w-3" /> Requests
								</div>
								<div className="text-4xl font-black">
									{analytics?.requests.total || 0}
								</div>
							</div>
							<div className="rounded-3xl border-4 border-foreground bg-card p-6 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]">
								<div className="text-xs font-black uppercase tracking-widest text-muted-foreground mb-2 flex items-center gap-2">
									<ShieldAlert className="h-3 w-3 text-destructive" /> Pending
								</div>
								<div className="text-4xl font-black text-destructive">
									{analytics?.requests.pending || 0}
								</div>
							</div>
						</div>
					</TabsContent>
				</Tabs>
			</div>
		</div>
	);
}