import { useFormContext, useWatch } from 'react-hook-form';
import { type UseQueryResult } from 'react-query';

import { isNil } from 'lodash-es';
import KeyboardArrowDownIcon from '@material-hu/icons/material/KeyboardArrowDown';
import Accordion from '@material-hu/mui/Accordion';
import AccordionDetails from '@material-hu/mui/AccordionDetails';
import AccordionSummary from '@material-hu/mui/AccordionSummary';
import Alert from '@material-hu/mui/Alert';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';
import { useDialogLayer } from '@material-hu/components/layers/Dialogs';

import { REVIEWS_BACKGROUND } from 'src/pages/dashboard/Performance/constants';
import { hasSubordinateReview } from 'src/pages/dashboard/Performance/utils';
import {
  type CycleFormValues,
  type ReviewedUsersStats,
  SpecialQuestionType,
} from 'src/types/performance';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CenteredCircularProgress from 'src/components/CircularProgress';
import EmployeesLeaderModal from 'src/components/EmployeesLeaderModal';
import SpecialTemplateChip from 'src/components/TemplatesAutocomplete/SpecialTemplateChip';

import { useCycleEditRestrictions } from '../../context/useCycleEditRestrictions';

import { REVIEW_DIRECTION_MAP } from './constants';
import { getScheduleSteps, getValidationText, hasLeaderReview } from './utils';

type Props = {
  userStatsQuery: UseQueryResult<ReviewedUsersStats, unknown>;
  withCalibration?: boolean;
  isCalibrationEnabled?: boolean;
};

