import { Suspense } from "react";
import Link from "next/link";
import { prisma } from "@/lib/prisma";
import { UkkTabs } from "@/components/public/ukk-tabs";
import { ChevronLeft } from "lucide-react";

export const revalidate = 120;

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
    const { slug } = await params;
    try {
        const ukk = await prisma.uKK.findUnique({ where: { slug } });
        if (!ukk) return { title: 'UKK Tidak Ditemukan' };
        return {
            title: `${ukk.nama} | UKK HMF FPMIPA UPI`,
            description: ukk.visi || ukk.nama,
        };
    } catch {
        return { title: 'UKK Tidak Ditemukan' };
    }
}

export default async function DetailUkkPage({ params }: { params: Promise<{ slug: string }> }) {
    const { slug } = await params;
    
    let ukk: any = null;
    try {
        ukk = await prisma.uKK.findUnique({
            where: { slug },
            include: {
                anggota: true,
                proker: true
            }
        });
    } catch {
        ukk = null;
    }

    if (!ukk) {
        return (
            <div data-theme="dark" className="min-h-screen bg-[#07090f] flex flex-col items-center justify-center font-sans">
                <div className="text-center max-w-md px-4">
                    <div className="text-6xl mb-4 opacity-30">📋</div>
                    <h1 className="text-2xl font-bold text-white mb-2">UKK Tidak Ditemukan</h1>
                    <p className="text-gray-400 mb-6">Unit kegiatan khusus yang Anda cari tidak tersedia. Kemungkinan database sedang bermasalah.</p>
                    <Link href="/ukk" className="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-white/10 border border-white/20 text-white font-semibold hover:bg-white/20 transition-all">
                        <ChevronLeft className="w-4 h-4" />
                        Kembali ke UKK
                    </Link>
                </div>
            </div>
        );
    }

    const accentBg = 'bg-blue-500';

    return (
        <div data-theme="dark" className="min-h-screen bg-[#07090f] flex flex-col">
            
            {/* Hero Section */}
            <main className="w-full min-h-[50vh] pt-32 pb-32 bg-[#07090f] overflow-hidden relative flex flex-col items-center justify-center">
                {/* Background: bg-hero.png + dark overlay */}
                <div className="absolute inset-0 z-0">
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img src="/bg-hero.png" alt="" className="w-full h-full object-cover object-center" />
                    {/* Dark overlay */}
                    <div className="absolute inset-0 bg-[#07090f]/82"></div>
                </div>

                {/* Bottom Fade Gradient for blending */}
                <div className="absolute bottom-0 left-0 w-full h-40 bg-gradient-to-t from-[#07090f] to-transparent z-10 pointer-events-none"></div>

                {/* Subtle grid */}
                <div className="absolute inset-0 z-[1] pointer-events-none">
                    {/* Subtle grid */}
                    <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>

                <div className="container px-4 md:px-8 relative z-20 w-full flex flex-col items-center text-center">
                    
                    {/* Logo Section */}
                    {ukk.logoUrl && (
                        <div className="animate-in fade-in slide-in-from-bottom-4 duration-700 w-28 h-28 md:w-36 md:h-36 bg-white/10 p-3 rounded-[2rem] backdrop-blur-md shadow-2xl border border-white/20 mb-8 flex items-center justify-center overflow-hidden">
                            {/* eslint-disable-next-line @next/next/no-img-element */}
                            <img src={ukk.logoUrl} alt={ukk.nama} className="w-full h-full object-contain drop-shadow-xl" />
                        </div>
                    )}

                    <h1 className="animate-in fade-in slide-in-from-bottom-6 duration-700 delay-100 font-sans leading-[1.1] tracking-tight mb-4">
                        <span className="block text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black text-white max-w-4xl mx-auto">
                            {ukk.nama}
                        </span>
                    </h1>
                </div>
            </main>

            {/* Tabs Section */}
            <section className="container px-4 md:px-8 mx-auto relative z-20 -mt-10 pb-24">
                <Suspense fallback={<div className="text-center py-20 text-gray-500">Memuat data UKK...</div>}>
                    <UkkTabs 
                        ukk={ukk}
                        anggota={ukk.anggota || []}
                        proker={ukk.proker || []}
                    />
                </Suspense>
            </section>
        </div>
    );
}