import { Navigate, useNavigate } from 'react-router-dom';

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

import TaskFocusHeader from '@material-hu/components/design-system/Header/TaskFocus';
import useSnackbar from '@material-hu/components/design-system/Snackbar';

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

import LoadingScreen from 'src/components/LoadingScreen';

import { Footer } from '../../components/Footer';
import { recruitingRoutes } from '../../routes';
import { type JobOffer, JobOfferStatus } from '../../types';
import { getJobStatusType } from '../../utils';
import { useGeneralConfigSection } from '../hooks/useGeneralConfigSection';
import { useJob } from '../hooks/useJob';
import { useJobPosting } from '../hooks/useJobPosting';
import { useRouteId } from '../hooks/useRouteId';
import { GeneralConfigStep } from '../JobOfferForm/components/GeneralConfigStep';

type JobOfferEditProps = {
  jobId: number;
  jobOffer: JobOffer;
};

const JobOfferEdit = ({ jobId, jobOffer }: JobOfferEditProps) => {
  const { t } = useLokaliseTranslation(['ats', 'general']);
  const navigate = useNavigate();
  const { enqueueSnackbar } = useSnackbar();

  const { jobPosting } = useJobPosting({ jobId });
  const generalConfigSection = useGeneralConfigSection(jobOffer);

  const hasJobPosting = !!jobPosting;
  const statusForUI = hasJobPosting
    ? JobOfferStatus.PUBLISHED
    : (jobOffer.status ?? JobOfferStatus.DRAFT);

  const title = `${t('general:edit')} ${t('job_offers.new.general_config.title')}`;

  const onSave = () => {
    generalConfigSection.onSave((showAlert: boolean) => {
      if (showAlert) {
        enqueueSnackbar({
          variant: 'success',
          title: t('job_offers.alerts.saved_changes'),
        });
      }
      navigate(recruitingRoutes.jobDetail(jobId));
    })();
  };

  return (
    <Stack sx={{ height: '100vh', minHeight: 0, overflow: 'hidden' }}>
      {/* Header sticky section */}
      <Stack
        sx={{
          flexShrink: 0,
          position: 'sticky',
          top: 0,
          zIndex: 1,
        }}
      >
        <TaskFocusHeader
          title={title}
          slotProps={{
            title: {
              title,
              withEllipsis: true,
              overflow: 'tooltip',
            },
            root: {
              sx: {
                '& .MuiStack-root:first-of-type': {
                  mr: 3,
                  '& .MuiStack-root': {
                    maxWidth: 684,
                    mr: 1,
                  },
                },
              },
            },
            pill: {
              type: getJobStatusType(statusForUI),
            },
          }}
          pillLabel={t(`common.status.${statusForUI?.toLowerCase()}`)}
          onClose={() => navigate(recruitingRoutes.jobDetail(jobId))}
        />
      </Stack>
      <Stack sx={{ flex: 1, overflow: 'auto', width: '100%' }}>
        <Stack
          sx={{
            p: 4,
            width: '100%',
            maxWidth: 1040,
            mx: 'auto',
          }}
        >
          <GeneralConfigStep
            form={generalConfigSection.form}
            hiringReasons={generalConfigSection.hiringReasons}
          />
        </Stack>
      </Stack>
      <Stack>
        <Footer
          back={{
            label: t('general:cancel'),
            onClick: () => navigate(recruitingRoutes.jobDetail(jobId)),
          }}
          next={{
            label: t('general:save_changes'),
            onClick: onSave,
            isLoading: generalConfigSection.isLoading,
            disabled:
              !generalConfigSection.form.formState.isValid ||
              !generalConfigSection.form.formState.isDirty,
          }}
          sx={{ pl: 0 }}
        />
      </Stack>
    </Stack>
  );
};

const JobOfferEditWithTheme = () => {
  const HuGoThemeProvider = useHuGoTheme();
  const jobId = useRouteId({
    fallbackRoute: recruitingRoutes.offers(),
    routeParam: 'jobOfferId',
  });
  const { jobOffer, isLoading } = useJob(jobId);

  if (!jobId) return null;

  if (!jobOffer && !isLoading) {
    return (
      <Navigate
        to={recruitingRoutes.offers()}
        replace
      />
    );
  }

  return (
    <HuGoThemeProvider>
      {isLoading && <LoadingScreen />}
      {jobOffer && !isLoading && (
        <JobOfferEdit
          jobId={jobId}
          jobOffer={jobOffer}
        />
      )}
    </HuGoThemeProvider>
  );
};

export default JobOfferEditWithTheme;