"use client"

import { useState, useEffect, useCallback } from "react"
import { useRouter } from "next/navigation"
import { useSession } from "next-auth/react"
import { Button } from "@/components/ui/button"
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogFooter,
} from "@/components/ui/dialog"
import { generateQRCode } from "@/lib/qrcode"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/hooks/use-toast"
import { LoadingSpinner } from "@/components/ui/loading-spinner"
import {
    Calendar, MapPin, Search, ShoppingCart, Plus, Minus, X,
    ArrowLeft, Check, Package, Trash2, Loader2
} from "lucide-react"
import { getInventoryItems } from "@/app/module-inventory/actions/inventory-actions"
import { createEventWithItems } from "@/app/module-inventory/actions/event-actions"
import Image from "next/image"
import { InventoryItem as PrismaInventoryItem } from "@prisma/client"

interface InventoryItem extends PrismaInventoryItem {
    type: string | null
}
import { format } from "date-fns"
import { ptBR } from "date-fns/locale"
import {
    Sheet,
    SheetContent,
    SheetHeader,
    SheetTitle,
    SheetTrigger,
    SheetFooter
} from "@/components/ui/sheet"
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select"
import { ScrollArea } from "@/components/ui/scroll-area"

interface CartItem {
    item: InventoryItem
    quantity: number
}

