'use client';

import { useAuth, useClerk } from '@clerk/nextjs';
import { useRouter, useSearchParams } from 'next/navigation';
import { useEffect } from 'react';

import Button, { ButtonVariant } from '@/components/button/Button';
import { LoginIcon } from '@/icons';
import { getClerkSignUpRedirectProps } from '@/utils/utils';

const REDIRECT_TO_PARAM = 'redirect_to';
const AUTHED_PAGES = ['/me', '/account', '/create', '/link-account'];
const EXCLUDED_PAGES = ['/home'];

export default function LoginClient() {
  const searchParams = useSearchParams();
  const { openSignUp } = useClerk();
  const { isSignedIn } = useAuth();
  useSignUpRedirect();

  const fullRedirectRoute = getFullRedirectRoute(searchParams);
  return (
    <div className='mt-[220px] flex w-full justify-center'>
      {!isSignedIn && (
        <Button
          variant={ButtonVariant.Primary}
          icon={LoginIcon}
          onClick={() => {
            openSignUp({
              ...getClerkSignUpRedirectProps(fullRedirectRoute),
            });
          }}
          className='h-[42px] w-[100px]'
        >
          Sign In
        </Button>
      )}
    </div>
  );
}

/**
 * Opens the sign up modal and redirects to the sign up page if the user is not signed in
 * Otherwise, redirects to the redirect route
 */
const useSignUpRedirect = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { isSignedIn } = useAuth();
  const { openSignUp } = useClerk();

  const redirectRoute = sanitizeRedirectRoute(
    searchParams.get(REDIRECT_TO_PARAM) || '/'
  );
  const fullRedirectRoute = getFullRedirectRoute(searchParams);
  const isRedirectingToAuthedPage = AUTHED_PAGES.includes(redirectRoute);
  const isRedirectingToExcludedPage = EXCLUDED_PAGES.includes(redirectRoute);

  useEffect(() => {
    if (
      isSignedIn ||
      !isRedirectingToAuthedPage ||
      isRedirectingToExcludedPage
    ) {
      router.push(fullRedirectRoute);
      return;
    }

    openSignUp({
      ...getClerkSignUpRedirectProps(fullRedirectRoute),
    });
  }, [
    openSignUp,
    fullRedirectRoute,
    isSignedIn,
    isRedirectingToAuthedPage,
    isRedirectingToExcludedPage,
    router,
  ]);
};

/**
 * Returns the full redirect route with the other params
 * @param searchParams - The search params to get the redirect route and other params from
 * @returns The full redirect route with the other params
 */
const getFullRedirectRoute = (searchParams: URLSearchParams) => {
  const params = new URLSearchParams(searchParams);
  const redirectRoute = sanitizeRedirectRoute(
    params.get(REDIRECT_TO_PARAM) || '/'
  );
  params.delete(REDIRECT_TO_PARAM);
  const separator = redirectRoute.includes('?') ? '&' : '?';
  return `${redirectRoute}${separator}${params}`;
};

const sanitizeRedirectRoute = (redirectRoute: string) => {
  return redirectRoute.startsWith('/') ? redirectRoute : `/${redirectRoute}`;
};