import { useCallback, useEffect, useMemo, useState, type FC } from 'react';

import i18next from 'i18next';

import { IconSpeakerphone } from '@material-hu/icons/tabler';
import Alert from '@material-hu/mui/Alert';
import AlertTitle from '@material-hu/mui/AlertTitle';
import { AppBarProps } from '@material-hu/mui/AppBar';
import { useTheme } from '@material-hu/mui/styles';

import HuHomeHeader from '@material-hu/components/design-system/Header/Home';

import { FEATURE_FLAG_KEYS } from 'src/config/firebase';
import { useFeatureFlag } from 'src/contexts/FeatureFlagsContext';
import useAuth from 'src/contexts/JWTContext';
import { useLayoutMetrics } from 'src/contexts/LayoutMetricsContext';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { logEvent, LogEvents } from 'src/utils/logging';
import {
  getFullname,
  getInitials,
  instanceHidesSupport,
} from 'src/utils/userUtils';

import AccountPopoverContent from '../AccountPopoverContent';
import LanguageMenu from '../LanguageMenu';
import SupportMenu from '../SupportMenu/SupportMenu';

const helpCenterUrl = {
  es: 'https://help.humand.co/hc/es-419?utm_source=platform&utm_medium=humandadmin',
  en: 'https://help.humand.co/hc/en-us?utm_source=platform&utm_medium=humandadminEN',
  pt: 'https://help.humand.co/hc/pt?utm_medium=humandadmin&utm_source=platform',
  bg: 'https://help.humand.co/hc/bg-bg?utm_medium=humandadmin&utm_source=platform',
  'pt-br':
    'https://help.humand.co/hc/pt?utm_medium=humandadmin&utm_source=platform',
};

const productNewsUrl = {
  es: 'https://humand.co/es/novedades-de-producto/',
  en: 'https://humand.co/product-news/',
  pt: 'https://humand.co/pt/novidades-do-produto/',
  'pt-br': 'https://humand.co/pt/novidades-do-produto/',
};

type DashboardNavbarProps = AppBarProps & {
  onSidebarInteraction?: () => void;
};

const DashboardNavbar: FC<DashboardNavbarProps> = props => {
  const { onSidebarInteraction } = props;
  const { user, instance } = useAuth();
  const { t } = useLokaliseTranslation('backoffice_only');
  const HuGoThemeProvider = useHuGoTheme();
  const theme = useTheme();
  const { hasDebtorBanner, isNavbarHidden, isSidebarHidden } =
    useLayoutMetrics();

  const {
    value: { instances: allowedInstances },
  } = useFeatureFlag(FEATURE_FLAG_KEYS.ALLOWED_INSTANCES_TO_SUPPORT_CENTER);

  const displaySupportMenu = useMemo(() => {
    if (!instance) return false;
    return allowedInstances.includes(instance.id);
  }, [instance]);

  const [languageAnchorEl, setLanguageAnchorEl] =
    useState<HTMLButtonElement | null>(null);
  const [supportMenuAnchorEl, setSupportMenuAnchorEl] =
    useState<HTMLButtonElement | null>(null);

  const { logo } = instance || {};
  const helpUrl =
    helpCenterUrl[i18next.language as keyof typeof helpCenterUrl] ||
    helpCenterUrl.en;
  const newsUrl =
    productNewsUrl[i18next.language as keyof typeof productNewsUrl] ||
    productNewsUrl.en;
  const hideSupportButton = instanceHidesSupport(instance?.id);

  const handleOpenLanguageMenu = (
    event: React.MouseEvent<HTMLButtonElement>,
  ) => {
    setLanguageAnchorEl(event.currentTarget);
  };

  const handleCloseLanguageMenu = () => {
    setLanguageAnchorEl(null);
  };

  const handleOpenProductNews = () => {
    window.open(newsUrl, '_blank');
    logEvent(LogEvents.GENERAL_PRODUCT_BLOG_OPENED);
  };

  const handleOpenSupportMenu = (
    event: React.MouseEvent<HTMLButtonElement>,
  ) => {
    logEvent(LogEvents.SUPPORT_APP_CONTACTED);
    setSupportMenuAnchorEl(event.currentTarget);
  };

  const handleCloseSupportMenu = () => {
    setSupportMenuAnchorEl(null);
  };

  const closeAllMenus = useCallback(() => {
    setLanguageAnchorEl(null);
    setSupportMenuAnchorEl(null);
  }, []);

  useEffect(() => {
    if (isNavbarHidden) {
      closeAllMenus();
    }
  }, [isNavbarHidden, closeAllMenus]);

  return (
    <HuGoThemeProvider>
      {!isNavbarHidden && (
        <>
          <HuHomeHeader
            id="dashboard-navbar"
            onOpenMenu={onSidebarInteraction!}
            logoSrc={logo!}
            logoAlt={t('backoffice_only:dashboard_navbar.company_logo_alt', {
              companyName: instance?.name,
            })}
            extraOptions={[
              {
                key: 'product-news',
                children: t('backoffice_only:dashboard_navbar.new_releases'),
                startIcon: <IconSpeakerphone />,

                onClick: handleOpenProductNews,
              },
            ]}
            hideSupportButton={hideSupportButton}
            avatarPopoverContent={<AccountPopoverContent />}
            onOpenLanguageMenu={handleOpenLanguageMenu}
            supportButtonProps={{
              href: helpUrl,
            }}
            avatarProps={{
              src: user!.profilePicture || '',
              alt: t('backoffice_only:dashboard_navbar.profile_picture_alt', {
                userName: user!.firstName,
              }),
              text: getInitials(getFullname(user!)),
            }}
            hideNotificationsButton
            hideMenuButton={isSidebarHidden}
            {...(displaySupportMenu && {
              onOpenSupportMenu: handleOpenSupportMenu,
            })}
            sx={{
              zIndex: theme.zIndex.drawer + 100,
            }}
            banner={
              hasDebtorBanner ? (
                <Alert
                  severity="error"
                  variant="filled"
                  icon={false}
                  sx={{
                    justifyContent: 'center',
                    borderRadius: 0,
                    padding: 0,
                  }}
                >
                  <AlertTitle
                    sx={{ fontWeight: 'fontWeightMedium', margin: 0 }}
                  >
                    {t('backoffice_only:dashboard_navbar.payment_alert')}
                  </AlertTitle>
                </Alert>
              ) : null
            }
            isAdmin
          />
          <LanguageMenu
            anchorEl={languageAnchorEl}
            onClose={handleCloseLanguageMenu}
          />
          <SupportMenu
            anchorEl={supportMenuAnchorEl}
            onClose={handleCloseSupportMenu}
            helpCenterUrl={helpUrl}
          />
        </>
      )}
    </HuGoThemeProvider>
  );
};

export default DashboardNavbar;