export default function NewEventPage() {
    const router = useRouter()
    const { data: session } = useSession()
    const { toast } = useToast()
    const [step, setStep] = useState(1) 
    const [loading, setLoading] = useState(false)
    const [submitting, setSubmitting] = useState(false)
    const [successOpen, setSuccessOpen] = useState(false)
    const [qrCode, setQrCode] = useState("")
    const [createdEventId, setCreatedEventId] = useState("")

    const [eventData, setEventData] = useState({
        title: "",
        startDate: "",
        endDate: "",
        location: "",
        description: ""
    })

    const [items, setItems] = useState<InventoryItem[]>([])
    const [filteredItems, setFilteredItems] = useState<InventoryItem[]>([])
    const [searchTerm, setSearchTerm] = useState("")
    const [selectedCategory, setSelectedCategory] = useState("all")
    const [selectedType, setSelectedType] = useState("all")

    const [cart, setCart] = useState<CartItem[]>([])
    const [isCartOpen, setIsCartOpen] = useState(false)

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

            setLoading(true)
            try {
                const res = await getInventoryItems(orgId)
                if (res) {
                    setItems(res as unknown as InventoryItem[])
                    setFilteredItems(res as unknown as InventoryItem[])
                }
            } catch (error) {
                toast({ title: "Erro", description: "Falha ao carregar itens de stock.", variant: "destructive" })
            }
            setLoading(false)
        }
        if (session) {
            fetchItems()
        }
    }, [session, toast])

    useEffect(() => {
        let result = items
        if (searchTerm) {
            const term = searchTerm.toLowerCase()
            result = result.filter(i =>
                i.name.toLowerCase().includes(term) ||
                (i.sku && i.sku.toLowerCase().includes(term))
            )
        }
        if (selectedCategory !== "all") {
            result = result.filter(i => i.category === selectedCategory)
        }
        if (selectedType !== "all") {
            result = result.filter(i => i.type === selectedType)
        }
        setFilteredItems(result)
    }, [items, searchTerm, selectedCategory, selectedType])

    const addToCart = (item: InventoryItem) => {
        setCart(prev => {
            const existing = prev.find(c => c.item.id === item.id)
            if (existing) {
                if (existing.quantity >= item.quantity) {
                    toast({ title: "Stock máximo atingido", description: `Apenas ${item.quantity} itens disponíveis.`, variant: "destructive" })
                    return prev
                }
                return prev.map(c => c.item.id === item.id ? { ...c, quantity: c.quantity + 1 } : c)
            }
            return [...prev, { item, quantity: 1 }]
        })

    }

    const removeFromCart = (itemId: string) => {
        setCart(prev => prev.filter(c => c.item.id !== itemId))
    }

    const updateQuantity = (itemId: string, delta: number) => {
        setCart(prev => {
            return prev.map(c => {
                if (c.item.id === itemId) {
                    const newQty = c.quantity + delta
                    if (newQty < 1) return c
                    if (newQty > c.item.quantity) {
                        toast({ title: "Stock insuficiente", description: `Máximo disponível: ${c.item.quantity}`, variant: "destructive" })
                        return c
                    }
                    return { ...c, quantity: newQty }
                }
                return c
            })
        })
    }

    const categories = Array.from(new Set(items.map(i => i.category).filter(Boolean)))
    const types = Array.from(new Set(items.map(i => i.type).filter(Boolean)))

    const totalItems = cart.reduce((acc, curr) => acc + curr.quantity, 0)

    const handleSubmit = async () => {
        if (!eventData.title || !eventData.startDate || !eventData.endDate) {
            toast({ title: "Erro", description: "Preencha os dados do evento.", variant: "destructive" })
            return
        }

        setSubmitting(true)
        try {
            const res = await createEventWithItems({
                ...eventData,
                startDate: new Date(eventData.startDate),
                endDate: new Date(eventData.endDate),
                items: cart.map(c => ({ itemId: c.item.id, quantity: c.quantity }))
            })

            if (res.success && res.data) {
                const eventId = res.data.id
                setCreatedEventId(eventId)

                const publicUrl = `${window.location.origin}/event-view/${eventId}`
                const qr = await generateQRCode(publicUrl)
                setQrCode(qr)

                setSuccessOpen(true)
                toast({ title: "Sucesso!", description: "Evento criado e itens reservados." })
            } else {
                toast({ title: "Erro", description: res.error || "Falha ao criar evento.", variant: "destructive" })
            }
        } catch (error) {
            toast({ title: "Erro", description: "Erro inesperado.", variant: "destructive" })
        }
        setSubmitting(false)
    }

    if (loading) return <LoadingSpinner />

    return (
        <div className="animate-in fade-in duration-500 pb-20">
            {}
            <Dialog open={successOpen} onOpenChange={(val) => {
                setSuccessOpen(val)
                if (!val) router.push("/module-inventory/events")
            }}>
                <DialogContent className="sm:max-w-md text-center">
                    <DialogHeader>
                        <DialogTitle className="text-2xl font-bold text-green-600 flex items-center justify-center gap-2">
                            <Check className="h-6 w-6" />
                            Evento Criado!
                        </DialogTitle>
                    </DialogHeader>

                    <div className="flex flex-col items-center justify-center py-6 space-y-4">
                        <p className="text-muted-foreground">
                            O evento <strong>{eventData.title}</strong> foi criado com sucesso.
                            Use o QR Code abaixo para que a equipe acesse os detalhes rapidamente.
                        </p>

                        <div className="p-4 bg-white rounded-xl shadow-inner border-2 border-dashed border-gray-200">
                            {qrCode ? (
                                <Image
                                    src={qrCode}
                                    alt="QR Code"
                                    width={200}
                                    height={200}
                                    className="rounded-lg"
                                />
                            ) : (
                                <div className="w-[200px] h-[200px] flex items-center justify-center">
                                    <Loader2 className="h-8 w-8 animate-spin text-gray-300" />
                                </div>
                            )}
                        </div>

                        <div className="text-xs font-mono text-muted-foreground break-all bg-gray-50 p-2 rounded w-full">
                            {typeof window !== 'undefined' ? `${window.location.origin}/event-view/${createdEventId}` : ''}
                        </div>
                    </div>

                    <DialogFooter className="sm:justify-center">
                        <Button
                            className="w-full sm:w-auto px-8"
                            onClick={() => router.push("/module-inventory/events")}
                        >
                            Ir para Eventos
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
            {}
            <div className="flex items-center gap-4 mb-8">
                <Button variant="ghost" size="icon" onClick={() => step === 1 ? router.back() : setStep(1)} className="rounded-full h-10 w-10">
                    <ArrowLeft className="h-5 w-5" />
                </Button>
                <div>
                    <h1 className="text-2xl font-bold tracking-tight dark:text-white">Novo Evento</h1>
                    <div className="flex items-center gap-2 text-sm text-muted-foreground mt-0.5">
                        <span>Passo {step} de 2</span>
                        <span className="text-gray-300 dark:text-gray-700">•</span>
                        <span className="font-medium text-primary">
                            {step === 1 ? "Dados do Evento" : "Seleção de Itens"}
                        </span>
                    </div>
                </div>
                <div className="ml-auto flex items-center gap-2">

                </div>
            </div>

            {step === 1 && (
                <div className="max-w-2xl mx-auto space-y-6">
                    <Card>
                        <CardContent className="p-6 space-y-4">
                            <div className="space-y-2">
                                <Label>Título do Evento</Label>
                                <Input
                                    value={eventData.title}
                                    onChange={e => setEventData({ ...eventData, title: e.target.value })}
                                    placeholder="Ex: Workshop de Verão"
                                />
                            </div>
                            <div className="grid grid-cols-2 gap-4">
                                <div className="space-y-2">
                                    <Label>Início</Label>
                                    <Input
                                        type="datetime-local"
                                        value={eventData.startDate}
                                        onChange={e => setEventData({ ...eventData, startDate: e.target.value })}
                                    />
                                </div>
                                <div className="space-y-2">
                                    <Label>Fim</Label>
                                    <Input
                                        type="datetime-local"
                                        value={eventData.endDate}
                                        onChange={e => setEventData({ ...eventData, endDate: e.target.value })}
                                    />
                                </div>
                            </div>
                            <div className="space-y-2">
                                <Label>Local</Label>
                                <Input
                                    value={eventData.location}
                                    onChange={e => setEventData({ ...eventData, location: e.target.value })}
                                    placeholder="Ex: Sala de Conferência A"
                                />
                            </div>
                            <div className="space-y-2">
                                <Label>Descrição</Label>
                                <Textarea
                                    value={eventData.description}
                                    onChange={e => setEventData({ ...eventData, description: e.target.value })}
                                    placeholder="Detalhes adicionais..."
                                />
                            </div>
                            <div className="pt-4 flex justify-end">
                                <Button onClick={() => {
                                    if (!eventData.title || !eventData.startDate || !eventData.endDate) {
                                        toast({ title: "Campos obrigatórios", description: "Preencha Título e Datas", variant: "destructive" })
                                        return
                                    }
                                    setStep(2)
                                }}>
                                    Próximo: Selecionar Itens
                                </Button>
                            </div>
                        </CardContent>
                    </Card>
                </div>
            )}

            {step === 2 && (
                <div className="space-y-6">
                    {}
                    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 border dark:border-gray-700">
                        <div className="flex flex-col gap-4">
                            <div className="flex flex-col md:flex-row gap-4 items-center justify-between">
                                <div className="relative flex-1 w-full md:max-w-md">
                                    <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
                                    <Input
                                        placeholder="Procurar itens no inventário..."
                                        className="pl-9 h-9"
                                        value={searchTerm}
                                        onChange={e => setSearchTerm(e.target.value)}
                                    />
                                </div>
                                <div className="text-sm font-medium text-muted-foreground bg-gray-50 dark:bg-gray-900/50 px-3 py-1.5 rounded-full border dark:border-gray-700">
                                    {filteredItems.length} itens encontrados
                                </div>
                            </div>

                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                <Select value={selectedCategory} onValueChange={setSelectedCategory}>
                                    <SelectTrigger className="h-9">
                                        <SelectValue placeholder="Categoria" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="all">Todas as categorias</SelectItem>
                                        {categories.map(cat => (
                                            <SelectItem key={cat as string} value={cat as string}>{cat}</SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>

                                <Select value={selectedType} onValueChange={setSelectedType}>
                                    <SelectTrigger className="h-9">
                                        <SelectValue placeholder="Tipo" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="all">Todos os tipos</SelectItem>
                                        {types.map(t => (
                                            <SelectItem key={t as string} value={t as string}>{t}</SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                            </div>
                        </div>
                    </div>

                    {}
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                        {filteredItems.map(item => {
                            const inCart = cart.find(c => c.item.id === item.id)
                            const available = item.quantity - (inCart ? inCart.quantity : 0)

                            return (
                                <Card key={item.id} className="overflow-hidden flex flex-col hover:shadow-md transition-shadow dark:border-gray-700">
                                    <div className="aspect-video relative bg-slate-100 dark:bg-slate-800">
                                        {item.imageUrl ? (
                                            <Image src={item.imageUrl} alt={item.name} fill className="object-cover" />
                                        ) : (
                                            <div className="flex items-center justify-center h-full text-muted-foreground">
                                                <Package className="h-10 w-10" />
                                            </div>
                                        )}
                                        <Badge className={`absolute top-2 right-2 ${available === 0 ? 'bg-red-500' : 'bg-green-500'}`}>
                                            {available} disp.
                                        </Badge>
                                    </div>
                                    <CardContent className="p-4 flex-1 flex flex-col">
                                        <h3 className="font-semibold truncate" title={item.name}>{item.name}</h3>
                                        <div className="text-xs text-muted-foreground mb-4">SKU: {item.sku || 'N/A'}</div>

                                        <div className="mt-auto">
                                            {inCart ? (
                                                <div className="flex items-center justify-between bg-secondary rounded-md p-1">
                                                    <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => updateQuantity(item.id, -1)}>
                                                        <Minus className="h-3 w-3" />
                                                    </Button>
                                                    <span className="font-semibold text-sm">{inCart.quantity}</span>
                                                    <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => updateQuantity(item.id, 1)} disabled={available === 0}>
                                                        <Plus className="h-3 w-3" />
                                                    </Button>
                                                </div>
                                            ) : (
                                                <Button className="w-full" onClick={() => addToCart(item)} disabled={item.quantity === 0}>
                                                    Adicionar ao Evento
                                                </Button>
                                            )}
                                        </div>
                                    </CardContent>
                                </Card>
                            )
                        })}
                    </div>
                </div>
            )}

            {step === 2 && cart.length > 0 && (
                <div className="fixed bottom-6 left-0 right-0 max-w-xl mx-auto px-4 z-50">
                    <Button
                        size="lg"
                        className="w-full shadow-xl text-lg h-14 animate-in slide-in-from-bottom-5"
                        onClick={() => setIsCartOpen(true)}
                    >
                        <Check className="mr-2 h-5 w-5" />
                        Finalizar Escolha ({totalItems} itens)
                    </Button>
                </div>
            )}

            {}
            <Sheet open={isCartOpen} onOpenChange={setIsCartOpen}>
                <SheetContent className="flex flex-col w-full sm:max-w-md">
                    <SheetHeader>
                        <SheetTitle>Itens do Evento</SheetTitle>
                    </SheetHeader>

                    <ScrollArea className="flex-1 -mx-6 px-6 my-4">
                        {cart.length === 0 ? (
                            <div className="flex flex-col items-center justify-center h-40 text-muted-foreground gap-2">
                                <ShoppingCart className="h-10 w-10 opacity-20" />
                                <p>Nenhum item selecionado</p>
                            </div>
                        ) : (
                            <div className="space-y-4">
                                {cart.map(cartItem => (
                                    <div key={cartItem.item.id} className="flex gap-4 items-start border-b pb-4">
                                        <div className="h-16 w-16 relative bg-gray-100 rounded-md overflow-hidden flex-shrink-0">
                                            {cartItem.item.imageUrl ? (
                                                <Image src={cartItem.item.imageUrl} alt={cartItem.item.name} fill className="object-cover" />
                                            ) : (
                                                <Package className="h-8 w-8 m-auto text-gray-400" />
                                            )}
                                        </div>
                                        <div className="flex-1">
                                            <h4 className="font-medium text-sm line-clamp-1">{cartItem.item.name}</h4>
                                            <div className="flex items-center gap-3 mt-2">
                                                <div className="flex items-center border rounded-md">
                                                    <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => updateQuantity(cartItem.item.id, -1)}>
                                                        <Minus className="h-3 w-3" />
                                                    </Button>
                                                    <span className="w-8 text-center text-sm">{cartItem.quantity}</span>
                                                    <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => updateQuantity(cartItem.item.id, 1)}>
                                                        <Plus className="h-3 w-3" />
                                                    </Button>
                                                </div>
                                                <Button variant="ghost" size="icon" className="h-7 w-7 text-red-500 ml-auto" onClick={() => removeFromCart(cartItem.item.id)}>
                                                    <Trash2 className="h-4 w-4" />
                                                </Button>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        )}
                    </ScrollArea>

                    <SheetFooter className="flex-col gap-3 sm:flex-col">
                        <div className="flex justify-between items-center text-lg font-bold border-t pt-4">
                            <span>Total de Itens</span>
                            <span>{totalItems}</span>
                        </div>
                        <Button className="w-full" size="lg" onClick={handleSubmit} disabled={submitting || cart.length === 0}>
                            {submitting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Check className="mr-2" />}
                            Confirmar e Criar Evento
                        </Button>
                    </SheetFooter>
                </SheetContent>
            </Sheet>
        </div>
    )
}