'use client';

import React, { useState, useCallback, useMemo, useEffect } from 'react';
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogTitle,
  DialogDescription,
  DialogClose,
} from '@/components/ui/dialog';
import CommonImage from '@/components/common/CommonImage';
import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
import { Control, 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 } from '@/constants';
import { useToast } from '@/hooks/use-toast';
import {
  ApiResponse,
  BucketProp,
  fnEmpty,
  HandlePaginatedRecords,
  UnknownRecord,
} from '@/types';
import { globalApiGet, globalApiPost } from '@/services/global/globalApiCalls';
import { Button } from '@/components/ui/button';
import { Text } from '../../ui/text';
import { Input } from '../../ui/input';
import TaxSection, { FormDataWithTaxDetails } from '../../common/TaxSection';
import {
  bankAccountDependentPaymentMode,
  calculateAmount,
  prepareEditFormDefaultValues,
} from './constants';
import { DateMode, validateInputDate } from '@/utils/dateValidation';
import { maskDate } from '@/utils/dateMask';
import { SearchableSelect } from '../contracts/forms/SearchableSelect';
import { CURRENCY_LIST } from '@/constants';
import { useAppToast } from '@/hooks/useAppToast';
import { C_M } from '@/constants/typo/submit-alerts';
import { Textarea } from '@/components/ui/textarea';

export type EditCommissionBonusProps = {
  triggerIcon?: React.ReactNode;
  bucket: BucketProp['bucket'];
  handlePaginatedRecords: HandlePaginatedRecords;
  record: UnknownRecord;
  onSuccess?: fnEmpty;
};

