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 { 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 [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: 4 } } }),
      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">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">Moderation</h1>
        <p className="text-muted-foreground">In-game moderation dashboard</p>
      </div>

      {/* 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>
  )
}