/**
 * @deprecated — Hugo equivalent exists at `@material-hu/components/composed-components/ApprovalStepsList`
 * but the component itself needs fixes before it can fully replace this one.
 * The Hugo version also exports `FormApprovalStepsList` via `…/ApprovalStepsList/form`.
 *
 * Before migrating, some issues to solve beforehand on the material-hu counterpart
 * 1. FormSegmentationGroupSelector on useApprovalStepDrawer should be replaced with a material-hu audience component
 * 2. Segmentation should be passed as prop, either data or service to execute
 * 3. Translations
 *  3.1. Local scope: Use fixed keys and then only pass a translate function with the corresponding namespaces loaded as prop
 *  3.2. hu-translations: Reorganize current approval_requests/xxx.json (move them to material-hu namespace)
 *
 * API inconsistencies
 * 1. `isLoadingSteps` → `isLoading`
 *  Use isLoadingSteps
 * 2.`maxApprovalSteps` prop removed — hardcoded to 3 in Hugo version
 *  New requirement, step limit if needed should be optional
 */
import { useCallback } from 'react';

import { useModal } from '@material-hu/hooks/useModal';
import { IconPlus } from '@material-hu/icons/tabler';
import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';

import Alert from '@material-hu/components/design-system/Alert';
import Button from '@material-hu/components/design-system/Buttons/Button';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import Dialog from '@material-hu/components/design-system/Dialog';
import Title from '@material-hu/components/design-system/Title';

import useSegmentationGroups from 'src/hooks/queryHooks/useSegmentationGroups';
import { useLokaliseTranslation } from 'src/utils/i18n';

import ApprovalStepCards from './components/ApprovalStepCards';
import ApproversSkeleton from './components/ApproversSkeleton';
import {
  type ApprovalStep,
  type ApprovalStepsListProps,
  type SimpleSegmentationItem,
} from './types';
import { useApprovalStepDrawer } from './useApprovalStepDrawer';
import {
  approvalStepsToInput,
  useEnrichedApprovalSteps,
} from './useEnrichedApprovalSteps';

const ApprovalStepsList = ({
  approvalUsers,
  setApprovalUsers,
  error,
  approvalStepDrawerProps,
  cardProps,
  isLoadingSteps,
  maxApprovalSteps,
}: ApprovalStepsListProps) => {
  const { t } = useLokaliseTranslation('approval_requests');

  const enrichedSteps = useEnrichedApprovalSteps({
    inputSteps: approvalUsers,
    usersService: approvalStepDrawerProps.usersService,
    usersMapping: approvalStepDrawerProps.usersMapping,
  });

  const setApprovalUsersEnriched = useCallback(
    (steps: ApprovalStep[]) => {
      setApprovalUsers(approvalStepsToInput(steps));
    },
    [setApprovalUsers],
  );

  const { approvalStepDrawer, showApprovalStepDrawer } = useApprovalStepDrawer({
    setApprovalUsers: setApprovalUsersEnriched,
    approvalUsers: enrichedSteps,
    usersService: approvalStepDrawerProps.usersService,
    drawerProps: { onSave: approvalStepDrawerProps.onSave },
  });

  const canAddMoreSteps =
    !maxApprovalSteps || enrichedSteps.length < maxApprovalSteps;

  const handleAddStep = () => {
    if (canAddMoreSteps) {
      showApprovalStepDrawer({ stepIndex: enrichedSteps.length });
    }
  };

  const handleRemoveStep = (removedIndex: number) => {
    const updatedInput = approvalUsers.filter(
      (_, index) => index !== removedIndex,
    );
    setApprovalUsers(updatedInput);
    cardProps?.menuProps?.onRemoveStep?.(removedIndex);
  };

  const handleEditStep = (index: number) => {
    showApprovalStepDrawer({ stepIndex: index });
  };

  const {
    modal: deleteStepModal,
    closeModal: closeDeleteStepModal,
    showModal: showDeleteStepModal,
  } = useModal<{ stepIndexToRemove: number }>(
    ({ stepIndexToRemove }) => (
      <Dialog
        title={t('step_configuration.delete_step_question')}
        textBody={t('step_configuration.delete_step_hint')}
        onClose={closeDeleteStepModal}
        primaryButtonProps={{
          children: t('general:confirm'),
          onClick: () => {
            handleRemoveStep(stepIndexToRemove);
            closeDeleteStepModal();
          },
        }}
        secondaryButtonProps={{
          children: t('general:cancel'),
          onClick: closeDeleteStepModal,
        }}
      />
    ),
    {},
  );

  const { data: segmentationData = [], isLoading: isLoadingSegmentationData } =
    useSegmentationGroups<SimpleSegmentationItem[]>(
      {
        select: r =>
          r.data.flatMap(group =>
            group.items.map(item => ({
              id: item.id,
              usersCount: Number(item.usersCount || 0),
            })),
          ),
      },
      true,
      false,
    );

  const isLoading = isLoadingSteps || isLoadingSegmentationData;

  return (
    <Stack sx={{ gap: 2 }}>
      {deleteStepModal}
      {approvalStepDrawer}
      <Title
        variant="M"
        title={t('step_configuration.approval_steps')}
        description={t('step_configuration.approval_steps_description')}
      />
      <CardContainer fullWidth>
        <Stack sx={{ gap: 2 }}>
          {!isLoading && (
            <>
              {enrichedSteps.length > 0 && (
                <ApprovalStepCards
                  approvalUsers={enrichedSteps}
                  segmentationData={segmentationData}
                  cardProps={{
                    menuProps: {
                      handleRemoveStep: index => {
                        showDeleteStepModal({ stepIndexToRemove: index });
                      },
                      handleEditStep,
                    },
                  }}
                />
              )}
              {enrichedSteps.length > 0 && canAddMoreSteps && <Divider />}
              {canAddMoreSteps && (
                <Button
                  variant="secondary"
                  size="large"
                  sx={{ width: '100%' }}
                  onClick={handleAddStep}
                  startIcon={<IconPlus />}
                >
                  {t('step_configuration.add_approval_step')}
                </Button>
              )}
            </>
          )}
          {isLoading && <ApproversSkeleton />}
          {error && (
            <Alert
              severity="error"
              title={error}
            />
          )}
        </Stack>
      </CardContainer>
    </Stack>
  );
};

export default ApprovalStepsList;