EpicNext-Cms/src/app/admin/moderation/cfh/page.tsx

import { AlertTriangle, CheckCircle2, Clock, Radio } from "lucide-react";
import Link from "next/link";
import { redirect } from "next/navigation";
import { Badge } from "@/components/ui/badge";
import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
import { prisma } from "@/lib/prisma";

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

interface PageProps {
	searchParams: Promise<{ state?: string; page?: string }>;
}

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

	const sp = await searchParams;
	const stateFilter = sp.state !== undefined ? Number(sp.state) : -1;
	const page = Math.max(1, Number(sp.page) || 1);
	const perPage = 25;

	const where = stateFilter >= 0 ? { state: stateFilter } : {};

	const [tickets, total] = await Promise.all([
		prisma.supportTickets.findMany({
			where,
			orderBy: { id: "desc" },
			skip: (page - 1) * perPage,
			take: perPage,
		}),
		prisma.supportTickets.count({ where }),
	]);

	// Fetch all related users
	const userIds = [
		...new Set([
			...tickets.map((t) => t.senderId),
			...tickets.map((t) => t.reportedId),
			...tickets.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]));

	const totalPages = Math.ceil(total / perPage);

	return (
		<div className="space-y-6">
			{/* Filters */}
			<div className="flex gap-2">
				{[
					{ key: -1, label: "All" },
					{ key: 0, label: "Open" },
					{ key: 1, label: "Picked" },
					{ key: 2, label: "Closed" },
				].map(({ key, label }) => (
					<Link
						key={key}
						href={`/admin/moderation/cfh${key >= 0 ? `?state=${key}` : ""}`}
					>
						<Badge
							variant={stateFilter === key ? "default" : "outline"}
							className="cursor-pointer"
						>
							{label}
						</Badge>
					</Link>
				))}
			</div>

			{/* Table */}
			<div className="rounded-lg border">
				<div className="grid grid-cols-[auto_1fr_auto_auto_auto_auto] gap-4 p-3 bg-muted/50 text-xs font-medium text-muted-foreground border-b">
					<span>#</span>
					<span>Issue</span>
					<span>Sender</span>
					<span>Reported</span>
					<span>Mod</span>
					<span>Status</span>
				</div>

				{tickets.length === 0 ? (
					<div className="p-8 text-center text-muted-foreground">
						<Radio className="h-8 w-8 mx-auto mb-2" />
						No tickets found.
					</div>
				) : (
					tickets.map((ticket) => {
						const state = CFH_STATES[ticket.state] ?? CFH_STATES[0];
						const StateIcon = state.icon;

						return (
							<Link
								key={ticket.id}
								href={`/admin/moderation/cfh/${ticket.id}`}
								className="grid grid-cols-[auto_1fr_auto_auto_auto_auto] gap-4 p-3 items-center hover:bg-accent/50 transition-all duration-150 border-b last:border-0 hover:pl-4"
							>
								<span className="text-xs font-mono text-muted-foreground">
									{ticket.id}
								</span>
								<div className="min-w-0">
									<p className="text-sm truncate">
										{ticket.issue || "No description"}
									</p>
									<p className="text-[10px] text-muted-foreground">
										Room #{ticket.roomId} ·{" "}
										{new Date(ticket.timestamp * 1000).toLocaleString()}
									</p>
								</div>
								<span className="text-xs whitespace-nowrap">
									{userMap.get(ticket.senderId) ?? "—"}
								</span>
								<span className="text-xs whitespace-nowrap font-medium">
									{userMap.get(ticket.reportedId) ?? "—"}
								</span>
								<span className="text-xs text-muted-foreground whitespace-nowrap">
									{userMap.get(ticket.modId) ?? "—"}
								</span>
								<span
									className={`inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full whitespace-nowrap ${state.class}`}
								>
									<StateIcon className="h-3 w-3" />
									{state.label}
								</span>
							</Link>
						);
					})
				)}
			</div>

			{/* Pagination */}
			{totalPages > 1 && (
				<div className="flex items-center justify-center gap-2">
					{page > 1 && (
						<Link
							href={`/admin/moderation/cfh?state=${stateFilter}&page=${page - 1}`}
						>
							<Badge variant="outline" className="cursor-pointer">
								Previous
							</Badge>
						</Link>
					)}
					<span className="text-sm text-muted-foreground">
						Page {page} of {totalPages}
					</span>
					{page < totalPages && (
						<Link
							href={`/admin/moderation/cfh?state=${stateFilter}&page=${page + 1}`}
						>
							<Badge variant="outline" className="cursor-pointer">
								Next
							</Badge>
						</Link>
					)}
				</div>
			)}
		</div>
	);
}