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">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">CFH Tickets</h1>
        <p className="text-muted-foreground">In-game Call For Help reports</p>
      </div>

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