import { Suspense, useEffect, useState } from 'react';
import { Helmet } from 'react-helmet-async';

import Stack from '@material-hu/mui/Stack';

import Spinner from '@material-hu/components/design-system/ProgressIndicators/Spinner';
import Tabs from '@material-hu/components/design-system/Tabs';
import Title from '@material-hu/components/design-system/Title';

import { logEvent } from 'src/config/logging';
import { useFeatureFlag } from 'src/contexts/FeatureFlagsContext';
import { useGetManagerTypes } from 'src/hooks/queryHooks/manager';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { EventName, Modules } from 'src/types/amplitude';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { lazyRetry } from 'src/utils/lazyRetry';

import EmployeeLifecycleFallback from '../Fallback';
import { useFilterParams } from '../hooks/useFilterParams';
import { JourneysTabs, type JourneysTabsType } from '../types';

const MyOnboardingTab = lazyRetry(
  () => import('./components/Tabs/MyOnboardingTab'),
);
const MyTeamTab = lazyRetry(() => import('./components/Tabs/MyTeamTab'));

const onboardingTabs = {
  [JourneysTabs.MY_ONBOARDINGS]: MyOnboardingTab,
  [JourneysTabs.MY_TEAM]: MyTeamTab,
};

const Journeys = () => {
  const HuGoThemeProvider = useHuGoTheme();
  const { t } = useLokaliseTranslation(['employee_lifecycle', 'screens']);
  const { isManager, isFetchingSubordinates } = useGetManagerTypes();
  const { clearFilters } = useFilterParams();

  const [tab, setTab] = useState<JourneysTabsType>('my_onboardings');

  const { value: isEmployeeLifecycleEnabled, isLoading: loadingFlag } =
    useFeatureFlag('ENABLE_EMPLOYEE_LIFECYCLE');

  useEffect(() => {
    logEvent(EventName.USER_MODULE_USE, { module: Modules.ONBOARDING_2 });
  }, []);

  if (loadingFlag || !isEmployeeLifecycleEnabled) {
    return <EmployeeLifecycleFallback />;
  }

  if (isFetchingSubordinates) return <Spinner sx={{ mt: 10 }} />;

  const tabs: { label: string; value: JourneysTabsType }[] = [
    {
      label: t('journeys.my_onboarding_tab'),
      value: 'my_onboardings',
    },
    {
      label: t('journeys.my_team_tab'),
      value: 'my_team',
    },
  ];

  const handleTabChange = (value: string) => {
    clearFilters();
    setTab(value as JourneysTabsType);
  };

  const TabComponent = onboardingTabs[tab];

  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{formatTitle(t('screens:Onboardings'))}</title>
      </Helmet>
      <Stack
        sx={{
          minHeight: '100vh',
          width: '100%',
          backgroundColor: theme => theme.palette.new.background.layout.default,
        }}
      >
        <Stack
          sx={{
            width: '100%',
            maxWidth: 'xl',
            mx: 'auto',
            minHeight: '100%',
            p: 3,
            gap: 4,
            backgroundColor: theme =>
              theme.palette.new.background.layout.default,
          }}
        >
          <Title
            title={t('screens:Onboardings')}
            variant="L"
          />
          {isManager && (
            <>
              <Tabs
                tabs={tabs}
                value={tab}
                onTabChange={handleTabChange}
              />
              <Suspense fallback={<Spinner />}>
                <TabComponent />
              </Suspense>
            </>
          )}
          {!isManager && <MyOnboardingTab />}
        </Stack>
      </Stack>
    </HuGoThemeProvider>
  );
};

export default Journeys;