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>
        <h1 className="text-3xl font-bold tracking-tight">Analytics</h1>
        <p className="text-muted-foreground">Hotel performance overview and trends</p>
      </div>

      <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>
  )
}