Epicnabbo-Catalogus-Updated-Daily/src/app/admin/moderation/page.tsx

import {
	AlertTriangle,
	Ban,
	Clock,
	Gavel,
	Radio,
	Shield,
	User,
} from "lucide-react";
import Link from "next/link";
import { redirect } from "next/navigation";
import { StatsCard } from "@/components/admin/stats-card";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { getMinStaffRank } from "@/lib/admin/min-staff-rank";
import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
import { prisma } from "@/lib/prisma";

const CFH_STATES: Record<number, { label: string; class: string }> = {
	0: {
		label: "Open",
		class: "bg-[var(--admin-error-subtle)] text-[var(--admin-error)]",
	},
	1: {
		label: "Picked",
		class: "bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)]",
	},
	2: { label: "Closed", class: "bg-muted text-muted-foreground" },
};

export default async function ModerationDashboard() {
	const { session, permissions } = await getAdminContext();
	if (!canAccess(permissions, PERMS.MODERATION_VIEW, session.user.rank))
		redirect("/admin");

	const now = Math.floor(Date.now() / 1000);
	const todayStart = now - (now % 86400);
	const minStaffRank = await getMinStaffRank();

	const [
		openCfh,
		pickedCfh,
		todayBans,
		modsOnline,
		recentCfh,
		recentModActions,
	] = await Promise.all([
		prisma.supportTickets.count({ where: { state: 0 } }),
		prisma.supportTickets.count({ where: { state: 1 } }),
		prisma.ban.count({ where: { timestamp: { gte: todayStart } } }),
		prisma.user.count({
			where: { online: "1", rank: { gte: minStaffRank } },
		}),
		prisma.supportTickets.findMany({
			orderBy: { id: "desc" },
			take: 10,
		}),
		prisma.adminAuditLog.findMany({
			where: {
				action: { startsWith: "mod_" },
			},
			orderBy: { id: "desc" },
			take: 10,
			include: { user: { select: { username: true } } },
		}),
	]);

	// Fetch usernames for CFH tickets
	const userIds = [
		...new Set([
			...recentCfh.map((t) => t.senderId),
			...recentCfh.map((t) => t.reportedId),
			...recentCfh.map((t) => t.modId),
		]),
	].filter(Boolean);

	const users =
		userIds.length > 0
			? await prisma.user.findMany({
					where: { id: { in: userIds } },
					select: { id: true, username: true },
				})
			: [];
	const userMap = new Map(users.map((u) => [u.id, u.username]));

	return (
		<div className="space-y-6">
			{/* Stats */}
			<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
				<StatsCard
					title="Open CFH"
					value={openCfh}
					description={`${pickedCfh} picked`}
					icon={<Radio className="h-4 w-4" />}
					href="/admin/moderation/cfh"
				/>
				<StatsCard
					title="Bans Today"
					value={todayBans}
					icon={<Ban className="h-4 w-4" />}
					href="/admin/bans"
				/>
				<StatsCard
					title="Mods Online"
					value={modsOnline}
					icon={<Shield className="h-4 w-4" />}
					href="/admin/moderation/team"
				/>
				<StatsCard
					title="Quick Actions"
					value="→"
					description="Kick, mute, alert"
					icon={<Gavel className="h-4 w-4" />}
					href="/admin/moderation/actions"
				/>
			</div>

			<div className="grid gap-6 lg:grid-cols-2">
				{/* Recent CFH */}
				<Card>
					<CardHeader>
						<CardTitle className="flex items-center justify-between">
							<span className="flex items-center gap-2">
								<AlertTriangle className="h-4 w-4 text-[var(--admin-error)]" />
								Recent CFH Tickets
							</span>
							<Link
								href="/admin/moderation/cfh"
								className="text-xs font-normal text-primary hover:underline"
							>
								View all
							</Link>
						</CardTitle>
					</CardHeader>
					<CardContent>
						{recentCfh.length === 0 ? (
							<p className="text-sm text-muted-foreground text-center py-4">
								No CFH tickets
							</p>
						) : (
							<div className="divide-y divide-border">
								{recentCfh.map((ticket) => {
									const state = CFH_STATES[ticket.state] ?? CFH_STATES[0];
									return (
										<Link
											key={ticket.id}
											href={`/admin/moderation/cfh/${ticket.id}`}
											className="flex items-center gap-3 py-2.5 first:pt-0 last:pb-0 hover:bg-accent/50 -mx-2 px-2 rounded transition-colors"
										>
											<span className="text-xs font-mono text-muted-foreground w-8">
												#{ticket.id}
											</span>
											<div className="flex-1 min-w-0">
												<p className="text-sm truncate">
													{ticket.issue || "No description"}
												</p>
												<p className="text-xs text-muted-foreground">
													{userMap.get(ticket.senderId) ?? "?"} →{" "}
													{userMap.get(ticket.reportedId) ?? "?"}
												</p>
											</div>
											<Badge className={`text-[10px] ${state.class}`}>
												{state.label}
											</Badge>
										</Link>
									);
								})}
							</div>
						)}
					</CardContent>
				</Card>

				{/* Recent Mod Actions */}
				<Card>
					<CardHeader>
						<CardTitle className="flex items-center gap-2">
							<Clock className="h-4 w-4" />
							Recent Mod Actions
						</CardTitle>
					</CardHeader>
					<CardContent>
						{recentModActions.length === 0 ? (
							<p className="text-sm text-muted-foreground text-center py-4">
								No recent actions
							</p>
						) : (
							<div className="divide-y divide-border">
								{recentModActions.map((log) => (
									<div
										key={log.id}
										className="flex items-center gap-3 py-2.5 first:pt-0 last:pb-0"
									>
										<User className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
										<div className="flex-1 min-w-0">
											<p className="text-sm font-medium truncate">
												{log.action.replace("mod_", "").replace(/_/g, " ")}
											</p>
											<p className="text-xs text-muted-foreground">
												by {log.user?.username ?? "?"} · {log.target}{" "}
												{log.targetId ? `#${log.targetId}` : ""}
											</p>
										</div>
										<span className="text-[10px] text-muted-foreground whitespace-nowrap">
											{log.createdAt}
										</span>
									</div>
								))}
							</div>
						)}
					</CardContent>
				</Card>
			</div>
		</div>
	);
}