'use client';

import Link from 'next/link';
import { Home, RefreshCw } from 'lucide-react';

export default function GlobalError({
    error,
    reset,
}: {
    error: Error & { digest?: string };
    reset: () => void;
}) {
    return (
        <html lang="id">
            <body>
                <div data-theme="dark" className="min-h-screen bg-[#07090f] flex flex-col items-center justify-center font-sans selection:bg-[#E63946] selection:text-white p-8">
                    <div className="fixed inset-0 z-0 pointer-events-none">
                        <div className="absolute inset-0 opacity-[0.03]" 
                            style={{backgroundImage: 'linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)', backgroundSize: '60px 60px'}}>
                        </div>
                    </div>

                    <div className="relative z-10 text-center max-w-lg">
                        <div className="text-8xl font-black text-red-500/20 mb-6 tracking-tighter">500</div>
                        <h1 className="text-3xl font-bold text-white mb-3">Terjadi Kesalahan</h1>
                        <p className="text-gray-400 mb-3 leading-relaxed">
                            Maaf, terjadi kesalahan saat memuat halaman. Kemungkinan database sedang sibuk atau ada gangguan koneksi.
                        </p>
                        <p className="text-gray-500 text-xs mb-8 font-mono">
                            {error.digest ? `Error ID: ${error.digest}` : ''}
                        </p>
                        <div className="flex flex-col sm:flex-row gap-3 justify-center">
                            <button
                                onClick={() => reset()}
                                className="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-white/10 border border-white/20 text-white font-semibold text-sm hover:bg-white/20 transition-all"
                            >
                                <RefreshCw className="w-4 h-4" />
                                Coba Lagi
                            </button>
                            <Link
                                href="/"
                                className="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-white text-[#0B1F3A] font-bold text-sm hover:bg-gray-100 transition-all shadow-xl"
                            >
                                <Home className="w-4 h-4" />
                                Kembali ke Beranda
                            </Link>
                        </div>
                    </div>
                </div>
            </body>
        </html>
    );
}