import React from 'react';
import {
  Control,
  UseFormClearErrors,
  FieldErrors,
  UseFormSetValue,
} 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';
import { UnknownRecord } from '@/types';

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

interface BonusTypeAndAmountFieldsProps {
  control: Control<any>;
  clearErrors: UseFormClearErrors<any>;
  bonusTypeOptions: BonusOption[];
  applicableIndex: number;
  setIndex: number;
  record?: UnknownRecord;
  getValues: any;
  setValue: UseFormSetValue<any>;
}

const BonusTypeAndAmountFields: React.FC<BonusTypeAndAmountFieldsProps> = ({
  control,
  clearErrors,
  bonusTypeOptions,
  applicableIndex,
  setIndex,
  record,
  getValues,
  setValue,
}) => {
  return (
    <>
      <FormField
        control={control}
        name={`applicable_sets.${applicableIndex}.sets.${setIndex}.bonus_type`}
        render={({ field }) => (
          <FormItem className="w-full md:w-1/2 lg:w-1/4 p-2">
            <FormLabel className="font-bold">
              <span className="text-red-600 pl-1">* </span>
              Bonus Type
            </FormLabel>
            <Select
              value={String(field.value || '')}
              onValueChange={(value) => {
                field.onChange(String(value));
                clearErrors(
                  `applicable_sets.${applicableIndex}.sets.${setIndex}.bonus_type`,
                );
                setValue(
                  `applicable_sets.${applicableIndex}.sets.${setIndex}.bonus_amount`,
                  '',
                );
              }}
            >
              <SelectTrigger>
                <SelectValue placeholder="Select Bonus" />
              </SelectTrigger>
              <SelectContent className="z-[9999]">
                {bonusTypeOptions.map((item) => (
                  <SelectItem key={String(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}.bonus_amount`}
          render={({ field }) => (
            <FormItem className="space-y-2 w-full rounded-full count-set">
              <FormLabel className="no-error-styles font-bold">
                <span className="text-red-600 pl-1">*</span>Bonus{' '}
                {getValues(
                  `applicable_sets.${applicableIndex}.sets.${setIndex}.bonus_type`,
                ) === ''
                  ? ''
                  : String(
                        getValues(
                          `applicable_sets.${applicableIndex}.sets.${setIndex}.bonus_type`,
                        ),
                      ) === '1'
                    ? 'Amount'
                    : 'Percentage'}
              </FormLabel>
              {String(
                getValues(
                  `applicable_sets.${applicableIndex}.sets.${setIndex}.bonus_type`,
                ),
              ) === '1' && (
                <div className="country-tag">{getValues('currency')}</div>
              )}
              <FormControl
                className={
                  String(
                    getValues(
                      `applicable_sets.${applicableIndex}.sets.${setIndex}.bonus_type`,
                    ),
                  ) === '1'
                    ? 'input-pl-50'
                    : ''
                }
              >
                <Input
                  type="text"
                  className="rounded-full border-gray-600 shadow-none focus-within:shadow-none hover:shadow-none focus:shadow-none"
                  placeholder={
                    String(
                      getValues(
                        `applicable_sets.${applicableIndex}.sets.${setIndex}.bonus_type`,
                      ),
                    ) === '1'
                      ? 'Enter Bonus Amount'
                      : 'Enter Bonus Percentage'
                  }
                  value={String(field.value || '')}
                  onChange={(e) => {
                    const value = e.target.value;
                    const bonusType = String(
                      getValues(
                        `applicable_sets.${applicableIndex}.sets.${setIndex}.bonus_type`,
                      ) || '',
                    );

                    let isValid = false;

                    /** FIXED AMOUNT */
                    if (bonusType === '1') {
                      // Max 14 digits + optional .00
                      const fixedRegex = /^\d{0,9}(\.\d{0,2})?$/;
                      isValid = fixedRegex.test(value);
                    }

                    /** PERCENTAGE */
                    if (bonusType === '2') {
                      // 0–100 with max 2 decimals
                      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}.bonus_amount`,
                      );
                    }
                  }}
                  onBlur={field.onBlur}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
      </div>
    </>
  );
};

export default BonusTypeAndAmountFields;