import { useRef, useState } from 'react';
import { Helmet } from 'react-helmet-async';
import { FormProvider, useForm } from 'react-hook-form';
import { useQuery } from 'react-query';
import { useNavigate, useParams } from 'react-router';
import { useSearchParams } from 'react-router-dom';

import { isNil } from 'lodash-es';
import EditIcon from '@material-hu/icons/material/Edit';
import VisibilityIcon from '@material-hu/icons/material/Visibility';
import Stack from '@material-hu/mui/Stack';
import { colorPalette } from '@material-hu/theme/hugo/colors';

import TaskFocusLayout from '@material-hu/components/composed-components/TaskFocusLayout';

import useFeatureFlag from 'src/hooks/useFeatureFlag';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import * as performanceService from 'src/services/performanceService';
import { FeatureFlags } from 'src/types/featureFlags';
import { ReviewDirection } from 'src/types/performance';
import { insertIf } from 'src/utils/arrayUtils';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CenteredCircularProgress from 'src/components/CircularProgress';

import { reviewsKeys } from '../../../queries';
import { reviewRoutes } from '../../../routes';
import {
  isCycleEditable,
  isCycleFinished,
  isCycleInProgress,
  isCyclePending,
} from '../../../utils';

import AnalysisStep from './AnalysisStep';
import CalibrationStep from './CalibrationStep';
import StepsSideBar from './components/StepsSideBar';
import { CYCLE_PAGE_STEPS, CYCLE_STEP_QUERY_PARAM } from './constants';
import DeliveriesStep from './DeliveriesStep';
import PeerStep from './PeerStep';
import ReviewStep from './ReviewStep';
import { type CyclePageStep } from './types';
import { hasPeerOrExternalDirection } from './utils';

