
import React from 'react';
import { useForm } from 'react-hook-form';
import { Loader2, Plus } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { usePaymentPlans } from '@/hooks/usePaymentPlans';

export function PaymentItemDialog({ open, onOpenChange, planId, onSuccess }) {
  const { register, handleSubmit, reset, formState: { errors } } = useForm();
  const { addPaymentItem, loading } = usePaymentPlans();

  const onSubmit = async (data) => {
    if (!planId) return;
    const result = await addPaymentItem({
      payment_plan_id: planId, description: data.description,
      amount: parseFloat(data.amount), due_date: data.due_date, notes: data.notes
    });
    if (result) { reset(); onOpenChange(false); if (onSuccess) onSuccess(); }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader><DialogTitle>Add Payment Item</DialogTitle></DialogHeader>
        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 py-4">
          <div className="space-y-2">
            <Label htmlFor="description">Description <span className="text-destructive">*</span></Label>
            <Input id="description" placeholder="e.g. Monthly Installment #1" {...register('description', { required: 'Description is required' })} />
            {errors.description && <p className="text-xs text-destructive">{errors.description.message}</p>}
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="amount">Amount ($) <span className="text-destructive">*</span></Label>
              <Input id="amount" type="number" step="0.01" placeholder="0.00" {...register('amount', { required: 'Amount is required', min: 0 })} />
              {errors.amount && <p className="text-xs text-destructive">{errors.amount.message}</p>}
            </div>
            <div className="space-y-2">
              <Label htmlFor="due_date">Due Date <span className="text-muted-foreground text-xs font-normal">(EST)</span> <span className="text-destructive">*</span></Label>
              <Input id="due_date" type="date" {...register('due_date', { required: 'Due date is required' })} />
              {errors.due_date && <p className="text-xs text-destructive">{errors.due_date.message}</p>}
            </div>
          </div>
          <div className="space-y-2">
            <Label htmlFor="notes">Notes</Label>
            <Textarea id="notes" placeholder="Optional notes..." {...register('notes')} />
          </div>
          <DialogFooter>
            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>Cancel</Button>
            <Button type="submit" disabled={loading}>
              {loading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Plus className="mr-2 h-4 w-4" />}
              Add Item
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}
