import { FC, useEffect, useMemo, useState } from 'react';
import { FormProvider, UseFormReturn } from 'react-hook-form';
import { useQuery } from 'react-query';
import { useNavigate } from 'react-router';

import { useDrawerV2 } from '@material-hu/hooks/useDrawerV2';
import { IconChevronRight } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import HuAlert from '@material-hu/components/design-system/Alert';
import Button from '@material-hu/components/design-system/Buttons/Button';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuChips from '@material-hu/components/design-system/Chip';
import HuFormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import HuFormRadioButton from '@material-hu/components/design-system/RadioButton/RadioButton/form';
import HuTitle from '@material-hu/components/design-system/Title';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { regionKeys } from 'src/pages/dashboard/Regions/queries';
import * as regionService from 'src/services/regionsService';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { validateRequiredStringRule } from 'src/utils/validation';

import { MAX_DESC_LENGTH } from '../../constants';
import { timeTrackingRoutes } from '../../routes';
import SectionHeader from '../../SectionHeader';
import { kioskFields, TerminalFields } from '../form';

import InputSkeleton from './InputSkeleton';
import KioskSitesDrawer from './KioskSitesDrawer';
import SwitcherSkeleton from './SwitcherSkeleton';
import TerminalSiteSkeleton from './TerminalSiteSkeleton';

type Props = {
  isRunningMutation: boolean;
  submit: () => void;
  form: UseFormReturn<TerminalFields>;
  isFetchingInfo?: boolean;
  isEdit?: boolean;
};

