"use client"

import { useEffect, useState, useCallback } from "react"
import { useRouter } from "next/navigation"
import { useSession } from "next-auth/react"
import { Button } from "@/components/ui/button"
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table"
import { Input } from "@/components/ui/input"
import { useToast } from "@/hooks/use-toast"
import { Plus, Trash2, Calendar, MapPin, Search, Filter, X, QrCode, Download, Edit } from "lucide-react"
import { LoadingSpinner } from "@/components/ui/loading-spinner"
import { Pagination } from "@/components/ui/pagination"
import jsPDF from "jspdf"
import { MarketingEvent } from "@prisma/client"
import { getMarketingEvents, deleteMarketingEvent } from "../actions/event-actions"
import Link from "next/link"
import { format, isAfter, isBefore, addDays } from "date-fns"
import { ptBR } from "date-fns/locale"
import { Badge } from "@/components/ui/badge"
import { generateQRCode } from "@/lib/qrcode"
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select"
import { Card, CardContent } from "@/components/ui/card"
import { ConfirmDeleteDialog } from "@/components/ConfirmDeleteDialog"

import {
    Tabs,
    TabsContent,
    TabsList,
    TabsTrigger,
} from "@/components/ui/tabs"
import { NotificationBell } from "@/components/NotificationBell"
import { getUpcomingEvents, type NotificationItem } from "@/lib/notifications"

