"use client";

import { useEffect } from "react";
import Link from "next/link";
import { AlertTriangle, RefreshCw, ArrowRight } from "lucide-react";

interface ErrorProps {
  error: Error & { digest?: string };
  reset: () => void;
}

export default function ErrorBoundary({ error, reset }: ErrorProps) {
  useEffect(() => {
    // Log the error to an analytics or error tracking service
    console.error("Global Error Boundary caught an exception:", error);
  }, [error]);

  return (
    <div className="min-h-screen bg-[#0a0e19] flex items-center justify-center p-4 relative overflow-hidden text-right" dir="rtl">
      {/* Background blurs */}
      <div className="absolute inset-0 -z-10">
        <div className="absolute top-1/4 right-1/4 w-96 h-96 bg-red-500/5 rounded-full blur-3xl" />
        <div className="absolute bottom-1/4 left-1/4 w-96 h-96 bg-orange-500/5 rounded-full blur-3xl" />
      </div>

      <div className="max-w-md w-full text-center space-y-8">
        {/* Animated Warning Icon */}
        <div className="relative inline-block">
          <div className="w-20 h-20 rounded-full bg-[#101010] border border-gray-800 flex items-center justify-center mx-auto shadow-2xl relative z-10">
            <AlertTriangle className="w-10 h-10 text-red-500 animate-bounce" />
          </div>
          <div className="absolute inset-0 bg-red-500/10 rounded-full blur-xl scale-125 -z-10" />
        </div>

        {/* Error Details */}
        <div className="space-y-3">
          <h1 className="text-2xl font-bold text-white">حدث خطأ غير متوقع</h1>
          <p className="text-[#8a8380] text-sm leading-relaxed max-w-sm mx-auto">
            نعتذر، واجه النظام مشكلة مؤقتة في معالجة هذه الصفحة. يمكنك محاولة إعادة تحميل الصفحة أو العودة لاحقاً.
          </p>
          {error.digest && (
            <p className="text-[10px] text-gray-700 font-mono select-all pt-1">
              رمز الخطأ: {error.digest}
            </p>
          )}
        </div>

        {/* Retry and Navigation Options */}
        <div className="flex flex-col sm:flex-row items-center gap-3 justify-center pt-2">
          <button
            onClick={() => reset()}
            className="w-full sm:w-auto flex items-center justify-center gap-2 bg-emerald-500 hover:bg-emerald-400 text-white font-bold px-6 py-3 rounded-xl text-xs transition-all cursor-pointer shadow-lg shadow-emerald-500/20"
          >
            <RefreshCw className="w-4 h-4" />
            <span>إعادة محاولة التحميل</span>
          </button>
          <Link
            href="/"
            className="w-full sm:w-auto flex items-center justify-center gap-2 bg-[#161b27] hover:bg-[#1e2535] border border-gray-850 text-[#b8b3b0] hover:text-white px-6 py-3 rounded-xl text-xs transition-all"
          >
            <span>الرجوع للرئيسية</span>
            <ArrowRight className="w-4 h-4 rotate-180" />
          </Link>
        </div>

        {/* Contact Support */}
        <p className="text-xs text-gray-600 pt-4">
          إذا تكررت المشكلة، يرجى التراسل مع <a href="mailto:support@procodeads.com" className="text-emerald-400 hover:underline">فريق الدعم الفني</a>
        </p>
      </div>
    </div>
  );
}