const Cycle = () => {
  const { t } = useLokaliseTranslation('performance');
  const navigate = useNavigate();
  const HuGoThemeProvider = useHuGoTheme();

  const { id } = useParams();
  const cycleId = parseInt(id || '0');
  const [searchParams] = useSearchParams();
  const initialStepFromUrl = (() => {
    const raw = searchParams.get(CYCLE_STEP_QUERY_PARAM)?.toUpperCase();
    const allowed = Object.values(CYCLE_PAGE_STEPS) as string[];
    return raw && allowed.includes(raw) ? (raw as CyclePageStep) : null;
  })();
  const hasInitialUrlStep = useRef(!!initialStepFromUrl);
  const [activeStep, setActiveStep] = useState<CyclePageStep>(
    initialStepFromUrl ?? CYCLE_PAGE_STEPS.PEER_SELECTION,
  );

  const isCalibrationEnabled = useFeatureFlag(
    FeatureFlags.PERFORMANCE_REVIEW_CALIBRATION_ENABLED,
  );

  const form = useForm({
    defaultValues: {
      name: '',
    },
    mode: 'onChange',
  });

  const {
    data: cycle,
    isLoading: cycleLoading,
    refetch,
  } = useQuery(
    reviewsKeys.cycle(cycleId, false),
    () => performanceService.getReviewCycle(cycleId, false),
    {
      select: r => r.data,
      enabled: !!cycleId,
      onSuccess: r => {
        if (hasInitialUrlStep.current) return;
        if (isCycleInProgress(r) || isCyclePending(r))
          setActiveStep(
            hasPeerOrExternalDirection(r)
              ? CYCLE_PAGE_STEPS.REVIEW
              : CYCLE_PAGE_STEPS.PEER_SELECTION,
          );
        if (isCycleFinished(r))
          setActiveStep(
            hasPeerOrExternalDirection(r)
              ? CYCLE_PAGE_STEPS.DELIVERIES
              : CYCLE_PAGE_STEPS.REVIEW,
          );
      },
    },
  );

  const cycleStats = useQuery(
    reviewsKeys.getReviewStats(cycleId),
    () => performanceService.getReviewStats(cycleId),
    {
      select: r => r.data,
      enabled: !!cycleId,
    },
  );

  if (cycleLoading || isNil(cycle)) {
    return (
      <CenteredCircularProgress
        centered
        sx={{ mt: 6 }}
      />
    );
  }

  const handleSelectStep = (stepId: CyclePageStep) => {
    setActiveStep(stepId);
  };

  const showAnalysisStep =
    cycle.formTemplates?.some(ft => ft.withScore) || false;

  const isEditable = isCycleEditable(cycle);
  const isInProgress = isCycleInProgress(cycle);
  const isFinished = isCycleFinished(cycle);
  const canEditLimited = isInProgress || isFinished;
  const canEditCycle = isEditable || canEditLimited;

  const isSubordinatesWithGoalScore = cycle.formTemplates?.some(
    ft =>
      ft.evaluationType === ReviewDirection.SUBORDINATE_REVIEW &&
      ft.withGoalScore &&
      !!ft.template?.formTemplate,
  );

  const showNineBox =
    ((isInProgress || isFinished) && isSubordinatesWithGoalScore) || false;

  const showCalibrationStep =
    isInProgress &&
    isCalibrationEnabled &&
    (cycle.formTemplates?.some(
      ft =>
        ft.evaluationType === ReviewDirection.SUBORDINATE_REVIEW &&
        !!ft.withCalibration,
    ) ??
      false);

  const steps = [
    ...insertIf(hasPeerOrExternalDirection(cycle), {
      id: CYCLE_PAGE_STEPS.PEER_SELECTION,
      label: t('form.cycle_steps.selection.title'),
    }),
    {
      id: CYCLE_PAGE_STEPS.REVIEW,
      label: t('cycles.steps.reviews'),
    }, // Completed when all reviews completed
    ...insertIf(showCalibrationStep, {
      id: CYCLE_PAGE_STEPS.CALIBRATION,
      label: t('cycles.steps.calibration'),
    }),
    {
      id: CYCLE_PAGE_STEPS.DELIVERIES,
      label: t('form.cycle_steps.deliver.title'),
    }, // Completed when all reviews delivered ok
    ...insertIf(showAnalysisStep, {
      id: CYCLE_PAGE_STEPS.ANALYSIS,
      label: t('cycles.steps.analysis'),
    }),
  ];

  const currentStep = steps.find(step => step.id === activeStep) || steps[0];

  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{formatTitle(t('cycles.new_cycle'))}</title>
      </Helmet>
      <TaskFocusLayout
        slotProps={{
          header: {
            title: cycle.name,
            onClose: () => navigate(reviewRoutes.cyclesBase()),
            mainActions: [
              ...(canEditLimited || !canEditCycle
                ? [
                    {
                      key: 'view-config',
                      id: 'view-configuration-button',
                      startIcon: <VisibilityIcon fontSize="small" />,
                      children: t('cycles.view_configuration'),
                      size: 'small' as const,
                      onClick: () =>
                        navigate(reviewRoutes.newCycle(cycle.id), {
                          state: {
                            backLink: reviewRoutes.cycle(cycle.id),
                            readonly: true,
                          },
                        }),
                    },
                  ]
                : []),
              ...(canEditCycle
                ? [
                    {
                      key: 'edit-cycle',
                      id: 'edit-cycle-button',
                      startIcon: <EditIcon fontSize="small" />,
                      children: t('cycles.edit_cycle'),
                      size: 'small' as const,
                      onClick: () =>
                        navigate(reviewRoutes.newCycle(cycle.id), {
                          state: {
                            backLink: reviewRoutes.cycle(cycle.id),
                            readonly: false,
                            ...(canEditLimited ? { limitedEdit: true } : {}),
                          },
                        }),
                    },
                  ]
                : []),
            ],
          },
        }}
      >
        <FormProvider {...form}>
          <Stack
            direction="row"
            gap={2}
            sx={{
              flex: 1,
              backgroundColor: colorPalette.hugoBackground.neutralBg,
            }}
          >
            <StepsSideBar
              steps={steps}
              currentStep={currentStep.id}
              onSelectStep={handleSelectStep}
            />
            <Stack
              sx={{ flex: 1, justifyContent: 'space-between', paddingY: 2 }}
            >
              {currentStep.id === CYCLE_PAGE_STEPS.REVIEW && (
                <ReviewStep
                  cycle={cycle}
                  cycleStats={cycleStats}
                  refetch={refetch}
                />
              )}
              {currentStep.id === CYCLE_PAGE_STEPS.DELIVERIES && (
                <DeliveriesStep cycle={cycle} />
              )}
              {currentStep.id === CYCLE_PAGE_STEPS.PEER_SELECTION && (
                <PeerStep
                  cycle={cycle}
                  refetch={refetch}
                />
              )}
              {currentStep.id === CYCLE_PAGE_STEPS.CALIBRATION && (
                <CalibrationStep cycleId={cycleId} />
              )}
              {currentStep.id === CYCLE_PAGE_STEPS.ANALYSIS && (
                <AnalysisStep
                  showNineBox={showNineBox}
                  cycleId={cycleId}
                />
              )}
            </Stack>
          </Stack>
        </FormProvider>
      </TaskFocusLayout>
    </HuGoThemeProvider>
  );
};

export default Cycle;