"use client"

import { useEffect, useState, useCallback } from "react"
import { useParams } from "next/navigation"
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table"
import { LoadingSpinner, LoadingSpinnerSmall } from "@/components/ui/loading-spinner"
import { MarketingEvent, InventoryItem, EventItemReservation } from "@prisma/client"
import { format } from "date-fns"
import { MapPin, Calendar, CheckCircle2, Box } from "lucide-react"
import { Badge } from "@/components/ui/badge"

type EventWithItems = MarketingEvent & {
    items: (EventItemReservation & { item: InventoryItem })[]
}

import { getPublicEventDetails } from "../../module-inventory/actions/event-actions"

export default function PublicEventViewPage() {
    const params = useParams()
    const eventId = params.id as string
    const [event, setEvent] = useState<EventWithItems | null>(null)
    const [loading, setLoading] = useState(true)
    const [error, setError] = useState(false)

    const fetchEvent = useCallback(async () => {
        try {
            const res = await getPublicEventDetails(eventId)
            if (res.success && res.data) {
                setEvent(res.data as EventWithItems)
            } else {
                setError(true)
            }
        } catch (e) {
            setError(true)
        } finally {
            setLoading(false)
        }
    }, [eventId])

    useEffect(() => {
        fetchEvent()
    }, [fetchEvent])

    if (loading) {
        return (
            <div className="min-h-screen bg-gray-50 dark:bg-gray-900 px-4 py-8 animate-pulse text-transparent select-none pointer-events-none">
                <main className="max-w-3xl mx-auto space-y-6">
                    {}
                    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border dark:border-gray-700 overflow-hidden h-48">
                        <div className="bg-gray-200 dark:bg-gray-700 h-24 p-6">
                            <div className="h-8 bg-gray-300 dark:bg-gray-600 rounded w-3/4 mb-3"></div>
                            <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-1/2"></div>
                        </div>
                        <div className="p-6 grid grid-cols-2 gap-6">
                            <div className="h-10 bg-gray-100 dark:bg-gray-700 rounded w-full"></div>
                            <div className="h-10 bg-gray-100 dark:bg-gray-700 rounded w-full"></div>
                        </div>
                    </div>
                    {}
                    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border dark:border-gray-700 h-64">
                        <div className="p-6 border-b dark:border-gray-700 h-16 bg-gray-50/50 dark:bg-gray-900/50"></div>
                        <div className="p-6 space-y-4">
                            {[1, 2, 3].map(i => (
                                <div key={i} className="flex justify-between items-center py-2 border-b dark:border-gray-700 last:border-0">
                                    <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/3"></div>
                                    <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-8"></div>
                                </div>
                            ))}
                        </div>
                    </div>
                    {}
                    <div className="flex justify-center pt-4">
                        <LoadingSpinnerSmall />
                    </div>
                </main>
            </div>
        )
    }

    if (error || !event) return (
        <div className="min-h-screen flex flex-col items-center justify-center p-4 text-center bg-gray-50 dark:bg-gray-900">
            <h1 className="text-2xl font-bold mb-2">Evento não encontrado</h1>
            <p className="text-gray-500">O evento que você procura não está disponível ou não existe.</p>
        </div>
    )

    return (
        <div className="min-h-screen bg-gray-50 dark:bg-gray-900 animate-in fade-in duration-500">

            <main className="max-w-3xl mx-auto px-4 py-8">
                <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border dark:border-gray-700 overflow-hidden mb-6">
                    <div className="bg-gray-900 p-6 text-white dark:bg-gray-950 border-b dark:border-gray-800">
                        <h1 className="text-2xl sm:text-3xl font-bold mb-2">{event.title}</h1>
                        {event.description && <p className="opacity-90 font-medium">{event.description}</p>}
                    </div>
                    <div className="p-6 grid grid-cols-1 sm:grid-cols-2 gap-6">
                        <div className="flex items-start gap-3">
                            <Calendar className="h-5 w-5 text-blue-600 mt-1" />
                            <div>
                                <p className="font-medium text-gray-500 text-sm">Data e Hora</p>
                                <p className="font-semibold text-lg">{format(new Date(event.startDate), "dd/MM/yyyy HH:mm")}</p>
                                <p className="text-gray-500">até {format(new Date(event.endDate), "dd/MM/yyyy HH:mm")}</p>
                            </div>
                        </div>
                        {event.location && (
                            <div className="flex items-start gap-3">
                                <MapPin className="h-5 w-5 text-blue-600 mt-1" />
                                <div>
                                    <p className="font-medium text-gray-500 text-sm">Localização</p>
                                    <p className="font-semibold text-lg">{event.location}</p>
                                </div>
                            </div>
                        )}
                    </div>
                </div>

                <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border dark:border-gray-700 overflow-hidden">
                    <div className="p-6 border-b dark:border-gray-700 flex justify-between items-center">
                        <h2 className="text-xl font-bold flex items-center gap-2">
                            <Box className="h-5 w-5 text-blue-600" />
                            Lista de Equipamentos
                        </h2>
                        <Badge variant="secondary" className="text-xs font-bold px-3 py-1 rounded-full">
                            {event.items.reduce((acc, curr) => acc + curr.quantity, 0)} itens
                        </Badge>
                    </div>

                    <div className="overflow-x-auto">
                        <Table>
                            <TableHeader className="bg-gray-50 dark:bg-gray-900/50">
                                <TableRow>
                                    <TableHead className="w-[50px]"></TableHead>
                                    <TableHead>Item</TableHead>
                                    <TableHead>Categoria</TableHead>
                                    <TableHead className="text-right">Qtd</TableHead>
                                </TableRow>
                            </TableHeader>
                            <TableBody>
                                {event.items.length === 0 ? (
                                    <TableRow>
                                        <TableCell colSpan={4} className="text-center py-8 text-gray-500">
                                            Nenhum equipamento listado para este evento.
                                        </TableCell>
                                    </TableRow>
                                ) : (
                                    event.items.map((res) => (
                                        <TableRow key={res.itemId}>
                                            <TableCell>
                                                <CheckCircle2 className="h-5 w-5 text-green-500 opacity-20" />
                                            </TableCell>
                                            <TableCell className="font-medium">
                                                {res.item.name}
                                                {res.item.sku && <span className="block text-xs text-gray-500">SKU: {res.item.sku}</span>}
                                            </TableCell>
                                            <TableCell className="text-gray-500">{res.item.category || "-"}</TableCell>
                                            <TableCell className="text-right font-bold">{res.quantity}</TableCell>
                                        </TableRow>
                                    ))
                                )}
                            </TableBody>
                        </Table>
                    </div>
                </div>

                <div className="mt-8 text-center text-gray-400 text-sm">
                    <p>&copy; {new Date().getFullYear()} Wibix.io Event Management</p>
                </div>
            </main>
        </div>
    )
}