"use client";

import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { useEffect, useRef, useState } from "react";
import AuthShell from "@/shared/AuthShell";
import { useVerifyEmailMutation } from "@/services/auth-service";
import { getApiErrorMessage } from "@/utils/apiError";

export default function VerifyEmailPage() {
  const params = useSearchParams();
  const token = params?.get("token") ?? "";
  const [verifyEmail] = useVerifyEmailMutation();
  const [status, setStatus] = useState<"loading" | "success" | "error">("loading");
  const [errorMsg, setErrorMsg] = useState("");
  const attemptedRef = useRef(false);

  useEffect(() => {
    if (attemptedRef.current) return;
    attemptedRef.current = true;
    if (!token) {
      // eslint-disable-next-line react-hooks/set-state-in-effect
      setErrorMsg("Missing verification token.");
      setStatus("error");
      return;
    }
    verifyEmail({ token })
      .unwrap()
      .then(() => setStatus("success"))
      .catch((err) => {
        setErrorMsg(getApiErrorMessage(err, "Verification failed."));
        setStatus("error");
      });
  }, [token, verifyEmail]);

  return (
    <AuthShell
      title="Email Verification"
      footer={
        <Link href="/admin/login" className="text-[#d6ac63] underline-offset-2 hover:underline">
          Go to sign in
        </Link>
      }
    >
      {status === "loading" ? (
        <p className="text-sm text-center font-light text-gray-600">
          Verifying your email…
        </p>
      ) : status === "success" ? (
        <div className="text-center space-y-2">
          <p className="text-sm font-light text-black">
            Your email has been verified.
          </p>
          <p className="text-xs text-gray-500">You can now sign in to the admin portal.</p>
        </div>
      ) : (
        <p className="text-sm text-center text-red-500">{errorMsg}</p>
      )}
    </AuthShell>
  );
}