import React from 'react';
import Link from 'next/link';
import { ArrowRight, CalendarDays } from 'lucide-react';
import { prisma } from '@/lib/prisma';

export const metadata = {
    title: 'Acara | HMF FPMIPA UPI',
    description: 'Temukan acara-acara menarik, webinar, dan kegiatan publik yang diselenggarakan oleh Himpunan Mahasiswa Fisika FPMIPA UPI.',
};

const DEFAULT_FOTO = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cccccc'><path d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/></svg>";

export default async function IndeksAcaraPage() {
    let acaraList: any[] = [];
    
    // Fallback jika Prisma Client terkunci/belum direstart oleh pengguna
    if (prisma.acara && typeof prisma.acara.findMany === 'function') {
        acaraList = await prisma.acara.findMany({
            where: { status: 'AKTIF' },
            orderBy: { createdAt: 'desc' }
        });
    } else {
        // Memaksa akses database secara langsung meskipun Prisma Client gagal di-generate akibat EPERM
        try {
            acaraList = await prisma.$queryRaw`SELECT * FROM Acara WHERE status = 'AKTIF' ORDER BY createdAt DESC`;
        } catch (err) {
            console.error("Fallback query raw error:", err);
        }
    }

    return (
        <div data-theme="dark" className="min-h-screen bg-[#07090f] flex flex-col font-sans selection:bg-[#E63946] selection:text-white pb-24">
            
            {/* Hero Section */}
            <main className="w-full min-h-[60vh] 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">
                    <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">

                    <h1 className="animate-in fade-in slide-in-from-bottom-6 duration-700 delay-100 font-sans leading-[1.05] tracking-tight mb-6">
                        <span className="block text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black text-white">
                            Event & Acara
                        </span>
                        <span className="block text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black text-white/30 mt-2">
                            HMF FPMIPA UPI
                        </span>
                    </h1>

                    <p className="animate-in fade-in slide-in-from-bottom-8 duration-700 delay-200 text-gray-400 text-lg md:text-xl font-light max-w-3xl leading-relaxed mb-4">
                        Telusuri berbagai kegiatan, seminar, pelatihan, dan acara menarik yang dapat diikuti secara umum.
                    </p>
                </div>
            </main>

            {/* Category Grid Display - Dark Glassmorphism */}
            <section className="container px-4 md:px-8 mx-auto relative z-10">
                {acaraList.length === 0 ? (
                    <div className="max-w-6xl mx-auto flex flex-col items-center justify-center py-20 bg-white/5 border border-white/10 rounded-[2rem] backdrop-blur-md">
                        <CalendarDays className="w-16 h-16 text-white/20 mb-4" />
                        <h3 className="text-xl font-bold text-white mb-2">Belum Ada Acara Aktif</h3>
                        <p className="text-gray-400 text-center">Saat ini belum ada acara yang terbuka untuk umum.</p>
                    </div>
                ) : (
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-6xl mx-auto">
                        {acaraList.map((acara, idx) => (
                            <Link href={`/acara/${acara.slug}`} key={idx} className="group outline-none block h-full">
                                <div className="relative bg-white/5 backdrop-blur-xl rounded-[2rem] p-8 border border-white/10 shadow-[0_8px_32px_0_rgba(0,0,0,0.2)] hover:border-white/30 hover:shadow-[0_8px_40px_0_rgba(59,130,246,0.15)] transition-all duration-500 overflow-hidden flex flex-col gap-6 h-full group-focus-visible:ring-4 group-focus-visible:ring-blue-500/50">
                                    
                                    {/* Ambient Hover Glow (inside card) */}
                                    <div className="absolute top-0 right-0 w-64 h-64 bg-blue-500/5 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none"></div>

                                    {/* Poster / Gambar Acara (jika ada) */}
                                    <div className="w-full aspect-[21/9] rounded-xl overflow-hidden bg-black/40 border border-white/10 relative">
                                        {/* eslint-disable-next-line @next/next/no-img-element */}
                                        <img 
                                            src={acara.fotoUrl || DEFAULT_FOTO} 
                                            alt={acara.nama}
                                            className={`w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 ${!acara.fotoUrl ? 'opacity-30 object-contain p-4' : ''}`}
                                        />
                                        <div className="absolute top-3 right-3 px-3 py-1 bg-green-500/20 border border-green-500/40 text-green-400 text-xs font-bold rounded-full backdrop-blur-md uppercase tracking-wider">
                                            {acara.status}
                                        </div>
                                    </div>

                                    {/* Text Content */}
                                    <div className="relative z-10 flex-grow">
                                        <div className="flex items-center justify-between mb-4">
                                            <h2 className="text-2xl md:text-3xl font-bold text-white leading-tight group-hover:text-blue-400 transition-colors pr-4">
                                                {acara.nama}
                                            </h2>
                                            <div className="w-10 h-10 shrink-0 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-gray-400 group-hover:bg-blue-600 group-hover:text-white group-hover:border-blue-500 transition-all duration-300">
                                                <ArrowRight className="w-5 h-5 -rotate-45 group-hover:rotate-0 transition-transform duration-300" />
                                            </div>
                                        </div>
                                        <p className="text-gray-400 text-sm md:text-base leading-relaxed font-medium line-clamp-3">
                                            {acara.deskripsi}
                                        </p>
                                    </div>
                                </div>
                            </Link>
                        ))}
                    </div>
                )}
            </section>
        </div>
    );
}