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 },
        include: { photos: true },
    });

    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 mb-12">
                            <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 Folder Google Drive
                                <ExternalLink className="w-5 h-5 ml-1 opacity-70" />
                            </a>
                        </div>
                    )}

                    {item.photos && item.photos.length > 0 && (
                        <div className="w-full mt-8">
                            <h3 className="text-xl font-bold mb-6 text-white/90">Koleksi Foto</h3>
                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                                {item.photos.map((photo) => {
                                    // Parse drive link
                                    let previewUrl = photo.url;
                                    const match = photo.url.match(/\/d\/([a-zA-Z0-9_-]+)/);
                                    if (match && match[1]) {
                                        previewUrl = `https://drive.google.com/uc?id=${match[1]}&export=view`;
                                    }
                                    return (
                                        <div key={photo.id} className="relative aspect-square rounded-2xl overflow-hidden bg-white/5 border border-white/10 group cursor-pointer hover:border-blue-500/50 transition-colors">
                                            {/* eslint-disable-next-line @next/next/no-img-element */}
                                            <img
                                                src={previewUrl}
                                                alt="Galeri HMF"
                                                className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                                            />
                                        </div>
                                    );
                                })}
                            </div>
                        </div>
                    )}
                </article>
            </div>
        </div>
    );
}