export default function EventsPage() {
    const router = useRouter()
    const { status: sessionStatus } = useSession()

    const [events, setEvents] = useState<MarketingEvent[]>([])
    const [loading, setLoading] = useState(true)
    const { toast } = useToast()

    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
    const [deleteTarget, setDeleteTarget] = useState<MarketingEvent | null>(null)

    const [searchTerm, setSearchTerm] = useState("")
    const [statusFilter, setStatusFilter] = useState("all")

    const [currentPage, setCurrentPage] = useState(1)
    const itemsPerPage = 10

    const upcomingNotifications = getUpcomingEvents(
        events.map((e) => ({
            id: e.id,
            titulo: e.title,
            data: e.startDate,
            equipamento: {
                modelo: e.location || "Local não definido",
                matricula: "Inventário",
            },
        }))
    )

    const handleNotificationClick = (item: NotificationItem) => {
        router.push(`/module-inventory/events/${item.id}`)
    }

    const fetchEvents = useCallback(async (showToast = false) => {
        setLoading(true)
        const res = await getMarketingEvents()
        if (res.success && res.data) {
            setEvents(res.data)

            if (showToast) {
                const now = new Date()
                const nextWeek = addDays(now, 7)
                const upcoming = res.data.filter(e =>
                    isAfter(new Date(e.startDate), now) &&
                    isBefore(new Date(e.startDate), nextWeek)
                )

                if (upcoming.length > 0) {
                    toast({
                        title: "🔔 Eventos Próximos",
                        description: `Você tem ${upcoming.length} evento${upcoming.length > 1 ? "s" : ""} agendado${upcoming.length > 1 ? "s" : ""} para os próximos 7 dias.`,
                        duration: 6000,
                    })
                }
            }
        } else {
            toast({
                title: "Erro",
                description: "Falha ao carregar eventos",
                variant: "destructive",
            })
        }
        setLoading(false)
    }, [toast])

    useEffect(() => {
        if (sessionStatus === "authenticated") {
            fetchEvents(true)
        } else if (sessionStatus === "unauthenticated") {
            setLoading(false)
        }
    }, [sessionStatus, fetchEvents])

    const filteredEvents = events.filter(e => {
        const matchesSearch = searchTerm === "" ||
            e.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
            (e.location && e.location.toLowerCase().includes(searchTerm.toLowerCase()))

        const matchesStatus = statusFilter === "all" || e.status === statusFilter

        return matchesSearch && matchesStatus
    })

    const now = new Date()
    const upcomingEvents = filteredEvents.filter(e => isAfter(new Date(e.endDate), now))
    const pastEvents = filteredEvents.filter(e => isBefore(new Date(e.endDate), now))

    const paginate = (list: MarketingEvent[], page: number) => {
        const startIndex = (page - 1) * itemsPerPage
        return list.slice(startIndex, startIndex + itemsPerPage)
    }

    const totalPagesUpcoming = Math.ceil(upcomingEvents.length / itemsPerPage)
    const paginatedUpcoming = paginate(upcomingEvents, currentPage)

    const totalPagesPast = Math.ceil(pastEvents.length / itemsPerPage)

    const paginatedPast = paginate(pastEvents, currentPage)

    useEffect(() => {
        setCurrentPage(1)
    }, [searchTerm, statusFilter])

    const handleDelete = async (id: string) => {
        const res = await deleteMarketingEvent(id)
        if (res.success) {
            toast({ title: "Sucesso", description: "Evento excluído" })
            fetchEvents()
        } else {
            toast({ title: "Erro", description: "Erro ao excluir", variant: "destructive" })
        }
    }

    const handleQrClick = async (event: MarketingEvent) => {
        router.push(`/event-view/${event.id}`)
    }

    const handleDownloadEventQRCodePDF = async (event: MarketingEvent) => {
        try {
            const publicUrl = `${window.location.origin}/event-view/${event.id}`
            const qrCode = await generateQRCode(publicUrl)

            const pdf = new jsPDF({
                orientation: "portrait",
                unit: "mm",
                format: "a4",
            })

            const pageWidth = 210
            const pageHeight = 297
            const qrSize = 80
            const qrX = (pageWidth - qrSize) / 2
            const qrY = (pageHeight - qrSize) / 2 - 20

            pdf.addImage(qrCode, "PNG", qrX, qrY, qrSize, qrSize)

            const textY = qrY + qrSize + 15
            pdf.setFontSize(16)
            pdf.setFont("helvetica", "bold")
            pdf.text(`Evento: ${event.title}`, pageWidth / 2, textY, {
                align: "center",
            })

            pdf.save(`Evento-${event.title}.pdf`)

            toast({
                title: "Sucesso",
                description: "QR Code baixado com sucesso",
            })
        } catch (error) {
            toast({
                title: "Erro",
                description: "Erro ao gerar PDF do QR Code",
                variant: "destructive",
            })
        }
    }

    const getStatusBadge = (status: string) => {
        switch (status) {
            case 'CONFIRMED':
                return <Badge variant="default" className="bg-green-600 hover:bg-green-700">Confirmado</Badge>
            case 'COMPLETED':
                return <Badge variant="secondary">Concluído</Badge>
            case 'DRAFT':
                return <Badge variant="outline">Rascunho</Badge>
            default:
                return <Badge variant="outline">{status}</Badge>
        }
    }

    if (loading) return <LoadingSpinner />

    return (
        <div className="space-y-6 animate-in fade-in duration-500">

            <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                <div>
                    <h1 className="text-2xl sm:text-3xl font-bold dark:text-white">Eventos</h1>
                    <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">Gerencie seus eventos e reservas de inventário.</p>
                </div>
                <div className="flex items-center gap-2">
                    <NotificationBell
                        count={upcomingNotifications.length}
                        items={upcomingNotifications}
                        onItemClick={handleNotificationClick}
                    />
                    <Button asChild className="shadow-sm">
                        <Link href="/module-inventory/events/new">
                            <Plus className="mr-2 h-4 w-4" />
                            Novo Evento
                        </Link>
                    </Button>
                </div>
            </div>

            <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-4 border dark:border-gray-700">
                <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-4">
                    <h2 className="text-base font-semibold flex items-center gap-2">
                        <Filter className="h-4 w-4" />
                        Filtros de eventos
                    </h2>
                    {(searchTerm || statusFilter !== "all") && (
                        <Button
                            variant="outline"
                            size="sm"
                            onClick={() => { setSearchTerm(""); setStatusFilter("all"); }}
                            className="text-xs h-8"
                        >
                            <X className="h-3 w-3 mr-1" />
                            Limpar filtros
                        </Button>
                    )}
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
                    <div className="lg:col-span-3">
                        <div className="relative">
                            <Input
                                placeholder="Procurar por título, descrição, local..."
                                value={searchTerm}
                                onChange={(e) => setSearchTerm(e.target.value)}
                                className="pl-9 pr-9 h-9"
                            />
                            <Search className="absolute left-2.5 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                            {searchTerm && (
                                <Button
                                    variant="ghost"
                                    size="icon"
                                    className="absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6"
                                    onClick={() => setSearchTerm("")}
                                >
                                    <X className="h-3 w-3" />
                                </Button>
                            )}
                        </div>
                    </div>

                    <Select value={statusFilter} onValueChange={setStatusFilter}>
                        <SelectTrigger className="h-9">
                            <SelectValue placeholder="Status" />
                        </SelectTrigger>
                        <SelectContent>
                            <SelectItem value="all">Todos os Status</SelectItem>
                            <SelectItem value="DRAFT">Rascunho</SelectItem>
                            <SelectItem value="CONFIRMED">Confirmado</SelectItem>
                            <SelectItem value="COMPLETED">Concluído</SelectItem>
                        </SelectContent>
                    </Select>
                </div>
            </div>

            <Tabs defaultValue="upcoming" className="w-full" onValueChange={() => setCurrentPage(1)}>
                <TabsList className="mb-4">
                    <TabsTrigger value="upcoming" className="flex gap-2">
                        Próximos / Ativos
                        <Badge variant="secondary" className="px-1.5 py-0 h-5 text-[10px]">
                            {upcomingEvents.length}
                        </Badge>
                    </TabsTrigger>
                    <TabsTrigger value="past" className="flex gap-2">
                        Eventos Passados
                        <Badge variant="outline" className="px-1.5 py-0 h-5 text-[10px]">
                            {pastEvents.length}
                        </Badge>
                    </TabsTrigger>
                </TabsList>

                <TabsContent value="upcoming">
                    <div className="rounded-lg border bg-white dark:bg-gray-800 shadow-sm overflow-hidden">
                        <Table>
                            <TableHeader className="bg-gray-50 dark:bg-gray-900/50">
                                <TableRow>
                                    <TableHead className="w-[300px]">Evento</TableHead>
                                    <TableHead>Data</TableHead>
                                    <TableHead>Local</TableHead>
                                    <TableHead>Status</TableHead>
                                    <TableHead className="text-right">Ações</TableHead>
                                </TableRow>
                            </TableHeader>
                            <TableBody>
                                {upcomingEvents.length === 0 ? (
                                    <TableRow>
                                        <TableCell colSpan={5} className="text-center py-12 text-gray-500">
                                            <div className="flex flex-col items-center justify-center gap-2">
                                                <Calendar className="h-8 w-8 text-gray-300 mb-2" />
                                                <p>Nenhum evento futuro ou ativo encontrado</p>
                                            </div>
                                        </TableCell>
                                    </TableRow>
                                ) : (
                                    paginatedUpcoming.map((event) => (
                                        <TableRow key={event.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                                            <TableCell>
                                                <div className="flex flex-col">
                                                    <span className="font-semibold text-gray-900 dark:text-white">{event.title}</span>
                                                    {event.description && (
                                                        <span className="text-xs text-gray-500 truncate max-w-[250px]">{event.description}</span>
                                                    )}
                                                </div>
                                            </TableCell>
                                            <TableCell>
                                                <div className="flex flex-col text-sm">
                                                    <span className="font-medium">
                                                        {format(new Date(event.startDate), "dd/MM/yyyy", { locale: ptBR })}
                                                    </span>
                                                    <span className="text-xs text-gray-500">
                                                        {format(new Date(event.startDate), "HH:mm")}
                                                    </span>
                                                </div>
                                            </TableCell>
                                            <TableCell>
                                                <div className="text-sm text-gray-600 dark:text-gray-300">
                                                    {event.location || "---"}
                                                </div>
                                            </TableCell>
                                            <TableCell>
                                                {getStatusBadge(event.status)}
                                            </TableCell>
                                            <TableCell className="text-right">
                                                <div className="flex justify-end gap-2">
                                                    <Button variant="outline" size="icon" asChild className="h-8 w-8">
                                                        <Link href={`/module-inventory/events/${event.id}`}>
                                                            <Edit className="h-4 w-4" />
                                                        </Link>
                                                    </Button>
                                                    <Button
                                                        variant="outline"
                                                        size="icon"
                                                        className="h-8 w-8"
                                                        onClick={() => {
                                                            setDeleteTarget(event)
                                                            setDeleteDialogOpen(true)
                                                        }}
                                                    >
                                                        <Trash2 className="h-4 w-4" />
                                                    </Button>
                                                    <Button
                                                        variant="outline"
                                                        size="icon"
                                                        title="Visualizar QR Code"
                                                        className="h-8 w-8"
                                                        onClick={() => handleQrClick(event)}
                                                    >
                                                        <QrCode className="h-4 w-4" />
                                                    </Button>
                                                    <Button
                                                        variant="outline"
                                                        size="icon"
                                                        title="Baixar PDF do QR"
                                                        className="h-8 w-8"
                                                        onClick={() => handleDownloadEventQRCodePDF(event)}
                                                    >
                                                        <Download className="h-4 w-4" />
                                                    </Button>
                                                </div>
                                            </TableCell>
                                        </TableRow>
                                    ))
                                )}
                            </TableBody>
                        </Table>
                    </div>

                    {upcomingEvents.length > 0 && totalPagesUpcoming > 1 && (
                        <div className="mt-4">
                            <Pagination
                                currentPage={currentPage}
                                totalPages={totalPagesUpcoming}
                                onPageChange={setCurrentPage}
                                itemsPerPage={itemsPerPage}
                                totalItems={upcomingEvents.length}
                            />
                        </div>
                    )}
                </TabsContent>

                <TabsContent value="past">
                    <div className="rounded-lg border bg-white dark:bg-gray-800 shadow-sm overflow-hidden opacity-80">
                        <Table>
                            <TableHeader className="bg-gray-50 dark:bg-gray-900/50">
                                <TableRow>
                                    <TableHead className="w-[300px]">Evento</TableHead>
                                    <TableHead>Data</TableHead>
                                    <TableHead>Local</TableHead>
                                    <TableHead>Status</TableHead>
                                    <TableHead className="text-right">Ações</TableHead>
                                </TableRow>
                            </TableHeader>
                            <TableBody>
                                {pastEvents.length === 0 ? (
                                    <TableRow>
                                        <TableCell colSpan={5} className="text-center py-12 text-gray-500">
                                            <div className="flex flex-col items-center justify-center gap-2">
                                                <Calendar className="h-8 w-8 text-gray-300 mb-2" />
                                                <p>Nenhum evento passado encontrado</p>
                                            </div>
                                        </TableCell>
                                    </TableRow>
                                ) : (
                                    paginatedPast.map((event) => (
                                        <TableRow key={event.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                                            <TableCell>
                                                <div className="flex flex-col">
                                                    <span className="font-semibold text-gray-900 dark:text-white uppercase text-xs tracking-wider opacity-60">Passado</span>
                                                    <span className="font-semibold text-gray-900 dark:text-white">{event.title}</span>
                                                    {event.description && (
                                                        <span className="text-xs text-gray-500 truncate max-w-[250px]">{event.description}</span>
                                                    )}
                                                </div>
                                            </TableCell>
                                            <TableCell>
                                                <div className="flex flex-col text-sm">
                                                    <span className="font-medium">
                                                        {format(new Date(event.startDate), "dd/MM/yyyy", { locale: ptBR })}
                                                    </span>
                                                    <span className="text-xs text-gray-500">
                                                        {format(new Date(event.startDate), "HH:mm")}
                                                    </span>
                                                </div>
                                            </TableCell>
                                            <TableCell>
                                                <div className="text-sm text-gray-600 dark:text-gray-300">
                                                    {event.location || "---"}
                                                </div>
                                            </TableCell>
                                            <TableCell>
                                                <Badge variant="secondary">Finalizado</Badge>
                                            </TableCell>
                                            <TableCell className="text-right">
                                                <div className="flex justify-end gap-2 text-muted-foreground">
                                                    <Button variant="outline" size="icon" asChild className="h-8 w-8 opacity-50">
                                                        <Link href={`/module-inventory/events/${event.id}`}>
                                                            <Edit className="h-4 w-4" />
                                                        </Link>
                                                    </Button>
                                                    <Button
                                                        variant="outline"
                                                        size="icon"
                                                        className="h-8 w-8 opacity-50"
                                                        onClick={() => {
                                                            setDeleteTarget(event)
                                                            setDeleteDialogOpen(true)
                                                        }}
                                                    >
                                                        <Trash2 className="h-4 w-4" />
                                                    </Button>
                                                    <Button
                                                        variant="outline"
                                                        size="icon"
                                                        title="Visualizar QR Code"
                                                        className="h-8 w-8 opacity-50"
                                                        onClick={() => handleQrClick(event)}
                                                    >
                                                        <QrCode className="h-4 w-4" />
                                                    </Button>
                                                </div>
                                            </TableCell>
                                        </TableRow>
                                    ))
                                )}
                            </TableBody>
                        </Table>
                    </div>

                    {pastEvents.length > 0 && totalPagesPast > 1 && (
                        <div className="mt-4">
                            <Pagination
                                currentPage={currentPage}
                                totalPages={totalPagesPast}
                                onPageChange={setCurrentPage}
                                itemsPerPage={itemsPerPage}
                                totalItems={pastEvents.length}
                            />
                        </div>
                    )}
                </TabsContent>
            </Tabs>

            <ConfirmDeleteDialog
                open={deleteDialogOpen}
                onOpenChange={setDeleteDialogOpen}
                entityLabel="Evento"
                identifier={deleteTarget?.title || ""}
                onConfirm={async () => {
                    if (deleteTarget) {
                        await handleDelete(deleteTarget.id)
                        setDeleteTarget(null)
                    }
                }}
            />
        </div >
    )
}