import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { PaymentMethodCreateSchema } from '@lunarfront/shared/schemas'
import type { PaymentMethodCreateInput } from '@lunarfront/shared/schemas'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'

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

export function PaymentMethodForm({ accountId, onSubmit, loading }: PaymentMethodFormProps) {
  const {
    register,
    handleSubmit,
    setValue,
    watch,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(PaymentMethodCreateSchema),
    defaultValues: {
      accountId,
      processor: 'stripe',
      processorPaymentMethodId: '',
      isDefault: false,
    },
  })

  const processor = watch('processor')

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <div className="space-y-2">
        <Label>Processor</Label>
        <Select
          value={processor}
          onValueChange={(v) => setValue('processor', v as 'stripe' | 'global_payments')}
        >
          <SelectTrigger>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="stripe">Stripe</SelectItem>
            <SelectItem value="global_payments">Global Payments</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div className="space-y-2">
        <Label htmlFor="pmId">Payment Method ID *</Label>
        <Input id="pmId" {...register('processorPaymentMethodId')} placeholder="pm_..." />
        {errors.processorPaymentMethodId && (
          <p className="text-sm text-destructive">{errors.processorPaymentMethodId.message}</p>
        )}
      </div>
      <div className="grid grid-cols-2 gap-4">
        <div className="space-y-2">
          <Label htmlFor="cardBrand">Card Brand</Label>
          <Input id="cardBrand" {...register('cardBrand')} placeholder="visa" />
        </div>
        <div className="space-y-2">
          <Label htmlFor="lastFour">Last Four</Label>
          <Input id="lastFour" {...register('lastFour')} placeholder="4242" maxLength={4} />
        </div>
      </div>
      <div className="grid grid-cols-2 gap-4">
        <div className="space-y-2">
          <Label htmlFor="expMonth">Exp Month</Label>
          <Input id="expMonth" type="number" {...register('expMonth', { valueAsNumber: true })} min={1} max={12} />
        </div>
        <div className="space-y-2">
          <Label htmlFor="expYear">Exp Year</Label>
          <Input id="expYear" type="number" {...register('expYear', { valueAsNumber: true })} min={2024} max={2100} />
        </div>
      </div>
      <Button type="submit" disabled={loading}>
        {loading ? 'Saving...' : 'Add Payment Method'}
      </Button>
    </form>
  )
}