import { Users, FileText, Briefcase, Image as ImageIcon, TrendingUp, Calendar, BookOpen, Activity, ArrowUpRight, ArrowRight, BarChart2, MessageCircle } from "lucide-react";
import { prisma } from "@/lib/prisma";
import Link from "next/link";

export const revalidate = 0;

export default async function AdminDashboardPage() {
    const [pengurusCount, artikelCount, prokerCount, galeriCount, acaraCount, bearrCount] = await Promise.all([
        prisma.pengurus.count().catch(() => 0),
        prisma.artikel.count().catch(() => 0),
        prisma.programKerja.count().catch(() => 0),
        prisma.galeri.count().catch(() => 0),
        (prisma.acara as any)?.count().catch(() => 0) ?? 0,
        (prisma.bearrLink as any)?.count().catch(() => 0) ?? 0,
    ]);

    const stats = [
        { title: 'Total Pengurus',  value: pengurusCount, icon: Users,     href: '/admin/pengurus', desc: 'anggota terdaftar', highlight: true },
        { title: 'Artikel & Berita', value: artikelCount,  icon: FileText,  href: '/admin/artikel',  desc: 'konten tersimpan', highlight: false },
        { title: 'Program Kerja',   value: prokerCount,    icon: Briefcase, href: '/admin/bidang',   desc: 'proker terdaftar', highlight: false },
        { title: 'Galeri / Foto',   value: galeriCount,    icon: ImageIcon, href: '/admin/galeri',   desc: 'foto tersimpan',  highlight: false },
    ];

    const quickAccess = [
        { label: 'Kelola Acara',       href: '/admin/acara',            icon: Calendar },
        { label: 'BEARR Links',        href: '/admin/bearr',            icon: BookOpen },
        { label: 'Galeri Foto',        href: '/admin/galeri',           icon: ImageIcon },
        { label: 'Laporan Keuangan',   href: '/admin/laporan-keuangan', icon: TrendingUp },
        { label: 'Komentar Tamu',      href: '/admin/komentar',         icon: MessageCircle },
        { label: 'Kurikulum Matkul',   href: '/admin/kurikulum',        icon: FileText },
    ];

    return (
        <div className="space-y-6 pb-8">

            {/* ── Header ─────────────────────────────────────────────────── */}
            <div className="flex items-start justify-between">
                <div>
                    <h1 className="text-2xl font-black text-slate-800 tracking-tight">Dashboard</h1>
                    <p className="text-sm text-slate-400 mt-0.5">Kelola seluruh konten dan aktivitas HMF FPMIPA UPI.</p>
                </div>
                <Link
                    href="/"
                    className="hidden md:flex items-center gap-1.5 text-xs font-semibold text-slate-500 hover:text-blue-600 border border-slate-200 px-3 py-2 rounded-lg bg-white hover:border-blue-200 transition-all"
                >
                    Lihat Website <ArrowUpRight className="w-3.5 h-3.5" />
                </Link>
            </div>

            {/* ── Stat Cards ─────────────────────────────────────────────── */}
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
                {stats.map((stat) => {
                    const Icon = stat.icon;
                    return (
                        <Link
                            key={stat.title}
                            href={stat.href}
                            className={`group relative rounded-xl p-5 border transition-all duration-200 hover:-translate-y-0.5 overflow-hidden ${
                                stat.highlight
                                    ? 'bg-[#1e3a5f] border-[#1e3a5f] shadow-md shadow-[#1e3a5f]/20'
                                    : 'bg-white border-slate-200 hover:border-slate-300 hover:shadow-sm'
                            }`}
                        >
                            <div className={`absolute top-4 right-4 w-6 h-6 rounded-md flex items-center justify-center ${stat.highlight ? 'bg-white/15' : 'bg-slate-100 group-hover:bg-blue-50'} transition-colors`}>
                                <ArrowUpRight className={`w-3 h-3 ${stat.highlight ? 'text-white/70' : 'text-slate-400 group-hover:text-blue-500'}`} />
                            </div>

                            <p className={`text-xs font-semibold uppercase tracking-wider mb-3 ${stat.highlight ? 'text-blue-200' : 'text-slate-400'}`}>
                                {stat.title}
                            </p>
                            <p className={`text-4xl font-black ${stat.highlight ? 'text-white' : 'text-slate-800'}`}>
                                {stat.value}
                            </p>
                            <p className={`text-xs mt-2 flex items-center gap-1 ${stat.highlight ? 'text-blue-200/70' : 'text-slate-400'}`}>
                                <TrendingUp className="w-3 h-3" />
                                {stat.desc}
                            </p>
                        </Link>
                    );
                })}
            </div>

            {/* ── Bottom Row ─────────────────────────────────────────────── */}
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">

                {/* Akses Cepat (2/3) */}
                <div className="lg:col-span-2 bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm">
                    <div className="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
                        <h2 className="text-sm font-bold text-slate-700">Akses Cepat</h2>
                        <span className="text-xs text-slate-400">Halaman Kelola</span>
                    </div>
                    <div className="p-5 grid grid-cols-2 md:grid-cols-3 gap-3">
                        {quickAccess.map((item) => {
                            const Icon = item.icon;
                            return (
                                <Link
                                    key={item.href}
                                    href={item.href}
                                    className="group flex flex-col gap-3 p-4 rounded-xl border border-slate-100 bg-slate-50 hover:bg-blue-50 hover:border-blue-200 transition-all duration-200 hover:-translate-y-0.5"
                                >
                                    <Icon className="w-4 h-4 text-slate-400 group-hover:text-blue-600 transition-colors" />
                                    <span className="text-xs font-semibold text-slate-600 group-hover:text-blue-700 leading-tight">
                                        {item.label}
                                    </span>
                                </Link>
                            );
                        })}
                    </div>
                </div>

                {/* Ringkasan (1/3) */}
                <div className="bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm flex flex-col">
                    <div className="px-6 py-4 border-b border-slate-100">
                        <h2 className="text-sm font-bold text-slate-700">Ringkasan Sistem</h2>
                    </div>
                    <div className="flex-1 px-6 py-4 space-y-1">
                        {[
                            { label: 'Pengurus Aktif',  value: pengurusCount, icon: Users },
                            { label: 'Program Kerja',   value: prokerCount,   icon: Briefcase },
                            { label: 'Galeri',          value: galeriCount,   icon: ImageIcon },
                            { label: 'Konten BEARR',    value: bearrCount,    icon: BookOpen },
                            { label: 'Acara Aktif',     value: acaraCount,    icon: Calendar },
                        ].map(item => {
                            const Icon = item.icon;
                            return (
                                <div key={item.label} className="flex items-center justify-between py-2.5 border-b border-slate-50 last:border-0">
                                    <div className="flex items-center gap-2.5">
                                        <Icon className="w-3.5 h-3.5 text-slate-400" />
                                        <span className="text-sm text-slate-500">{item.label}</span>
                                    </div>
                                    <span className="text-sm font-bold text-slate-700">{item.value}</span>
                                </div>
                            );
                        })}
                    </div>
                    <div className="px-6 py-4 border-t border-slate-100">
                        <Link
                            href="/"
                            className="w-full flex items-center justify-center gap-2 py-2.5 rounded-lg bg-[#1e3a5f] text-white text-sm font-bold hover:bg-[#1e3a5f]/90 transition-colors"
                        >
                            Lihat Website Publik <ArrowRight className="w-3.5 h-3.5" />
                        </Link>
                    </div>
                </div>
            </div>

        </div>
    );
}