"use client";

import { GoogleLogin, GoogleOAuthProvider } from "@react-oauth/google";
import type { CredentialResponse } from "@react-oauth/google";
import { useRouter } from "next/navigation";
import toast from "react-hot-toast";
import useAxios from "@/hooks/useAxios";
import type { IVerifyOtp } from "@/types/types";
import { completeLogin, getSafeRedirectPath } from "@/lib/auth/postLogin";
import { cn } from "@/lib/utils";

const GOOGLE_CLIENT_ID = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID ?? "";

type GoogleSignInButtonProps = {
  mode?: "login" | "register";
};

function GoogleIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
      <path
        fill="#4285F4"
        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
      />
      <path
        fill="#34A853"
        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
      />
      <path
        fill="#FBBC05"
        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"
      />
      <path
        fill="#EA4335"
        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
      />
    </svg>
  );
}

function GoogleSignInInner({ mode = "login" }: GoogleSignInButtonProps) {
  const router = useRouter();
  const { request, loading } = useAxios();
  const redirectPath = getSafeRedirectPath();
  const label = mode === "register" ? "ثبت‌نام با گوگل" : "ورود با گوگل";

  const handleSuccess = async (response: CredentialResponse) => {
    if (!response.credential) {
      toast.error("ورود با گوگل ناموفق بود");
      return;
    }

    try {
      const authResponse = (await request("POST", "/auth/google", {
        credential: response.credential,
      })) as IVerifyOtp;

      if (authResponse.email) {
        localStorage.setItem("email", authResponse.email);
      }
      localStorage.setItem(
        "auth_provider",
        authResponse.auth_provider || "google"
      );
      localStorage.removeItem("mobile");
      localStorage.removeItem("otp");

      const loggedIn = await completeLogin(router, authResponse, {
        redirectTo: redirectPath,
      });

      if (!loggedIn) {
        toast.error("پاسخ سرور نامعتبر بود");
      }
    } catch (err: unknown) {
      const message =
        (err as { response?: { data?: { message?: string } } })?.response?.data
          ?.message || "ورود با گوگل ناموفق بود";
      toast.error(message);
    }
  };

  return (
    <div className="w-full max-w-[290px] mt-5 flex flex-col items-center">
      <div className="relative flex items-center justify-center mb-4 w-full">
        <span className="absolute inset-x-0 h-px bg-gray-200 dark:bg-gray-700" />
        <span className="relative bg-white dark:bg-[#1a1a1a] px-3 text-xs text-gray-500">
          {mode === "register" ? "یا ثبت‌نام با" : "یا ورود با"}
        </span>
      </div>

      <div
        className={cn(
          "relative w-full max-w-[290px]",
          loading && "pointer-events-none opacity-60"
        )}
      >
        <div
          aria-hidden
          className="flex w-full items-center justify-center gap-2 rounded-2xl border-2 border-gray-200 bg-white p-3 text-center text-base font-bold text-gray-800 shadow-sm dark:bg-white dark:text-gray-900"
        >
          <GoogleIcon />
          <span>{label}</span>
        </div>

        <div className="absolute inset-0 overflow-hidden rounded-2xl opacity-[0.01]">
          <GoogleLogin
            onSuccess={handleSuccess}
            onError={() => toast.error("ورود با گوگل لغو شد")}
            theme="outline"
            size="large"
            shape="pill"
            text={mode === "register" ? "signup_with" : "signin_with"}
            locale="fa"
            width="290"
            containerProps={{
              className: "flex h-full w-full items-center justify-center",
              style: { height: "100%", minHeight: "48px" },
            }}
          />
        </div>
      </div>
    </div>
  );
}

export default function GoogleSignInButton(props: GoogleSignInButtonProps) {
  if (!GOOGLE_CLIENT_ID) return null;
  return <GoogleSignInInner {...props} />;
}

export function GoogleAuthRootProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  if (!GOOGLE_CLIENT_ID) return <>{children}</>;

  return (
    <GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID}>
      {children}
    </GoogleOAuthProvider>
  );
}
