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

import { IconWorld } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import TaskFocusHeader from '@material-hu/components/design-system/Header/TaskFocus';
import StateCard from '@material-hu/components/design-system/StateCard';
import Title from '@material-hu/components/design-system/Title';

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

import LoadingScreen from 'src/components/LoadingScreen';

import { recruitingRoutes } from '../../routes';
import {
  type GeneralConfigForm,
  type JobOffer,
  JobOfferStatus,
} from '../../types';
import { getJobStatusType } from '../../utils';
import { useHiringPipeline } from '../hooks/useHiringPipeline';
import { useHiringReasons } from '../hooks/useHiringReasons';
import { useJob } from '../hooks/useJob';
import { useJobApplicationForm } from '../hooks/useJobApplicationForm';
import { useJobBoards } from '../hooks/useJobBoards';
import { useJobPosting } from '../hooks/useJobPosting';
import { useJobPublicDescription } from '../hooks/useJobPublicDescription';
import { useRouteId } from '../hooks/useRouteId';
import {
  getApplicationFormSubsections,
  getGeneralConfigSections,
  getProcessStagesAnswers,
  getPublishAnswers,
} from '../utils';

import { DetailSectionSummary } from './components/DetailSectionSummary';

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

const JobDetail = ({ jobId, jobOffer }: JobDetailProps) => {
  const { t } = useLokaliseTranslation([
    'ats',
    'general',
    'careers_site',
    'backoffice_only',
  ]);
  const navigate = useNavigate();
  const { formatDate } = useFormatDate();

  const { hiringReasons } = useHiringReasons();
  const { backendHiringPipeline } = useHiringPipeline(jobId);
  const { publicDescription } = useJobPublicDescription(jobId);
  const { jobPosting } = useJobPosting({ jobId });
  const { hasJobBoards } = useJobBoards();
  const { jobApplicationForm } = useJobApplicationForm(jobId);

  const applicationFormSubsections = useMemo(
    () => getApplicationFormSubsections({ jobApplicationForm, t }),
    [jobApplicationForm, t],
  );

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

  const generalConfigValues = useMemo((): GeneralConfigForm => {
    const opening = jobOffer.jobOpenings?.[0];
    return {
      name: jobOffer.name,
      externalId: jobOffer.externalId,
      isTestJob: jobOffer.isTestJob,
      brand: jobOffer.brand,
      department: jobOffer.department,
      positionName: jobOffer.positionName,
      hireReasonId: opening?.hireReasonId
        ? { value: opening.hireReasonId, label: '' }
        : undefined,
      targetCloseDate: opening?.targetCloseDate
        ? new Date(opening.targetCloseDate)
        : null,
      targetEmployeeStartDate: opening?.targetEmployeeStartDate
        ? new Date(opening.targetEmployeeStartDate)
        : null,
    };
  }, [jobOffer]);

  return (
    <Stack sx={{ height: '100vh' }}>
      <Stack
        sx={{ flex: 0, width: '100%', position: 'sticky', top: 0, zIndex: 1 }}
      >
        <TaskFocusHeader
          title={t('job_application.job_details')}
          slotProps={{
            root: {
              sx: {
                '& .MuiStack-root:first-of-type': {
                  mr: 3,
                  '& .MuiStack-root': {
                    maxWidth: 684,
                    mr: 1,
                  },
                },
              },
            },
            title: {
              title: t('job_application.job_details'),
              withEllipsis: true,
              overflow: 'tooltip',
            },
            pill: {
              type: getJobStatusType(statusForUI),
            },
          }}
          pillLabel={t(`common.status.${statusForUI?.toLowerCase()}`)}
          onClose={() => navigate(recruitingRoutes.jobOffer(jobId))}
        />
      </Stack>
      <Stack
        sx={{
          flexGrow: 1,
          overflowY: 'auto',
          p: 4,
        }}
      >
        <Stack
          sx={{
            maxWidth: 1040,
            mx: 'auto',
            width: '100%',
            gap: 3,
            boxSizing: { xs: 'border-box', lg: 'content-box' },
            px: { xs: 2, md: 2, lg: 0 },
          }}
        >
          <Title
            variant="L"
            title={jobOffer.name}
            description={[
              `${t('backoffice_only:tali.metadata.id')}: ${jobId}`,
              jobOffer.createdAt
                ? t('common.created_at', {
                    date: formatDate(jobOffer.createdAt, 'dd/MM/yyyy'),
                  })
                : null,
              jobOffer.updatedAt
                ? t('common.updated_at', {
                    date: formatDate(jobOffer.updatedAt, 'dd/MM/yyyy HH:mm'),
                  })
                : null,
            ]
              .filter(Boolean)
              .join(' • ')}
          />

          <DetailSectionSummary
            title={t('job_offers.new.general_config.title')}
            sections={getGeneralConfigSections(
              generalConfigValues,
              t,
              formatDate,
              hiringReasons,
            )}
            action={{
              title: t('general:edit'),
              onClick: () =>
                navigate(
                  `${recruitingRoutes.editJobOffer(jobId)}?step=general_config`,
                ),
            }}
          />

          <DetailSectionSummary
            title={t('job_offers.new.stages.title')}
            items={getProcessStagesAnswers(backendHiringPipeline, t)}
            showDividers
          />

          {hasJobBoards &&
            (publicDescription ? (
              <DetailSectionSummary
                title={t('job_offers.new.publish.title')}
                sections={[
                  {
                    title: t('job_offers.new.publish.details.title'),
                    items: getPublishAnswers({ values: publicDescription, t }),
                  },
                  ...(applicationFormSubsections.length > 0
                    ? [
                        {
                          title: t('job_offers.new.publish.apply_form.title'),
                          subsections: applicationFormSubsections,
                        },
                      ]
                    : []),
                ]}
                action={{
                  title: t('general:edit'),
                  onClick: () =>
                    navigate(recruitingRoutes.publishJobOffer(jobId)),
                }}
              />
            ) : (
              <DetailSectionSummary title={t('job_offers.new.publish.title')}>
                <StateCard
                  title={t(
                    'job_offers.new.publish.empty_public_description.title',
                  )}
                  description={t(
                    'job_offers.new.publish.empty_public_description.description',
                  )}
                  slotProps={{
                    card: {
                      sx: {
                        backgroundColor: theme =>
                          theme.palette.new.background.elements.grey,
                      },
                    },
                  }}
                  icon={IconWorld}
                  primaryAction={{
                    label: t('common.create_job_posting'),
                    onClick: () => {
                      navigate(recruitingRoutes.publishJobOffer(jobId));
                    },
                  }}
                />
              </DetailSectionSummary>
            ))}
        </Stack>
      </Stack>
    </Stack>
  );
};

const JobDetailWithTheme = () => {
  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 && (
        <JobDetail
          jobId={jobId}
          jobOffer={jobOffer}
        />
      )}
    </HuGoThemeProvider>
  );
};

export default JobDetailWithTheme;