import React, {useState, useRef, useEffect} from 'react';
import {Keyboard, ScrollView, View, Text as BaseText} from 'react-native';
import {ScreenParams} from '../../navigation/app';
import {
  Colors,
  fontSz,
  globalStyles,
  ms,
  SavingsCategoryType,
  SuggestedPlansOptionsType,
  FrequencyType,
  correctFloatPoint,
  convertToISODateString,
  DeductionFrequencyType,
  DeductionNameType,
  getFrequencyEnum,
  getDeductionTypeEnum,
  getDeductionFrequencyEnum,
  Images,
} from '../../utils';
import {calculateRequiredPeriodicAmountWithInterest} from '../../utils/savingsCalculations';
import useHandleChange from '../../hooks/useHandleChangeNotrim';
import CurrencyInput from '../Input/currency';
import AppDateTimePicker from '../DatePicker';
import FrequencyCards from '../FrequencyCards';
import {Text} from '../Text';
import {SwitchFormInput} from './saveAsYouCollectForm';
import {useSDKConfig} from '../../contexts/SDKConfigContext';
import {useMutation, useQueryClient} from '@tanstack/react-query';
import {
  createSavingsAccount,
  updateSavingsAccount,
} from '../../services/actions';
import {CreateSavingsParams, UpdateSavingsParams} from '../../services/types';
import {useToast} from '../../contexts/ToastProvider';
import RadioButton from '../RadioButton';
import Notification from '../Feedback/Notification';
import SavingsConfirmation from '../Modals/savingsConfirmation';
import {SavingsDetailType} from '../../utils/types';
import SavingsFormLayout from './shared/SavingsFormLayout';
import CommonSavingsFields from './shared/CommonSavingsFields';
import Input from '../Input';
import {
  validateCommonFields,
  validateFlexibleSavings,
  getValidSavingsColor,
  getFrequencyTypeFromId,
  checkForChanges,
  ValidationError,
  typesOfDeduction,
} from './shared/savingsFormUtils';
import FlexibleInterestDisplay from '../Common/FlexibleInterestDisplay';

type Props = {
  title: string;
  goBack: () => void;
  navigate: <T extends keyof ScreenParams>(
    name: T,
    params?: ScreenParams[T],
  ) => void;
  replace: <T extends keyof ScreenParams>(
    name: T,
    params?: ScreenParams[T],
  ) => void;
  savingsOption: SavingsCategoryType;
  suggestedPlan?: SuggestedPlansOptionsType | null;
  editMode?: boolean;
  existingSavingsData?: SavingsDetailType;
};

