import { prisma } from '@/lib/prisma';
import { notFound } from 'next/navigation';
import { Calendar, ArrowLeft, ExternalLink, Image as ImageIcon } from 'lucide-react';
import Link from 'next/link';
import { format } from 'date-fns';
import { id as localeId } from 'date-fns/locale';

export const revalidate = 60;

export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
    const { id } = await params;
    const item = await prisma.galeri.findUnique({ where: { id } });
    if (!item) return { title: 'Dokumentasi Tidak Ditemukan' };
    return {
        title: `${item.judul} | Galeri HMF`,
        description: `Dokumentasi Acara: ${item.judul}`,
    };
}

export default async function GaleriDetailPage({ params }: { params: Promise<{ id: string }> }) {
    const { id } = await params;
    const item = await prisma.galeri.findUnique({
        where: { id },
    });

    if (!item) {
        notFound();
    }

    return (
        <div data-theme="dark" className="min-h-screen bg-[#07090f] pt-32 pb-24 font-sans text-white relative">
            {/* Background elements to match the theme */}
            <div className="absolute inset-0 z-0 pointer-events-none">
                <div className="absolute inset-0 opacity-[0.04]" style={{backgroundImage: 'linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)', backgroundSize: '60px 60px'}}></div>
                <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-900/20 via-[#07090f] to-[#07090f]"></div>
            </div>

            <div className="container px-4 md:px-8 max-w-4xl mx-auto relative z-10">
                <Link 
                    href="/galeri" 
                    className="inline-flex items-center gap-2 text-gray-400 hover:text-white mb-8 font-semibold transition-colors bg-white/5 backdrop-blur-md px-4 py-2 rounded-xl border border-white/10 hover:bg-white/10"
                >
                    <ArrowLeft className="w-4 h-4" /> Kembali ke Galeri
                </Link>

                <article className="bg-white/5 backdrop-blur-xl rounded-[2rem] overflow-hidden shadow-[0_8px_32px_0_rgba(0,0,0,0.2)] border border-white/10 p-6 md:p-10 flex flex-col items-center">
                    <div className="w-full flex items-center gap-2 text-xs text-gray-400 mb-4">
                        <Calendar className="w-4 h-4" />
                        {format(new Date(item.createdAt), 'dd MMMM yyyy', { locale: localeId })}
                        <span className="ml-3 inline-flex items-center gap-1 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider border bg-blue-500/10 text-blue-400 border-blue-500/20">
                            Acara
                        </span>
                    </div>

                    <h1 className="w-full text-2xl md:text-4xl font-sans font-black text-white mb-6 leading-tight tracking-tight text-center md:text-left">
                        {item.judul}
                    </h1>
                    <div className="w-full h-px bg-white/10 mb-8"></div>

                    {item.imageUrl && (
                        <div className="w-full bg-black/40 rounded-3xl overflow-hidden max-w-3xl border border-white/10 relative shadow-2xl mb-8 group">
                            {/* eslint-disable-next-line @next/next/no-img-element */}
                            <img
                                src={item.imageUrl}
                                alt={item.judul}
                                className="w-full h-auto object-cover rounded-3xl max-h-[600px]"
                            />
                        </div>
                    )}

                    {item.driveUrl && (
                        <div className="w-full mt-4 flex justify-center">
                            <a 
                                href={item.driveUrl} 
                                target="_blank" 
                                rel="noopener noreferrer"
                                className="inline-flex items-center gap-3 bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-full font-bold text-lg transition-all duration-300 hover:scale-105 shadow-[0_8px_30px_rgba(37,99,235,0.3)] hover:shadow-[0_12px_40px_rgba(37,99,235,0.5)] border border-blue-400/20"
                            >
                                <ImageIcon className="w-6 h-6" />
                                Lihat Semua Foto (Google Drive)
                                <ExternalLink className="w-5 h-5 ml-1 opacity-70" />
                            </a>
                        </div>
                    )}
                </article>
            </div>
        </div>
    );
}