"use client";

import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import { useRouter } from "@/i18n/routing";
import { PuffLoader } from "react-spinners";
import { doInviteUserAppUser } from "@/lib/redux/features/appUser";
import { useAppDispatch } from "@/lib/redux/hooks";
import { useTranslations } from "use-intl";
import { AppUserResponse } from "@/types/appUser";
import { ResponseStatus } from "@/types/common";

export default function InviteConfirmationPage() {
  const t = useTranslations("InvitePage");
  const router = useRouter();
  const dispatch = useAppDispatch();
  const searchParams = useSearchParams();
  const token = searchParams.get("token");
  const appId = searchParams.get("app_id");

  const [loading, setLoading] = useState(true);
  const [status, setStatus] = useState<"pending" | "success" | "error">(
    "pending",
  );
  const [message, setMessage] = useState("");

  const verifyInvitation = async () => {
    try {
      if (!token || !appId) {
        setStatus("error");
        setMessage(t("error_invitation_code_missing"));
        console.error("Token or App ID is missing!");
        return;
      }

      const result = await dispatch(
        doInviteUserAppUser({
          code: token,
          apps_id: appId,
        }),
      );
      const payload = result?.payload as AppUserResponse;
      if (payload && payload?.status === ResponseStatus.SUCCESS) {
        setStatus("success");
        setMessage(t("success_invitation_confirmed"));
        setTimeout(() => {
          router.push("/sign-in");
        }, 3000);
      } else {
        setStatus("error");
        setMessage(t("error_confirming_invitation"));
        setTimeout(() => {
          router.push("/sign-in");
        }, 3000);
      }
    } catch (err: any) {
      console.error("Failed to confirm invitation!", err?.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    verifyInvitation();
  }, [token, appId]);

  return (
    <div className="flex flex-col items-center justify-center min-h-screen w-full">
      {loading ? (
        <div className="text-center flex flex-col items-center justify-center">
          <div className="mb-4">
            <PuffLoader color="#1f73cc" speedMultiplier={3} />
          </div>
          <p className="mt-4 text-gray-600">{t("confirming_invitation")}</p>
        </div>
      ) : status === "success" ? (
        <div className="text-center">
          <h2 className="text-2xl font-bold text-green-600 mb-2">
            {t("success_title")}
          </h2>
          <p className="mb-4">{message}</p>
          <p className="text-sm text-gray-500">{t("redirecting_to_sign_in")}</p>
        </div>
      ) : (
        <div className="text-center">
          <h2 className="text-2xl font-bold text-red-600 mb-2">
            {t("error_title")}
          </h2>
          <p className="mb-4">{message}</p>
          <p className="text-sm text-gray-500">{t("redirecting_to_sign_in")}</p>
        </div>
      )}
    </div>
  );
}