'use client';

import {
  Link,
  Menu,
  MenuButton,
  MenuItem,
  MenuList,
  MenuProps,
  Portal,
} from '@chakra-ui/react';
import { useAuth, useClerk } from '@clerk/nextjs';
import { useGateValue, useLayer } from '@statsig/react-bindings';
import { observer } from 'mobx-react-lite';
import { usePathname } from 'next/navigation';
import React, { useCallback, useEffect, useRef } from 'react';
import { twMerge } from 'tailwind-merge';

import { useStores } from '@/app/(root)/AppProviders';
import Button, { ButtonVariant } from '@/components/button/Button';
import Avatar, { Props as AvatarProps } from '@/components/image/Avatar';
import NextLink from '@/components/link/Link';
import DeleteAccountWarningModal from '@/components/modal/DeleteAccountWarningModal';
import ProfileEditModal from '@/components/modal/ProfileEditModal';
import WelcomeModal from '@/components/modal/WelcomeModal';
import { toast } from '@/components/toast/Toast';
import useDisclosure from '@/hooks/useDisclosure';
import {
  ArrowLeftIcon,
  ArrowRightIcon,
  CycleIcon,
  DownRightArrowIcon,
  EditIcon,
  GearIcon,
  TrashIcon,
  UserIcon,
} from '@/icons';
import { clearSunoSessionId, useApiClient } from '@/lib/apiClient';
import logWebUserEvent, { logoutUser } from '@/logging/logWebUserEvent';
import { SMALL_IMAGE } from '@/utils/constants';
import { getClerkSignInRedirectProps } from '@/utils/utils';

import CompleteProfileTooltip from '../tooltip/CompleteProfileTooltip';
import AuthSelectorDropdown from './AuthSelectorDropdown';
import ThemeSelectorDropdown from './ThemeSelectorDropdown';

export type LoginBarAvatarProps = React.HTMLAttributes<HTMLDivElement> & {
  avatarClassName?: string;
  showClaimUserName?: boolean;
  onDismissClaimUsername?: () => void;
  onOpenWelcomeModal?: () => void;
} & Pick<AvatarProps, 'displayName' | 'handle' | 'src'>;

export const LoginBarAvatar: React.FC<LoginBarAvatarProps> = (props) => {
  const {
    className,
    avatarClassName,
    showClaimUserName,
    onDismissClaimUsername,
    onOpenWelcomeModal,
    displayName,
    handle,
    src,
    ...restProps
  } = props;

  const btnRef = useRef<HTMLDivElement>(null);

  return (
    <div className={twMerge('relative', className)} {...restProps}>
      <div ref={btnRef}>
        <Avatar
          displayName={displayName || handle || ''}
          handle={handle}
          src={src}
          imageSize={SMALL_IMAGE}
          className={twMerge('h-9 w-9', avatarClassName)}
        />
      </div>
      {showClaimUserName && onDismissClaimUsername && onOpenWelcomeModal && (
        <CompleteProfileTooltip
          btnRef={btnRef}
          handleDismissClaimUsername={onDismissClaimUsername}
          onOpenWelcomeModal={onOpenWelcomeModal}
        />
      )}
    </div>
  );
};

export type Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
  avatarClassName?: string;
  avatarButtonClassName?: string;
  onOpenEditProfile: () => void;
  menuPlacement?: MenuProps['placement'];
  menuOffset?: MenuProps['offset'];
  children?: React.ComponentType<LoginBarAvatarProps> | React.ReactNode;
};

