import { Link, router } from '@inertiajs/react';

interface Props {
    status: number;
}

const titles: Record<number, string> = {
    403: 'Access Restricted',
    404: 'Room Not Found',
    500: 'System Unstable',
    503: 'Temporarily Closed',
};

const descriptions: Record<number, string> = {
    403: 'You are not allowed to enter this area.',
    404: 'We couldn’t find what you were looking for.',
    500: 'Something broke in our system engine.',
    503: 'We are under maintenance. Please come back soon.',
};

export default function ErrorPage({ status }: Props) {

    return (
        <div className="min-h-screen relative flex items-center justify-center bg-linear-to-b from-white to-gray-50 px-6 overflow-hidden">

            {/* soft background glow */}
            <div className="absolute w-150 h-150 bg-main/10 rounded-full blur-3xl -top-40 -left-40"></div>
            <div className="absolute w-125 h-125 bg-blue-100/40 rounded-full blur-3xl bottom-0 right-0"></div>

            <div className="text-center max-w-xl relative z-10">

                {/* animated status */}
                <div className="relative inline-block">
                    <h1 className="text-9xl font-black text-main tracking-tight animate-pulse">
                        {status}
                    </h1>

                    {/* floating dot */}
                    <span className="absolute -top-4 -right-6 w-4 h-4 bg-main rounded-full animate-bounce"></span>
                </div>

                {/* title */}
                <h2 className="text-2xl font-bold mt-6 text-gray-900">
                    {titles[status]}
                </h2>

                {/* description */}
                <p className="text-gray-500 mt-4 text-base leading-relaxed">
                    {descriptions[status]}
                </p>

                {/* actions */}
                <div className="flex items-center justify-center gap-4 mt-6 text-sm">

                    <Link
                        href="/"
                        className="px-6 py-3 rounded-lg bg-main text-white font-medium shadow-lg hover:shadow-xl transition transform hover:-translate-y-0.5"
                    >
                        Go to Lobby
                    </Link>

                    <Link
                        as="button"
                        type="button"
                        onClick={() => window.history.back()}
                        className="px-6 py-3 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-100 transition"
                    >
                        Go Back
                    </Link>

                </div>

                {/* tiny hint */}
                <p className="text-xs text-gray-400 mt-6">
                    If you believe this is an error, please try again later.
                </p>

            </div>
        </div>
    );
}