import { useState } from 'react';
import { Link } from 'react-router-dom';

import { times } from 'lodash-es';
import { type LoadingButtonProps } from '@material-hu/mui/lab/LoadingButton';
import Stack from '@material-hu/mui/Stack';

import HuDrawer from '@material-hu/components/design-system/Drawer';
import HuTitle from '@material-hu/components/design-system/Title';

import useMissingInfo from 'src/pages/dashboard/PeopleExperience/hooks/useMissingInfo';
import { MissingAttribute, type Survey } from 'src/types/peopleExperience';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { MAX_CONTENT_WIDTH } from '../../constants';
import { type SurveyFormStepBaseProps } from '../../types';
import StepLayout from '../StepLayout';

import MissingDataUsersList from 'src/pages/dashboard/PeopleExperience/components/MissingDataUsersList';
import SegmentationStatusCard from './components/SegmentationStatusCard';
import SegmentationStatusCardSkeleton from './components/SegmentationStatusCardSkeleton';
import { getGroupsSegments } from './utils';

type DataSegmentationStepProps = SurveyFormStepBaseProps & {
  surveyId: Survey['id'];
};

type Segment = {
  attributeId: MissingAttribute;
  attributeName: string;
  groupId?: number;
};

const DataSegmentationStep = ({
  surveyId,
  onNext,
  onBack,
}: DataSegmentationStepProps) => {
  const { t } = useLokaliseTranslation('people_experience');
  const [selectedSegment, setSelectedSegment] = useState<Segment | null>(null);

  const { data, isLoading } = useMissingInfo(surveyId);

  return (
    <StepLayout
      onNext={onNext}
      onBack={onBack}
    >
      <Stack sx={{ overflowY: 'auto', width: '100%' }}>
        <Stack
          sx={{
            maxWidth: MAX_CONTENT_WIDTH,
            width: '100%',
            gap: 3,
            margin: '0 auto',
            py: 4,
          }}
        >
          <HuTitle
            title={t('segmentation')}
            description={t('segmentation_description')}
          />
          {isLoading &&
            times(2, index => <SegmentationStatusCardSkeleton key={index} />)}
          {!isLoading && (
            <>
              <SegmentationStatusCard
                title={t('profile_fields')}
                onSelect={({ id, title }) =>
                  setSelectedSegment({ attributeId: id, attributeName: title })
                }
                segments={[
                  {
                    id: MissingAttribute.MANAGER,
                    title: t('manager'),
                    missingCount: data?.missingBossRelationships ?? 0,
                  },
                  {
                    id: MissingAttribute.HIRING_DATE,
                    title: t('hiring_date'),
                    missingCount: data?.missingHiringDate ?? 0,
                  },
                  {
                    id: MissingAttribute.BIRTHDAY_DATE,
                    title: t('birthday_date'),
                    missingCount: data?.missingBirthdate ?? 0,
                  },
                ]}
              />
              <SegmentationStatusCard
                title={t('community_segmentations')}
                onSelect={({ id, title }) =>
                  setSelectedSegment({
                    attributeId: MissingAttribute.SEGMENTATION_GROUP,
                    attributeName: title,
                    groupId: id,
                  })
                }
                segments={getGroupsSegments(data?.groups)}
              />
            </>
          )}
          <HuDrawer
            open={!!selectedSegment}
            onClose={() => setSelectedSegment(null)}
            title={t('data_segmentation')}
            primaryButtonProps={
              {
                children: t('update_information'),
                variant: 'secondary',
                LinkComponent: Link,
                to: '/users',
                target: '_blank',
                fullWidth: true,
              } as LoadingButtonProps
            }
          >
            <Stack sx={{ gap: 4 }}>
              <HuTitle
                title={selectedSegment?.attributeName}
                description={t('data_segmentation_description')}
              />
              {selectedSegment && (
                <MissingDataUsersList
                  attribute={selectedSegment.attributeId}
                  groupId={selectedSegment?.groupId}
                  surveyId={surveyId}
                />
              )}
            </Stack>
          </HuDrawer>
        </Stack>
      </Stack>
    </StepLayout>
  );
};

export default DataSegmentationStep;