import { Button } from '@/components/ui/button';
import { homepage } from '@/routes';
import { Head, Link } from '@inertiajs/react';
import { AlertCircle, ArrowLeft, Home, Search } from 'lucide-react';

export default function ErrorPage({ status }: { status: number }) {
    const title =
        {
            503: '503: Service Unavailable',
            500: '500: Server Error',
            404: '404: Page Not Found',
            403: '403: Forbidden',
        }[status] || 'Error';

    const description =
        {
            503: 'Maaf, kami sedang melakukan pemeliharaan rutin untuk meningkatkan layanan. Silakan kembali lagi nanti.',
            500: 'Ups, terjadi kesalahan sistem yang tidak terduga. Tim teknis kami telah diberitahu.',
            404: 'Halaman yang Anda cari tidak dapat ditemukan atau telah dipindahkan ke alamat lain.',
            403: 'Maaf, Anda tidak memiliki akses untuk melihat konten di halaman ini.',
        }[status] || 'Terjadi kesalahan pada aplikasi.';

    return (
        <>
            <Head title={title} />
            <div className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-slate-50 p-6 dark:bg-slate-950">
                {/* Abstract Background Elements */}
                <div className="absolute -top-[10%] -left-[10%] h-[40%] w-[40%] rounded-full bg-primary/5 blur-3xl" />
                <div className="absolute -right-[10%] -bottom-[10%] h-[40%] w-[40%] rounded-full bg-primary/10 blur-3xl" />

                <div className="relative z-10 flex w-full max-w-2xl flex-col items-center text-center">
                    {/* Big Error Number with Gradient */}
                    <div className="animate-in duration-700 fade-in zoom-in">
                        <h1 className="text-[12rem] leading-none font-black tracking-tighter text-slate-200/50 select-none sm:text-[18rem] dark:text-slate-800/50">
                            {status}
                        </h1>
                    </div>

                    {/* Content Card */}
                    <div className="mt-[-4rem] flex flex-col items-center space-y-8 sm:mt-[-8rem]">
                        <div className="relative">
                            <div className="absolute -inset-1 rounded-full bg-gradient-to-r from-primary to-primary-foreground opacity-20 blur" />
                            <div className="relative flex h-24 w-24 items-center justify-center rounded-full bg-white shadow-2xl dark:bg-slate-900">
                                {status === 404 ? (
                                    <Search className="h-10 w-10 animate-pulse text-primary" />
                                ) : (
                                    <AlertCircle className="h-10 w-10 animate-bounce text-destructive" />
                                )}
                            </div>
                        </div>

                        <div className="space-y-3 px-4">
                            <h2 className="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl dark:text-slate-50">
                                {title}
                            </h2>
                            <p className="mx-auto max-w-md text-lg text-slate-600 dark:text-slate-400">
                                {description}
                            </p>
                        </div>

                        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
                            <Button
                                asChild
                                size="lg"
                                className="h-12 gap-2 px-8 shadow-lg shadow-primary/20 transition-all hover:scale-105 active:scale-95"
                            >
                                <Link href={homepage().url}>
                                    <Home className="h-4 w-4" />
                                    Beranda
                                </Link>
                            </Button>
                            <Button
                                variant="outline"
                                size="lg"
                                onClick={() => window.history.back()}
                                className="h-12 gap-2 bg-white/50 backdrop-blur-sm transition-all hover:bg-white dark:bg-slate-900/50 dark:hover:bg-slate-900"
                            >
                                <ArrowLeft className="h-4 w-4" />
                                Kembali
                            </Button>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}

ErrorPage.layout = null;
