"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 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 bg-participant-light dark:bg-participant-dark">
      <div className=" flex flex-col items-center justify-center text-center space-y-4 mx-4 xl:mx-0 py-12">
        <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"
            href={INTERNAL_PAGES.participant.contactUs}
          >
            contact
          </Link>{" "}
          us.
        </p>
        <div className="flex flex-col gap-4 w-full lg:w-1/2">
          <Button
            fullWidth
            btnLabel="Homepage"
            customVariant="primary"
            endContent={<FaHome />}
            onClick={() => router.push(INTERNAL_PAGES.participant.homepage)}
          />
          <Button
            fullWidth
            btnLabel="Try again"
            customVariant="transparent"
            endContent={<FaArrowsRotate />}
            onClick={() => reset()}
          />
        </div>
      </div>
    </div>
  );
}