import { Suspense } from "react";
import { DUMMY_PENGURUS } from "@/lib/dummy-data";
import { KabinetTabs } from "@/components/public/kabinet-tabs";
import { getKabinetAktif, getAllPengurus, getAllBidang } from "@/lib/data";

export const dynamic = 'force-dynamic';

export default async function KabinetPage() {
    // Ambil data kabinet aktif, pengurus, & bidang/lembaga dari database
    const [kabinet, pengurus, bidangLembaga] = await Promise.all([
        getKabinetAktif(),
        getAllPengurus(),
        getAllBidang(),
    ]);

    const pengurusData = pengurus && pengurus.length > 0 ? pengurus : DUMMY_PENGURUS;

    const groupedPengurus = pengurusData.reduce((acc: Record<string, any[]>, current: any) => {
        let divisi = current.divisi || "Lainnya";
        // Dynamically group Ketua/Wakil Himpunan into 'Pimpinan' to ensure they show up in the top section
        if (current.jabatan === 'Ketua Himpunan' || current.jabatan === 'Wakil Ketua Himpunan') {
            divisi = 'Pimpinan';
        }
        if (!acc[divisi]) acc[divisi] = [];
        acc[divisi].push(current);
        return acc;
    }, {});

    // Fallback values jika kabinet belum diisi di database
    const namaKabinet = kabinet?.namaKabinet || "Niskala Cakra Murni";
    const periode = kabinet?.periode || "2025/2026";
    const logoUrl = kabinet?.logoUrl || "/niskala.png";
    const visi = kabinet?.visi || "Mewujudkan visi kolektif dengan keindahan bagai sayap merak yang terkembang penuh, mengemban integritas Niskala, dan berwibawa layaknya roda Cakra kehidupan.";
    const misi = kabinet?.misi || null;

    // Parse misi — pisahkan per baris jika ada
    const misiList = misi
        ? misi.split('\n').map((m: string) => m.trim()).filter((m: string) => m.length > 0)
        : [];

    return (
        <div data-theme="dark" className="min-h-screen bg-[#07090f] flex flex-col">
            {/* Hero Section Kabinet */}
            <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">
                            Kabinet
                        </span>
                        <span className="block text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black text-white/30">
                            {namaKabinet}
                        </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 tracking-widest uppercase mb-12">
                        Periode {periode}
                    </p>
                </div>
            </main>

            <section className="w-full pb-24">
                <Suspense fallback={<div className="container px-4 text-center py-20 text-gray-500">Memuat data kabinet...</div>}>
                    <KabinetTabs
                        groupedPengurus={groupedPengurus}
                        visi={visi}
                        misiList={misiList}
                        unggulan={kabinet?.ProgramUnggulan || []}
                        lambangUrl={kabinet?.lambangUrl}
                        filosofiLambang={kabinet?.filosofiLambang}
                        bidangLembagaList={bidangLembaga || []}
                        organigramUrl={kabinet?.organigramUrl}
                    />
                </Suspense>
            </section>
        </div>
    );
}