feat: admin barn rules and custom rewards

frontend/src/app/admin/page.tsx

@@ -1,20 +1,19 @@
 "use client";
 
-import {
-	ArrowLeft,
-	ChevronRight,
-	Database,
-	Minus,
-	Plus,
-	RefreshCcw,
-	Search,
-	Settings,
-	ShieldAlert,
-	TrendingUp,
-	Users,
-} from "lucide-react";
-import { useRouter } from "next/navigation";
 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 {
@@ -25,7 +24,8 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
-import { adminApi, api } from "@/lib/api";
+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";
 
@@ -52,13 +52,25 @@ interface User {
 	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) {
@@ -70,12 +82,14 @@ export default function AdminPage() {
 
 	const loadData = async () => {
 		try {
-			const [analyticsRes, usersRes] = await Promise.all([
-				api.get("/admin/analytics"),
-				api.get("/admin/users"),
+			const [analyticsRes, usersRes, settingsRes] = await Promise.all([
+				adminApi.getAnalytics(),
+				adminApi.getUsers(),
+				adminApi.getSettings(),
 			]);
 			setAnalytics(analyticsRes.data);
 			setUsers(usersRes.data);
+			setSettings(settingsRes.data);
 		} catch {
 			toast.error("Failed to load coop secrets");
 		} finally {
@@ -83,6 +97,20 @@ export default function AdminPage() {
 		}
 	};
 
+	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);
@@ -109,21 +137,20 @@ export default function AdminPage() {
 
 	if (isLoading)
 		return (
-			<div className="p-8 font-display animate-pulse text-primary">
-				COUNTING THE CHICKENS...
+			<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">
-				{/* Admin Header */}
 				<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"
+							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>
@@ -132,122 +159,290 @@ export default function AdminPage() {
 								COOP CONTROL
 							</h1>
 							<p className="text-sm font-bold text-muted-foreground">
-								Admin Peering Glass
+								The Farmer's Desk
 							</p>
 						</div>
 					</div>
 					<Button
 						onClick={loadData}
 						variant="outline"
-						className="rounded-full border-2 border-primary font-bold"
+						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>
 
-				{/* Big Stats */}
-				<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-					<div className="rounded-2xl border-4 border-foreground bg-card p-4 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">
-						<div className="flex items-center gap-2 text-primary font-black uppercase text-[10px]">
-							<Users className="h-3 w-3" /> Flock Size
-						</div>
-						<div className="mt-1 text-3xl font-black">
-							{analytics?.users.total || 0}
-						</div>
-					</div>
-					<div className="rounded-2xl border-4 border-foreground bg-card p-4 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">
-						<div className="flex items-center gap-2 text-primary font-black uppercase text-[10px]">
-							<Database className="h-3 w-3" /> Total $COOP
-						</div>
-						<div className="mt-1 text-3xl font-black">
-							{formatNumber(analytics?.transactions.total_earned || 0)}
-						</div>
-					</div>
-					<div className="rounded-2xl border-4 border-foreground bg-card p-4 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">
-						<div className="flex items-center gap-2 text-primary font-black uppercase text-[10px]">
-							<TrendingUp className="h-3 w-3" /> Requests
-						</div>
-						<div className="mt-1 text-3xl font-black">
-							{analytics?.requests.total || 0}
-						</div>
-					</div>
-					<div className="rounded-2xl border-4 border-foreground bg-card p-4 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">
-						<div className="flex items-center gap-2 text-primary font-black uppercase text-[10px]">
-							<ShieldAlert className="h-3 w-3" /> Pending
-						</div>
-						<div className="mt-1 text-3xl font-black">
-							{analytics?.requests.pending || 0}
-						</div>
-					</div>
-				</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>
 
-				{/* User Management */}
-				<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"
-							/>
-						</div>
-					</div>
-
-					<div className="space-y-4">
-						{filteredUsers.map((u) => (
-							<div
-								key={u.id}
-								className="flex flex-col gap-4 rounded-2xl border-2 border-foreground bg-accent/5 p-4 sm:flex-row sm:items-center sm:justify-between hover:bg-accent/10 transition-colors"
-							>
-								<div>
-									<div className="flex items-center gap-2">
-										<span className="font-black text-lg">{u.plexUsername}</span>
-										{u.isAdmin && (
-											<span className="rounded-full bg-primary px-2 py-0.5 text-[10px] font-bold text-white uppercase">
-												Rooster
-											</span>
-										)}
-									</div>
-									<div className="text-xs font-bold text-muted-foreground">
-										Balance: {formatNumber(u.totalEarned - u.totalSpent)} $COOP
-									</div>
-								</div>
-
-								<div className="flex flex-wrap gap-2">
-									<Button
-										size="sm"
-										variant="outline"
-										className="rounded-full border-2"
-										onClick={() => adjustUser(u.id, 100, "Admin bonus")}
-									>
-										<Plus className="h-3 w-3 mr-1" /> 100
-									</Button>
-									<Button
-										size="sm"
-										variant="outline"
-										className="rounded-full border-2"
-										onClick={() => adjustUser(u.id, -100, "Admin correction")}
-									>
-										<Minus className="h-3 w-3 mr-1" /> 100
-									</Button>
-									<Button
-										size="sm"
-										variant={u.isAdmin ? "destructive" : "secondary"}
-										className="rounded-full font-bold"
-										onClick={() => toggleAdmin(u.id, !u.isAdmin)}
-									>
-										{u.isAdmin ? "Demote" : "Make Admin"}
-									</Button>
+					<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>
-				</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>
+
+											<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-4 w-4" /> 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>
 	);