'use client';

import { useForm, SubmitHandler } from 'react-hook-form';
import { CommissionRule, CommissionType } from '@/types/commission.types';

interface CommissionRuleFormProps {
  rule?: CommissionRule;
  onSubmit: SubmitHandler<Partial<CommissionRule>>;
  isSubmitting: boolean;
}

export const CommissionRuleForm = ({ rule, onSubmit, isSubmitting }: CommissionRuleFormProps) => {
  const { register, handleSubmit, formState: { errors } } = useForm<Partial<CommissionRule>>({
    defaultValues: rule || { type: CommissionType.PLATFORM, percentage: 0, description: '', isActive: true },
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <div>
        <label htmlFor="type" className="block text-sm font-medium text-gray-700">Type</label>
        <select
          id="type"
          {...register('type', { required: 'Type is required' })}
          className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
          disabled={!!rule} // Disable changing type for existing rules
        >
          {Object.values(CommissionType).map((type) => (
            <option key={type} value={type}>{type}</option>
          ))}
        </select>
        {errors.type && <p className="text-red-500 text-xs mt-1">{errors.type.message}</p>}
      </div>

      <div>
        <label htmlFor="percentage" className="block text-sm font-medium text-gray-700">Percentage</label>
        <input
          id="percentage"
          type="number"
          step="0.0001"
          {...register('percentage', { required: 'Percentage is required', valueAsNumber: true })}
          className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
        />
        {errors.percentage && <p className="text-red-500 text-xs mt-1">{errors.percentage.message}</p>}
      </div>

      <div>
        <label htmlFor="description" className="block text-sm font-medium text-gray-700">Description</label>
        <textarea
          id="description"
          {...register('description')}
          rows={3}
          className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
        />
      </div>

      <div className="flex items-center">
        <input
          id="isActive"
          type="checkbox"
          {...register('isActive')}
          className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
        />
        <label htmlFor="isActive" className="ml-2 block text-sm text-gray-900">Active</label>
      </div>

      <div className="text-right">
        <button
          type="submit"
          disabled={isSubmitting}
          className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
        >
          {isSubmitting ? 'Saving...' : 'Save Rule'}
        </button>
      </div>
    </form>
  );
};