const FlexibleSavingsForm = (props: Props) => {
  const {
    title,
    goBack,
    navigate,
    replace,
    savingsOption,
    suggestedPlan,
    editMode,
    existingSavingsData,
  } = props;

  const [autoSave, setAutoSave] = useState<boolean>(
    editMode ? existingSavingsData?.autoSave || false : true,
  );
  const [switchInterest, setSwitchInterest] = useState<boolean>(
    editMode ? existingSavingsData?.isInterestDisabled || false : false,
  );

  const [startDate, setStartDate] = useState<any>(
    editMode && existingSavingsData?.startDate
      ? new Date(existingSavingsData.startDate)
      : null,
  );
  const [endDate, setEndDate] = useState<any>(
    editMode && existingSavingsData?.endDate
      ? new Date(existingSavingsData.endDate)
      : null,
  );
  const [showStartDate, setShowStartDate] = useState<boolean>(false);
  const [showEndDate, setShowEndDate] = useState<boolean>(false);
  const [selectedTypeOfDeduction, setSelectedTypeOfDeduction] =
    useState<DeductionNameType>('Percentage');
  const [selectedDeductionFrequency, setSelectedDeductionFrequency] =
    useState<DeductionFrequencyType>('Reoccurring');

  const {showToast} = useToast();
  const {apiKey, primaryColor} = useSDKConfig();
  const queryClient = useQueryClient();
  const [formStatus, setFormStatus] = useState<
    'idle' | 'loading' | 'success' | 'error'
  >('idle');
  const [showConfirmation, setShowConfirmation] = useState<boolean>(false);
  const [confirmationPayload, setConfirmationPayload] = useState<
    CreateSavingsParams | UpdateSavingsParams | null
  >(null);
  const [isPeriodicAmountAutoCalculated, setIsPeriodicAmountAutoCalculated] =
    useState<boolean>(false);

  // Ref for scrolling and state for tracking section positions
  const scrollViewRef = useRef<ScrollView>(null);
  const [sectionPositions, setSectionPositions] = useState<{
    [key: string]: number;
  }>({});
  const today = new Date();
  const tomorrow = new Date(today);
  tomorrow.setDate(today.getDate() + 1);

  const [errors, setErrors] = useHandleChange({
    name: '',
    amountPercentage: '',
    periodicSavingsAmount: '',
    amount: '',
    narration: '',
    savingsColor: '',
    frequency: '',
    startDate: '',
    endDate: '',
    interestDisplay: '',
  });

  const [details, setDetails] = useHandleChange({
    name: editMode ? existingSavingsData?.accountName || '' : '',
    amount: editMode ? existingSavingsData?.savingTarget?.toString() || '' : '',
    amountPercentage: '',
    periodicSavingsAmount: editMode
      ? existingSavingsData?.periodicSavingsAmount?.toString() || ''
      : '',
    narration: editMode ? existingSavingsData?.narration || '' : '',
    savingsColor: getValidSavingsColor(
      existingSavingsData?.savingsPlanColor,
      editMode,
    ),
    selectedFrequency:
      editMode && existingSavingsData?.savingsFrequencyId
        ? getFrequencyTypeFromId(existingSavingsData.savingsFrequencyId)
        : ('' as FrequencyType),
    startDate:
      editMode && existingSavingsData?.startDate
        ? new Date(existingSavingsData.startDate)
        : null,
    endDate:
      editMode && existingSavingsData?.endDate
        ? new Date(existingSavingsData.endDate)
        : null,
  });

  const {
    name,
    amount,
    amountPercentage,
    periodicSavingsAmount,
    narration,
    savingsColor,
    selectedFrequency,
  } = details;

  function updateSavingsColor(value: string) {
    setDetails('savingsColor', value);
    setErrors('savingsColor', '');
  }
  function updateName(value: string) {
    setDetails('name', value);
    setErrors('name', '');
  }
  function updateAmount(value: number) {
    setDetails('amount', value);
    setErrors('amount', '');
  }
  function updatePeriodicSavingsAmount(
    value: number,
    isAutoCalculated: boolean = false,
  ) {
    setDetails('periodicSavingsAmount', value);
    setErrors('periodicSavingsAmount', '');
    setIsPeriodicAmountAutoCalculated(isAutoCalculated);
  }
  function updateAmountPercentage(
    value: number,
    deductionType?: DeductionNameType,
  ) {
    setDetails('amountPercentage', value);
    const currentDeductionType = deductionType || selectedTypeOfDeduction;
    if (value > 100 && currentDeductionType === 'Percentage') {
      setErrors(
        'amountPercentage',
        'You cannot enter a percentage greater than 100',
      );
    } else {
      setErrors('amountPercentage', '');
    }
  }
  function updateFrequency(value: FrequencyType) {
    setDetails('selectedFrequency', value as FrequencyType);
    setErrors('frequency', '');
  }
  function updateStartDate(value: any) {
    setDetails('startDate', value);
    setErrors('startDate', '');
  }
  function updateEndDate(value: any) {
    setDetails('endDate', value);
    setErrors('endDate', '');
  }
  function updateNarration(value: string) {
    setDetails('narration', value);
    setErrors('narration', '');
  }

  // Helper function to capture section positions
  const handleSectionLayout = (sectionKey: string, event: any) => {
    const {y} = event.nativeEvent.layout;
    setSectionPositions(prev => ({
      ...prev,
      [sectionKey]: y,
    }));
  };

  // Helper function to calculate required periodic amount with interest
  const calculateRequiredPeriodicAmount = (): number => {
    if (!amount || !selectedFrequency || !startDate || !endDate) return 0;

    return calculateRequiredPeriodicAmountWithInterest({
      savingsTarget: Number(amount),
      selectedFrequency,
      startDate,
      endDate,
      annualInterestRate: savingsOption?.interestRate || 0,
      isInterestDisabled: switchInterest,
      currentBalance: 0,
    });
  };

  // Auto-calculate periodic savings amount when dependencies change
  useEffect(() => {
    // Only auto-calculate for non-on-inflow frequencies and when not in edit mode
    if (
      autoSave &&
      selectedFrequency &&
      getFrequencyEnum(selectedFrequency) !== 4 &&
      amount &&
      startDate &&
      endDate &&
      !editMode // Don't auto-calculate in edit mode
    ) {
      // Add a small delay to prevent auto-scrolling after date selection
      const timeoutId = setTimeout(() => {
        const calculatedAmount = calculateRequiredPeriodicAmount();
        if (
          calculatedAmount > 0 &&
          (Number(periodicSavingsAmount) === 0 ||
            isPeriodicAmountAutoCalculated)
        ) {
          // Auto-populate if field is empty or was previously auto-calculated
          updatePeriodicSavingsAmount(calculatedAmount, true);
        }
      }, 100);

      return () => clearTimeout(timeoutId);
    }
  }, [amount, selectedFrequency, startDate, endDate, autoSave, editMode]);

  // Reset auto-calculation flag when user manually edits
  const handleManualPeriodicAmountChange = (value: number) => {
    updatePeriodicSavingsAmount(value, false); // Always mark as manually edited
  };

  // Helper function to scroll to first error
  const scrollToError = (errorField: string) => {
    const targetPosition = sectionPositions[errorField];

    if (targetPosition !== undefined && scrollViewRef.current) {
      scrollViewRef.current.scrollTo({
        y: Math.max(0, targetPosition - 50),
        animated: true,
      });
    } else {
      // Fallback to approximate positions if layout hasn't been captured yet
      const fallbackPositions: {[key: string]: number} = {
        savingsColor: 0,
        name: 150,
        amount: 300,
        frequency: 500,
        periodicSavingsAmount: 700,
        amountPercentage: 850,
        startDate: 1000,
        endDate: 1150,
      };

      const fallbackPosition = fallbackPositions[errorField] || 0;
      scrollViewRef.current?.scrollTo({
        y: fallbackPosition,
        animated: true,
      });
    }
  };

  // Validation function
  const validateForm = (): ValidationError[] => {
    const commonErrors = validateCommonFields(name, amount, savingsColor);
    const flexibleErrors = validateFlexibleSavings(
      autoSave,
      selectedFrequency,
      periodicSavingsAmount,
      amountPercentage,
      selectedTypeOfDeduction,
      startDate,
      endDate,
    );

    return [...commonErrors, ...flexibleErrors];
  };

  const handleTypeOfDeductionSelect = (option: string) => {
    setSelectedTypeOfDeduction(option as DeductionNameType);
  };
  const handleFrequencySelect = (option: string) => {
    setSelectedDeductionFrequency(option as DeductionFrequencyType);
  };

  const onChangeStartDate = (date: any) => {
    const currentDate = new Date(
      Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0),
    );

    setShowStartDate(false);
    setStartDate(currentDate);
    updateStartDate(currentDate);
    if (endDate && currentDate > endDate) {
      setEndDate(null);
      setErrors('endDate', 'End date cannot be earlier than start date.');
    } else {
      setErrors('startDate', '');
    }
  };

  const onChangeEndDate = (date: any) => {
    const currentDate = new Date(
      date.getFullYear(),
      date.getMonth(),
      date.getDate(),
      23,
      59,
      59,
      999,
    );
    setShowEndDate(false);
    setEndDate(currentDate);
    updateEndDate(currentDate);
  };

  const {
    mutate: savingsMutate,
    isPending: isLoading,
    data,
  } = useMutation({
    mutationFn: (variables: CreateSavingsParams | UpdateSavingsParams) => {
      if (editMode) {
        return updateSavingsAccount(apiKey, variables as UpdateSavingsParams);
      } else {
        return createSavingsAccount(apiKey, variables as CreateSavingsParams);
      }
    },
    onSuccess: res => {
      if (res.error) {
        showToast({
          type: 'error',
          message:
            res?.error ??
            `An error occurred while ${
              editMode ? 'updating' : 'creating'
            } your savings account. Please try again.`,
          duration: 3000,
        });
        return;
      }
      if (res?.success) {
        // Invalidate relevant queries to fetch latest data
        queryClient.invalidateQueries({
          queryKey: ['savingsListByCustomerId', apiKey],
        });
        queryClient.invalidateQueries({
          queryKey: ['totalAccountTransactionsByCustomerId', apiKey],
        });
        queryClient.invalidateQueries({
          queryKey: ['customerAccountSummary', apiKey],
        });
        queryClient.invalidateQueries({
          queryKey: ['allSavingsCategories', apiKey],
        });

        // Close the confirmation modal and clear payload
        setShowConfirmation(false);
        setConfirmationPayload(null);
        setFormStatus('success');
      }
    },
    onError: err => {
      console.error('Mutation failed:', err);
    },
  });

  function onSuccessNotificationClose() {
    setFormStatus('idle');

    replace('plan', {
      planId: data?.responseData.savingsId,
      planName: data?.responseData.accountName,
    });
  }

  const handleSubmit = async () => {
    Keyboard.dismiss();

    // Validate form and get all errors
    const validationErrors = validateForm();

    if (validationErrors.length > 0) {
      // Set all errors
      validationErrors.forEach(({field, message}) => {
        setErrors(field, message);
      });

      // Scroll to first error after a brief delay to allow error state to update
      setTimeout(() => {
        scrollToError(validationErrors[0].field);
      }, 100);

      return;
    }

    // Form is valid, proceed with submission
    let payload: CreateSavingsParams | UpdateSavingsParams;

    if (editMode) {
      payload = {
        savingsId: existingSavingsData?.savingsId || '',
        planId: suggestedPlan?.id ?? 0,
        accountName: name.trim(),
        savingTarget: correctFloatPoint(Number(amount) * 100),
        savingsCategoryId: savingsOption.id,
        narration: narration.trim(),
        autoSave: autoSave,
        isInterestDisabled: switchInterest,
        savingsPlanColor: savingsColor,
      } as UpdateSavingsParams;
    } else {
      payload = {
        planId: suggestedPlan?.id ?? 0,
        accountName: name.trim(),
        savingTarget: correctFloatPoint(Number(amount) * 100),
        savingsCategoryId: savingsOption.id,
        narration: narration.trim(),
        autoSave: autoSave,
        isInterestDisabled: switchInterest,
        savingsPlanColor: savingsColor,
      } as CreateSavingsParams;
    }

    // Only add frequency and date fields if auto save is enabled
    if (autoSave) {
      payload.frequency = getFrequencyEnum(selectedFrequency);
      payload.startDate = convertToISODateString(startDate) ?? '';
      payload.endDate = convertToISODateString(endDate) ?? '';
    }

    if (suggestedPlan?.name === name) {
      payload.planId = suggestedPlan?.id;
    }

    if (autoSave && getFrequencyEnum(selectedFrequency) !== 4) {
      payload.periodicSavingsAmount = correctFloatPoint(
        Number(periodicSavingsAmount) * 100,
      );
    }

    if (
      autoSave &&
      selectedTypeOfDeduction === 'Flat rate' &&
      getFrequencyEnum(selectedFrequency) === 4
    ) {
      payload.flatRateDeduction = correctFloatPoint(
        Number(amountPercentage) * 100,
      );
    }

    if (
      autoSave &&
      selectedTypeOfDeduction === 'Percentage' &&
      getFrequencyEnum(selectedFrequency) === 4
    ) {
      payload.percentageDeduction = Number(amountPercentage);
    }

    if (autoSave && getFrequencyEnum(selectedFrequency) === 4) {
      payload.deductionType = getDeductionTypeEnum(selectedTypeOfDeduction);
      payload.deductionFrequency = getDeductionFrequencyEnum(
        selectedDeductionFrequency,
      );
      payload.deductionMethod = 1;
    }

    // In edit mode, check if there are any actual changes
    if (editMode && existingSavingsData) {
      const hasChanges = checkForChanges(
        payload as UpdateSavingsParams,
        existingSavingsData,
      );

      if (!hasChanges) {
        // No changes detected, show a toast and return
        showToast({
          type: 'info',
          message:
            'No changes detected. Your savings account is already up to date.',
          duration: 3000,
        });
        return;
      }
    }

    // Show confirmation modal instead of directly submitting
    setConfirmationPayload(payload);
    setShowConfirmation(true);
  };

  const handleConfirmSubmission = async () => {
    if (confirmationPayload) {
      savingsMutate(confirmationPayload);
    }
  };

  const handleCancelConfirmation = () => {
    setShowConfirmation(false);
    setConfirmationPayload(null);
  };

  return (
    <>
      <SavingsFormLayout
        title={title}
        onBack={goBack}
        onSubmit={handleSubmit}
        scrollViewRef={scrollViewRef}
        suggestedPlanName={suggestedPlan?.name}>
        <CommonSavingsFields
          savingsColor={savingsColor}
          onColorChange={updateSavingsColor}
          colorError={errors.savingsColor}
          primaryColor={primaryColor}
          name={name}
          onNameChange={updateName}
          nameError={errors.name}
          amount={amount}
          onAmountChange={updateAmount}
          amountError={errors.amount}
          amountLabel="Savings Target"
          onColorLayout={event => handleSectionLayout('savingsColor', event)}
          onNameLayout={event => handleSectionLayout('name', event)}
          onAmountLayout={event => handleSectionLayout('amount', event)}
        />

        {/* Flexible Savings Specific Fields */}
        <SwitchFormInput
          title="Auto-Save"
          onPress={() => setAutoSave(!autoSave)}
          onValueChange={() => setAutoSave(!autoSave)}
          check={autoSave}
          setCheck={setAutoSave}
        />

        {autoSave && (
          <View onLayout={event => handleSectionLayout('frequency', event)}>
            <FrequencyCards
              selectedFrequency={selectedFrequency}
              onSelectFrequency={frequency => {
                updateFrequency(frequency);
              }}
              label="How often do you want to save?"
              showAsterisk={true}
              errorMsg={errors.frequency}
            />
          </View>
        )}

        {autoSave && Boolean(selectedFrequency.length > 0) && (
          <>
            <View onLayout={event => handleSectionLayout('startDate', event)}>
              <AppDateTimePicker
                value={startDate}
                label="Start Date"
                errorMsg={errors.startDate || ''}
                placeholder="Select"
                containerStyle={{marginTop: ms(0)}}
                onPress={() => {
                  setShowStartDate(prev => !prev);
                  setErrors('startDate', '');
                }}
                onCancel={() => {
                  setShowStartDate(prev => !prev);
                }}
                show={showStartDate}
                mode="date"
                showAsterisk={true}
                onChange={onChangeStartDate}
              />
            </View>
            <View onLayout={event => handleSectionLayout('endDate', event)}>
              <AppDateTimePicker
                value={endDate}
                label="End Date"
                errorMsg={errors.endDate || ''}
                placeholder="Select"
                containerStyle={{marginTop: ms(0)}}
                onPress={() => {
                  setShowEndDate(prev => !prev);
                  setErrors('endDate', '');
                }}
                onCancel={() => {
                  setShowEndDate(prev => !prev);
                }}
                show={showEndDate}
                mode="date"
                showAsterisk={true}
                onChange={onChangeEndDate}
                minimumDate={startDate ?? tomorrow}
              />
            </View>
          </>
        )}

        {autoSave &&
          Boolean(selectedFrequency.length > 0) &&
          getFrequencyEnum(selectedFrequency) !== 4 && (
            <View
              onLayout={event =>
                handleSectionLayout('periodicSavingsAmount', event)
              }>
              <View>
                <CurrencyInput
                  value={periodicSavingsAmount}
                  onChangeValue={(value: any) => {
                    const numericValue = Number(value);
                    handleManualPeriodicAmountChange(numericValue);
                  }}
                  ignoreNegative={false}
                  delimiter=","
                  separator="."
                  precision={2}
                  containerStyle={{}}
                  returnKeyType="done"
                  topComponent={<></>}
                  walletAmount={0}
                  paymentAmount={Number(periodicSavingsAmount)}
                  onPressUseAllBalance={() => {}}
                  onEndEditing={() => {}}
                  onFocus={() => {}}
                  label={`How much to save ${selectedFrequency}`}
                  showAsterisk={true}
                  placeholder=""
                  balance={0}
                  wrapperStyle={{
                    borderColor:
                      errors.periodicSavingsAmount.length > 0
                        ? Colors.error
                        : '#F4F4F4',
                  }}
                  errorMsg={
                    Boolean(errors.periodicSavingsAmount.length > 0) && (
                      <Text
                        style={{
                          position: 'absolute',
                          bottom: ms(-10),
                          left: 0,
                        }}
                        fontSize={fontSz(14)}
                        fontFamily="Gordita-Regular"
                        fontWeight="400"
                        text={`${errors.periodicSavingsAmount}`}
                        color={Colors.error}
                      />
                    )
                  }
                  showUseAllBalance={false}
                  showCurrency
                />
                {isPeriodicAmountAutoCalculated && (
                  <View
                    style={{
                      marginTop: ms(8),
                      paddingHorizontal: ms(12),
                      paddingVertical: ms(8),
                      backgroundColor: '#F8F9FA',
                      borderRadius: ms(8),
                      borderLeftWidth: ms(3),
                      borderLeftColor: Colors.primary,
                    }}>
                    <Text
                      fontSize={fontSz(12)}
                      fontFamily="Gordita-Regular"
                      fontWeight="400"
                      text="💡 We've suggested this amount based on your plan. You can edit if needed."
                      color={Colors.inputBackgroundLight}
                    />
                  </View>
                )}
              </View>
            </View>
          )}

        {autoSave &&
          Boolean(selectedFrequency.length > 0) &&
          getFrequencyEnum(selectedFrequency) === 4 && (
            <View
              onLayout={event =>
                handleSectionLayout('amountPercentage', event)
              }>
              <View>
                <View
                  style={[
                    globalStyles.rowStart,
                    {
                      marginBottom: ms(5),
                    },
                  ]}>
                  <BaseText
                    style={{
                      fontSize: fontSz(14),
                      fontFamily: 'Gordita-Regular',
                      fontWeight: '400',
                      color: Colors.inputBackgroundLight,
                    }}>
                    Type of Deduction
                    <Text
                      fontSize={fontSz(14)}
                      fontFamily="Gordita-Regular"
                      fontWeight="400"
                      text="*"
                      color={Colors.debitRed}
                    />
                  </BaseText>
                </View>
                <View style={[globalStyles.rowStart, {marginBottom: ms(14)}]}>
                  {typesOfDeduction.map(option => {
                    return (
                      <RadioButton
                        key={option?.id}
                        label={option?.name}
                        selected={selectedTypeOfDeduction === option?.name}
                        onPress={() => {
                          handleTypeOfDeductionSelect(option?.name);
                          updateAmountPercentage(
                            0,
                            option?.name as DeductionNameType,
                          );
                        }}
                        containerStyle={{
                          marginRight: ms(40),
                        }}
                      />
                    );
                  })}
                </View>
              </View>
              <CurrencyInput
                value={amountPercentage}
                onChangeValue={(value: any) => {
                  const numericValue = Number(value);
                  updateAmountPercentage(numericValue);
                }}
                ignoreNegative={false}
                delimiter=","
                separator="."
                precision={2}
                containerStyle={{}}
                returnKeyType="done"
                topComponent={<></>}
                walletAmount={0}
                paymentAmount={Number(amountPercentage)}
                onPressUseAllBalance={() => {}}
                onEndEditing={() => {}}
                onFocus={() => {}}
                label={
                  selectedTypeOfDeduction === 'Flat rate'
                    ? 'Amount'
                    : 'Percentage'
                }
                showAsterisk={true}
                showCurrency={selectedTypeOfDeduction === 'Flat rate'}
                placeholder=""
                balance={0}
                wrapperStyle={{
                  borderColor:
                    errors.amountPercentage.length > 0
                      ? Colors.error
                      : '#F4F4F4',
                }}
                errorMsg={
                  Boolean(errors.amountPercentage.length > 0) && (
                    <Text
                      style={{
                        position: 'absolute',
                        bottom: ms(-10),
                        left: 0,
                      }}
                      fontSize={fontSz(14)}
                      fontFamily="Gordita-Regular"
                      fontWeight="400"
                      text={`${errors.amountPercentage}`}
                      color={Colors.error}
                    />
                  )
                }
                showUseAllBalance={false}
              />
            </View>
          )}

        {/* Show savings summary after auto-save setup is complete */}
        {/* TODO: Temporarily commented out - hard to predict earnings with variable amounts
        {autoSave && 
         Boolean(selectedFrequency.length > 0) && 
         startDate && 
         endDate && 
         (
           (getFrequencyEnum(selectedFrequency) !== 4 && Number(periodicSavingsAmount) > 0) ||
           (getFrequencyEnum(selectedFrequency) === 4 && Number(amountPercentage) > 0)
         ) && (
          <FlexibleInterestDisplay
            currentRate={switchInterest ? 0 : (savingsOption?.interestRate || 0)}
            savingsTarget={Number(amount) || 0}
            periodicSavingsAmount={Number(periodicSavingsAmount) || 0}
            selectedFrequency={selectedFrequency}
            startDate={startDate}
            endDate={endDate}
            isInterestDisabled={switchInterest}
            onSectionLayout={event => handleSectionLayout('interestDisplay', event)}
            onAutoCalculate={(calculatedAmount) => {
              updatePeriodicSavingsAmount(calculatedAmount, true);
            }}
          />
        )}
        */}

        {/* Narration and Interest Switch - positioned after Auto-Save section */}
        <Input
          value={narration}
          label="Narration"
          placeholder="Describe"
          keyboardType="default"
          autoCompleteType="off"
          returnKeyType="done"
          onChange={(value: React.SetStateAction<string>) => {
            updateNarration(String(value));
          }}
          errorMsg={errors.narration || ''}
          onEndEditing={() => {}}
          onFocus={() => {}}
        />

        <SwitchFormInput
          title="Switch off Interest"
          onPress={() => setSwitchInterest(!switchInterest)}
          onValueChange={() => setSwitchInterest(!switchInterest)}
          check={switchInterest}
          setCheck={setSwitchInterest}
        />
      </SavingsFormLayout>

      {formStatus === 'success' && (
        <Notification
          title={
            editMode
              ? 'Savings Account Updated Successfully'
              : 'Savings Account Created Successfully'
          }
          description={
            editMode
              ? 'Your savings account has been updated successfully'
              : 'Your savings account has been created successfully'
          }
          image={Images.successIcon}
          buttonText="View Details"
          onButtonPress={onSuccessNotificationClose}
        />
      )}

      {confirmationPayload && (
        <SavingsConfirmation
          visible={showConfirmation}
          editMode={editMode || false}
          newData={confirmationPayload}
          existingData={existingSavingsData}
          onConfirm={handleConfirmSubmission}
          onCancel={handleCancelConfirmation}
          isLoading={isLoading}
          savingsCategoryName={savingsOption.name}
          isLockedCategory={false}
        />
      )}
    </>
  );
};

export default FlexibleSavingsForm;