import React, { useState } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { AlertCircle } from 'lucide-react';

export function BankFeeDialog({ open, onOpenChange, onAddBankFee }) {
  const [amount, setAmount] = useState('');
  const [description, setDescription] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!amount || parseFloat(amount) <= 0) return;

    onAddBankFee({
      amount: parseFloat(amount),
      description
    });
    
    setAmount('');
    setDescription('');
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Add Bank Fee</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="bg-amber-50 p-4 rounded-md border border-amber-100 flex gap-3">
             <AlertCircle className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" />
             <div className="text-sm text-amber-800">
                <p className="font-semibold mb-1">Priority Deduction</p>
                <p>Bank fees are deducted <strong>FIRST</strong> from any payments received, before Assessments, Interest, or other fees.</p>
             </div>
          </div>

          <div className="grid w-full gap-2">
             <Label>Fee Amount ($)</Label>
             <Input 
               type="number" 
               step="0.01" 
               placeholder="0.00"
               value={amount}
               onChange={(e) => setAmount(e.target.value)}
               className="font-mono"
             />
          </div>

          <div className="grid w-full gap-2">
             <Label>Description</Label>
             <Textarea 
               placeholder="e.g. Returned Check Fee, Wire Transfer Fee"
               value={description}
               onChange={(e) => setDescription(e.target.value)}
             />
          </div>

          <DialogFooter>
            <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>Cancel</Button>
            <Button type="submit" variant="destructive">Add Bank Fee</Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}