const EditCommissionBonus: React.FC<EditCommissionBonusProps> = ({
  record,
  triggerIcon,
  bucket,
  handlePaginatedRecords,
  onSuccess,
}) => {
  const { toast } = useToast();
  const { showSuccess, showError } = useAppToast();
  const [isOpen, setIsOpen] = useState(false);

  const EditCommissionBonusSchema = bucket?.crud?.edit.schema.validator;

  // Create default values from the record
  const defaultValues = useMemo(() => {
    const preparedValues = prepareEditFormDefaultValues(record) as any;
    preparedValues.items = record.tax_details;

    if (record?.payment_date) {
      const date = new Date(record.payment_date);
      if (!isNaN(date.getTime())) {
        const day = String(date.getDate()).padStart(2, '0');
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const year = date.getFullYear();
        preparedValues.payment_date = `${day}/${month}/${year}`;
      }
    }

    return preparedValues;
  }, [record]);

  const form = useForm<z.infer<typeof EditCommissionBonusSchema>>({
    resolver: zodResolver(EditCommissionBonusSchema),
    defaultValues,
  });

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

  const associationType = useMemo(
    () => bucket?.default_params?.association_type,
    [bucket],
  );

  // Watch form values to update state
  const totalAmount = watch('total_amount_inr') || 0;
  const otherDeductions = watch('other_deductions') || 0;
  const conversionRate = watch('conversion_rate') || 0;

  const [dropdownStates, setDropdownStates] = useState({
    visa_service_country_id: false,
    associate_id: false,
    payment_mode_id: false,
    bank_account_id: false,
    currency: false,
  });

  const [defaultAssociates, setDefaultAssociates] = useState<UnknownRecord[]>(
    [],
  );
  const [defaultServiceCountries, setDefaultServiceCountries] = useState<
    UnknownRecord[]
  >([]);
  const [defaultPaymentModes, setDefaultPaymentModes] = useState<
    UnknownRecord[]
  >([]);
  const [defaultBankAccounts, setDefaultBankAccounts] = useState<
    UnknownRecord[]
  >([]);
  const [amountAfterTax, setAmountAfterTax] = useState<string | number>(0);
  const [netAmount, setNetAmount] = useState<string | number>(0);
  const [paymentMode, setPaymentMode] = useState<number>(0);

  useEffect(() => {
    if (record && isOpen) {
      setValue(
        'visa_service_country_id',
        String(record?.visa_service_country_id),
      );
      setValue('conversion_rate', String(record.conversion_rate || ''));

      const conversionRate = record?.conversion_rate || 0;
      const totalAmount = record?.total_amount;
      const convertedAmount = totalAmount * conversionRate;
      setValue('total_amount_inr', String(convertedAmount.toFixed(2)));

      const otherDeductionsValue = parseFloat(
        String(record.other_deductions || 0),
      );

      let totalTax = 0;
      if (record.tax_details && record.tax_details.length > 0) {
        try {
          const taxDetails = record.tax_details;
          taxDetails.forEach((tax: any) => {
            totalTax += parseFloat(tax.tax_amount || 0);
          });
        } catch (error) {
          console.error('Error parsing tax details:', error);
        }
      }

      const afterTax = convertedAmount - totalTax;
      const net = afterTax - otherDeductionsValue;

      setAmountAfterTax(afterTax);
      setNetAmount(net);
      setPaymentMode(Number(record.payment_mode_id || 0));

      setValue('total_amount_inr', String(convertedAmount));
      setValue('other_deductions', String(otherDeductionsValue));
      setValue('net_amount_inr', String(net));

      if (record.conversion_rate) {
        setValue('conversion_rate', String(record.conversion_rate));
      }
      if (record.total_amount) {
        setValue('total_amount', String(record.total_amount));
      }
      if (record.currency) {
        setValue('currency', String(record.currency));
      }
      setValue('bank_account_id', String(record.bank_account_id || ''));
      setValue('associate_id', String(record.associate_id || ''));
    }
    if (record?.payment_mode_id) {
      setValue('payment_mode_id', String(record.payment_mode_id));
    }
  }, [record, isOpen, setValue]);

  const handleOpenChange = async (open: boolean) => {
    setIsOpen(open);
    if (open) {
      handleOnOpen();
      // Reset form with current record values when opening
      // reset(defaultValues);
    } else {
      reset(); // Reset form when closing
    }
  };

  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.BONUS_RECEIVED.VISA_SERVICE_COUNTRIES),
      globalApiGet(API_ENDPOINTS.BONUS_RECEIVED.PAYMENT_MODE_LIST),
      globalApiGet(API_ENDPOINTS.BONUS_RECEIVED.BANK_ACCOUNT_LIST),
    ];

    try {
      const [serviceCountriesRes, paymentModesRes, bankAccountRes] =
        (await Promise.all(apiRequests)) as ApiResponse<UnknownRecord>[];
      setDefaultServiceCountries(extractData(serviceCountriesRes));
      setDefaultPaymentModes(extractData(paymentModesRes));
      setDefaultBankAccounts(extractData(bankAccountRes));

      // Load associates if visa_service_country_id exists in record
      if (record?.visa_service_country_id) {
        await handleServiceCountryChange(
          String(record.visa_service_country_id),
        );
      }
    } catch (error) {
      console.error('Error loading data:', error);
      setDefaultServiceCountries([]);
      setDefaultAssociates([]);
      setDefaultPaymentModes([]);
      setDefaultBankAccounts([]);
    }
  }, [record]);

  const handleServiceCountryChange = useCallback(
    async (visaServiceCountryId: string) => {
      const params: UnknownRecord = {
        visa_service_country_id: Number(visaServiceCountryId),
        association_type: Number(associationType),
      };

      try {
        const associates = await globalApiPost<ApiResponse<UnknownRecord[]>>(
          API_ENDPOINTS.BONUS_RECEIVED.ASSOCIATE_LIST,
          params,
        );

        setDefaultAssociates(Array.isArray(associates) ? associates : []);
      } catch (error) {
        console.error('Error loading Associates:', error);
        setDefaultAssociates([]);
      }
    },
    [associationType],
  );

  const handleTotalAmountChange = useCallback(
    (freshTotalInr?: number) => {
      const totalAmountValue =
        freshTotalInr ?? (parseFloat(String(totalAmount)) || 0);
      const taxes = getValues('items') as Array<Record<string, any>>;
      let totalTax = 0;

      taxes.forEach((tax, index) => {
        const taxAmount = calculateAmount(tax.tax_per, totalAmountValue);
        totalTax += taxAmount;
        setValue(`items.${index}.tax_amount`, taxAmount as any);
      });

      const afterTax = parseFloat((totalAmountValue - totalTax).toFixed(2));
      setAmountAfterTax(afterTax);

      const deduction = parseFloat(String(otherDeductions)) || 0;
      const net = parseFloat((afterTax - deduction).toFixed(2));
      setNetAmount(net);
      setValue('net_amount_inr', net.toString());
    },
    [totalAmount, otherDeductions, getValues, setValue],
  );

  const convertToInr = useCallback(
    (freshTotalAmount?: string, freshConversionRate?: string) => {
      const totalAmountValue =
        parseFloat(freshTotalAmount ?? String(getValues('total_amount'))) || 0;
      const conversionRateValue =
        parseFloat(
          freshConversionRate ?? String(getValues('conversion_rate')),
        ) || 1;
      const convertedAmount = totalAmountValue * conversionRateValue;

      setValue('total_amount_inr', convertedAmount.toString());
      handleTotalAmountChange(convertedAmount); // pass fresh INR value
    },
    [getValues, setValue, handleTotalAmountChange],
  );

  const handleOtherDeductionOnChange = useCallback(
    async (deduction: number | string) => {
      const deductionValue = parseFloat(String(deduction)) || 0;
      const afterTax = parseFloat(String(amountAfterTax)) || 0;

      if (deductionValue > afterTax) {
        setError('other_deductions', {
          type: 'manual',
          message: 'Other deductions cannot exceed the amount after tax',
        });
      } else {
        clearErrors('other_deductions');
      }

      const finalAmount = parseFloat((afterTax - deductionValue).toFixed(2));
      setNetAmount(finalAmount);
      setValue('net_amount_inr', finalAmount.toString());
    },
    [amountAfterTax, setError, clearErrors, setValue],
  );

  const onSubmit = useCallback(
    async (data: z.infer<typeof EditCommissionBonusSchema>) => {
      try {
        const items = getValues('items') as Array<Record<string, any>>;
        let totalTaxAmount = 0;

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

        const convertedAmount =
          parseFloat(data.conversion_rate) * parseFloat(data.total_amount);

        const submissionData = {
          ...data,
          id: String(record?.id ?? ''),
          association_type: Number(associationType),
          visa_service_country_id: Number(data.visa_service_country_id),
          associate_id: Number(data.associate_id),
          total_tax_amount: String(totalTaxAmount),
          tax_details: items && items.length > 0 ? JSON.stringify(items) : null,
          payment_date: data.payment_date.includes('/')
            ? data.payment_date.split('/').reverse().join('-')
            : data.payment_date,
          other_deductions: String(parseFloat(data.other_deductions) || 0),
          deduction_reason: data.deduction_reason ?? '',
          remarks: data.remarks ?? '',
          bank_account_id:
            data.payment_mode_id == 1 ? null : Number(data.bank_account_id),
          transaction_id:
            data.payment_mode_id == 1 ? '' : String(data.transaction_id),

          total_amount_inr: String(convertedAmount) || 0,
          net_amount_inr: String(data.net_amount_inr),
        };

        const response = (await globalApiPost(
          API_ENDPOINTS.BONUS_RECEIVED.EDIT,
          submissionData,
          false,
        )) as UnknownRecord;

        if (!response?.success) {
          showError((response as any).errors, C_M.UPDATE_FAILED);
        } else {
          showSuccess(C_M.CREATE_SUCCESS);
          onSuccess?.();
          setIsOpen(false);
          handlePaginatedRecords(1, {});
          form.reset();
        }
      } catch (error: any) {
        console.error('Submission error:', error);
        showError(error, C_M.SUBMIT_ERROR);
      }
    },
    [record, associationType, getValues, handlePaginatedRecords, toast],
  );

  return (
    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
      <DialogTrigger asChild>
        {triggerIcon || (
          <Button className="button-action">
            <CommonImage
              src="/main/edit-icon.png"
              width={15}
              height={15}
              alt={'Edit Record'}
              classname="info-icon"
            />
          </Button>
        )}
      </DialogTrigger>

      <DialogContent
        className="modal-common-widget w-full max-w-7xl p-0 m-0 table-modal-settings state-widget"
        onInteractOutside={(e) => e.preventDefault()}
        onEscapeKeyDown={(e) => e.preventDefault()}
        onClick={(e) => e.stopPropagation()}
      >
        <DialogTitle className="p-5 modal-header">
          Edit Commission Bonus -{' '}
          {associationType == 1 ? 'Institute' : 'Master Agent'}
        </DialogTitle>
        <DialogDescription>{''}</DialogDescription>
        <DialogClose asChild>
          <button
            onClick={() => setIsOpen(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);
            })}
            encType="multipart/form-data"
          >
            <Text className="main-scroll-widget">
              <Text className="flex flex-wrap p-2 form-mid mt-0">
                <>
                  <FormField
                    control={control}
                    name="visa_service_country_id"
                    render={({ field }) => (
                      <SearchableSelect
                        field={field}
                        label="Visa Service Country"
                        placeholder="Choose Visa Service Country"
                        options={defaultServiceCountries.map((item: any) => ({
                          id: String(item.id),
                          name: item.name,
                        }))}
                        isOpen={dropdownStates.visa_service_country_id}
                        onOpenChange={() =>
                          toggleDropdown('visa_service_country_id')
                        }
                        onSelect={(value) => {
                          field.onChange(String(value));
                          clearErrors('visa_service_country_id');
                          setDropdownStates((prev) => ({
                            ...prev,
                            visa_service_country_id: false,
                          }));
                          handleServiceCountryChange(String(value));
                        }}
                        required
                      />
                    )}
                  />

                  <FormField
                    control={control}
                    name="associate_id"
                    render={({ field }) => (
                      <SearchableSelect
                        field={field}
                        label={
                          Number(associationType) === 1
                            ? 'Institute'
                            : 'Master Agent'
                        }
                        placeholder={`Choose ${Number(associationType) === 1 ? 'Institute' : 'Master Agent'}`}
                        options={defaultAssociates.map((item: any) => ({
                          id: String(item.id),
                          name: item.name,
                        }))}
                        isOpen={dropdownStates.associate_id}
                        onOpenChange={() => toggleDropdown('associate_id')}
                        onSelect={(value) => {
                          field.onChange(String(value));
                          clearErrors('associate_id');
                          setDropdownStates((prev) => ({
                            ...prev,
                            associate_id: false,
                          }));
                        }}
                        required
                      />
                    )}
                  />

                  <div className="space-y-2 w-full md:w-1/2 lg:w-1/4 p-2 relative">
                    <label className="text-sm font-bold">
                      <span className="text-red-600 pl-1">*</span>
                      Total Amount
                    </label>
                    <FormField
                      control={control}
                      name="total_amount"
                      render={({ field }) => (
                        <FormItem className="space-y-2 w-full rounded-full">
                          <FormControl className="input-pl-50">
                            <Input
                              type="text"
                              placeholder="Enter Total Amount"
                              maxLength={16}
                              value={String(field.value || '')}
                              onBlur={field.onBlur}
                              className="rounded-full border-gray-600 shadow-none focus:shadow-none"
                              onChange={(e) => {
                                const value = String(e.target.value);
                                if (/^\d*\.?\d*$/.test(value)) {
                                  field.onChange(value);
                                  convertToInr(value, undefined);
                                }
                              }}
                            />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </div>

                  <FormField
                    control={control}
                    name="currency"
                    render={({ field }) => (
                      <SearchableSelect
                        field={field}
                        label="Currency"
                        placeholder="Choose Currency"
                        options={CURRENCY_LIST.map((item: any) => ({
                          id: String(item.id),
                          name: item.name,
                        }))}
                        isOpen={dropdownStates.currency}
                        onOpenChange={() => toggleDropdown('currency')}
                        onSelect={(value) => {
                          field.onChange(String(value));
                          clearErrors('currency');
                          setDropdownStates((prev) => ({
                            ...prev,
                            currency: false,
                          }));
                        }}
                        required
                      />
                    )}
                  />

                  <div className="space-y-2 w-full md:w-1/2 lg:w-1/4 p-2 relative">
                    <label className="text-sm font-bold">
                      <span className="text-red-600 pl-1">*</span>
                      Conversion Rate
                    </label>
                    <FormField
                      control={control}
                      name="conversion_rate"
                      render={({ field }) => (
                        <FormItem className="space-y-2 w-full rounded-full">
                          <FormControl className="input-pl-50">
                            <Input
                              type="text"
                              placeholder="Enter Conversion Rate"
                              maxLength={7}
                              value={String(field.value || '')}
                              onChange={(e) => {
                                const value = e.target.value;
                                if (/^\d*\.?\d*$/.test(value)) {
                                  field.onChange(value);
                                  convertToInr(undefined, value);
                                }
                              }}
                              onBlur={field.onBlur}
                              className="rounded-full border-gray-600 shadow-none focus:shadow-none"
                            />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </div>

                  <div className="space-y-2 w-full md:w-1/2 lg:w-1/4 p-2 relative">
                    <label className="text-sm font-bold">
                      <span className="text-red-600 pl-1">*</span>
                      Total Amount in INR
                    </label>
                    <FormField
                      control={control}
                      name="total_amount_inr"
                      render={({ field }) => (
                        <FormItem className="space-y-2 w-full rounded-full">
                          <FormControl className="input-pl-50">
                            <Input
                              type="text"
                              readOnly
                              placeholder="Total Amount INR"
                              value={String(field.value || '')}
                              className="rounded-full border-gray-600 shadow-none focus:shadow-none bg-gray-100"
                              onChange={(e) => {
                                const value = String(e.target.value);
                                if (/^\d*\.?\d*$/.test(value)) {
                                  field.onChange(value);
                                  handleTotalAmountChange();
                                }
                              }}
                            />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </div>

                  <TaxSection
                    control={
                      form.control as unknown as Control<FormDataWithTaxDetails>
                    }
                    name="items"
                    record={record}
                    totalAmount={parseFloat(String(totalAmount)) || 0}
                    amountAfterTax={amountAfterTax}
                    setAmountAfterTax={setAmountAfterTax}
                    otherDeduction={otherDeductions}
                    setNetAmount={setNetAmount}
                  />

                  <div className="space-y-2 w-full md:w-1/2 lg:w-1/4 p-2 relative">
                    <label className="text-sm font-bold">
                      Other Deductions
                    </label>
                    <FormField
                      control={control}
                      name="other_deductions"
                      render={({ field }) => (
                        <FormItem className="space-y-2 w-full rounded-full">
                          <FormControl>
                            <Input
                              {...field}
                              maxLength={16}
                              type="text"
                              className="rounded-full border-gray-600 shadow-none focus-within:shadow-none hover:shadow-none focus:shadow-none"
                              placeholder="Enter Other Deductions"
                              value={
                                Number(field.value) > 0
                                  ? String(field.value)
                                  : ''
                              }
                              onChange={(e) => {
                                const value = e.target.value;
                                if (/^\d*\.?\d*$/.test(value)) {
                                  field.onChange(value);
                                  handleOtherDeductionOnChange(value);
                                }
                              }}
                              onBlur={() =>
                                handleOtherDeductionOnChange(field.value || 0)
                              }
                            />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </div>

                  <div className="space-y-2 w-full md:w-1/2 lg:w-3/4 p-2 relative">
                    <label className="text-sm font-bold">
                      Deduction Reason
                    </label>
                    <FormField
                      control={control}
                      name="deduction_reason"
                      render={({ field }) => (
                        <FormItem className="space-y-2 w-full rounded-full">
                          <FormControl>
                            <Input
                              {...field}
                              minLength={1}
                              maxLength={500}
                              type="text"
                              className="rounded-full border-gray-600 shadow-none focus-within:shadow-none hover:shadow-none focus:shadow-none"
                              placeholder="Enter Deduction Reason"
                            />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </div>

                  <div className="space-y-2 w-full md:w-1/2 lg:w-1/4 p-2 relative">
                    <label className="text-sm font-bold">
                      <span className="text-red-600 pl-1">*</span>
                      Net Amount in INR
                    </label>
                    <FormField
                      control={control}
                      name="net_amount_inr"
                      render={({ field }) => (
                        <FormItem className="space-y-2 w-full rounded-full">
                          <FormControl>
                            <Input
                              {...field}
                              minLength={1}
                              maxLength={13}
                              readOnly={true}
                              type="text"
                              value={netAmount}
                              className="rounded-full border-gray-600 shadow-none focus-within:shadow-none hover:shadow-none focus:shadow-none"
                              placeholder="Enter Net Amount in INR"
                            />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </div>

                  <div className="space-y-2 w-full md:w-1/2 lg:w-1/4 p-2 relative">
                    <label className="text-sm font-bold">
                      <span className="text-red-600 pl-1">*</span>
                      Payment Date
                    </label>
                    <FormField
                      control={control}
                      name="payment_date"
                      rules={{ required: 'Payment date is required' }}
                      render={({ field }) => (
                        <FormItem className="space-y-2 w-full rounded-full">
                          <FormControl>
                            <Input
                              {...field}
                              type="text"
                              inputMode="numeric"
                              maxLength={10}
                              placeholder="DD/MM/YYYY"
                              className="rounded-full border-gray-600 shadow-none focus-within:shadow-none hover:shadow-none focus:shadow-none"
                              onChange={(e) => {
                                const maskedValue = maskDate(e.target.value);
                                field.onChange(maskedValue);
                                const error = validateInputDate(
                                  maskedValue,
                                  DateMode.PAST_CURRENT,
                                );
                                if (error) {
                                  setError('payment_date', { message: error });
                                } else {
                                  clearErrors('payment_date');
                                }
                              }}
                              onBlur={(e) => {
                                const value = e.target.value;
                                const error = validateInputDate(
                                  value,
                                  DateMode.PAST_CURRENT,
                                );
                                if (error) {
                                  setError('payment_date', { message: error });
                                } else {
                                  clearErrors('payment_date');
                                }
                              }}
                            />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </div>

                  <FormField
                    control={control}
                    name="payment_mode_id"
                    render={({ field }) => (
                      <SearchableSelect
                        field={field}
                        label="Payment Mode"
                        placeholder="Choose Payment Mode"
                        options={defaultPaymentModes.map((item: any) => ({
                          id: String(item.id),
                          name: item.name,
                        }))}
                        isOpen={dropdownStates.payment_mode_id}
                        onOpenChange={() => toggleDropdown('payment_mode_id')}
                        onSelect={(value) => {
                          field.onChange(String(value));
                          clearErrors('payment_mode_id');
                          setPaymentMode(Number(value));
                          setDropdownStates((prev) => ({
                            ...prev,
                            payment_mode_id: false,
                          }));
                        }}
                        required
                      />
                    )}
                  />

                  {!bankAccountDependentPaymentMode.includes(paymentMode) && (
                    <>
                      <FormField
                        control={control}
                        name="bank_account_id"
                        render={({ field }) => (
                          <SearchableSelect
                            field={field}
                            label="Bank Account"
                            placeholder="Choose Bank Account"
                            options={defaultBankAccounts.map((item: any) => ({
                              id: String(item.id),
                              name: item.name,
                            }))}
                            isOpen={dropdownStates.bank_account_id}
                            onOpenChange={() =>
                              toggleDropdown('bank_account_id')
                            }
                            onSelect={(value) => {
                              field.onChange(String(value));
                              clearErrors('bank_account_id');
                              setDropdownStates((prev) => ({
                                ...prev,
                                bank_account_id: false,
                              }));
                            }}
                            required={true}
                          />
                        )}
                      />

                      <div className="space-y-2 w-full md:w-1/2 lg:w-1/4 p-2 relative">
                        <label className="text-sm font-bold">
                          <span className="text-red-600 pl-1">*</span>
                          Transaction ID
                        </label>
                        <FormField
                          control={control}
                          name="transaction_id"
                          render={({ field }) => (
                            <FormItem className="space-y-2 w-full rounded-full">
                              <FormControl>
                                <Input
                                  {...field}
                                  minLength={1}
                                  maxLength={500}
                                  type="text"
                                  className="rounded-full border-gray-600 shadow-none focus-within:shadow-none hover:shadow-none focus:shadow-none"
                                  placeholder="Enter Transaction ID"
                                />
                              </FormControl>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                      </div>
                    </>
                  )}
                </>
              </Text>
              <div className="flex flex-row items-end gap-4 p-4">
                <FormField
                  control={control}
                  name="remarks"
                  render={({ field }) => (
                    <FormItem className="w-full rounded-full">
                      <FormLabel className="no-error-styles font-bold">
                        Remarks
                      </FormLabel>

                      <FormControl className="input-pl-50">
                        <Textarea
                          rows={4}
                          placeholder="Type remarks here."
                          value={field.value || ''}
                          onChange={field.onChange}
                        />
                      </FormControl>
                    </FormItem>
                  )}
                />
              </div>
            </Text>
            <Text className="modal-footer flex justify-end items-end footer-modal text-right gap-2 m-0 pr-4 p-2">
              <DialogClose asChild>
                <Button
                  type="button"
                  className="m-0 filter-search-btn tracking-wider w-40 primary-button"
                >
                  Cancel
                </Button>
              </DialogClose>
              <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 ? 'Updating...' : 'Edit'}
              </Button>
            </Text>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
};

export default EditCommissionBonus;