import React from 'react';
import { Control, UseFormClearErrors, FieldErrors } 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[];
}

const CommissionInstancesSection: React.FC<CommissionInstancesSectionProps> = ({
  control,
  clearErrors,
  applicableIndex,
  setIndex,
  noOfInstances,
  commissionTypeOptions,
}) => {
  // Don't render anything if no instances
  if (noOfInstances <= 0) {
    return null;
  }

  return (
    <>
      {Array.from({ length: noOfInstances }).map((_, i) => (
        <div key={i} className="commission-instance-widget mt-4 mb-4">
          <div className="heading ml-2">Commission Instance {i + 1}</div>
          <div className="flex flex-wrap w-full">
            {/* Commission Type */}
            <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">
                    <span className="text-red-600 pl-1">*</span>
                    Our Commission Type
                  </FormLabel>
                  <Select
                    value={field.value ?? ''}
                    onValueChange={(value) => {
                      field.onChange(value);
                      clearErrors(
                        `applicable_sets.${applicableIndex}.sets.${setIndex}.instances.${i}.commission_type`,
                      );
                    }}
                  >
                    <SelectTrigger>
                      <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>
              )}
            />

            {/* Commission Amount */}
            <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>
                Our Commission Amount
              </label>
              <FormField
                control={control}
                name={`applicable_sets.${applicableIndex}.sets.${setIndex}.instances.${i}.commission_amount`}
                render={({ field }) => (
                  <FormItem className="w-full rounded-full our-commission-amount-widget">
                    <FormControl>
                      <Input
                        autoComplete="off"
                        className="rounded-full border-gray-600 shadow-none"
                        placeholder="Enter Commission Amount"
                        value={field.value ?? ''}
                        onChange={(e) => {
                          // Allow numbers with optional single decimal point
                          if (/^\d*\.?\d*$/.test(e.target.value)) {
                            field.onChange(e.target.value);
                            clearErrors(
                              `applicable_sets.${applicableIndex}.sets.${setIndex}.instances.${i}.commission_amount`,
                            );
                          }
                        }}
                        onBlur={field.onBlur}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>
          </div>
        </div>
      ))}
    </>
  );
};

export default CommissionInstancesSection;