import { useRouteError, isRouteErrorResponse, Link } from 'react-router-dom';
import { AlertTriangle, Home, RefreshCcw } from 'lucide-react';

export default function ErrorPage() {
    const error = useRouteError();
    let errorMessage: string;
    let errorTitle: string;
    let is404 = false;

    if (isRouteErrorResponse(error)) {
        is404 = error.status === 404;
        errorTitle = is404 ? 'Page Not Found' : `${error.status} Error`;
        errorMessage = is404
            ? "We couldn't find the page you're looking for."
            : error.statusText;
    } else if (error instanceof Error) {
        errorTitle = 'Unexpected Error';
        errorMessage = error.message;
    } else {
        errorTitle = 'Unknown Error';
        errorMessage = 'An unknown error occurred';
    }

    return (
        <div className="min-h-screen bg-primary flex items-center justify-center p-4">
            <div className="max-w-md w-full text-center space-y-6 animate-in">
                <div className="relative inline-block">
                    <div className={`
                        w-16 h-16 rounded-lg flex items-center justify-center mx-auto mb-4
                        ${is404 ? 'bg-tertiary' : 'bg-destructive-muted'}
                    `}>
                        {is404 ? (
                            <span className="text-3xl">🔍</span>
                        ) : (
                            <AlertTriangle className="w-8 h-8 text-destructive" />
                        )}
                    </div>
                </div>

                <div>
                    <h1 className="text-2xl font-semibold text-primary mb-2">
                        {errorTitle}
                    </h1>
                    <p className="text-secondary text-sm">
                        {errorMessage}
                    </p>
                </div>

                <div className="flex flex-col sm:flex-row gap-2 justify-center pt-4">
                    <button
                        onClick={() => window.location.reload()}
                        className="btn btn-secondary"
                    >
                        <RefreshCcw size={16} />
                        Reload
                    </button>
                    <Link to="/" className="btn btn-primary">
                        <Home size={16} />
                        Back Home
                    </Link>
                </div>

                <div className="pt-6 border-t border-subtle">
                    <p className="text-xs text-tertiary font-mono uppercase tracking-wider">
                        Veridian Cultivation Platform
                    </p>
                </div>
            </div>
        </div>
    );
}