import React, { Suspense } from 'react';
import { getShortLinksByUserId } from '@/lib/data';
import { Link2, ExternalLink, ArrowRight, MousePointerClick, ShieldAlert, LogIn, LayoutDashboard, Copy } from 'lucide-react';
import Link from 'next/link';
import { auth } from '@/auth';
import ShortLinkTable from '@/components/admin/shortlink-table';

export const revalidate = 0;

export const metadata = {
    title: 'Manajemen LASER | HMF FPMIPA UPI',
    description: 'Dashboard pengelolaan Layanan Akses Shortlink Efektif dan Responsif (LASER) untuk pengurus aktif HMF FPMIPA UPI.',
};

export default async function LinkShortenerDashboard() {
    const session = await auth();

    // --------- STATE 1: GUEST (BELUM LOGIN) ---------
    if (!session?.user) {
        return (
            <div data-theme="dark" className="min-h-screen bg-[#07090f] flex flex-col font-sans selection:bg-[#2563EB] selection:text-white pb-24">
                <main className="w-full min-h-[90vh] 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 opacity-80 mix-blend-luminosity" />
                        <div className="absolute inset-0 bg-[#07090f]/85"></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 text-center relative z-20 max-w-2xl mx-auto">
                        <div className="w-24 h-24 bg-white/5 backdrop-blur-xl border border-white/10 rounded-3xl flex items-center justify-center mx-auto mb-8 shadow-[0_8px_32px_0_rgba(0,0,0,0.3)] hover:scale-105 transition-transform duration-500 animate-in fade-in slide-in-from-bottom-4 duration-700">
                            <ShieldAlert className="w-10 h-10 text-blue-500" />
                        </div>

                        <h1 className="animate-in fade-in slide-in-from-bottom-6 duration-700 delay-100 text-4xl md:text-5xl font-black text-white tracking-tight mb-4 drop-shadow-lg">
                            Akses <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-500">Terbatas</span>
                        </h1>

                        <p className="animate-in fade-in slide-in-from-bottom-8 duration-700 delay-200 text-gray-400 text-lg leading-relaxed mb-10 font-medium">
                            Fitur <strong className="text-white">LASER (Layanan Akses Shortlink Efektif dan Responsif)</strong> kini menjadi perangkat eksklusif bagi pengurus aktif tiap bidang HMF FPMIPA UPI. Silakan masuk menggunakan akun bidang Anda untuk mengelola tautan.
                        </p>

                        <div className="animate-in fade-in slide-in-from-bottom-10 duration-700 delay-300">
                            <Link href="/login?callbackUrl=/konten/link-shortener">
                                <span className="inline-flex items-center justify-center gap-3 px-8 py-4 rounded-xl font-bold transition-all duration-300 transform hover:-translate-y-1 hover:shadow-[0_8px_32px_0_rgba(37,99,235,0.3)] bg-white/5 backdrop-blur-xl border border-white/10 hover:border-blue-500/50 hover:bg-blue-600/20 text-white">
                                    <LogIn className="w-5 h-5 text-blue-400" />
                                    Masuk sebagai Pengurus
                                </span>
                            </Link>
                        </div>
                    </div>
                </main>
            </div>
        );
    }

    // --------- STATE 2: AUTHENTICATED (DASHBOARD) ---------
    const links = await getShortLinksByUserId(session.user.id as string);
    const MAX_LINKS = 5;
    const isQuotaFull = links.length >= MAX_LINKS;

    // Kalkulasi
    const totalClicks = links.reduce((sum, link) => sum + (link.jumlah_klik || 0), 0);
    const quotaPercentage = (links.length / MAX_LINKS) * 100;

    return (
        <div data-theme="dark" className="min-h-screen bg-[#07090f] flex flex-col font-sans selection:bg-[#2563EB] 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 opacity-80 mix-blend-luminosity" />
                    <div className="absolute inset-0 bg-[#07090f]/85"></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">
                            LASER
                        </span>
                        <span className="block text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black text-white/30 mt-2">
                            Dashboard
                        </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">
                        Halo <strong className="text-white capitalize">{session.user.name}</strong>, satukan URL berantakan menjadi satu berkas lurus yang fokus dan terarah layaknya sebuah LASER.
                    </p>
                </div>
            </main>

            {/* CONTAINER KONTEN */}
            <div className="container px-4 md:px-8 py-8 mt-4 mx-auto max-w-6xl relative z-10">
                {/* Info Cards Row */}
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
                    <div className="bg-white/[0.02] backdrop-blur-xl border border-white/[0.05] p-8 rounded-[2rem] shadow-[0_8px_32px_0_rgba(0,0,0,0.3)] relative overflow-hidden group flex flex-col justify-center hover:bg-white/[0.03] transition-all duration-500">
                        <div className="absolute top-0 right-0 w-32 h-32 bg-blue-500 blur-[80px] opacity-10 group-hover:opacity-20 transition-opacity"></div>
                        <div className="flex justify-between items-center mb-3">
                            <span className="text-sm font-bold text-gray-400 uppercase tracking-wider">Kuota</span>
                            <span className={`text-xl font-black ${isQuotaFull ? 'text-red-500' : 'text-blue-400'}`}>
                                {links.length} / {MAX_LINKS}
                            </span>
                        </div>
                        {/* Progress Bar neon */}
                        <div className="w-full h-3 bg-white/5 rounded-full overflow-hidden border border-white/10">
                            <div
                                className={`h-full rounded-full transition-all duration-1000 ${isQuotaFull ? 'bg-red-500' : 'bg-blue-500 shadow-[0_0_10px_rgba(59,130,246,0.5)]'}`}
                                style={{ width: `${quotaPercentage}%` }}
                            ></div>
                        </div>
                        {isQuotaFull && (
                            <p className="mt-4 text-xs text-red-500 font-medium animate-pulse flex items-center gap-1.5 justify-center">
                                <ShieldAlert className="w-3.5 h-3.5" /> Kuota penuh!
                            </p>
                        )}
                    </div>

                    <div className="bg-white/[0.02] backdrop-blur-xl border border-white/[0.05] p-8 rounded-[2rem] shadow-[0_8px_32px_0_rgba(0,0,0,0.3)] flex items-center gap-6 hover:bg-white/[0.03] transition-all duration-500 group">
                        <div className="w-16 h-16 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400 border border-blue-500/20 shadow-[0_0_20px_rgba(37,99,235,0.15)] group-hover:scale-110 transition-transform duration-500">
                            <Link2 className="w-6 h-6" />
                        </div>
                        <div>
                            <p className="text-sm text-gray-400 font-medium mb-1">Total Tautan Aktif</p>
                            <h4 className="text-3xl font-black text-white">{links.length}</h4>
                        </div>
                    </div>

                    <div className="bg-white/[0.02] backdrop-blur-xl border border-white/[0.05] p-8 rounded-[2rem] shadow-[0_8px_32px_0_rgba(0,0,0,0.3)] flex items-center gap-6 hover:bg-white/[0.03] transition-all duration-500 group">
                        <div className="w-16 h-16 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400 border border-blue-500/20 shadow-[0_0_20px_rgba(37,99,235,0.15)] group-hover:scale-110 transition-transform duration-500">
                            <MousePointerClick className="w-6 h-6" />
                        </div>
                        <div>
                            <p className="text-sm text-gray-400 font-medium mb-1">Total Klik / Trafik</p>
                            <h4 className="text-3xl font-black text-white">{totalClicks.toLocaleString('id-ID')}</h4>
                        </div>
                    </div>
                </div>

                {/* Table Section Overrided */}
                <div className="bg-white/[0.02] backdrop-blur-2xl border border-white/[0.05] rounded-[2.5rem] p-6 md:p-10 shadow-[0_16px_64px_0_rgba(0,0,0,0.5)] relative z-20 overflow-hidden ring-1 ring-white/5">
                        <div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 via-transparent to-purple-500/5 pointer-events-none"></div>
                    <ShortLinkTable initialData={links} />
                    {/* Himbauan Bawah Table */}
                    <div className="mt-8 text-center text-sm text-gray-400 bg-white/5 border border-white/10 py-4 rounded-xl backdrop-blur-md">
                        Tautan yang ditandai <b className="text-white">Terbuka (Publik)</b> akan dirujuk jika ada menu direktori publik khusus LASER.
                    </div>
                </div>
            </div>
        </div>
    );
}
