import { CalendarDays, Gift, Trophy, Users } from 'lucide-react'
import { notFound, redirect } from 'next/navigation'
import { AdminBreadcrumb } from '@/components/admin/admin-breadcrumb'
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'
import { EventForm } from '../event-form'
import { EventPrizesManager } from './event-prizes'
import { EventRegistrations } from './event-registrations'
import { EventWinnersManager } from './event-winners'

export default async function EventDetailPage({
  params,
}: {
  params: Promise<{ locale: string; id: string }>
}) {
  const { id } = await params
  const { session, permissions } = await getAdminContext()
  if (!canAccess(permissions, PERMS.EVENTS_EDIT, session.user.rank)) {
    redirect('/admin/events')
  }

  const eventId = parseInt(id, 10)
  if (Number.isNaN(eventId)) notFound()

  const event = await prisma.websiteEvent.findUnique({
    where: { id: eventId },
    include: {
      type: true,
      prizes: { orderBy: { position: 'asc' } },
      winners: { orderBy: { position: 'asc' } },
      registrations: { orderBy: { createdAt: 'desc' } },
    },
  })

  if (!event) notFound()

  const eventTypes = await prisma.websiteEventType.findMany({
    where: { isActive: 1 },
    orderBy: { name: 'asc' },
  })

  // Fetch usernames for registrations and winners
  const userIds = [
    ...event.registrations.map((r) => r.userId),
    ...event.winners.map((w) => w.userId),
  ]
  const users =
    userIds.length > 0
      ? await prisma.user.findMany({
          where: { id: { in: [...new Set(userIds)] } },
          select: { id: true, username: true },
        })
      : []
  const userMap = new Map(users.map((u) => [u.id, u.username]))

  return (
    <div className="space-y-6">
      <div>
        <AdminBreadcrumb
          items={[{ label: 'Events', href: '/admin/events' }, { label: event.title }]}
        />
        <div className="flex items-center gap-3">
          <h1 className="text-3xl font-bold tracking-tight">{event.title}</h1>
          <Badge
            variant={
              event.status === 'published'
                ? 'default'
                : event.status === 'cancelled'
                  ? 'destructive'
                  : 'secondary'
            }
          >
            {event.status}
          </Badge>
        </div>
        <p className="text-muted-foreground">
          {event.type.name} &middot; {new Date(event.startsAt).toLocaleString()}
        </p>
      </div>

      {/* Stats */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Registrations</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{event.registrations.length}</div>
            {event.maxPlayers && (
              <p className="text-xs text-muted-foreground">Max: {event.maxPlayers}</p>
            )}
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Prizes</CardTitle>
            <Gift className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{event.prizes.length}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Winners</CardTitle>
            <Trophy className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{event.winners.length}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Time</CardTitle>
            <CalendarDays className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-sm font-medium">
              {new Date(event.startsAt) > new Date() ? 'Upcoming' : 'Past'}
            </div>
            {event.endsAt && (
              <p className="text-xs text-muted-foreground">
                Ends: {new Date(event.endsAt).toLocaleString()}
              </p>
            )}
          </CardContent>
        </Card>
      </div>

      {/* Edit form */}
      <EventForm
        eventTypes={eventTypes}
        defaultValues={{
          id: event.id,
          title: event.title,
          description: event.description,
          typeId: event.typeId,
          roomId: event.roomId,
          startsAt: event.startsAt,
          endsAt: event.endsAt,
          maxPlayers: event.maxPlayers,
          isRecurring: event.isRecurring,
          recurrenceRule: event.recurrenceRule,
          status: event.status as 'draft' | 'published' | 'cancelled' | 'completed',
          image: event.image,
        }}
      />

      {/* Prizes */}
      <EventPrizesManager eventId={event.id} prizes={event.prizes} />

      {/* Winners */}
      <EventWinnersManager
        eventId={event.id}
        winners={event.winners.map((w) => ({
          ...w,
          username: userMap.get(w.userId) ?? `User #${w.userId}`,
        }))}
      />

      {/* Registrations */}
      <EventRegistrations
        registrations={event.registrations.map((r) => ({
          ...r,
          username: userMap.get(r.userId) ?? `User #${r.userId}`,
        }))}
      />
    </div>
  )
}