'use client';

import React, { useState, useCallback, useMemo } from 'react';
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogTitle,
  DialogDescription,
  DialogClose,
} from '@/components/ui/dialog';
import CommonImage from '@/components/common/CommonImage';
import { Text } from '@/components/ui/text';
import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
import { useForm } from 'react-hook-form';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import {
  API_ENDPOINTS,
  VC_ASSOCIATE_TYPES,
  VC_COMMISSION_TYPE,
} from '@/constants';
import { useToast } from '@/hooks/use-toast';
import { UnknownRecord, ApiResponse } from '@/types';
import { globalApiGet, globalApiPost } from '@/services/global/globalApiCalls';
import { transformCommissionData } from './operations';
import EligibleCasesList from './EligibleCasesList';
import { Heading } from '@/components/ui/heading';
import { Button } from '@/components/ui/button';
import CommissionCards from '../form-components/CommissionCards';
import StepOneInfo from '../form-components/StepOneInfo';
import { Input } from '@/components/ui/input';
import { AddCommissionContractProps } from '../../contracts/forms/constants';
import { SearchableSelect } from '../../contracts/forms/SearchableSelect';
import { useAppToast } from '@/hooks/useAppToast';
import { VCM_M } from '@/constants/typo/submit-alerts';

const AddCommissionEnquiry: React.FC<AddCommissionContractProps> = ({
  triggerIcon,
  bucket,
  handlePaginatedRecords,
}) => {
  const { toast } = useToast();
  const { showSuccess, showError } = useAppToast();

  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [step, setStep] = useState<number>(1);
  const [nextStepValues, setNextStepValues] = useState<UnknownRecord[]>([]);
  const [selectedRows, setSelectedRows] = useState<number[]>([]);
  const [filterEligibleCases, setFilterEligibleCases] = useState<
    UnknownRecord[]
  >([]);

  const [dropdownStates, setDropdownStates] = useState({
    client_from_country_id: false,
    visa_service_country_id: false,
    institute_id: false,
    intake_id: false,
    commission_instance_id: false,
    invoice_branch_id: false,
    invoice_bank_account_id: false,
    applicable_on_id: false,
    contract_set_id: false,
    associate_id: false,
    ma_commission_type: false,
  });

  // Data states
  const [defaultCountries, setDefaultCountries] = useState<UnknownRecord[]>([]);
  const [visaServiceCountries, setVisaServiceCountries] = useState<
    UnknownRecord[]
  >([]);
  const [institutes, setInstitutes] = useState<UnknownRecord[]>([]);
  const [intakes, setIntakes] = useState<UnknownRecord[]>([]);
  const [commissionSets, setCommissionSets] = useState<any>([]);
  const [commissionInstances, setCommissionInstances] = useState<any>([]);
  const [commissionSetInstances, setCommissionSetInstances] = useState<any>([]);
  const [invoiceBranches, setInvoiceBranches] = useState<UnknownRecord[]>([]);
  const [invoiceBankAccounts, setInvoiceBankAccounts] = useState<
    UnknownRecord[]
  >([]);
  const [eligibleCases, setEligibleCases] = useState<UnknownRecord[]>([]);
  const [instanceSelected, setInstanceSelected] = useState<UnknownRecord>({});
  const [associates, setAssociates] = useState<UnknownRecord[]>([]);
  const [isNextLoading, setIsNextLoading] = useState(false);

  const AddNewCommissionEnquirySchema = bucket?.crud?.add.schema.validator;
  const form = useForm<z.infer<typeof AddNewCommissionEnquirySchema>>({
    resolver: zodResolver(AddNewCommissionEnquirySchema),
    defaultValues: bucket?.crud?.add.schema.default_values,
  });

  const {
    handleSubmit,
    control,
    formState: { isSubmitting },
    setValue,
    clearErrors,
    getValues,
    trigger,
    watch,
  } = form;

  const enquiryType = useMemo(
    () => bucket?.additional_info?.contract_type,
    [bucket],
  );

  const enquiryTypeLabel = useMemo(
    () => (enquiryType ? VC_ASSOCIATE_TYPES[enquiryType as string] : ''),
    [enquiryType],
  );

  // Event handlers
  const toggleDropdown = useCallback((key: keyof typeof dropdownStates) => {
    setDropdownStates((prev) => ({ ...prev, [key]: !prev[key] }));
  }, []);

  const handleOnOpen = useCallback(async () => {
    const extractData = (response: unknown) =>
      Array.isArray(response) ? response : [];

    const apiRequests = [
      globalApiGet(API_ENDPOINTS.VCM.CLIENT_COUNTRIES),
      globalApiGet(API_ENDPOINTS.VC_ENQUIRY.INVOICE_BRANCHES),
      globalApiGet(API_ENDPOINTS.VC_ENQUIRY.INVOICE_BANK_ACCOUNT),
      globalApiPost(API_ENDPOINTS.VC_ENQUIRY.VISA_SERVICE_COUNTRIES, {
        product_id: '8',
      }),
    ];

    try {
      resetFormAndState();
      const [
        clientCountriesRes,
        commissionEnquiryInvoiceBranchesRes,
        commissionEnquiryInvoiceBankAccountsRes,
        visaServiceCountriesRes,
      ] = (await Promise.all(apiRequests)) as ApiResponse<UnknownRecord>[];

      setDefaultCountries(extractData(clientCountriesRes));
      setInvoiceBranches(extractData(commissionEnquiryInvoiceBranchesRes));
      setInvoiceBankAccounts(
        extractData(commissionEnquiryInvoiceBankAccountsRes),
      );
      setVisaServiceCountries(extractData(visaServiceCountriesRes));
    } catch (error) {
      console.error('Error loading data:', error);
      setDefaultCountries([]);
      setInvoiceBranches([]);
      setInvoiceBankAccounts([]);
      setVisaServiceCountries([]);
    }
  }, [enquiryType]);

  const handleChildValues = useCallback(async () => {
    setValue('visa_service_country_id', '');
    setValue('institute_id', '');
    setValue('intake_id', '');
    setValue('commission_instance_id', '');
    setValue('associate_id', '');
  }, []);

  const fetchInstitutes = useCallback(async (country_id: string) => {
    setValue('institute_id', '');
    setValue('intake_id', '');
    setValue('commission_instance_id', '');
    setValue('associate_id', '');
    const response = (await globalApiPost(
      API_ENDPOINTS.VC_ENQUIRY.INSTITUTE_LIST,
      {
        country_id,
      },
      false,
    )) as any;

    if (!(response as any)?.success) {
      showError((response as any).errors, 'Intakes does not exists');
    }

    const res = Array.isArray(response?.data) ? response?.data : [];
    setInstitutes(res);
  }, []);

  const fetchAssociates = useCallback(async (country_id: string) => {
    const response = await globalApiPost(API_ENDPOINTS.VCM.ASSOCIATE_LIST, {
      country_id,
      association_type: String(enquiryType),
      product_id: '8',
    });

    const res = Array.isArray(response) ? response : [];
    setAssociates(res);
  }, []);

  const fetchIntakes = useCallback(
    async (
      clientFromCountryId: string,
      visaServiceCountryId: string,
      instituteId: string,
    ) => {
      setValue('intake_id', '');
      setValue('commission_instance_id', '');
      const response = await globalApiPost(
        API_ENDPOINTS.VC_ENQUIRY.INTAKE_LIST,
        {
          client_from_country_id: Number(clientFromCountryId),
          visa_service_country_id: Number(visaServiceCountryId),
          institute_id: Number(instituteId),
        },
      );
      const res = Array.isArray(response) ? response : [];
      setIntakes(res);
    },
    [],
  );

  const fetchCommissionInstances = useCallback(
    async (
      clientFromCountryId: string,
      visaServiceCountryId: string,
      instituteId: string,
      intakeId: string,
    ) => {
      setValue('applicable_on_id', '');
      setValue('contract_set_id', '');
      setValue('commission_instance_id', '');
      const payload: any = {
        client_from_country_id: Number(clientFromCountryId),
        visa_service_country_id: Number(visaServiceCountryId),
        institute_id: Number(instituteId),
        intake_id: Number(intakeId),
        association_type: Number(enquiryType),
      };
      if (enquiryType !== '1') {
        payload.associate_id = Number(getValues('associate_id') ?? 0);
      }
      const response = (await globalApiPost(
        API_ENDPOINTS.VC_ENQUIRY.INSTANCE_LIST,
        payload,
        false,
      )) as any;
      if (!(response as any)?.success) {
        showError(
          (response as any).errors,
          'Commission Instance does not exists',
        );
      }

      const res = Array.isArray(response.data) ? response.data : [];
      const formattedCommissionInstances = transformCommissionData(res);
      setCommissionInstances(formattedCommissionInstances);
      setCommissionSets([]);
      setCommissionSetInstances([]);
    },
    [],
  );

  const handleApplicableOnChange = useCallback(
    (applicable_on_id: string) => {
      setValue('contract_set_id', '');
      setValue('commission_instance_id', '');
      const selectedInstance = commissionInstances.find(
        (instance: any) =>
          String(instance.applicable_on_id) === applicable_on_id,
      );
      const sets: UnknownRecord[] = [];
      if (selectedInstance && selectedInstance.sets) {
        selectedInstance.sets.forEach((set: any) => {
          sets.push({ id: set.contract_set_id, name: set.set_name });
        });
        setCommissionSets(sets);
      } else {
        setCommissionSets(sets);
      }
      setCommissionSetInstances([]);
    },
    [commissionInstances],
  );

  const handleSetOnChange = useCallback(
    (set_id: string) => {
      setValue('commission_instance_id', '');
      const instances = findInstancesByContractSetId(
        commissionInstances,
        Number(set_id),
      );

      const formattedInstances = instances.map(
        (instance: any, index: number) => ({
          id: instance.id,
          name: `Instance ${index + 1}`,
          commission_amount: instance.commission_amount,
          commission_type: instance.commission_type,
          currency: instance.currency,
          instance_no: index + 1,
        }),
      );
      setCommissionSetInstances(formattedInstances);
    },
    [commissionInstances],
  );

  const findInstancesByContractSetId = (
    data: UnknownRecord[],
    contractSetId: number,
  ) => {
    for (const group of data) {
      for (const set of group.sets) {
        if (set.contract_set_id === contractSetId) {
          return set.instances;
        }
      }
    }
    return [];
  };

  const handleSetInstanceOnChange = useCallback(async (instanceId: string) => {
    const response = (await globalApiPost(
      API_ENDPOINTS.VC_ENQUIRY.CASE_LIST,
      {
        commission_instance_id: Number(instanceId),
        client_from_country_id: Number(getValues('client_from_country_id')),
        visa_service_country_id: Number(getValues('visa_service_country_id')),
        institute_id: Number(getValues('institute_id') ?? 0),
        intake_id: Number(getValues('intake_id')),
        associate_id: Number(getValues('associate_id') ?? 0),
        association_type: Number(enquiryType),
        applicable_on_id: Number(getValues('applicable_on_id') ?? 0),
        contract_set_id: Number(getValues('contract_set_id') ?? 0),
      },
      false,
    )) as any;

    if (!(response as any)?.success) {
      showError((response as any).errors, 'Case does not exists');
    }

    const res = Array.isArray(response.data) ? response.data : [];
    setEligibleCases(res);
  }, []);

  const handleSelectedRowsAndCases = useCallback(() => {
    setSelectedRows([]);
    setEligibleCases([]);
  }, []);

  const handleStepOneTitles = useCallback(
    (key: string, value: UnknownRecord) => {
      setNextStepValues((prev) => ({ ...prev, [key]: value }));
    },
    [getValues],
  );

  const handleNext = useCallback(async () => {
    setIsNextLoading(true);

    const elementsToValidate = [
      'client_from_country_id',
      'visa_service_country_id',
      'institute_id',
      'intake_id',
      'applicable_on_id',
      'contract_set_id',
      'commission_instance_id',
      'invoice_branch_id',
      'invoice_bank_account_id',
    ];

    if (enquiryType === '2') {
      elementsToValidate.push('associate_id');
      elementsToValidate.push('ma_commission_type');
    }

    const isValid = await trigger(elementsToValidate);

    if (!isValid) {
      setIsNextLoading(false);
      return;
    }

    if (enquiryType === '2') {
      const maType = watch('ma_commission_type');
      const maAmount = watch('ma_commission_amount');
      const maPercentage = watch('ma_commission_percentage');

      if (maType === '1') {
        if (!maAmount || Number(maAmount) <= 0) {
          form.setError('ma_commission_amount', {
            type: 'manual',
            message: '(MA) Commission Amount is required',
          });

          setIsNextLoading(false);
          return;
        }
      }

      if (maType === '2') {
        if (!maPercentage || Number(maPercentage) <= 0) {
          form.setError('ma_commission_percentage', {
            type: 'manual',
            message: '(MA) Commission Percentage is required',
          });

          setIsNextLoading(false);
          return;
        }

        if (Number(maPercentage) > 100) {
          form.setError('ma_commission_percentage', {
            type: 'manual',
            message: '(MA) Commission Percentage cannot exceed 100',
          });

          setIsNextLoading(false);
          return;
        }
      }
    }

    clearErrors('items');

    try {
      setStep(2);
    } catch (error) {
      console.error(error);
    }

    setIsNextLoading(false);
  }, [trigger, clearErrors, getValues, form, enquiryType]);

  const resetFormAndState = useCallback(() => {
    form.reset();
    setStep(1);
    setSelectedRows([]);
    setEligibleCases([]);
    setNextStepValues([]);
    setInstanceSelected({});

    // Reset all dropdown states
    setDropdownStates({
      client_from_country_id: false,
      visa_service_country_id: false,
      institute_id: false,
      intake_id: false,
      commission_instance_id: false,
      invoice_branch_id: false,
      invoice_bank_account_id: false,
      applicable_on_id: false,
      contract_set_id: false,
      associate_id: false,
      ma_commission_type: false,
    });
  }, [form]);

  const resetConfig: Record<
    string,
    {
      states?: (() => void)[];
      fields?: string[];
    }
  > = {
    client_from_country_id: {
      states: [
        () => setAssociates([]),
        () => setInstitutes([]),
        () => setIntakes([]),
        () => setCommissionInstances([]),
        () => setCommissionSets([]),
        () => setCommissionSetInstances([]),
      ],
      fields: [
        'visa_service_country_id',
        'associate_id',
        'institute_id',
        'intake_id',
        'applicable_on_id',
        'contract_set_id',
        'commission_instance_id',
      ],
    },

    visa_service_country_id: {
      states: [
        () => setAssociates([]),
        () => setInstitutes([]),
        () => setIntakes([]),
        () => setCommissionInstances([]),
        () => setCommissionSets([]),
        () => setCommissionSetInstances([]),
      ],
      fields: [
        'associate_id',
        'institute_id',
        'intake_id',
        'applicable_on_id',
        'contract_set_id',
        'commission_instance_id',
      ],
    },

    associate_id: {
      states: [
        () => setIntakes([]),
        () => setCommissionInstances([]),
        () => setCommissionSets([]),
        () => setCommissionSetInstances([]),
      ],
      fields: [
        'institute_id',
        'intake_id',
        'applicable_on_id',
        'contract_set_id',
        'commission_instance_id',
      ],
    },

    institute_id: {
      states: [
        () => setIntakes([]),
        () => setCommissionInstances([]),
        () => setCommissionSets([]),
        () => setCommissionSetInstances([]),
      ],
      fields: [
        'intake_id',
        'applicable_on_id',
        'contract_set_id',
        'commission_instance_id',
      ],
    },

    intake_id: {
      states: [
        () => setCommissionInstances([]),
        () => setCommissionSets([]),
        () => setCommissionSetInstances([]),
      ],
      fields: ['applicable_on_id', 'contract_set_id', 'commission_instance_id'],
    },

    applicable_on_id: {
      states: [
        () => setCommissionSets([]),
        () => setCommissionSetInstances([]),
      ],
      fields: ['contract_set_id', 'commission_instance_id'],
    },

    contract_set_id: {
      states: [() => setCommissionSetInstances([])],
      fields: ['commission_instance_id'],
    },

    commission_instance_id: {
      states: [],
      fields: [],
    },
  };

  const handleChildFieldReset = useCallback(
    (type: keyof typeof resetConfig) => {
      const config = resetConfig[type];
      if (!config) return;
      config.states?.forEach((fn) => fn());
      config.fields?.forEach((field) => setValue(field, ''));
      handleSelectedRowsAndCases();
    },
    [],
  );

  const getMasterAgentCommissionValues = useCallback(
    (items: UnknownRecord[]) => {
      const firstItem = items[0] ?? {};

      return {
        ma_commission_type: String(
          firstItem.ma_commission_type ?? getValues('ma_commission_type') ?? '',
        ),
        ma_commission_percentage: String(
          firstItem.ma_commission_percentage ??
            getValues('ma_commission_percentage') ??
            '',
        ),
        ma_commission_amount: String(
          firstItem.ma_commission_amount ??
            getValues('ma_commission_amount') ??
            '',
        ),
      };
    },
    [getValues],
  );

  const onSubmit = useCallback(
    async (data: z.infer<typeof AddNewCommissionEnquirySchema>) => {
      try {
        const items = getValues(`items`);
        let netAmount = 0;

        items.forEach((item: Record<string, any>) => {
          netAmount += parseFloat(item.commission_amount) || 0;
        });
        netAmount = parseFloat(netAmount.toFixed(2));

        data.currency = items[0]?.tuition_fees_currency;
        data.net_amount = String(netAmount);
        data.association_type = Number(enquiryType);
        const post = {
          ...data,
          ...(enquiryType === '2' ? getMasterAgentCommissionValues(items) : {}),
          items,
        };
        const res = await globalApiPost(
          API_ENDPOINTS.VC_ENQUIRY.ADD,
          post,
          false,
        );
        if ((res as any).success) {
          handlePaginatedRecords(1, {});
          resetFormAndState();
          setIsDialogOpen(false);
          showSuccess(VCM_M.ENQUIRY.SUBMIT);
        } else {
          showError((res as any).errors, VCM_M.ENQUIRY.SUBMIT_ERROR);
        }
      } catch (error) {
        console.error('Submission error:', error);
        showError(error, VCM_M.ENQUIRY.SUBMIT_ERROR);
      }
    },
    [handlePaginatedRecords, form, toast, getMasterAgentCommissionValues],
  );

  return (
    <Dialog open={isDialogOpen}>
      <DialogTrigger
        onClick={() => {
          handleOnOpen();
          setIsDialogOpen(true);
        }}
        asChild
      >
        {triggerIcon || (
          <Text
            title="Add"
            className="add-icn wo-fts-filter-bts flex justify-content items-start"
          >
            <span>
              <CommonImage
                src="/main/add-icn.webp"
                width={20}
                height={20}
                alt="Add"
                classname="add-icon"
              />
            </span>{' '}
            Add
          </Text>
        )}
      </DialogTrigger>

      <DialogContent
        aria-describedby={undefined}
        className="modal-common-widget w-full max-w-7xl p-0 m-0 table-modal-settings state-widget"
      >
        <DialogTitle className="p-5 modal-header">
          Add Commission Enquiry - {enquiryTypeLabel}
        </DialogTitle>
        <DialogDescription>{''}</DialogDescription>
        <DialogClose asChild>
          <button
            onClick={() => setIsDialogOpen(false)}
            className="dialog-close absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none z-[9]"
            aria-label="Close"
          >
            <CommonImage
              src="/main/cross-arrow.webp"
              width={15}
              height={15}
              alt="Close"
              classname="dialog-close-img"
            />
          </button>
        </DialogClose>
        <VisuallyHidden>
          <DialogTitle>Hidden Title</DialogTitle>
        </VisuallyHidden>

        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(onSubmit, (errors) => {
              console.log('Validation failed:', errors);
            })}
          >
            <Text className="main-scroll-widget">
              {step === 1 && (
                <Text className="flex flex-wrap p-2 form-mid mt-0">
                  <>
                    <FormField
                      control={control}
                      name="client_from_country_id"
                      render={({ field }) => (
                        <SearchableSelect
                          field={field}
                          label="Client Country"
                          placeholder="Choose Client Country"
                          options={defaultCountries.map((item: any) => ({
                            id: item.id,
                            name: item.name,
                          }))}
                          isOpen={dropdownStates.client_from_country_id}
                          onOpenChange={() =>
                            toggleDropdown('client_from_country_id')
                          }
                          onSelect={(value) => {
                            field.onChange(String(value));
                            handleChildFieldReset('client_from_country_id');
                            handleStepOneTitles('client_from_country_id', {
                              title: 'Client Country',
                              value:
                                defaultCountries.find(
                                  (country: any) =>
                                    String(country.id) === String(value),
                                )?.name || '',
                            });
                            clearErrors('client_from_country_id');
                            setDropdownStates((prev) => ({
                              ...prev,
                              client_from_country_id: false,
                            }));
                          }}
                          required
                        />
                      )}
                    />

                    <FormField
                      control={control}
                      name="visa_service_country_id"
                      render={({ field }) => (
                        <SearchableSelect
                          field={field}
                          label="Visa Service Country"
                          placeholder="Choose Visa Service Country"
                          options={visaServiceCountries.map((item: any) => ({
                            id: item.id,
                            name: item.name,
                          }))}
                          isOpen={dropdownStates.visa_service_country_id}
                          onOpenChange={() =>
                            toggleDropdown('visa_service_country_id')
                          }
                          onSelect={(value) => {
                            field.onChange(String(value));
                            handleChildFieldReset('visa_service_country_id');
                            fetchInstitutes(String(value));
                            if (enquiryType === '2') {
                              fetchAssociates(String(value));
                            }
                            handleStepOneTitles('visa_service_country_id', {
                              title: 'Visa Service Country',
                              value:
                                visaServiceCountries.find(
                                  (country: any) =>
                                    String(country.id) === String(value),
                                )?.name || '',
                            });
                            clearErrors('visa_service_country_id');
                            setDropdownStates((prev) => ({
                              ...prev,
                              visa_service_country_id: false,
                            }));
                          }}
                          required
                        />
                      )}
                    />

                    {enquiryType === '2' && (
                      <FormField
                        control={control}
                        name="associate_id"
                        render={({ field }) => (
                          <SearchableSelect
                            field={field}
                            label="Associate"
                            placeholder="Choose Associate"
                            options={associates.map((item: any) => ({
                              id: item.id,
                              name: item.name,
                            }))}
                            isOpen={dropdownStates.associate_id}
                            onOpenChange={() => toggleDropdown('associate_id')}
                            onSelect={(value) => {
                              field.onChange(String(value));
                              handleChildFieldReset('associate_id');
                              handleStepOneTitles('associate_id', {
                                title: 'Associate',
                                value:
                                  associates.find(
                                    (associate: any) =>
                                      String(associate.id) === String(value),
                                  )?.name || '',
                              });
                              clearErrors('associate_id');
                              setDropdownStates((prev) => ({
                                ...prev,
                                associate_id: false,
                              }));
                            }}
                            required
                          />
                        )}
                      />
                    )}

                    <FormField
                      control={control}
                      name="institute_id"
                      render={({ field }) => (
                        <SearchableSelect
                          field={field}
                          label="Institute"
                          placeholder="Choose Institute"
                          options={institutes.map((item: any) => ({
                            id: String(item.id),
                            name: item.name,
                          }))}
                          isOpen={dropdownStates.institute_id}
                          onOpenChange={() => toggleDropdown('institute_id')}
                          onSelect={(value) => {
                            field.onChange(String(value));
                            handleChildFieldReset('institute_id');
                            fetchIntakes(
                              getValues('client_from_country_id'),
                              getValues('visa_service_country_id'),
                              String(value),
                            );
                            handleStepOneTitles('institute_id', {
                              title: 'Institute',
                              value:
                                institutes.find(
                                  (institute: any) =>
                                    String(institute.id) === String(value),
                                )?.name || '',
                            });
                            clearErrors('institute_id');
                            setDropdownStates((prev) => ({
                              ...prev,
                              institute_id: false,
                            }));
                          }}
                          required
                        />
                      )}
                    />

                    <FormField
                      control={control}
                      name="intake_id"
                      render={({ field }) => (
                        <SearchableSelect
                          field={field}
                          label="Intake"
                          placeholder="Choose Intake"
                          options={intakes.map((item: any) => ({
                            id: item.id,
                            name: item.name,
                          }))}
                          isOpen={dropdownStates.intake_id}
                          onOpenChange={() => toggleDropdown('intake_id')}
                          onSelect={(value) => {
                            field.onChange(String(value));
                            handleChildFieldReset('intake_id');
                            fetchCommissionInstances(
                              getValues('client_from_country_id'),
                              getValues('visa_service_country_id'),
                              getValues('institute_id'),
                              String(value),
                            );
                            handleStepOneTitles('intake_id', {
                              title: 'Intake',
                              value:
                                intakes.find(
                                  (intake: any) =>
                                    String(intake.id) === String(value),
                                )?.name || '',
                            });
                            clearErrors('intake_id');
                            setDropdownStates((prev) => ({
                              ...prev,
                              intake_id: false,
                            }));
                          }}
                          required
                        />
                      )}
                    />

                    <FormField
                      control={control}
                      name="applicable_on_id"
                      render={({ field }) => (
                        <SearchableSelect
                          field={field}
                          label="Applicable On"
                          placeholder="Choose Applicable On"
                          options={commissionInstances.map((item: any) => ({
                            id: item.applicable_on_id,
                            name: item.title,
                          }))}
                          isOpen={dropdownStates.applicable_on_id}
                          onOpenChange={() =>
                            toggleDropdown('applicable_on_id')
                          }
                          onSelect={(value) => {
                            field.onChange(String(value));
                            handleChildFieldReset('applicable_on_id');
                            handleApplicableOnChange(String(value));
                            handleStepOneTitles('applicable_on_id', {
                              title: 'Applicable On',
                              value:
                                commissionInstances.find(
                                  (appOn: any) =>
                                    String(appOn.applicable_on_id) ===
                                    String(value),
                                )?.title || '',
                            });
                            clearErrors('applicable_on_id');
                            setDropdownStates((prev) => ({
                              ...prev,
                              applicable_on_id: false,
                            }));
                          }}
                          required
                        />
                      )}
                    />

                    <FormField
                      control={control}
                      name="contract_set_id"
                      render={({ field }) => (
                        <SearchableSelect
                          field={field}
                          label="Contract Set"
                          placeholder="Choose Contract Set"
                          options={commissionSets.map((item: any) => ({
                            id: item.id,
                            name: item.name,
                          }))}
                          isOpen={dropdownStates.contract_set_id}
                          onOpenChange={() => toggleDropdown('contract_set_id')}
                          onSelect={(value) => {
                            field.onChange(String(value));
                            handleChildFieldReset('contract_set_id');
                            handleStepOneTitles('contract_set_id', {
                              title: 'Contract Set',
                              value:
                                commissionSets.find(
                                  (set: any) =>
                                    String(set.id) === String(value),
                                )?.name || '',
                            });
                            clearErrors('contract_set_id');
                            handleSetOnChange(String(value));
                            setDropdownStates((prev) => ({
                              ...prev,
                              contract_set_id: false,
                            }));
                          }}
                          required
                        />
                      )}
                    />

                    <FormField
                      control={control}
                      name="commission_instance_id"
                      render={({ field }) => (
                        <SearchableSelect
                          field={field}
                          label="Commission Instance"
                          placeholder="Choose Commission Instance"
                          options={commissionSetInstances.map((item: any) => ({
                            id: item.id,
                            name: item.name,
                          }))}
                          isOpen={dropdownStates.commission_instance_id}
                          onOpenChange={() =>
                            toggleDropdown('commission_instance_id')
                          }
                          onSelect={(value) => {
                            field.onChange(String(value));
                            handleChildFieldReset('commission_instance_id');
                            handleStepOneTitles('commission_instance_id', {
                              title: 'Commission Instance',
                              value:
                                commissionSetInstances.find(
                                  (instance: any) =>
                                    String(instance.id) === String(value),
                                )?.name || '',
                            });
                            handleSetInstanceOnChange(String(value));
                            setInstanceSelected(
                              commissionSetInstances.find(
                                (instance: any) =>
                                  String(instance.id) === String(value),
                              ) || {},
                            );
                            clearErrors('commission_instance_id');
                            setDropdownStates((prev) => ({
                              ...prev,
                              commission_instance_id: false,
                            }));
                          }}
                          required
                        />
                      )}
                    />

                    <FormField
                      control={control}
                      name="invoice_branch_id"
                      render={({ field }) => (
                        <SearchableSelect
                          field={field}
                          label="Invoice Branch"
                          placeholder="Choose Invoice Branch"
                          options={invoiceBranches.map((item: any) => ({
                            id: item.id,
                            name: item.name,
                          }))}
                          isOpen={dropdownStates.invoice_branch_id}
                          onOpenChange={() =>
                            toggleDropdown('invoice_branch_id')
                          }
                          onSelect={(value) => {
                            field.onChange(String(value));
                            handleStepOneTitles('invoice_branch_id', {
                              title: 'Invoice Branch',
                              value:
                                invoiceBranches.find(
                                  (branch: any) =>
                                    String(branch.id) === String(value),
                                )?.name || '',
                            });
                            clearErrors('invoice_branch_id');
                            setDropdownStates((prev) => ({
                              ...prev,
                              invoice_branch_id: false,
                            }));
                          }}
                          required
                        />
                      )}
                    />

                    <FormField
                      control={control}
                      name="invoice_bank_account_id"
                      render={({ field }) => (
                        <SearchableSelect
                          field={field}
                          label="Invoice Bank Account"
                          placeholder="Choose Invoice Bank Account"
                          options={invoiceBankAccounts.map((item: any) => ({
                            id: item.id,
                            name: item.name,
                          }))}
                          isOpen={dropdownStates.invoice_bank_account_id}
                          onOpenChange={() =>
                            toggleDropdown('invoice_bank_account_id')
                          }
                          onSelect={(value) => {
                            field.onChange(String(value));
                            handleStepOneTitles('invoice_bank_account_id', {
                              title: 'Invoice Bank Account',
                              value:
                                invoiceBankAccounts.find(
                                  (account: any) =>
                                    String(account.id) === String(value),
                                )?.name || '',
                            });
                            clearErrors('invoice_bank_account_id');
                            setDropdownStates((prev) => ({
                              ...prev,
                              invoice_bank_account_id: false,
                            }));
                          }}
                          required
                        />
                      )}
                    />

                    {enquiryType === '2' && (
                      <div className="flex items-start w-full">
                        <FormField
                          control={control}
                          name="ma_commission_type"
                          render={({ field }) => (
                            <SearchableSelect
                              field={field}
                              label="(MA) Commission Type"
                              placeholder="Choose (MA) Commission Type"
                              options={VC_COMMISSION_TYPE.map((item: any) => ({
                                id: item.id,
                                name: item.name,
                              }))}
                              isOpen={dropdownStates.ma_commission_type}
                              onOpenChange={() =>
                                toggleDropdown('ma_commission_type')
                              }
                              onSelect={(value) => {
                                field.onChange(String(value));
                                if (value === '1') {
                                  setValue('ma_commission_percentage', '');
                                }

                                if (value === '2') {
                                  setValue('ma_commission_amount', '');
                                }
                                handleStepOneTitles('ma_commission_type', {
                                  title: '(MA) Commission Type',
                                  value:
                                    VC_COMMISSION_TYPE.find(
                                      (ct: any) =>
                                        String(ct.id) === String(value),
                                    )?.name || '',
                                });
                                clearErrors('ma_commission_type');
                                setDropdownStates((prev) => ({
                                  ...prev,
                                  ma_commission_type: false,
                                }));
                              }}
                              required
                            />
                          )}
                        />

                        {watch('ma_commission_type') === '2' && (
                          <FormField
                            control={control}
                            name={`ma_commission_percentage`}
                            render={({ field }) => (
                              <FormItem className="space-y-2 w-1/4 rounded-fullp-2">
                                <FormLabel className="no-error-styles font-bold">
                                  <span className="text-red-600 pl-1">*</span>
                                  (MA) Commission Percentage
                                </FormLabel>
                                <FormControl>
                                  <Input
                                    type="text"
                                    inputMode="decimal"
                                    className="rounded-full border-gray-600 shadow-none focus-within:shadow-none hover:shadow-none focus:shadow-none"
                                    placeholder="Enter (MA) Commission Percentage"
                                    value={String(field.value || '')}
                                    onChange={(e) => {
                                      const value = e.target.value;
                                      if (/^\d*\.?\d*$/.test(value)) {
                                        if (value === '') {
                                          field.onChange('');
                                          return;
                                        }

                                        const regex =
                                          /^(100(\.0{0,2})?|(\d{1,2})(\.\d{0,2})?)$/;

                                        if (regex.test(value)) {
                                          const num = parseFloat(value);
                                          if (num <= 100) {
                                            field.onChange(String(value));
                                          }
                                        }
                                      }
                                    }}
                                    onBlur={field.onBlur}
                                  />
                                </FormControl>
                                <FormMessage />
                              </FormItem>
                            )}
                          />
                        )}

                        {watch('ma_commission_type') === '1' && (
                          <FormField
                            control={control}
                            name={`ma_commission_amount`}
                            render={({ field }) => (
                              <FormItem className="space-y-2 w-1/4 rounded-full p-2">
                                <FormLabel className="no-error-styles font-bold">
                                  <span className="text-red-600 pl-1">*</span>
                                  (MA) Commission Amount
                                </FormLabel>
                                <FormControl>
                                  <Input
                                    type="text"
                                    inputMode="decimal"
                                    className="rounded-full border-gray-600 shadow-none focus-within:shadow-none hover:shadow-none focus:shadow-none"
                                    placeholder="Enter (MA) Commission Amount"
                                    value={String(field.value || '')}
                                    onChange={(e) => {
                                      const value = e.target.value;
                                      if (/^\d*\.?\d*$/.test(value)) {
                                        if (value === '') {
                                          field.onChange('');
                                          return;
                                        }
                                        field.onChange(String(value));
                                      }
                                    }}
                                    onBlur={field.onBlur}
                                  />
                                </FormControl>
                                <FormMessage />
                              </FormItem>
                            )}
                          />
                        )}
                      </div>
                    )}
                  </>
                  {eligibleCases.length > 0 && (
                    <Text className="container-widget mx-auto">
                      <Text className="wo-favorite-table box wo-table-ui-scroller">
                        <Text className="wo-box-header flex justify-between gap-5">
                          <Text className="wo-box-header-left">
                            <Heading
                              level="h3"
                              className="box-title text-primary"
                            >
                              Select Eligible Cases
                            </Heading>
                          </Text>
                        </Text>
                        <Text className="p-1 w-full overflow-auto table-responsive table-container mt-2">
                          <EligibleCasesList
                            tableData={eligibleCases}
                            selectedRows={selectedRows}
                            setSelectedRows={setSelectedRows}
                            filterEligibleCases={filterEligibleCases}
                            setFilterEligibleCases={setFilterEligibleCases}
                          />
                        </Text>
                      </Text>
                    </Text>
                  )}
                </Text>
              )}
              {step === 2 && (
                <>
                  <Text className="flex flex-wrap p-2 form-mid mt-0">
                    <StepOneInfo titles={nextStepValues} />
                    <CommissionCards
                      instanceSelected={instanceSelected}
                      control={control}
                      records={eligibleCases}
                      enquiryType={enquiryType as string}
                      filterEligibleCases={filterEligibleCases}
                    />
                  </Text>
                </>
              )}
            </Text>
            {step === 1 && (
              <div
                className={`modal-footer flex justify-end items-start footer-modal text-right gap-2 m-0 pr-4 p-2`}
              >
                {selectedRows.length > 0 && (
                  <Button
                    type="button"
                    className="m-0 filter-search-btn tracking-wider w-40 primary-button"
                    disabled={isNextLoading}
                    onClick={() => handleNext()}
                  >
                    {isNextLoading && (
                      <span className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
                    )}
                    {isNextLoading ? 'Processing...' : 'Next'}
                  </Button>
                )}
              </div>
            )}
            {step === 2 && (
              <div
                className={`modal-footer flex justify-end items-start footer-modal text-right gap-2 m-0 pr-4 p-2`}
              >
                <Button
                  type="button"
                  disabled={isSubmitting}
                  className="m-0 filter-search-btn tracking-wider w-40 primary-button"
                  onClick={() => setStep(1)}
                >
                  Back
                </Button>
                <Button
                  type="submit"
                  disabled={isSubmitting}
                  className="m-0 filter-search-btn tracking-wider w-40 primary-button"
                >
                  {isSubmitting && (
                    <span className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
                  )}
                  {isSubmitting ? 'Submitting...' : 'Submit'}
                </Button>
              </div>
            )}
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
};

export default AddCommissionEnquiry;