"use client";

import { useEffect } from "react";
import { useTranslations } from "next-intl";
import { SIGNUP_EVENTS, trackSignupEvent, sanitizeErrorMessage } from "@/lib/signup-analytics";
import { CONTACT_EMAIL } from "@/constants/contact";

/**
 * Route-level boundary for the signup page. A client-side crash here used to
 * surface as a blank page with nothing in analytics; now it reports itself and
 * still offers a way to sign up.
 */
export default function SignupError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  const t = useTranslations("signup");

  useEffect(() => {
    trackSignupEvent(SIGNUP_EVENTS.renderError, {
      error_message: sanitizeErrorMessage(error.message),
      digest: error.digest ?? "none",
    });
  }, [error]);

  return (
    <main className="min-h-screen flex items-center justify-center px-6 bg-gradient-to-br from-[#E8F4F8] via-[#EEF6F9] to-[#E5EEF2]">
      <div className="max-w-[420px] w-full text-center">
        <h1 className="text-[28px] font-bold text-gray-900 mb-2">{t("errorTitle")}</h1>
        <p className="text-gray-500 text-sm mb-6">{t("errorBody")}</p>
        <button
          type="button"
          onClick={reset}
          className="w-full py-4 px-4 bg-[#3B9EC9] hover:bg-[#2D8AB5] text-white font-medium rounded-full transition focus:outline-none focus:ring-2 focus:ring-[#3B9EC9] focus:ring-offset-2 cursor-pointer"
        >
          {t("errorRetry")}
        </button>
        <p className="text-gray-500 text-sm mt-6">
          <a href={`mailto:${CONTACT_EMAIL}`} className="font-semibold underline">
            {CONTACT_EMAIL}
          </a>
        </p>
      </div>
    </main>
  );
}