import React from 'react';
import { Head, Link } from '@inertiajs/react';
import { Button } from "@/Components/ui/button";
import { ThemeProvider } from "@/Components/ThemeProvider";
import { SearchX, ShieldAlert, ServerCrash, Wrench, ArrowLeft, Home } from 'lucide-react';
import { useTranslation } from '@/hooks/useTranslation';

export default function Error({ status }) {
    const { t } = useTranslation();

    // Map HTTP status codes to titles, descriptions, and icons
    const errorDetails = {
        503: {
            title: 'Service Unavailable',
            description: 'We are currently performing some maintenance. We will be back up shortly!',
            icon: Wrench,
            color: 'text-orange-500',
            bg: 'bg-orange-500/10'
        },
        500: {
            title: 'Server Error',
            description: 'Whoops, something went wrong on our servers. Our team has been notified.',
            icon: ServerCrash,
            color: 'text-red-500',
            bg: 'bg-red-500/10'
        },
        404: {
            title: 'Page Not Found',
            description: 'Sorry, the page or product you are looking for does not exist or has been moved.',
            icon: SearchX,
            color: 'text-blue-500',
            bg: 'bg-blue-500/10'
        },
        403: {
            title: 'Access Forbidden',
            description: 'Sorry, you do not have permission to access this page.',
            icon: ShieldAlert,
            color: 'text-amber-500',
            bg: 'bg-amber-500/10'
        },
    };

    // Fallback for unknown errors
    const { title, description, icon: Icon, color, bg } = errorDetails[status] || {
        title: 'Unexpected Error',
        description: 'An unexpected error occurred. Please try again later.',
        icon: ServerCrash,
        color: 'text-muted-foreground',
        bg: 'bg-muted'
    };

    return (
        <ThemeProvider defaultTheme="system" storageKey="app-ui-theme">
            <Head title={t(title)} />
            
            <div className="min-h-screen flex flex-col items-center justify-center bg-background text-foreground p-4">
                <div className="max-w-md w-full text-center space-y-6">
                    
                    {/* Animated Icon Circle */}
                    <div className={`w-32 h-32 mx-auto rounded-full ${bg} flex items-center justify-center animate-in zoom-in duration-500 shadow-sm`}>
                        <Icon className={`w-16 h-16 ${color}`} strokeWidth={1.5} />
                    </div>

                    {/* Error Text */}
                    <div className="space-y-2 animate-in fade-in slide-in-from-bottom-4 duration-500 delay-150">
                        <h1 className="text-8xl font-black text-primary/10 tracking-tighter -mb-8 select-none">
                            {status}
                        </h1>
                        <h2 className="text-3xl font-bold tracking-tight text-foreground relative z-10">
                            {t(title)}
                        </h2>
                        <p className="text-muted-foreground text-sm sm:text-base leading-relaxed px-4">
                            {t(description)}
                        </p>
                    </div>

                    {/* Action Buttons */}
                    <div className="flex flex-col sm:flex-row items-center justify-center gap-3 pt-6 animate-in fade-in slide-in-from-bottom-4 duration-500 delay-300">
                        <Button 
                            variant="outline" 
                            size="lg" 
                            className="w-full sm:w-auto gap-2 rounded-full border-border/50 shadow-sm"
                            onClick={() => window.history.back()}
                        >
                            <ArrowLeft className="w-4 h-4" /> {t('Go Back')}
                        </Button>
                        
                        <Button 
                            size="lg" 
                            asChild 
                            className="w-full sm:w-auto gap-2 rounded-full shadow-lg"
                        >
                            <Link href="/">
                                <Home className="w-4 h-4" /> {t('Back to Home')}
                            </Link>
                        </Button>
                    </div>

                </div>
            </div>
        </ThemeProvider>
    );
}