EpicNext-Cms/src/app/admin/tickets/page.tsx

import { AlertCircle, CheckCircle2, Clock, Loader2, Ticket } from 'lucide-react'
import Link from 'next/link'
import { redirect } from 'next/navigation'
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 STATUS_CONFIG = {
  open: { label: 'Open', icon: AlertCircle, class: 'bg-blue-500/10 text-blue-500' },
  in_progress: { label: 'In Progress', icon: Loader2, class: 'bg-yellow-500/10 text-yellow-500' },
  waiting: { label: 'Waiting', icon: Clock, class: 'bg-orange-500/10 text-orange-500' },
  closed: { label: 'Closed', icon: CheckCircle2, class: 'bg-muted text-muted-foreground' },
} as const

const PRIORITY_COLORS = {
  low: '',
  normal: 'text-blue-500',
  high: 'text-orange-500',
  urgent: 'text-red-500 font-bold',
}

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

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

  const sp = await searchParams
  const statusFilter = sp.status || 'active'
  const page = Math.max(1, Number(sp.page) || 1)
  const perPage = 20

  const where =
    statusFilter === 'active'
      ? { status: { not: 'closed' } }
      : statusFilter === 'all'
        ? {}
        : { status: statusFilter }

  const [tickets, total, stats] = await Promise.all([
    prisma.websiteTicket.findMany({
      where,
      orderBy: [{ createdAt: 'desc' }],
      skip: (page - 1) * perPage,
      take: perPage,
      include: {
        creator: { select: { id: true, username: true } },
        assignee: { select: { id: true, username: true } },
        _count: { select: { messages: true } },
      },
    }),
    prisma.websiteTicket.count({ where }),
    Promise.all([
      prisma.websiteTicket.count({ where: { status: 'open' } }),
      prisma.websiteTicket.count({ where: { status: 'in_progress' } }),
      prisma.websiteTicket.count({ where: { status: 'waiting' } }),
      prisma.websiteTicket.count({ where: { status: 'closed' } }),
    ]),
  ])

  const [openCount, inProgressCount, waitingCount, closedCount] = stats
  const totalPages = Math.ceil(total / perPage)

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">Support Tickets</h1>
        <p className="text-muted-foreground">Manage user support requests</p>
      </div>

      {/* Stats */}
      <div className="grid gap-4 grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-blue-500">Open</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{openCount}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-yellow-500">In Progress</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{inProgressCount}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-orange-500">Waiting</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{waitingCount}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Closed</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{closedCount}</div>
          </CardContent>
        </Card>
      </div>

      {/* Filter tabs */}
      <div className="flex gap-2">
        {[
          { key: 'active', label: 'Active' },
          { key: 'open', label: 'Open' },
          { key: 'in_progress', label: 'In Progress' },
          { key: 'waiting', label: 'Waiting' },
          { key: 'closed', label: 'Closed' },
          { key: 'all', label: 'All' },
        ].map(({ key, label }) => (
          <Link key={key} href={`/admin/tickets?status=${key}`}>
            <Badge
              variant={statusFilter === key ? 'default' : 'outline'}
              className="cursor-pointer"
            >
              {label}
            </Badge>
          </Link>
        ))}
      </div>

      {/* Ticket list */}
      <div className="rounded-lg border">
        <div className="grid grid-cols-[1fr_auto_auto_auto_auto] gap-4 p-3 bg-muted/50 text-xs font-medium text-muted-foreground border-b">
          <span>Ticket</span>
          <span>Status</span>
          <span>Priority</span>
          <span>Assigned</span>
          <span>Date</span>
        </div>

        {tickets.length === 0 ? (
          <div className="p-8 text-center text-muted-foreground">
            <Ticket className="h-8 w-8 mx-auto mb-2" />
            No tickets found.
          </div>
        ) : (
          tickets.map((ticket) => {
            const status =
              STATUS_CONFIG[ticket.status as keyof typeof STATUS_CONFIG] ?? STATUS_CONFIG.open
            const StatusIcon = status.icon

            return (
              <Link
                key={ticket.id}
                href={`/admin/tickets/${ticket.id}`}
                className="grid grid-cols-[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"
              >
                <div className="min-w-0">
                  <div className="flex items-center gap-2">
                    <span className="text-xs text-muted-foreground font-mono">#{ticket.id}</span>
                    <span className="font-medium truncate">{ticket.subject}</span>
                  </div>
                  <div className="text-xs text-muted-foreground">
                    by {ticket.creator.username} &middot; {ticket._count.messages} msg &middot;{' '}
                    {ticket.category}
                  </div>
                </div>
                <span
                  className={`inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full whitespace-nowrap ${status.class}`}
                >
                  <StatusIcon className="h-3 w-3" />
                  {status.label}
                </span>
                <span
                  className={`text-xs capitalize whitespace-nowrap ${PRIORITY_COLORS[ticket.priority as keyof typeof PRIORITY_COLORS] ?? ''}`}
                >
                  {ticket.priority}
                </span>
                <span className="text-xs text-muted-foreground whitespace-nowrap">
                  {ticket.assignee?.username ?? '—'}
                </span>
                <span className="text-xs text-muted-foreground whitespace-nowrap">
                  {new Date(ticket.createdAt).toLocaleDateString()}
                </span>
              </Link>
            )
          })
        )}
      </div>

      {/* Pagination */}
      {totalPages > 1 && (
        <div className="flex items-center justify-center gap-2">
          {page > 1 && (
            <Link href={`/admin/tickets?status=${statusFilter}&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/tickets?status=${statusFilter}&page=${page + 1}`}>
              <Badge variant="outline" className="cursor-pointer">
                Next
              </Badge>
            </Link>
          )}
        </div>
      )}
    </div>
  )
}