"use client";

import { useEffect } from "react";
import { AlertTriangle, RefreshCw, Home } from "lucide-react";
import Link from "next/link";

export default function GlobalError({
    error,
    reset,
}: {
    error: Error & { digest?: string };
    reset: () => void;
}) {
    useEffect(() => {
        console.error("[APP ERROR]", error);
    }, [error]);

    return (
        <html>
            <body className="min-h-screen bg-[#0F1015] text-white flex items-center justify-center p-6">
                <div className="max-w-md w-full space-y-6 text-center">
                    <div className="w-16 h-16 rounded-2xl bg-red-500/10 border border-red-500/20 flex items-center justify-center mx-auto">
                        <AlertTriangle className="w-8 h-8 text-red-400" />
                    </div>
                    <div>
                        <h1 className="text-2xl font-extrabold tracking-tight mb-2">
                            Something went wrong
                        </h1>
                        <p className="text-white/40 text-sm leading-relaxed">
                            An unexpected error occurred. Your jobs are still running safely in the background.
                        </p>
                    </div>
                    {error.message && (
                        <div className="text-left bg-red-500/5 border border-red-500/10 rounded-xl p-4">
                            <p className="text-[10px] font-bold uppercase tracking-widest text-red-400/60 mb-1">Error Details</p>
                            <p className="text-xs font-mono text-red-300/70 break-all">{error.message}</p>
                            {error.digest && (
                                <p className="text-[9px] font-mono text-white/20 mt-2">Digest: {error.digest}</p>
                            )}
                        </div>
                    )}
                    <div className="flex gap-3 justify-center">
                        <button
                            onClick={reset}
                            className="flex items-center gap-2 px-5 py-2.5 rounded-xl font-bold text-sm bg-red-500/10 border border-red-500/20 text-red-400 hover:bg-red-500/20 transition-all"
                        >
                            <RefreshCw className="w-4 h-4" />
                            Try Again
                        </button>
                        <Link
                            href="/"
                            className="flex items-center gap-2 px-5 py-2.5 rounded-xl font-bold text-sm bg-white/5 border border-white/10 text-white/60 hover:bg-white/10 transition-all"
                        >
                            <Home className="w-4 h-4" />
                            Dashboard
                        </Link>
                    </div>
                </div>
            </body>
        </html>
    );
}
