import { Head, Link } from "@inertiajs/react";
import { ShieldAlert, FileQuestion, ServerCrash, HardHat, Home, ArrowLeft } from "lucide-react";
import { Button } from "@/Components/ui/button";

interface Props {
    status: number;
    message?: string;
}

export default function ErrorPage({ status, message }: Props) {
    const errorDetails: Record<number, { title: string; description: string; icon: any; color: string }> = {
        403: {
            title: "無此權限 (403)",
            description: "抱歉，您沒有權限存取此頁面。如果您認為這是個錯誤，請聯繫系統管理員。",
            icon: ShieldAlert,
            color: "text-yellow-500 bg-yellow-100 border-yellow-200",
        },
        404: {
            title: "頁面未找到 (404)",
            description: "抱歉，我們找不到您要訪問的頁面。它可能已被移除、更改名稱或暫時不可用。",
            icon: FileQuestion,
            color: "text-blue-500 bg-blue-100 border-blue-200",
        },
        500: {
            title: "伺服器錯誤 (500)",
            description: "抱歉，伺服器發生了內部錯誤。我們的技術團隊已經收到通知，正在努力修復中。",
            icon: ServerCrash,
            color: "text-red-500 bg-red-100 border-red-200",
        },
        503: {
            title: "服務維護中 (503)",
            description: "抱歉，系統目前正在進行維護。請稍後再試。",
            icon: HardHat,
            color: "text-orange-500 bg-orange-100 border-orange-200",
        },
    };

    const defaultError = {
        title: "發生錯誤",
        description: message || "發生了未知的錯誤。",
        icon: ShieldAlert,
        color: "text-gray-500 bg-gray-100 border-gray-200",
    };

    const details = errorDetails[status] || defaultError;
    const Icon = details.icon;

    return (
        <div className="min-h-screen bg-slate-50 flex flex-col items-center justify-center p-4">
            <Head title={details.title} />

            <div className="max-w-md w-full text-center slide-in-bottom"> {/* slide-in-bottom need to be defined in global css or just use simple animation */}

                {/* Icon Circle */}
                <div className="mb-8 flex justify-center relative">
                    <div className={`absolute inset-0 rounded-full animate-ping opacity-20 ${details.color.split(' ')[1]}`}></div>
                    <div className={`relative w-24 h-24 rounded-full flex items-center justify-center border-4 shadow-xl ${details.color}`}>
                        <Icon className="w-12 h-12" />
                    </div>
                </div>

                {/* Text Content */}
                <h1 className="text-3xl font-bold text-slate-900 mb-3 tracking-tight">
                    {details.title}
                </h1>

                <p className="text-slate-500 mb-10 text-lg leading-relaxed">
                    {details.description}
                </p>

                {/* Actions */}
                <div className="flex flex-col sm:flex-row gap-4 justify-center">
                    <Button
                        variant="outline"
                        size="lg"
                        className="gap-2 min-w-[140px] border-slate-300 hover:bg-slate-100 text-slate-700"
                        onClick={() => window.history.back()}
                    >
                        <ArrowLeft className="h-5 w-5" /> 返回上一頁
                    </Button>

                    <Link href={route('dashboard')}>
                        <Button
                            variant="default"
                            size="lg"
                            className="gap-2 min-w-[140px] shadow-lg shadow-primary/20"
                        >
                            <Home className="h-5 w-5" /> 返回首頁
                        </Button>
                    </Link>
                </div>

                <div className="mt-16 text-sm text-slate-400 font-mono">
                    Error Code: {status} | Star ERP System
                </div>
            </div>
        </div>
    );
}