const ValidationStep = ({
  userStatsQuery,
  withCalibration = false,
  isCalibrationEnabled = false,
}: Props) => {
  const { t } = useLokaliseTranslation(['performance', 'general']);
  const { control } = useFormContext<CycleFormValues>();
  const { disableRestrictedFields } = useCycleEditRestrictions();

  const formTemplates = useWatch({
    control,
    name: 'formTemplates',
  });
  const { data: stats, isLoading } = userStatsQuery;

  const { openDialog, closeDialog } = useDialogLayer();

  const openEmployeesDialog = () => {
    openDialog({
      content: (
        <EmployeesLeaderModal
          ids={stats?.userIdsWithoutBosses || []}
          onClose={() => closeDialog()}
        />
      ),
    });
  };

  if (isLoading || isNil(stats)) return <CenteredCircularProgress centered />;

  return (
    <Stack sx={{ gap: 2, pb: 2 }}>
      <Typography variant="h4">
        {t('form.cycle_steps.validation.title')}
      </Typography>
      <Typography
        variant="body2"
        sx={{ pb: 2 }}
      >
        <Stack>{getValidationText(formTemplates, t)}</Stack>
      </Typography>
      <Stack sx={{ gap: 2 }}>
        <Accordion
          elevation={1}
          defaultExpanded
          sx={{ border: '1px solid #f0f0f0' }}
        >
          <AccordionSummary expandIcon={<KeyboardArrowDownIcon />}>
            <Typography variant="h5">{t('summary.title')}</Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
              <Typography variant="subtitle2">
                {t('form.cycle_steps.validation.employees_evaluate')}
              </Typography>
              <Typography variant="body2">{stats.amountOfUsers}</Typography>
            </Stack>
            {(hasSubordinateReview(formTemplates) ||
              hasLeaderReview(formTemplates)) && (
              <Stack
                sx={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  gap: 1,
                  mt: 2,
                }}
              >
                <Typography variant="subtitle2">
                  {t('form.cycle_steps.validation.reviewers')}
                </Typography>
                {hasSubordinateReview(formTemplates) && (
                  <Alert
                    severity={
                      stats.amountOfUsersWithoutBosses ? 'warning' : 'success'
                    }
                    icon={false}
                    sx={{ py: 0 }}
                  >
                    {!!stats.amountOfUsersWithoutBosses && (
                      <>
                        <Button
                          variant="text"
                          onClick={() => openEmployeesDialog()}
                          color="inherit"
                          disabled={disableRestrictedFields}
                          sx={{
                            '&:hover': {
                              backgroundColor: 'transparent',
                            },
                            p: 0,
                          }}
                        >
                          <Typography
                            display="inline"
                            variant="body2"
                            color="warning"
                            sx={{
                              textDecoration: 'underline',
                            }}
                          >
                            {t('form.cycle_steps.validation.employees', {
                              count: stats.amountOfUsersWithoutBosses,
                            })}
                          </Typography>
                        </Button>
                        <Typography
                          display="inline"
                          variant="body2"
                        >
                          {t('form.cycle_steps.validation.no_leader', {
                            count: stats.amountOfUsersWithoutBosses,
                          })}
                        </Typography>
                      </>
                    )}
                    {!stats.amountOfUsersWithoutBosses && (
                      <Typography variant="body2">
                        {t('form.cycle_steps.validation.all_leader')}
                      </Typography>
                    )}
                  </Alert>
                )}
                {!hasSubordinateReview(formTemplates) &&
                  hasLeaderReview(formTemplates) && (
                    <Alert
                      severity="info"
                      icon={false}
                      sx={{ py: 0, mt: 1 }}
                    >
                      <Typography
                        display="inline"
                        variant="body2"
                      >
                        {t(
                          'form.cycle_steps.validation.reviewers_summary_boss_review',
                        )}
                      </Typography>
                    </Alert>
                  )}
              </Stack>
            )}
          </AccordionDetails>
        </Accordion>
        <Accordion
          elevation={1}
          defaultExpanded
          sx={{ border: '1px solid #f0f0f0' }}
        >
          <AccordionSummary expandIcon={<KeyboardArrowDownIcon />}>
            <Typography variant="h5">{t('general:SETTINGS')}</Typography>
          </AccordionSummary>
          <AccordionDetails sx={{ pt: 0 }}>
            {formTemplates.map((ft, idx) => (
              <Stack
                key={idx}
                sx={{ mb: 2, gap: 1 }}
              >
                <Typography
                  variant="subtitle2"
                  fontSize="16px"
                >
                  {t(REVIEW_DIRECTION_MAP[ft.evaluationType].translationKey)}
                </Typography>
                <Stack
                  sx={{ flexDirection: 'row', alignItems: 'center', gap: 2 }}
                >
                  <Typography variant="subtitle2">
                    {t('form.cycle_steps.template.title')}
                  </Typography>
                  <Stack
                    sx={{
                      flexDirection: 'row',
                      alignItems: 'center',
                      gap: 1,
                      flexGrow: 1,
                    }}
                  >
                    <Typography
                      variant="body2"
                      color="textSecondary"
                    >
                      {ft.template?.title}
                    </Typography>
                    <Stack sx={{ gap: 1, flexDirection: 'row' }}>
                      {!!ft.template?.goalsProgressMode && (
                        <SpecialTemplateChip type={SpecialQuestionType.GOAL} />
                      )}
                      {!isNil(ft.template?.competenciesQuestionTemplateId) && (
                        <SpecialTemplateChip
                          type={SpecialQuestionType.COMPETENCIES}
                        />
                      )}
                    </Stack>
                  </Stack>
                </Stack>
              </Stack>
            ))}
            {isCalibrationEnabled && withCalibration && (
              <Stack
                sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}
              >
                <Typography variant="subtitle2">
                  {t('form.cycle_steps.other_settings.calibration')}:
                </Typography>
                <Typography variant="body2">{t('general:enabled')}</Typography>
              </Stack>
            )}
          </AccordionDetails>
        </Accordion>
      </Stack>
      <Alert
        icon={false}
        sx={{
          py: 2,
          px: 3,
          backgroundColor: REVIEWS_BACKGROUND,
          borderRadius: 3,
          gap: 2,
        }}
      >
        <Typography
          variant="h5"
          color="textPrimary"
          sx={{ mb: 2 }}
        >
          {t('form.cycle_steps.validation.schedule')}
        </Typography>
        {getScheduleSteps(formTemplates, t).map((scheduleStep, index) => (
          <Typography
            key={index}
            variant="body2"
            color="textSecondary"
            sx={{ mb: 2 }}
          >
            {`${index + 1}. ${scheduleStep.label}`}
          </Typography>
        ))}
      </Alert>
    </Stack>
  );
};

export default ValidationStep;