'use client'

import {
  Button,
  HelperText,
  Label,
  Modal,
  ModalBody,
  ModalHeader,
  TextInput,
} from 'flowbite-react'
import { UseFormReturn } from 'react-hook-form'

import formTheme from '@/lib/themes/form'
import buttonTheme from '@/lib/themes/button'
import modalTheme from '@/lib/themes/modal'
import { AffiliateLevelFormValues } from '../schema'

interface ModalFormProps {
  isOpen: boolean
  type: 'create' | 'edit'
  isProcessing: boolean
  form: UseFormReturn<AffiliateLevelFormValues>
  onClose: () => void
  onSubmit: (formValues: AffiliateLevelFormValues) => Promise<void>
}

export default function ModalForm({
  isOpen,
  type,
  isProcessing,
  form,
  onClose,
  onSubmit,
}: ModalFormProps) {
  return (
    <Modal show={isOpen} size="xl" onClose={onClose} theme={modalTheme.modal}>
      <ModalHeader>
        {type === 'create' ? 'Create Affiliate Level' : 'Edit Affiliate Level'}
      </ModalHeader>
      <ModalBody>
        <form onSubmit={form.handleSubmit(onSubmit)} className="mt-4">
          <div className="space-y-6">
            {/* Name */}
            <div>
              <div className="mb-2 block">
                <Label htmlFor="name" theme={formTheme.label}>
                  Name
                </Label>
              </div>
              <TextInput
                id="name"
                type="text"
                placeholder="Enter affiliate level name..."
                theme={formTheme.textInput}
                {...form.register('name')}
              />
              <HelperText color="failure">
                {form.formState.errors.name?.message}
              </HelperText>
            </div>

            {/* Min Sales Volume */}
            <div>
              <div className="mb-2 block">
                <Label htmlFor="min_sales_volume" theme={formTheme.label}>
                  Minimum Sales Volume (IDR)
                </Label>
              </div>
              <TextInput
                id="min_sales_volume"
                type="number"
                placeholder="0"
                theme={formTheme.textInput}
                {...form.register('min_sales_volume')}
              />
              <HelperText color="failure">
                {form.formState.errors.min_sales_volume?.message}
              </HelperText>
            </div>

            {/* Discount Agent Rate */}
            <div>
              <div className="mb-2 block">
                <Label htmlFor="discount_agent_rate" theme={formTheme.label}>
                  Discount Agent Rate (%)
                </Label>
              </div>
              <TextInput
                id="discount_agent_rate"
                type="string"
                placeholder="0"
                theme={formTheme.textInput}
                {...form.register('discount_agent_rate')}
              />
              <HelperText color="failure">
                {form.formState.errors.discount_agent_rate?.message}
              </HelperText>
            </div>

            {/* Min Withdrawal Amount */}
            <div>
              <div className="mb-2 block">
                <Label htmlFor="min_withdrawal_amount" theme={formTheme.label}>
                  Minimum Withdrawal Amount (IDR)
                </Label>
              </div>
              <TextInput
                id="min_withdrawal_amount"
                type="string"
                placeholder="0"
                theme={formTheme.textInput}
                {...form.register('min_withdrawal_amount')}
              />
              <HelperText color="failure">
                {form.formState.errors.min_withdrawal_amount?.message}
              </HelperText>
            </div>

            {/* Max Withdrawal Amount */}
            <div>
              <div className="mb-2 block">
                <Label htmlFor="max_withdrawal_amount" theme={formTheme.label}>
                  Maximum Withdrawal Amount (IDR)
                </Label>
              </div>
              <TextInput
                id="max_withdrawal_amount"
                type="string"
                placeholder="0"
                theme={formTheme.textInput}
                {...form.register('max_withdrawal_amount')}
              />
              <HelperText color="failure">
                {form.formState.errors.max_withdrawal_amount?.message}
              </HelperText>
            </div>

            {/* Withdrawal Daily Limit */}
            <div>
              <div className="mb-2 block">
                <Label htmlFor="withdrawal_daily_limit" theme={formTheme.label}>
                  Withdrawal Daily Limit
                </Label>
              </div>
              <TextInput
                id="withdrawal_daily_limit"
                type="number"
                placeholder="0"
                theme={formTheme.textInput}
                {...form.register('withdrawal_daily_limit')}
              />
              <HelperText color="failure">
                {form.formState.errors.withdrawal_daily_limit?.message}
              </HelperText>
            </div>

            {/* Withdrawal Fee */}
            <div>
              <div className="mb-2 block">
                <Label htmlFor="withdrawal_fee" theme={formTheme.label}>
                  Withdrawal Fee (IDR)
                </Label>
              </div>
              <TextInput
                id="withdrawal_fee"
                type="number"
                placeholder="0"
                theme={formTheme.textInput}
                {...form.register('withdrawal_fee')}
              />
              <HelperText color="failure">
                {form.formState.errors.withdrawal_fee?.message}
              </HelperText>
            </div>

            <div className="w-full flex justify-end">
              <Button
                type="submit"
                theme={buttonTheme.button}
                disabled={isProcessing}
              >
                {isProcessing ? 'Submitting…' : 'Submit'}
              </Button>
            </div>
          </div>
        </form>
      </ModalBody>
    </Modal>
  )
}