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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";

const CREDIT_CATEGORIES = [
  { value: "payment", label: "AR Payment (General)" },
  { value: "assessment", label: "Assessment Write-Off" },
  { value: "lateFee", label: "Late Fee Write-Off" },
  { value: "adminFee", label: "Admin Fee Write-Off" },
  { value: "legalFee", label: "Legal Fee Write-Off" },
  { value: "violation", label: "Violation Write-Off" },
  { value: "interest", label: "Interest Write-Off" },
];

export function CreditLineDialog({ open, onOpenChange, onAddCredit }) {
  const [amount, setAmount] = useState('');
  const [category, setCategory] = useState('payment');
  const [description, setDescription] = useState('');

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

    onAddCredit({
      entryType: 'credit',
      amount: parseFloat(amount),
      category,
      description
    });

    setAmount('');
    setCategory('payment');
    setDescription('');
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Add Payment / Credit</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="bg-muted/50 p-4 rounded-md border border-border">
            <div className="text-sm text-muted-foreground">
              <p className="font-semibold mb-1 text-foreground">Payment or Write-Off Credit</p>
              <p>General payments follow the payment priority waterfall. Category credits write off the selected balance bucket.</p>
            </div>
          </div>

          <div className="grid w-full gap-2">
            <Label>Credit 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>Category</Label>
            <Select value={category} onValueChange={setCategory}>
              <SelectTrigger><SelectValue /></SelectTrigger>
              <SelectContent>
                {CREDIT_CATEGORIES.map(c => (
                  <SelectItem key={c.value} value={c.value}>{c.label}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="grid w-full gap-2">
            <Label>Description</Label>
            <Textarea
              placeholder="e.g. Payment received, board-approved write-off"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
            />
          </div>

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