"use client";

import { useTheme } from "next-themes";
import { FaArrowsRotate } from "react-icons/fa6";
import { useRouter } from "next/navigation";
import { FaHome } from "react-icons/fa";
import Link from "next/link";
import { useEffect } from "react";
import * as Sentry from "@sentry/nextjs";

import Button from "@/components/common/button";
import ClientNavbar from "@/components/pages/client/common/client-navbar";
import Footer from "@/components/common/footer";
import ErrorSprite from "@/components/common/sprites/500-error-sprite";
import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";

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

export default function Error({ error, reset }: ErrorProps) {
  const { theme } = useTheme();
  const router = useRouter();

  useEffect(() => {
    // Server errors (digest set) are already reported server-side; the client
    // copy is masked by Next.js and would only duplicate the issue
    if (!error.digest) {
      Sentry.captureException(error);
    }
  }, [error]);

  return (
    <div className="flex flex-col min-h-screen">
      <ClientNavbar />
      <div className="bg-others-mistyGray dark:bg-jet flex flex-col items-center justify-center text-center space-y-4 mx-4 xl:mx-0 py-24">
        <ErrorSprite mode={theme as "light" | "dark"} width={250} />
        <h1 className="font-inter font-black text-6xl">
          Internal server error
        </h1>
        <h2 className="font-noto">
          We&apos;re sorry, but we encountered an error internally and we could
          not complete your request. The error has been reported to our team.
        </h2>
        <p className="font-noto">
          If the problem persists or if you need assistance, please{" "}
          <Link
            className="underline decoration-dotted underline-thickness-thin hover:underline-thickness-thick hover:text-midnightBlue dark:hover:text-paleBlue"
            href={INTERNAL_PAGES.client.contactUs.homepage}
          >
            contact
          </Link>{" "}
          us.
        </p>
        <Button
          btnLabel="Homepage"
          className="w-96"
          customVariant="transparent"
          endContent={<FaHome />}
          onClick={() => router.push(INTERNAL_PAGES.client.homepage)}
        />
        <Button
          btnLabel="Try again"
          className="w-96"
          customVariant="transparent"
          endContent={<FaArrowsRotate />}
          onClick={() => reset()}
        />
      </div>
      <Footer source="client" />
    </div>
  );
}