import { getInventoryItem } from "../../actions/inventory-actions"
import { notFound } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { ArrowLeft, Box, Calendar, MapPin, Package, Layers, Info, History } from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import { format } from "date-fns"
import { ptBR } from "date-fns/locale"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

interface PageProps {
    params: {
        itemId: string
    }
}

export default async function InventoryItemPage({ params }: PageProps) {
    const item = await getInventoryItem(params.itemId)

    if (!item) {
        notFound()
    }

    return (
        <div className="space-y-6 animate-in fade-in duration-500">
            {}
            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                <div className="flex items-center gap-2">
                    <Button variant="outline" size="icon" asChild className="rounded-full w-10 h-10 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                        <Link href="/module-inventory/inventory">
                            <ArrowLeft className="h-5 w-5 text-gray-600 dark:text-gray-400" />
                        </Link>
                    </Button>
                    <div>
                        <h1 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">{item.name}</h1>
                        <div className="flex items-center gap-3 text-sm text-gray-500 dark:text-gray-400 mt-1">
                            <span className="font-mono bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded text-xs">{item.sku || "SEM-SKU"}</span>
                            {item.category && (
                                <>
                                    <span>•</span>
                                    <span className="flex items-center gap-1.5">
                                        <Layers className="h-3.5 w-3.5" />
                                        {item.category}
                                    </span>
                                </>
                            )}
                        </div>
                    </div>
                </div>
                {}
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                {}
                <div className="lg:col-span-1 space-y-6">
                    <Card className="overflow-hidden border-0 shadow-lg ring-1 ring-gray-200 dark:ring-gray-700">
                        <div className="aspect-square relative bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center">
                            {item.imageUrl ? (
                                <Image
                                    src={item.imageUrl}
                                    alt={item.name}
                                    fill
                                    className="object-cover transition-transform duration-700 hover:scale-105"
                                    priority
                                />
                            ) : (
                                <div className="flex flex-col items-center text-gray-300 dark:text-gray-600">
                                    <Package className="h-24 w-24 mb-4" />
                                    <span className="text-sm font-medium">Sem imagem disponível</span>
                                </div>
                            )}
                            {item.quantity <= 5 && (
                                <div className="absolute top-4 right-4 bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md uppercase tracking-wide">
                                    Stock baixo
                                </div>
                            )}
                        </div>
                        <CardContent className="p-6 bg-white dark:bg-gray-900">
                            <div className="grid grid-cols-2 gap-4 text-center">
                                <div className="flex flex-col items-center justify-center p-3 rounded-xl bg-gray-50 dark:bg-gray-800/80 border dark:border-gray-700">
                                    <span className="text-3xl font-bold tracking-tighter text-gray-900 dark:text-white">{item.quantity}</span>
                                    <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Em stock</span>
                                </div>
                                <div className="flex flex-col items-center justify-center p-3 rounded-xl bg-gray-50 dark:bg-gray-800/80 border dark:border-gray-700">
                                    <Box className="h-6 w-6 mb-1 text-muted-foreground" />
                                    <span className="text-sm font-medium text-gray-900 dark:text-white truncate w-full">{(item as any).type || "N/A"}</span>
                                </div>
                            </div>
                        </CardContent>
                    </Card>

                    {(item as any).location && (
                        <Card className="bg-gradient-to-r from-gray-50 to-white dark:from-gray-800 dark:to-gray-900 border-l-4 border-l-blue-500 shadow-sm">
                            <CardContent className="p-4 flex items-center gap-4">
                                <div className="bg-white dark:bg-gray-800 p-2.5 rounded-full shadow-sm border dark:border-gray-700">
                                    <MapPin className="h-5 w-5 text-blue-600" />
                                </div>
                                <div>
                                    <p className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Localização</p>
                                    <p className="text-base font-medium text-gray-900 dark:text-white">{(item as any).location}</p>
                                </div>
                            </CardContent>
                        </Card>
                    )}
                </div>

                {}
                <div className="lg:col-span-2">
                    <Tabs defaultValue="details" className="w-full">
                        <TabsList className="w-full justify-start border-b rounded-none h-auto p-0 bg-transparent gap-6">
                            <TabsTrigger
                                value="details"
                                className="rounded-none border-b-2 border-transparent data-[state=active]:border-blue-600 data-[state=active]:text-blue-600 pb-3 pt-0 px-1 font-semibold text-gray-500"
                            >
                                <Info className="w-4 h-4 mr-2" />
                                Detalhes e Especificações
                            </TabsTrigger>
                            <TabsTrigger
                                value="events"
                                className="rounded-none border-b-2 border-transparent data-[state=active]:border-blue-600 data-[state=active]:text-blue-600 pb-3 pt-0 px-1 font-semibold text-gray-500"
                            >
                                <Calendar className="w-4 h-4 mr-2" />
                                Eventos Agendados
                                {item.events && item.events.length > 0 && (
                                    <Badge variant="secondary" className="ml-2 h-5 min-w-5 px-1 rounded-full text-[10px]">{item.events.length}</Badge>
                                )}
                            </TabsTrigger>
                        </TabsList>

                        <TabsContent value="details" className="mt-6 space-y-6">
                            <Card className="border-0 shadow-sm bg-gray-50/50 dark:bg-gray-900/50">
                                <CardContent className="p-6">
                                    <h3 className="font-semibold text-lg mb-4 text-gray-900 dark:text-white">Descrição</h3>
                                    <p className="text-gray-600 dark:text-gray-300 leading-relaxed whitespace-pre-wrap text-sm sm:text-base">
                                        {item.description || "Nenhuma descrição fornecida para este item."}
                                    </p>
                                </CardContent>
                            </Card>

                            {}
                            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                                <div className="p-4 bg-white dark:bg-gray-800 rounded-lg border dark:border-gray-700 shadow-sm">
                                    <span className="text-xs text-gray-500 uppercase tracking-wider font-semibold">Categoria</span>
                                    <p className="mt-1 font-medium">{item.category || "---"}</p>
                                </div>
                                <div className="p-4 bg-white dark:bg-gray-800 rounded-lg border dark:border-gray-700 shadow-sm">
                                    <span className="text-xs text-gray-500 uppercase tracking-wider font-semibold">Tipo</span>
                                    <p className="mt-1 font-medium">{(item as any).type || "---"}</p>
                                </div>
                                <div className="p-4 bg-white dark:bg-gray-800 rounded-lg border dark:border-gray-700 shadow-sm">
                                    <span className="text-xs text-gray-500 uppercase tracking-wider font-semibold">SKU</span>
                                    <p className="mt-1 font-mono text-sm">{item.sku || "---"}</p>
                                </div>
                            </div>
                        </TabsContent>

                        <TabsContent value="events" className="mt-6">
                            <Card className="border shadow-sm">
                                <CardHeader>
                                    <CardTitle className="text-lg">Próximos Eventos</CardTitle>
                                    <CardDescription>Eventos onde este item está reservado.</CardDescription>
                                </CardHeader>
                                <CardContent>
                                    {item.events && item.events.length > 0 ? (
                                        <div className="space-y-4">
                                            {item.events.map((reservation) => (
                                                <div key={reservation.id} className="flex items-start justify-between p-4 rounded-lg border bg-white dark:bg-gray-800 hover:shadow-md transition-shadow">
                                                    <div className="space-y-1">
                                                        <Link href={`/module-inventory/events/${reservation.eventId}`} className="font-semibold hover:text-blue-600 transition-colors">
                                                            {reservation.event.title}
                                                        </Link>
                                                        <div className="text-sm text-muted-foreground">
                                                            {format(new Date(reservation.event.startDate), "dd 'de' MMMM, HH:mm", { locale: ptBR })}
                                                        </div>
                                                        {reservation.event.location && (
                                                            <div className="text-xs text-muted-foreground">
                                                                {reservation.event.location}
                                                            </div>
                                                        )}
                                                    </div>
                                                    <div className="flex flex-col items-end gap-2">
                                                        <Badge variant="outline" className="border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-900 dark:bg-blue-900/30 dark:text-blue-300">
                                                            Reserva: {reservation.quantity}
                                                        </Badge>
                                                        <Badge className={
                                                            reservation.event.status === 'CONFIRMED' ? 'bg-green-500' :
                                                                reservation.event.status === 'COMPLETED' ? 'bg-gray-500' : 'bg-yellow-500'
                                                        }>
                                                            {reservation.event.status}
                                                        </Badge>
                                                    </div>
                                                </div>
                                            ))}
                                        </div>
                                    ) : (
                                        <div className="flex flex-col items-center justify-center py-12 text-center space-y-3">
                                            <div className="p-3 bg-gray-100 dark:bg-gray-800 rounded-full">
                                                <Calendar className="h-8 w-8 text-gray-400" />
                                            </div>
                                            <div className="space-y-1">
                                                <h4 className="font-medium text-gray-900 dark:text-white">Nenhum evento agendado</h4>
                                                <p className="text-sm text-gray-500 max-w-xs mx-auto">
                                                    Este item não está alocado para nenhum evento futuro no momento.
                                                </p>
                                            </div>
                                        </div>
                                    )}
                                </CardContent>
                            </Card>
                        </TabsContent>
                    </Tabs>
                </div>
            </div>
        </div>
    )
}