const KioskSettingsLayout: FC<Props> = props => {
  const {
    form,
    isEdit = false,
    isFetchingInfo = false,
    isRunningMutation,
    submit,
  } = props;
  const selectedSiteId = form.watch(kioskFields.general.siteId);
  const [selectedSite, setSelectedSite] = useState<{
    id: number;
    name: string;
  } | null>(null);
  const { t } = useLokaliseTranslation(['time_tracker', 'regions_sites']);
  const HuGoThemeProvider = useHuGoTheme();
  const navigate = useNavigate();
  const { authMethod } = form.watch();
  const { isDirty, errors, isSubmitted } = form.formState;

  // Re-validate when authMethod changes to clear errors (only after submit)
  useEffect(() => {
    if (isSubmitted) {
      form.trigger([
        kioskFields.general.authMethod.faceRecognitionEnabled,
        kioskFields.general.authMethod.pinAuthenticationEnabled,
      ]);
    }
  }, [
    authMethod.faceRecognitionEnabled,
    authMethod.pinAuthenticationEnabled,
    isSubmitted,
    form,
  ]);

  const { data: regionData } = useQuery(
    regionKeys.all(),
    regionService.getRegions,
    {
      select: response => response.data,
    },
  );

  const selectedSiteName = useMemo(() => {
    if (!selectedSiteId) return '';
    const sites = regionData?.items?.flatMap(r => r.sites) ?? [];
    return sites.find(s => s.id === selectedSiteId)?.name ?? '';
  }, [selectedSiteId, regionData]);

  const {
    showDrawer: showKioskSitesDrawer,
    drawer: kioskSitesDrawer,
    closeDrawer,
  } = useDrawerV2(() => ({
    children: (
      <KioskSitesDrawer
        selectedSite={selectedSite}
        setSelectedSite={setSelectedSite}
      />
    ),
    title: t('kiosk.WORK_SITES'),
    primaryButtonProps: {
      variant: 'primary',
      type: 'submit',
      onClick: () => {
        form.setValue(kioskFields.general.siteId, selectedSite?.id ?? null, {
          shouldDirty: true,
        });
        closeDrawer();
      },
      fullWidth: true,
      children: t('GENERAL:APPLY'),
    },
    secondaryButtonProps: {
      variant: 'tertiary',
      type: 'reset',
      onClick: () => {
        setSelectedSite(null);
      },
      fullWidth: true,
      children: t('CLEAN_SELECTION'),
    },
    onClose: () => {
      setSelectedSite(
        (regionData?.items.flatMap(region => region.sites) ?? []).find(
          site => site.id === selectedSiteId,
        ) ?? null,
      );
      closeDrawer();
    },
    selectedSite,
    setSelectedSite,
  }));

  useEffect(() => {
    if (!selectedSiteId || !regionData?.items) {
      setSelectedSite(null);
      return;
    }
    const site = regionData.items
      .flatMap(region => region.sites)
      .find(s => s.id === selectedSiteId);
    if (site) {
      setSelectedSite(site);
    }
  }, [selectedSiteId, regionData]);

  return (
    <HuGoThemeProvider>
      <FormProvider {...form}>
        {kioskSitesDrawer}
        <form
          noValidate
          onSubmit={submit}
          style={{ height: '100%' }}
        >
          <Stack
            sx={{
              backgroundColor: ({ palette }) =>
                palette.new.background.layout.default,
              minHeight: '100%',
            }}
          >
            <SectionHeader
              goBack={() => {
                navigate(timeTrackingRoutes.kioskBase());
              }}
              title={
                isEdit
                  ? t('kiosk.EDITING_TERMINAL')
                  : t('kiosk.KIOSK_TERMINALS')
              }
              withBackArrow
            />
            <Stack
              sx={{
                height: '100%',
                flex: 1,
                '& > *': { px: '26%' },
              }}
            >
              <Stack
                sx={{
                  flex: 1,
                  gap: 2,
                  pb: 5,
                  pt: 3,
                }}
              >
                <HuTitle
                  variant="L"
                  title={t('kiosk.CREATE_TITLE')}
                  description={t('kiosk.CREATE_DESCRIPTION')}
                  sx={{ mb: 1 }}
                />
                <HuCardContainer fullWidth>
                  <InputSkeleton isLoading={isFetchingInfo}>
                    <HuFormInputClassic
                      name={kioskFields.general.name}
                      inputProps={{
                        label: t('kiosk.TERMINAL_NAME'),
                        hasCounter: false,
                        placeholder: t('GENERAL:NAME'),
                      }}
                      rules={{ validate: validateRequiredStringRule }}
                    />
                  </InputSkeleton>
                </HuCardContainer>
                <HuCardContainer fullWidth>
                  <InputSkeleton
                    isLoading={isFetchingInfo}
                    multiline
                  >
                    <HuFormInputClassic
                      name={kioskFields.general.description}
                      inputProps={{
                        label: t('kiosk.TERMINAL_DESCRIPTION'),
                        placeholder: t('GENERAL:DESCRIPTION'),
                        multiline: true,
                        maxLength: MAX_DESC_LENGTH,
                      }}
                    />
                  </InputSkeleton>
                </HuCardContainer>
                <HuTitle
                  variant="L"
                  title={t('kiosk.ACCESS_METHODS_TITLE')}
                  description={t('kiosk.ACCESS_METHODS_DESCRIPTION')}
                  sx={{ mt: 2, mb: 1 }}
                />
                {(errors.authMethod?.faceRecognitionEnabled ||
                  errors.authMethod?.pinAuthenticationEnabled) &&
                  !isFetchingInfo && (
                    <HuAlert
                      severity="error"
                      title={t('kiosk.ACCESS_METHOD_NEEDED')}
                      description={t('kiosk.ACCESS_METHOD_NEEDED_DESCRIPTION')}
                    />
                  )}
                <HuCardContainer fullWidth>
                  <SwitcherSkeleton isLoading={isFetchingInfo}>
                    <HuFormRadioButton
                      name={
                        kioskFields.general.authMethod.faceRecognitionEnabled
                      }
                      radioButtonProps={{
                        label: t('FACIAL_RECOGNITION'),
                        description: t('FACIAL_RECOGNITION_DESCRIPTION'),
                        sx: {
                          pr: authMethod.faceRecognitionEnabled ? 1 : 0,
                          '.MuiTypography-globalS': {
                            fontWeight: 'semiBold',
                          },
                        },
                      }}
                      rules={{
                        validate: value => {
                          // Need to enable face recognition or pin code
                          return authMethod.pinAuthenticationEnabled || value;
                        },
                      }}
                      isOnlyOption
                    />
                    {/* TODO: Add back in when flexible facial recognition is implemented */}
                    {/* {authMethod.faceRecognitionEnabled && (
                      <HuCardContainer
                        sx={{
                          backgroundColor: ({ palette }) =>
                            palette.hugoBackground?.neutralBg,
                          mt: 2,
                          '.MuiCardContent-root': {
                            pr: 1,
                          },
                        }}
                        fullWidth
                      >
                        <HuTitle
                          variant="S"
                          title={t('kiosk.ACCESS')}
                          sx={{ mb: 2 }}
                        />
                        <AugmentedSwitcher
                          switcherName={
                            kioskFields.general.faceRecognitionBlocking
                          }
                          title={t('FLEXIBLE_FACIAL_RECOGNITION')}
                          titleSx={{
                            '.MuiTypography-globalS': {
                              fontWeight: 400,
                            },
                          }}
                          description={t(
                            'FLEXIBLE_FACIAL_RECOGNITION_DESCRIPTION',
                          )}
                          pill={{
                            label: t('GENERAL:SOON'),
                            type: 'neutral',
                          }}
                          tooltip={{
                            description: t('kiosk.CUSTOMIZE_SOON'),
                          }}
                          isSwitcherDisabled
                        />
                      </HuCardContainer>
                    )} */}
                  </SwitcherSkeleton>
                </HuCardContainer>
                <HuCardContainer fullWidth>
                  <SwitcherSkeleton isLoading={isFetchingInfo}>
                    <HuFormRadioButton
                      name={
                        kioskFields.general.authMethod.pinAuthenticationEnabled
                      }
                      radioButtonProps={{
                        label: t('kiosk.PIN_CODE'),
                        description: t('kiosk.PIN_CODE_DESCRIPTION'),
                      }}
                      rules={{
                        validate: value => {
                          // Need to enable pin code or face recognition
                          return authMethod.faceRecognitionEnabled || value;
                        },
                      }}
                      isOnlyOption
                    />
                  </SwitcherSkeleton>
                </HuCardContainer>
                <HuTitle
                  variant="L"
                  title={t('kiosk.TERMINAL_SITE_TITLE')}
                  description={t('kiosk.TERMINAL_SITE_DESCRIPTION')}
                  sx={{ mt: 2, mb: 1 }}
                />
                <HuCardContainer fullWidth>
                  <Stack
                    role="button"
                    onClick={showKioskSitesDrawer}
                    sx={{
                      alignItems: 'center',
                      cursor: 'pointer',
                      flexDirection: 'row',
                      gap: 2,
                      justifyContent: 'space-between',
                      p: 2,
                    }}
                  >
                    <TerminalSiteSkeleton isLoading={isFetchingInfo}>
                      <Stack sx={{ width: '100%', gap: 2 }}>
                        <Stack
                          sx={{
                            flexDirection: 'row',
                            gap: 2,
                            justifyContent: 'space-between',
                            width: '100%',
                          }}
                        >
                          <HuTitle
                            variant="S"
                            title={t('kiosk.SELECT_SITE')}
                            description={t('kiosk.SELECT_SITE_DESCRIPTION')}
                          />
                          <Stack
                            sx={{
                              alignItems: 'center',
                              justifyContent: 'center',
                            }}
                          >
                            <IconChevronRight />
                          </Stack>
                        </Stack>
                        <Stack>
                          {selectedSiteId && (
                            <HuChips
                              label={selectedSiteName}
                              onDelete={() => {
                                form.setValue(
                                  kioskFields.general.siteId,
                                  null,
                                  {
                                    shouldDirty: true,
                                  },
                                );
                                setSelectedSite(null);
                              }}
                              size="medium"
                              sx={{ maxWidth: 150 }}
                            />
                          )}
                        </Stack>
                      </Stack>
                    </TerminalSiteSkeleton>
                  </Stack>
                </HuCardContainer>
              </Stack>
              <Stack
                sx={{
                  backgroundColor: theme =>
                    theme.palette.new.background.elements.grey,
                  bottom: 0,
                  flexDirection: 'row',
                  justifyContent: 'flex-end',
                  position: 'sticky',
                  py: 2,
                  width: '100%',
                }}
              >
                <Button
                  variant="primary"
                  size="large"
                  type="submit"
                  disabled={isEdit && !isDirty}
                  loading={isRunningMutation}
                  onClick={submit}
                  sx={{ width: 256 }}
                >
                  {isEdit ? t('GENERAL:SAVE') : t('kiosk.CREATE_TERMINAL')}
                </Button>
              </Stack>
            </Stack>
          </Stack>
        </form>
      </FormProvider>
    </HuGoThemeProvider>
  );
};

export default KioskSettingsLayout;