import React, { useEffect } from 'react';
import {
  Control,
  UseFormClearErrors,
  FieldErrors,
  Controller,
  UseFormSetValue,
  useFormContext,
} from 'react-hook-form';
import {
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  FormControl,
} from '@/components/ui/form';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Input } from '@/components/ui/input';

interface CommissionTypeOption {
  id: number | string;
  name: string;
}

interface CommissionInstancesSectionProps {
  control: Control<any>;
  clearErrors: UseFormClearErrors<any>;
  applicableIndex: number;
  setIndex: number;
  noOfInstances: number;
  commissionTypeOptions: CommissionTypeOption[];
  getValues: any;
  setValue: UseFormSetValue<any>;
  form: any;
}

const CommissionInstancesSection: React.FC<CommissionInstancesSectionProps> = ({
  control,
  clearErrors,
  applicableIndex,
  setIndex,
  noOfInstances,
  commissionTypeOptions,
  getValues,
  setValue,
  form,
}) => {
  const { unregister } = useFormContext();

  if (noOfInstances <= 0) {
    return null;
  }

  const currentCount =
    form.watch(`applicable_sets.${applicableIndex}.sets.${setIndex}.instances`)
      ?.length || 0;

  useEffect(() => {
    if (currentCount > noOfInstances) {
      for (let i = noOfInstances; i < currentCount; i++) {
        unregister(
          `applicable_sets.${applicableIndex}.sets.${setIndex}.instances.${i}.commission_type`,
        );
        unregister(
          `applicable_sets.${applicableIndex}.sets.${setIndex}.instances.${i}.commission_amount`,
        );
      }
    }
  }, [noOfInstances]);

  return (
    <>
      {Array.from({ length: currentCount }).map((_, i) => (
        <div
          key={i}
          className="commission-instance-widget mt-3 mb-3 sm:mt-4 sm:mb-4"
        >
          <div className="heading ml-1 sm:ml-2 text-sm sm:text-base font-medium">
            Commission Instance {i + 1}
          </div>

          <div className="flex flex-wrap w-full gap-y-2 sm:gap-y-0">
            <Controller
              control={control}
              name={`applicable_sets.${applicableIndex}.sets.${setIndex}.instances.${i}.id`}
              render={({ field }) => (
                <input
                  type="hidden"
                  {...field}
                  value={String(field.value || '') || String(i + 1) || ''}
                />
              )}
            />
            <Controller
              control={control}
              name={`applicable_sets.${applicableIndex}.sets.${setIndex}.instances.${i}.instance`}
              render={({ field }) => (
                <input
                  type="hidden"
                  {...field}
                  value={String(field.value || '') || String(i + 1) || ''}
                />
              )}
            />

            <FormField
              control={control}
              name={`applicable_sets.${applicableIndex}.sets.${setIndex}.instances.${i}.commission_type`}
              render={({ field }) => (
                <FormItem className="w-full md:w-1/2 lg:w-1/4 p-2">
                  <FormLabel className="font-bold text-xs sm:text-sm whitespace-nowrap">
                    <span className="text-red-600 pl-1">*</span>
                    Our Commission Type
                  </FormLabel>
                  <Select
                    value={String(field.value || '')}
                    onValueChange={(value) => {
                      field.onChange(value);
                      clearErrors(
                        `applicable_sets.${applicableIndex}.sets.${setIndex}.instances.${i}.commission_type`,
                      );
                      setValue(
                        `applicable_sets.${applicableIndex}.sets.${setIndex}.instances.${i}.commission_amount`,
                        '',
                      );
                    }}
                  >
                    <SelectTrigger className="min-h-[38px] text-sm">
                      <SelectValue placeholder="Select Commission" />
                    </SelectTrigger>
                    <SelectContent className="z-[9999]">
                      {commissionTypeOptions.map((item) => (
                        <SelectItem key={item.id} value={String(item.id)}>
                          {item.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />

            <div className="space-y-2 w-full md:w-1/2 lg:w-1/4 p-2 relative">
              <FormField
                control={control}
                name={`applicable_sets.${applicableIndex}.sets.${setIndex}.instances.${i}.commission_amount`}
                render={({ field }) => (
                  <FormItem
                    className="w-full our-commission-amount-widget count-set"
                    style={{ width: '100%' }}
                  >
                    <FormLabel className="no-error-styles font-bold text-xs sm:text-sm whitespace-nowrap">
                      <span className="text-red-600 pl-1">*</span>Our Commission
                      {getValues(
                        `applicable_sets.${applicableIndex}.sets.${setIndex}.instances.${i}.commission_type`,
                      ) === ''
                        ? ' '
                        : String(
                              getValues(
                                `applicable_sets.${applicableIndex}.sets.${setIndex}.instances.${i}.commission_type`,
                              ),
                            ) === '1'
                          ? ' Amount'
                          : ' Percentage'}
                    </FormLabel>

                    {String(
                      getValues(
                        `applicable_sets.${applicableIndex}.sets.${setIndex}.instances.${i}.commission_type`,
                      ),
                    ) === '1' && (
                      <div className="country-tag text-xs sm:text-sm">
                        {getValues('currency')}
                      </div>
                    )}

                    <FormControl
                      style={{ width: '100%', display: 'block' }}
                      className={
                        String(
                          getValues(
                            `applicable_sets.${applicableIndex}.sets.${setIndex}.instances.${i}.commission_type`,
                          ),
                        ) === '1'
                          ? 'input-pl-50 block w-full'
                          : 'block w-full'
                      }
                    >
                      <Input
                        autoComplete="off"
                        className="rounded-full border-gray-600 shadow-none min-h-[38px] text-sm"
                        style={{ width: '100%' }}
                        placeholder={
                          String(
                            getValues(
                              `applicable_sets.${applicableIndex}.sets.${setIndex}.instances.${i}.commission_type`,
                            ),
                          ) === '1'
                            ? ' Enter Commission Amount'
                            : ' Enter Commission Percentage'
                        }
                        value={String(field.value || '') ?? ''}
                        onChange={(e) => {
                          const value = e.target.value;
                          const commissionType = String(
                            getValues(
                              `applicable_sets.${applicableIndex}.sets.${setIndex}.instances.${i}.commission_type`,
                            ) || '',
                          );

                          let isValid = false;

                          if (commissionType === '1') {
                            const fixedRegex = /^\d{0,9}(\.\d{0,2})?$/;
                            isValid = fixedRegex.test(value);
                          }

                          if (commissionType === '2') {
                            const percentRegex =
                              /^(100(\.00?)?|(\d{0,2})(\.\d{0,2})?)$/;
                            isValid =
                              percentRegex.test(value) && Number(value) <= 100;
                          }

                          if (isValid || value === '') {
                            field.onChange(value);
                            clearErrors(
                              `applicable_sets.${applicableIndex}.sets.${setIndex}.instances.${i}.commission_amount`,
                            );
                          }
                        }}
                        onBlur={field.onBlur}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>
          </div>
        </div>
      ))}
    </>
  );
};

export default CommissionInstancesSection;