personal-finance/frontend-web/src/components/dialogs/AddLiabilityDialog.tsx

import {useState} from 'react';
import {Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle} from '@/components/ui/dialog';
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select';
import {Button} from '@/components/ui/button';
import {Input} from '@/components/ui/input';
import {Label} from '@/components/ui/label';
import {useAppDispatch, createLiability} from '@/store';

interface Props {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

const liabilityTypes = ['credit_card', 'loan', 'mortgage', 'other'] as const;

export default function AddLiabilityDialog({open, onOpenChange}: Props) {
  const dispatch = useAppDispatch();
  const [form, setForm] = useState({name: '', type: '', balance: ''});

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    dispatch(
      createLiability({
        name: form.name,
        type: form.type.toUpperCase() as 'CREDIT_CARD' | 'LOAN' | 'MORTGAGE' | 'OTHER',
        currentBalance: parseFloat(form.balance) || 0,
      })
    );
    onOpenChange(false);
    setForm({name: '', type: '', balance: ''});
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="card-elevated sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Add Liability</DialogTitle>
          <DialogDescription>Add a new liability to track</DialogDescription>
        </DialogHeader>
        <form onSubmit={handleSubmit}>
          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <Label htmlFor="name">Name</Label>
              <Input
                id="name"
                placeholder="e.g., Car Loan"
                value={form.name}
                onChange={e => setForm({...form, name: e.target.value})}
                className="input-depth"
                required
              />
            </div>
            <div className="grid gap-2">
              <Label>Type</Label>
              <Select value={form.type} onValueChange={v => setForm({...form, type: v})} required>
                <SelectTrigger className="input-depth">
                  <SelectValue placeholder="Select type" />
                </SelectTrigger>
                <SelectContent>
                  {liabilityTypes.map(t => (
                    <SelectItem key={t} value={t} className="capitalize">
                      {t.replace('_', ' ')}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="grid gap-2">
              <Label htmlFor="balance">Balance</Label>
              <Input
                id="balance"
                type="number"
                step="0.01"
                min="0"
                placeholder="0.00"
                value={form.balance}
                onChange={e => setForm({...form, balance: e.target.value})}
                className="input-depth"
                required
              />
            </div>
          </div>
          <DialogFooter>
            <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
              Cancel
            </Button>
            <Button type="submit" disabled={!form.name || !form.type || !form.balance}>
              Add Liability
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}