import { useEffect } from 'react';
import { FormProvider, useWatch } from 'react-hook-form';
import { useLocation, useNavigate } from 'react-router';

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

import SideStepper from '@material-hu/components/deprecated/SideStepper';

import useFeatureFlag from 'src/hooks/useFeatureFlag';
import useUnsavedWarning from 'src/hooks/useUnsavedWarning';
import { FeatureFlags } from 'src/types/featureFlags';
import { type CycleStep, type SideStepperStep } from 'src/types/performance';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CenteredCircularProgress from 'src/components/CircularProgress';

import { useReviewedUsersStatsQuery } from '../../../hooks/useStatsQuery';
import { reviewRoutes } from '../../../routes';
import { useNavigation } from '../../context/NavigationContext';
import { useCycleEditRestrictions } from '../../context/useCycleEditRestrictions';
import { useCycleForm } from '../../hooks/useCycleForm';
import { useCycleScoreForm } from '../../hooks/useCycleScoreForm';
import { useCycleUpdate } from '../../hooks/useCycleUpdate';
import { useValidation } from '../../hooks/useValidation';

import CycleEditActions from './CycleEditActions';
import CycleEditHeader from './CycleEditHeader';

const CycleEditContent = () => {
  const { t } = useLokaliseTranslation(['performance', 'general']);
  const navigate = useNavigate();
  const { state } = useLocation() as { state: { backLink: string } };
  const { isReadOnly, isLimitedEdit } = useCycleEditRestrictions();

  const {
    activeStep,
    activeSubstep,
    previousStep,
    currentStep,
    nextStep,
    setSteps,
    isGeneralStep,
    isSettingsStep,
    isValidationStep,
    isGoalStep,
    isDirectionStep,
    isOtherSettingsStep,
    isDirectionWeightsStep,
  } = useNavigation();

  const {
    cycleForm,
    isDirty: isCycleFormDirty,
    steps: stepsConfig,
    cycleLoading,
    refetch,
    cycleId,
    templateIds,
  } = useCycleForm();

  const userStatsQuery = useReviewedUsersStatsQuery(cycleId, isValidationStep);

  const { scoreForm } = useCycleScoreForm();

  const name = useWatch({ control: cycleForm.control, name: 'name' });
  const canBeSharedBeforeCycleFinish = useWatch({
    control: cycleForm.control,
    name: 'canBeSharedBeforeCycleFinish',
    defaultValue: false,
  });
  const withCalibration = useWatch({
    control: scoreForm.control,
    name: 'withCalibration',
    defaultValue: false,
  });
  const isCalibrationEnabled = useFeatureFlag(
    FeatureFlags.PERFORMANCE_REVIEW_CALIBRATION_ENABLED,
  );

  const { modal } = useUnsavedWarning(undefined, !isCycleFormDirty);

  const { continueInvalid } = useValidation({
    isDirectionStep,
    isSettingsStep,
    isGoalStep,
    isOtherSettingsStep,
    currentStep,
    activeSubstep,
    cycleForm,
    scoreForm,
    isValidationStep,
    isDirectionWeightsStep,
    isReadOnly,
    isLimitedEdit,
  });

  const { handleContinue } = useCycleUpdate({
    cycleId,
    form: cycleForm,
    scoreForm,
    isGeneralStep,
    isSettingsStep,
    isValidationStep,
    isOtherSettingsStep,
    isDirectionWeightsStep,
    nextStep,
    refetch,
    userStatsRefetch: userStatsQuery.refetch,
    isReadOnly,
    isLimitedEdit,
  });

  const continueLabel = !isCycleFormDirty
    ? t('general:continue')
    : t('form.save_and_continue');

  const Component = currentStep?.substeps
    ? currentStep.substeps[activeSubstep]?.Component
    : currentStep?.Component;

  const hasValidComponent =
    currentStep &&
    (currentStep.substeps
      ? currentStep.substeps?.[activeSubstep]?.Component
      : currentStep.Component);

  useEffect(() => {
    setSteps(stepsConfig as CycleStep[]);
  }, [stepsConfig, setSteps]);

  if (cycleLoading) return <CenteredCircularProgress centered />;

  const renderComponent = () => {
    if (!hasValidComponent || !Component) return null;

    if (isOtherSettingsStep || isDirectionWeightsStep) {
      return (
        <FormProvider {...scoreForm}>
          <Component
            cycleId={cycleId}
            templateIds={templateIds}
            canBeSharedBeforeCycleFinish={canBeSharedBeforeCycleFinish}
          />
        </FormProvider>
      );
    }

    return (
      <Component
        userStatsQuery={userStatsQuery}
        withCalibration={withCalibration}
        isCalibrationEnabled={isCalibrationEnabled}
      />
    );
  };

  return (
    <>
      {modal}
      <FormProvider {...cycleForm}>
        <CycleEditHeader
          name={name}
          onGoBack={() =>
            navigate(state?.backLink || reviewRoutes.cyclesBase())
          }
        />
        <Stack
          sx={{
            px: 3,
            pt: 5,
            pb: 1,
            backgroundColor: 'background.default',
            flexDirection: 'row',
            gap: 4,
          }}
        >
          <SideStepper
            steps={stepsConfig as SideStepperStep[]}
            stepperProps={{ activeStep }}
            activeSubstep={activeSubstep}
          />
          <Stack sx={{ flex: 1, justifyContent: 'space-between' }}>
            <Stack sx={{ ml: '7%', maxWidth: 900, minHeight: '65vh' }}>
              {renderComponent()}
            </Stack>
            <CycleEditActions
              showGoBack={activeStep > 0 || activeSubstep > 0}
              onGoBack={previousStep}
              onContinue={handleContinue}
              continueDisabled={!cycleForm.formState.isValid || continueInvalid}
              continueLabel={
                isValidationStep ? t('general:FINISH') : continueLabel
              }
            />
          </Stack>
        </Stack>
      </FormProvider>
    </>
  );
};

export default CycleEditContent;