import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { TaxExemptionCreateSchema } from '@lunarfront/shared/schemas'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'

interface TaxExemptionFormProps {
  accountId: string
  onSubmit: (data: Record<string, unknown>) => void
  loading?: boolean
}

export function TaxExemptionForm({ accountId, onSubmit, loading }: TaxExemptionFormProps) {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(TaxExemptionCreateSchema),
    defaultValues: {
      accountId,
      certificateNumber: '',
    },
  })

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="certNumber">Certificate Number *</Label>
        <Input id="certNumber" {...register('certificateNumber')} />
        {errors.certificateNumber && (
          <p className="text-sm text-destructive">{errors.certificateNumber.message}</p>
        )}
      </div>
      <div className="grid grid-cols-2 gap-4">
        <div className="space-y-2">
          <Label htmlFor="certType">Certificate Type</Label>
          <Input id="certType" {...register('certificateType')} placeholder="resale" />
        </div>
        <div className="space-y-2">
          <Label htmlFor="issuingState">Issuing State</Label>
          <Input id="issuingState" {...register('issuingState')} placeholder="TX" maxLength={2} />
        </div>
      </div>
      <div className="space-y-2">
        <Label htmlFor="expiresAt">Expires</Label>
        <Input id="expiresAt" type="date" {...register('expiresAt')} />
      </div>
      <div className="space-y-2">
        <Label htmlFor="exemptNotes">Notes</Label>
        <Textarea id="exemptNotes" {...register('notes')} />
      </div>
      <Button type="submit" disabled={loading}>
        {loading ? 'Saving...' : 'Add Tax Exemption'}
      </Button>
    </form>
  )
}