const LoginBar: React.FC<Props> = observer((props) => {
  const {
    children = LoginBarAvatar,
    avatarClassName,
    avatarButtonClassName,
    onOpenEditProfile,
    menuPlacement,
    menuOffset,
    ...restProps
  } = props;

  const { isLoaded, isSignedIn } = useAuth();
  const apiClient = useApiClient();
  const clerk = useClerk();
  const { session } = useStores();
  const pathname = usePathname();
  const btnRef = useRef<HTMLButtonElement>(null);

  const {
    isOpen: isWelcomeModalOpen,
    onOpen: onOpenWelcomeModal,
    onClose: onCloseWelcomeModal,
  } = useDisclosure();

  // Update global welcome modal state when local state changes
  useEffect(() => {
    session.setWelcomeModalOpen(isWelcomeModalOpen);
  }, [isWelcomeModalOpen, session]);

  const {
    isOpen: isProfileEditModalOpen,
    onOpen: onOpenProfileEditModal,
    onClose: onCloseProfileEditModal,
  } = useDisclosure();

  const {
    isOpen: isDeleteAccountModalOpen,
    onOpen: onOpenDeleteAccountModal,
    onClose: onCloseDeleteAccountModal,
  } = useDisclosure();

  const authLayer = useLayer('auth-layer');
  const isClerklessAuthEnabled = authLayer.get(
    'is_clerkless_auth_enabled',
    false
  );
  const isManageAccountHidden = useGateValue('web-hide-manage-account');
  const enableManageAccount = !isClerklessAuthEnabled && !isManageAccountHidden;
  const enableThemeSelector = useGateValue('web-theme-selector');
  const canSeeDeleteAccountUI = useGateValue('can-delete-account');
  let enableAuthSelector =
    session.isStaff && process.env.NEXT_PUBLIC_AUTH_PUBLISHABLE_KEY;

  const handleDismissClaimUsername = useCallback(async () => {
    try {
      await session.updateShownClaimUsername();
    } catch (error) {
      console.error('Failed to update shown_claim_username:', error);
    }
  }, [session]);

  const handleResetOnboarding = useCallback(async () => {
    try {
      await apiClient.POST('/api/user/reset_onboarding/', {
        body: {
          handle: session.user.handle,
        },
      });
      session.shownCreateOnboarding = false;
      toast({
        title: 'Onboarding Reset Successfully',
        description: 'Your onboarding status has been reset.',
        status: 'success',
        position: 'bottom',
        isClosable: true,
      });
    } catch (error) {
      console.error('Error resetting onboarding:', error);
      toast({
        title: 'Failed to Reset Onboarding',
        description: 'There was an error resetting your onboarding status.',
        status: 'error',
        position: 'bottom',
        isClosable: true,
      });
    }
  }, [session, apiClient]);

  const handleDeleteAccount = useCallback(() => {
    onOpenDeleteAccountModal();
  }, [onOpenDeleteAccountModal]);

  const handleConfirmDeleteAccount = useCallback(
    async (forceImmediate: boolean = false) => {
      // All users can delete their account (permission checks moved to backend)

      try {
        // Call the backend endpoint to delete account
        await apiClient.POST('/api/user/delete-account/', {
          body: {
            confirm_delete: 'confirm_delete',
            force_immediate: forceImmediate,
          },
        });

        toast({
          title: 'Account deleted successfully',
          description:
            'Your account has been deleted. You will be redirected to the homepage.',
          status: 'success',
          position: 'bottom',
          isClosable: true,
        });

        // Wait a moment for user to see the success message
        await new Promise((resolve) => setTimeout(resolve, 1500));

        // Log out user first
        logoutUser();

        // Clear Suno session
        clearSunoSessionId();

        // Sign out from Clerk
        await clerk.signOut();

        // Clear all site data
        localStorage.clear();
        sessionStorage.clear();

        // Clear cookies (same-site only for security)
        if (document.cookie) {
          document.cookie.split(';').forEach((cookie) => {
            const eqPos = cookie.indexOf('=');
            const name =
              eqPos > -1 ? cookie.substring(0, eqPos).trim() : cookie.trim();
            // Clear cookie for current domain and path
            document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;domain=${window.location.hostname}`;
            document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/`;
            // Also try clearing without domain specification
            document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT`;
          });
        }

        // Clear any cached data and force refresh
        if ('caches' in window) {
          try {
            const cacheNames = await caches.keys();
            await Promise.all(cacheNames.map((name) => caches.delete(name)));
          } catch (error) {
            console.error('Failed to clear caches:', error);
          }
        }

        // Force a hard refresh and redirect to appropriate environment using pattern matching
        const baseUrl =
          process.env.NEXT_PUBLIC_BASE_URL || window.location.origin;
        const redirectUrl = `${baseUrl}/home`;

        window.location.replace(redirectUrl);

        return { success: true };
      } catch (error) {
        console.error('Error deleting account:', error);
        toast({
          title: 'Failed to Delete Account',
          description: 'There was an error deleting your account.',
          status: 'error',
          position: 'bottom',
          isClosable: true,
        });
        return { success: false, error: error as Error };
      }
    },
    [clerk, apiClient]
  );

  useEffect(() => {
    session.getUserConfig();
  }, [session]);

  // Skip the profile tooltip - let WelcomeModal handle profile completion flow
  let showClaimUserName = false;

  // Show claim username tooltip for users with incomplete profiles

  const handleEditProfile = () => {
    if (session.flags?.['artist-profiles']) {
      logWebUserEvent(
        {
          actionName: 'ArtistProfileEditButtonClicked',
          context: {
            source: 'login-bar',
          },
        },
        session
      );
      onOpenProfileEditModal();
    } else {
      onOpenEditProfile();
    }
  };

  return (
    <div {...restProps}>
      {isLoaded && !isSignedIn ? (
        <div className='mr-2 whitespace-nowrap md:mr-0'>
          <Button
            variant={ButtonVariant.Primary}
            icon={ArrowRightIcon}
            onClick={() => {
              logWebUserEvent({
                actionName: 'SignInButtonClicked',
              });
              clerk.openSignIn({
                withSignUp: true,
                ...getClerkSignInRedirectProps(pathname),
              });
            }}
          >
            Sign In
          </Button>
        </div>
      ) : null}
      {isLoaded && isSignedIn && (
        <div className='mt-2'>
          <Menu placement={menuPlacement} offset={menuOffset}>
            <MenuButton
              as='div'
              data-testid='profile-menu-button'
              aria-label='Profile menu button'
              ref={btnRef}
              className={twMerge('group', avatarButtonClassName)}
              onClick={(e) => {
                if (showClaimUserName) {
                  e.preventDefault();
                  handleDismissClaimUsername();
                  onOpenWelcomeModal();
                }
              }}
              pt={0}
            >
              {typeof children === 'function'
                ? React.createElement(children, {
                    avatarClassName: avatarClassName,
                    displayName:
                      session.user?.display_name || session.user?.handle || '',
                    handle: session.user?.handle,
                    src: session.user?.avatar_image_url,
                    showClaimUserName,
                    onDismissClaimUsername: handleDismissClaimUsername,
                    onOpenWelcomeModal,
                  })
                : children}
            </MenuButton>
            <Portal>
              <MenuList
                pt={0}
                // Need to override default MenuList styles
                // TODO: Shift off of Chakra
                sx={{
                  bgColor: 'var(--color-background-secondary)',
                  color: 'var(--color-foreground-primary)',
                  borderColor: 'var(--color-border-primary)',
                  borderRadius: '10px',
                  boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2)',
                  border: '1px solid var(--color-border-secondary)',
                }}
                zIndex={1000}
                className='rounded-xl! text-foreground-primary!'
              >
                <div className='flex min-h-14 grow items-center justify-start gap-2 px-2'>
                  <Avatar
                    displayName={
                      session.user?.display_name || session.user?.handle || ''
                    }
                    handle={session.user?.handle}
                    src={session.user?.avatar_image_url}
                    imageSize={SMALL_IMAGE}
                    className={twMerge('h-9 w-9', avatarClassName)}
                  />
                  <div className='flex flex-1 flex-col items-start justify-center gap-0.5 border border-transparent'>
                    {session.user?.display_name || session.user?.handle ? (
                      <p className='line-clamp-1 text-left text-[14px] leading-[16px] font-medium'>
                        {session.user?.display_name || session.user?.handle}
                      </p>
                    ) : null}
                    <p className='text-[13px] leading-[16px] text-foreground-tertiary'>
                      {clerk.user?.emailAddresses?.[0]?.emailAddress || ''}
                    </p>
                  </div>
                </div>
                {!!session.user?.handle ? (
                  <>
                    <MenuItem
                      className='hover:bg-background-tertiary/50! hover:no-underline!'
                      fontSize={'14px'}
                      as={NextLink}
                      href={`/@${session.user?.handle}`}
                      bg={'transparent'}
                    >
                      <div className='mr-[27px] ml-[11px]'>
                        <UserIcon />
                      </div>{' '}
                      View Profile
                    </MenuItem>
                    <MenuItem
                      className='hover:cursor-pointer hover:bg-background-tertiary/50! hover:no-underline!'
                      fontSize={'14px'}
                      onClick={() => handleEditProfile()}
                      bg={'transparent'}
                    >
                      <div className='mr-[27px] ml-[11px]'>
                        <EditIcon />
                      </div>{' '}
                      Edit Profile
                    </MenuItem>
                  </>
                ) : null}
                {enableManageAccount && (
                  <MenuItem
                    className='hover:cursor-pointer hover:bg-background-tertiary/50! hover:no-underline!'
                    fontSize={'14px'}
                    onClick={() =>
                      clerk.openUserProfile({
                        appearance: {
                          elements: {
                            modalContent: {
                              height: 'auto',
                            },
                            cardBox: {
                              height: '20rem',
                            },
                            profileSection__profile: {
                              display: 'none',
                            },
                            button:
                              'text-foreground-primary hover:text-foreground-secondary',
                            badge:
                              'text-foreground-primary outline outline-foreground-primary',
                          },
                        },
                      })
                    }
                    bg={'transparent'}
                  >
                    <div className='mr-[27px] ml-[11px]'>
                      <GearIcon />
                    </div>{' '}
                    Manage Account
                  </MenuItem>
                )}
                <MenuItem
                  className='hover:bg-background-tertiary/50! hover:no-underline!'
                  fontSize={'14px'}
                  as={NextLink}
                  href={`${process.env.NEXT_PUBLIC_WEBSITE_HOST || ''}/account`}
                  bg={'transparent'}
                >
                  <div className='mr-[27px] ml-[11px]'>
                    <DownRightArrowIcon />
                  </div>{' '}
                  Manage Subscription
                </MenuItem>
                {enableThemeSelector && <ThemeSelectorDropdown />}
                {enableAuthSelector && <AuthSelectorDropdown />}
                {session.isStaff && (
                  <MenuItem
                    className='hover:cursor-pointer hover:bg-background-tertiary/50! hover:no-underline!'
                    fontSize={'14px'}
                    onClick={handleResetOnboarding}
                    bg={'transparent'}
                  >
                    <div className='mr-[27px] ml-[11px]'>
                      <CycleIcon />
                    </div>{' '}
                    Reset Onboarding
                  </MenuItem>
                )}
                {canSeeDeleteAccountUI && (
                  <MenuItem
                    className='hover:cursor-pointer hover:bg-background-tertiary/50! hover:no-underline!'
                    fontSize={'14px'}
                    onClick={handleDeleteAccount}
                    bg={'transparent'}
                  >
                    <div className='mr-[27px] ml-[11px]'>
                      <TrashIcon />
                    </div>{' '}
                    Delete Account
                  </MenuItem>
                )}
                <MenuItem
                  className='hover:cursor-pointer hover:bg-background-tertiary/50! hover:no-underline!'
                  fontSize={'14px'}
                  onClick={() => {
                    logoutUser();
                    logWebUserEvent({
                      actionName: 'SignOutButtonClicked',
                    });
                    apiClient.POST('/api/signout/', {});
                    clerk
                      .signOut({
                        redirectUrl: '/',
                      })
                      .then(() => {
                        clearSunoSessionId();
                        session.loadSession({ retries: 1, forceLoad: true });
                      });
                  }}
                  bg={'transparent'}
                >
                  <div className='mr-[27px] ml-[11px]'>
                    <ArrowLeftIcon />
                  </div>{' '}
                  Sign Out
                </MenuItem>
                <div className='mt-2 ml-16 flex flex-row gap-4'>
                  <Link href='/terms' fontSize='xs' color='gray'>
                    Terms of Service
                  </Link>
                  <Link href='/privacy' fontSize='xs' color='gray'>
                    <span className='text-xs text-gray-500'>Privacy</span>
                  </Link>
                </div>
              </MenuList>
            </Portal>
          </Menu>
        </div>
      )}
      <ProfileEditModal
        isOpen={isProfileEditModalOpen}
        onClose={onCloseProfileEditModal}
        artistProfileInfo={session.artistProfileInfo}
        onArtistProfileInfoUpdate={(updatedInfo) => {
          session.updateArtistProfileInfo(updatedInfo);
        }}
        onSuccess={() => {
          // Profile updated successfully
        }}
      />
      {isWelcomeModalOpen && (
        <WelcomeModal
          reclaim={true}
          isOpen={isWelcomeModalOpen}
          onClose={() => {
            onCloseWelcomeModal();
            handleDismissClaimUsername();
          }}
        />
      )}
      <DeleteAccountWarningModal
        isOpen={isDeleteAccountModalOpen}
        onClose={onCloseDeleteAccountModal}
        onConfirm={handleConfirmDeleteAccount}
      />
    </div>
  );
});

export default LoginBar;