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

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

import HuTabs, {
  type TabsProps,
} from '@material-hu/components/design-system/Tabs';
import HuTitle from '@material-hu/components/design-system/Title';

import useAuth from 'src/contexts/JWTContext';
import useFeatureFlag from 'src/hooks/useFeatureFlag';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { FeatureFlags } from 'src/types/featureFlags';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { LogEvents, logEvent } from 'src/utils/logging';
import {
  CerberusUserPermissions,
  hasAllPermissions,
  hasAnyPermissions,
  UserPermissions,
} from 'src/utils/permissions';

import ActivityInsights from './components/Activity';
import GenericInsights from './components/Generic';
import PeopleInsights from './components/People';

const TabComponents = {
  PEOPLE: PeopleInsights,
  ACTIVITY: ActivityInsights,
  GENERIC: GenericInsights,
};

const tabToEvent = {
  PEOPLE: LogEvents.INSIGHTS_USERS_USE,
  ACTIVITY: LogEvents.INSIGHTS_ACTIVITY_USE,
  GENERIC: LogEvents.INSIGHTS_MODULES_USE,
};

const Insights = () => {
  const HuGoThemeProvider = useHuGoTheme();
  const { t } = useLokaliseTranslation('insights');
  const { permissions } = useAuth();
  const isCerberusEnabled = useFeatureFlag(FeatureFlags.CERBERUS_ENABLED);

  const canViewInsights = isCerberusEnabled
    ? hasAllPermissions(permissions, [CerberusUserPermissions.MANAGE_INSIGHTS])
    : hasAnyPermissions(permissions, [
        UserPermissions.MANAGE_INSTANCE,
        UserPermissions.MANAGE_USERS,
      ]);

  const [selectedTab, setSelectedTab] = useState(
    canViewInsights ? 'PEOPLE' : 'GENERIC',
  );

  const insightsTabs = canViewInsights
    ? [
        { label: t('PEOPLE'), value: 'PEOPLE' },
        { label: t('ACTIVITY'), value: 'ACTIVITY' },
        { label: t('GENERIC'), value: 'GENERIC' },
      ]
    : [{ label: t('GENERIC'), value: 'GENERIC' }];

  useEffect(() => {
    logEvent(LogEvents.INSIGHTS_USERS_USE);
  }, []);

  const handleTabChange: TabsProps['onTabChange'] = value => {
    logEvent(tabToEvent[value as keyof typeof tabToEvent]);
    setSelectedTab(value);
  };

  const SelectedComponent =
    TabComponents[selectedTab as keyof typeof TabComponents];

  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{formatTitle(t('INSIGHTS'))}</title>
      </Helmet>
      <Stack
        sx={{
          bgcolor: theme => theme.palette.hugoBackground?.neutralBg,
          px: 12,
          py: 5,
          gap: 2,
          minHeight: '100%',
        }}
      >
        <Stack>
          <HuTitle
            variant="L"
            title={t('INSIGHTS')}
            description={t('INSIGHTS_INFO')}
          />
        </Stack>
        <HuTabs
          defaultValue={selectedTab}
          tabs={insightsTabs}
          onTabChange={handleTabChange}
        />
        <SelectedComponent />
      </Stack>
    </HuGoThemeProvider>
  );
};

export default Insights;