import { Head, Link } from '@inertiajs/react';
import { AlertTriangle, Home, ServerCrash } from 'lucide-react';

import AppearanceToggle from '@/components/appearance-toggle';
import { Button } from '@/components/ui/button';
import { home } from '@/routes';

type ErrorProps = {
    message?: string | null;
    status?: number | null;
};

const statusConfig: Record<
    number,
    { description: string; icon: typeof AlertTriangle; title: string }
> = {
    403: {
        description: 'Kamu tidak memiliki akses ke halaman ini.',
        icon: AlertTriangle,
        title: 'Akses Ditolak',
    },
    404: {
        description: 'Halaman yang kamu cari tidak ditemukan atau sudah dipindahkan.',
        icon: AlertTriangle,
        title: 'Halaman Tidak Ditemukan',
    },
    503: {
        description: 'Server sedang tidak bisa dihubungi. Silakan coba beberapa saat lagi.',
        icon: ServerCrash,
        title: 'Server Tidak Tersedia',
    },
};

export default function Error({ message, status }: ErrorProps) {
    const config = (status && statusConfig[status]) ?? {
        description: message ?? 'Terjadi kesalahan yang tidak terduga.',
        icon: AlertTriangle,
        title: 'Terjadi Kesalahan',
    };

    const Icon = config.icon;

    return (
        <>
            <Head title={config.title} />

            <main className="error-shell">
                <AppearanceToggle className="error-toggle" />

                <div className="error-content">
                    <div className="error-icon">
                        <Icon className="size-8" />
                    </div>

                    {status && (
                        <p className="error-code">{status}</p>
                    )}

                    <h1 className="error-title">{config.title}</h1>

                    <p className="error-description">
                        {message ?? config.description}
                    </p>

                    <Button asChild>
                        <Link href={home()}>
                            <Home className="size-4" />
                            Kembali ke Beranda
                        </Link>
                    </Button>
                </div>
            </main>
        </>
    );
}
