"use client";

import Link from "next/link";
import Image from "next/image";
import { useMemo } from "react";
import { useLocale } from "next-intl";
import { Button } from "@heroui/react";
import { Home as HomeIcon, RotateCcw, Bug } from "lucide-react";

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

export default function GlobalError({ error, reset }: ErrorProps) {
  const locale = useLocale();
  const isAr = locale === "ar";

  const t = useMemo(
    () => ({
      title: isAr ? "حدث خطأ ما" : "Something went wrong",
      message: isAr
        ? "حدث خطأ أثناء تحميل هذه الصفحة. أعد المحاولة أو عد إلى الصفحة الرئيسية."
        : "We couldn’t complete your request. Try again or go back home.",
      retry: isAr ? "إعادة المحاولة" : "Retry",
      home: isAr ? "العودة للرئيسية" : "Go Home",
    }),
    [isAr]
  );

  return (
    <div className="relative min-h-[60vh] flex items-center justify-center overflow-hidden">
      {/* Background accents */}
      <div className="pointer-events-none absolute inset-0">
        <div className="absolute -top-20 -left-20 h-72 w-72 rounded-full blur-3xl opacity-30 dark:opacity-20 bg-linear-to-br from-[#8BC6EC] to-[#9599E2]" />
        <div className="absolute -bottom-24 -right-24 h-80 w-80 rounded-full blur-3xl opacity-20 dark:opacity-10 bg-linear-to-br from-[#FBD786] to-[#f7797d]" />
      </div>

      <div className="relative mx-auto w-full max-w-3xl px-6">
        <div className="rounded-3xl border border-white/20 dark:border-white/10 bg-white/70 dark:bg-black/40 backdrop-blur-xl shadow-xl p-8 md:p-12">
          <div className="flex flex-col md:flex-row items-center gap-6 md:gap-10">
            <div className="relative w-36 h-36 md:w-44 md:h-44 shrink-0">
              <Image
                src="/images/default.png"
                alt="Error Illustration"
                fill
                sizes="176px"
                className="object-contain drop-shadow-md opacity-90"
                priority
              />
            </div>

            <div className="flex-1 text-center md:text-start">
              <h1 className="h3Text text-primary">{t.title}</h1>
              <p className="bodyText text-thirdText mt-2">{t.message}</p>

              <div className="mt-6 flex flex-col sm:flex-row items-center gap-3 sm:gap-4">
                <Button
                  className="bg-secondary text-white"
                  startContent={<RotateCcw className="size-4" />}
                  onPress={reset}
                >
                  {t.retry}
                </Button>
                <Button
                  as={Link}
                  href={`/${locale}`}
                  className="bg-primary text-white dark:text-black"
                  startContent={<HomeIcon className="size-4" />}
                >
                  {t.home}
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
