"use client"

import { useEffect, useState, useCallback } from "react"
import { useParams } 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 { Textarea } from "@/components/ui/textarea"
import {
    Dialog,
    DialogContent,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useToast } from "@/hooks/use-toast"
import { Plus, Trash2, ArrowLeft, MapPin, Calendar, X } from "lucide-react"
import { ConfirmDeleteDialog } from "@/components/ConfirmDeleteDialog"
import { LoadingSpinner } from "@/components/ui/loading-spinner"
import { getMarketingEvents, addItemToEvent, removeItemFromEvent, addItemsToEvent } from "../../actions/event-actions"
import { getInventoryItems } from "../../actions/inventory-actions"
import { Checkbox } from "@/components/ui/checkbox"
import { ScrollArea } from "@/components/ui/scroll-area"
import { MarketingEvent, InventoryItem, EventItemReservation } from "@prisma/client"
import Link from "next/link"
import { format } from "date-fns"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

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

export default function EventDetailsPage() {
    const params = useParams()
    const eventId = params.id as string
    const [event, setEvent] = useState<EventWithItems | null>(null)
    const [loading, setLoading] = useState(true)
    const [inventoryItems, setInventoryItems] = useState<InventoryItem[]>([])
    const [addItemOpen, setAddItemOpen] = useState(false)
    const [addItemMode, setAddItemMode] = useState<"item" | "tool">("item")
    const { toast } = useToast()

    const [selectedItemId, setSelectedItemId] = useState("")
    const [selectedToolIds, setSelectedToolIds] = useState<string[]>([])
    const [quantity, setQuantity] = useState(1)
    const [notes, setNotes] = useState("")

    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
    const [deleteTarget, setDeleteTarget] = useState<{ id: string, name: string } | null>(null)

    const { data: session } = useSession()

    const fetchEventData = useCallback(async () => {
        setLoading(true)
        const res = await getMarketingEvents()
        if (res.success && res.data) {
            const found = res.data.find((e: any) => e.id === eventId)
            if (found) {
                setEvent(found as EventWithItems)
            } else {
                toast({ title: "Erro", description: "Evento não encontrado", variant: "destructive" })
            }
        }
        setLoading(false)
    }, [eventId, toast])

    const fetchInventory = useCallback(async () => {
        if (!session?.user) return
        const orgId = (session.user as any).organizationId
        if (!orgId) return

        const res = await getInventoryItems(orgId)
        if (Array.isArray(res)) {
            setInventoryItems(res)
        }
    }, [session])

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

    useEffect(() => {
        if (session) {
            fetchInventory()
        }
    }, [session, fetchInventory])

    const handleAddItem = async () => {
        if (addItemMode === "item") {
            if (!selectedItemId || quantity <= 0) return

            const res = await addItemToEvent(eventId, selectedItemId, quantity, notes)
            if (res.success) {
                toast({ title: "Sucesso", description: "Item adicionado ao evento" })
                setAddItemOpen(false)
                setSelectedItemId("")
                setQuantity(1)
                setNotes("")
                fetchEventData()
            } else {
                toast({ title: "Erro", description: res.error || "Erro ao adicionar item", variant: "destructive" })
            }
        } else {

            if (selectedToolIds.length === 0) return

            const itemsToAdd = selectedToolIds.map(id => ({
                itemId: id,
                quantity: 1, 
                notes: notes 
            }))

            const res = await addItemsToEvent(eventId, itemsToAdd)
            if (res.success) {
                toast({ title: "Sucesso", description: `${selectedToolIds.length} ferramentas adicionadas` })
                setAddItemOpen(false)
                setSelectedToolIds([])
                setNotes("")
                fetchEventData()
            } else {
                toast({ title: "Erro", description: res.error || "Erro ao adicionar ferramentas", variant: "destructive" })
            }
        }
    }

    const handleRemoveItem = async (itemId: string) => {
        const res = await removeItemFromEvent(eventId, itemId)
        if (res.success) {
            toast({ title: "Sucesso", description: "Item removido" })
            fetchEventData()
        } else {
            toast({ title: "Erro", description: "Erro ao remover item", variant: "destructive" })
        }
    }

    if (loading) return <LoadingSpinner />
    if (!event) return <div>Evento não encontrado</div>

    const availableItems = inventoryItems.filter(
        invItem => !event.items.some(evtItem => evtItem.itemId === invItem.id)
    )

    return (
        <div>
            <div className="mb-6">
                <Link href="/module-inventory/events">
                    <Button variant="ghost" className="pl-0 mb-4">
                        <ArrowLeft className="mr-2 h-4 w-4" />
                        Voltar para Eventos
                    </Button>
                </Link>

                <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                    <div>
                        <h1 className="text-3xl font-bold mb-2">{event.title}</h1>
                        <div className="flex flex-wrap gap-4 text-gray-500">
                            <div className="flex items-center gap-2">
                                <Calendar className="h-4 w-4" />
                                {format(new Date(event.startDate), "dd/MM/yyyy HH:mm")} - {format(new Date(event.endDate), "HH:mm")}
                            </div>
                            {event.location && (
                                <div className="flex items-center gap-2">
                                    <MapPin className="h-4 w-4" />
                                    {event.location}
                                </div>
                            )}
                        </div>
                    </div>
                    {}
                </div>
            </div>

            {}
            <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
                <div className="flex justify-between items-center mb-4">
                    <h2 className="text-xl font-semibold">Itens Reservados</h2>
                    <Button onClick={() => {
                        setAddItemMode("item")
                        setAddItemOpen(true)
                    }}>
                        <Plus className="mr-2 h-4 w-4" />
                        Adicionar Item
                    </Button>
                </div>

                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead>Item</TableHead>
                            <TableHead>Categoria</TableHead>
                            <TableHead>Notas</TableHead>
                            <TableHead className="text-right">Qtd Reservada</TableHead>
                            <TableHead className="text-right">Ações</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {event.items.filter(r => r.item.category !== "Ferramentas").length === 0 ? (
                            <TableRow>
                                <TableCell colSpan={5} className="text-center py-8 text-gray-500">
                                    Nenhum item reservado para este evento
                                </TableCell>
                            </TableRow>
                        ) : (
                            event.items.filter(r => r.item.category !== "Ferramentas").map((reservation: any) => (
                                <TableRow key={reservation.itemId}>
                                    <TableCell className="font-medium">{reservation.item.name}</TableCell>
                                    <TableCell>{reservation.item.category || "-"}</TableCell>
                                    <TableCell className="max-w-[200px] truncate text-sm text-gray-500" title={reservation.notes || ""}>
                                        {reservation.notes || "-"}
                                    </TableCell>
                                    <TableCell className="text-right">{reservation.quantity}</TableCell>
                                    <TableCell className="text-right">
                                        <Button
                                            variant="outline"
                                            size="icon"
                                            className="h-8 w-8 text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20"
                                            onClick={() => {
                                                setDeleteTarget({ id: reservation.itemId, name: reservation.item.name })
                                                setDeleteDialogOpen(true)
                                            }}
                                        >
                                            <Trash2 className="h-4 w-4" />
                                        </Button>
                                    </TableCell>
                                </TableRow>
                            ))
                        )}
                    </TableBody>
                </Table>
            </div>

            {}
            <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
                <div className="flex justify-between items-center mb-4">
                    <h2 className="text-xl font-semibold">Ferramentas & Acessórios</h2>
                    <Button onClick={() => {
                        setAddItemMode("tool")
                        setAddItemOpen(true)
                    }} variant="secondary">
                        <Plus className="mr-2 h-4 w-4" />
                        Adicionar Ferramenta
                    </Button>
                </div>

                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead>Ferramenta</TableHead>
                            <TableHead>Notas</TableHead>
                            <TableHead className="text-right">Qtd</TableHead>
                            <TableHead className="text-right">Ações</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {event.items.filter(r => r.item.category === "Ferramentas").length === 0 ? (
                            <TableRow>
                                <TableCell colSpan={4} className="text-center py-8 text-gray-500">
                                    Nenhuma ferramenta adicionada
                                </TableCell>
                            </TableRow>
                        ) : (
                            event.items.filter(r => r.item.category === "Ferramentas").map((reservation: any) => (
                                <TableRow key={reservation.itemId}>
                                    <TableCell className="font-medium">{reservation.item.name}</TableCell>
                                    <TableCell className="max-w-[200px] truncate text-sm text-gray-500" title={reservation.notes || ""}>
                                        {reservation.notes || "-"}
                                    </TableCell>
                                    <TableCell className="text-right">{reservation.quantity}</TableCell>
                                    <TableCell className="text-right">
                                        <Button
                                            variant="outline"
                                            size="icon"
                                            className="h-8 w-8 text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20"
                                            onClick={() => {
                                                setDeleteTarget({ id: reservation.itemId, name: reservation.item.name })
                                                setDeleteDialogOpen(true)
                                            }}
                                        >
                                            <Trash2 className="h-4 w-4" />
                                        </Button>
                                    </TableCell>
                                </TableRow>
                            ))
                        )}
                    </TableBody>
                </Table>
            </div>

            <Dialog open={addItemOpen} onOpenChange={setAddItemOpen}>
                <DialogContent>
                    <DialogHeader>
                        <DialogTitle>{addItemMode === "item" ? "Adicionar Item ao Evento" : "Adicionar Ferramenta"}</DialogTitle>
                    </DialogHeader>
                    <div className="space-y-4 py-4">
                        <div className="space-y-2">
                            <Label>{addItemMode === "item" ? "Selecionar Item" : "Selecionar Ferramentas"}</Label>
                            {addItemMode === "item" ? (
                                <Select value={selectedItemId} onValueChange={setSelectedItemId}>
                                    <SelectTrigger>
                                        <SelectValue placeholder="Selecione um item..." />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {availableItems
                                            .filter(item => item.category !== "Ferramentas")
                                            .map((item: any) => (
                                                <SelectItem key={item.id} value={item.id}>
                                                    {item.name} {(item.quantity !== undefined) && `(Disp: ${item.quantity})`}
                                                </SelectItem>
                                            ))}
                                    </SelectContent>
                                </Select>
                            ) : (
                                <ScrollArea className="h-[300px] border rounded-md p-4">
                                    <div className="space-y-4">
                                        {availableItems
                                            .filter(item => item.category === "Ferramentas")
                                            .map((item: any) => (
                                                <div key={item.id} className="flex items-center space-x-2">
                                                    <Checkbox
                                                        id={item.id}
                                                        checked={selectedToolIds.includes(item.id)}
                                                        onCheckedChange={(checked) => {
                                                            if (checked) {
                                                                setSelectedToolIds([...selectedToolIds, item.id])
                                                            } else {
                                                                setSelectedToolIds(selectedToolIds.filter(id => id !== item.id))
                                                            }
                                                        }}
                                                    />
                                                    <label
                                                        htmlFor={item.id}
                                                        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
                                                    >
                                                        {item.name}
                                                    </label>
                                                </div>
                                            ))}
                                        {availableItems.filter(item => item.category === "Ferramentas").length === 0 && (
                                            <div className="text-center text-gray-500 py-4">Nenhuma ferramenta disponível</div>
                                        )}
                                    </div>
                                </ScrollArea>
                            )}
                        </div>
                        {addItemMode === "item" && (
                            <div className="space-y-2">
                                <Label>Quantidade</Label>
                                <Input
                                    type="number"
                                    min="1"
                                    value={quantity}
                                    onChange={(e) => setQuantity(parseInt(e.target.value) || 1)}
                                />
                            </div>
                        )}
                        <div className="space-y-2">
                            <Label>Descrição / Notas</Label>
                            <Textarea
                                placeholder="Detalhes sobre o uso (ex: Manusear com cuidado)"
                                value={notes}
                                onChange={(e) => setNotes(e.target.value)}
                            />
                        </div>
                    </div>
                    <DialogFooter>
                        <Button variant="outline" onClick={() => setAddItemOpen(false)}>Cancelar</Button>
                        <Button onClick={handleAddItem} disabled={addItemMode === "item" ? !selectedItemId : selectedToolIds.length === 0}>Adicionar</Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>

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