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

import {
	ArrowLeftRight,
	Clock,
	DoorOpen,
	MessageSquare,
	TrendingUp,
	Users,
} from "lucide-react";
import dynamic from "next/dynamic";
import { redirect } from "next/navigation";
import { StatsCard } from "@/components/admin/stats-card";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
import { prisma } from "@/lib/prisma";

const DashboardChart = dynamic(
	() =>
		import("@/components/admin/dashboard-chart").then((m) => ({
			default: m.DashboardChart,
		})),
	{ loading: () => <Skeleton className="h-[300px] w-full rounded-xl" /> },
);

const PeakHoursHeatmap = dynamic(
	() =>
		import("@/components/admin/peak-hours-heatmap").then((m) => ({
			default: m.PeakHoursHeatmap,
		})),
	{ loading: () => <Skeleton className="h-[250px] w-full rounded-xl" /> },
);

async function getAnalyticsData() {
	const now = Math.floor(Date.now() / 1000);
	const todayStart = now - (now % 86400);
	const weekAgo = now - 7 * 86400;
	const monthAgo = now - 30 * 86400;

	const [
		totalUsers,
		onlineUsers,
		weekRegistrations,
		monthRegistrations,
		totalRooms,
		activeRooms,
		weekChatMessages,
		weekTrades,
		weekBans,
	] = await Promise.all([
		prisma.user.count(),
		prisma.user.count({ where: { online: "1" } }),
		prisma.user.count({ where: { accountCreated: { gte: weekAgo } } }),
		prisma.user.count({ where: { accountCreated: { gte: monthAgo } } }),
		prisma.rooms.count(),
		prisma.rooms.count({ where: { users: { gt: 0 } } }),
		prisma.$queryRaw<
			{ count: bigint }[]
		>`SELECT COUNT(*) AS count FROM chatlogs_room WHERE timestamp >= ${weekAgo}`,
		prisma.roomTradeLog.count({ where: { timestamp: { gte: weekAgo } } }),
		prisma.ban.count({ where: { timestamp: { gte: weekAgo } } }),
	]);

	// Registration chart (30 days) — single GROUP BY query instead of 30 sequential queries
	const regRows = await prisma.$queryRaw<
		{ day_bucket: bigint; count: bigint }[]
	>`
    SELECT FLOOR(account_created / 86400) AS day_bucket, COUNT(*) AS count
    FROM users
    WHERE account_created >= ${monthAgo}
    GROUP BY day_bucket ORDER BY day_bucket
  `;
	const regCountMap = new Map(
		regRows.map((r) => [Number(r.day_bucket), Number(r.count)]),
	);
	const registrationChart = [];
	for (let i = 29; i >= 0; i--) {
		const dayStart = todayStart - i * 86400;
		const bucket = Math.floor(dayStart / 86400);
		const date = new Date(dayStart * 1000);
		registrationChart.push({
			label: date.toLocaleDateString("en", { month: "short", day: "numeric" }),
			value: regCountMap.get(bucket) ?? 0,
		});
	}

	// Peak hours — single GROUP BY query instead of fetching all user rows
	const peakRows = await prisma.$queryRaw<
		{ d: number; h: number; c: bigint }[]
	>`
    SELECT ((DAYOFWEEK(FROM_UNIXTIME(last_online)) + 5) % 7) AS d,
           HOUR(FROM_UNIXTIME(last_online)) AS h,
           COUNT(*) AS c
    FROM users
    WHERE last_online >= ${weekAgo}
    GROUP BY d, h
  `;
	const grid: number[][] = Array.from({ length: 7 }, () => Array(24).fill(0));
	let max = 0;
	for (const r of peakRows) {
		const count = Number(r.c);
		grid[r.d][r.h] = count;
		if (count > max) max = count;
	}

	return {
		totalUsers,
		onlineUsers,
		weekRegistrations,
		monthRegistrations,
		totalRooms,
		activeRooms,
		weekChatMessages: Array.isArray(weekChatMessages)
			? Number(weekChatMessages[0]?.count ?? 0)
			: 0,
		weekTrades,
		weekBans,
		registrationChart,
		peakHours: { grid, max },
	};
}

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

	const data = await getAnalyticsData();

	return (
		<div className="space-y-6">
			<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
				<StatsCard
					title="Total Users"
					value={data.totalUsers.toLocaleString()}
					description={`${data.onlineUsers} online now`}
					icon={<Users className="h-4 w-4" />}
				/>
				<StatsCard
					title="Week Registrations"
					value={data.weekRegistrations.toLocaleString()}
					description={`${data.monthRegistrations} this month`}
					icon={<TrendingUp className="h-4 w-4" />}
				/>
				<StatsCard
					title="Active Rooms"
					value={data.activeRooms.toLocaleString()}
					description={`${data.totalRooms} total rooms`}
					icon={<DoorOpen className="h-4 w-4" />}
				/>
				<StatsCard
					title="Weekly Activity"
					value={data.weekChatMessages.toLocaleString()}
					description={`${data.weekTrades} trades, ${data.weekBans} bans`}
					icon={<MessageSquare className="h-4 w-4" />}
				/>
			</div>

			<div className="grid gap-6 md:grid-cols-2">
				<DashboardChart
					title="Registrations (30 days)"
					data={data.registrationChart}
					color="hsl(262, 83%, 58%)"
					description="New user registrations over the last 30 days"
				/>
				<PeakHoursHeatmap data={data.peakHours} />
			</div>

			<div className="grid gap-6 md:grid-cols-3">
				<Card>
					<CardHeader>
						<CardTitle className="flex items-center gap-2">
							<MessageSquare className="h-4 w-4" /> Chat Activity
						</CardTitle>
					</CardHeader>
					<CardContent>
						<div className="text-3xl font-bold">
							{data.weekChatMessages.toLocaleString()}
						</div>
						<p className="text-sm text-muted-foreground">
							Messages in the last 7 days
						</p>
					</CardContent>
				</Card>
				<Card>
					<CardHeader>
						<CardTitle className="flex items-center gap-2">
							<ArrowLeftRight className="h-4 w-4" /> Trades
						</CardTitle>
					</CardHeader>
					<CardContent>
						<div className="text-3xl font-bold">
							{data.weekTrades.toLocaleString()}
						</div>
						<p className="text-sm text-muted-foreground">
							Trades in the last 7 days
						</p>
					</CardContent>
				</Card>
				<Card>
					<CardHeader>
						<CardTitle className="flex items-center gap-2">
							<Clock className="h-4 w-4" /> Retention
						</CardTitle>
					</CardHeader>
					<CardContent>
						<div className="text-3xl font-bold">
							{data.totalUsers > 0
								? Math.round((data.onlineUsers / data.totalUsers) * 100)
								: 0}
							%
						</div>
						<p className="text-sm text-muted-foreground">
							Users online / total
						</p>
					</CardContent>
				</Card>
			</div>
		</div>
	);
}