BillTracker/client/components/tracker/MonthlyStateDialog.jsx

import React, { useState, useEffect } from 'react';
import { toast } from 'sonner';
import { api } from '@/api.js';
import { fmt } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter,
} from '@/components/ui/dialog';

const MONTHS = [
  'January','February','March','April','May','June',
  'July','August','September','October','November','December',
];

function MonthlyStateDialog({ row, year, month, open, onOpenChange, onSaved }) {
  const [actualAmount, setActualAmount] = useState('');
  const [notes,        setNotes]        = useState('');
  const [isSkipped,    setIsSkipped]    = useState(false);
  const [saving,       setSaving]       = useState(false);

  // Populate from current row state when dialog opens
  useEffect(() => {
    if (open) {
      setActualAmount(row.actual_amount != null ? String(row.actual_amount) : '');
      setNotes(row.monthly_notes || '');
      setIsSkipped(!!row.is_skipped);
    }
  }, [open, row]);

  async function handleSave(e) {
    e.preventDefault();
    const amt = actualAmount.trim() ? parseFloat(actualAmount) : null;
    if (amt !== null && (isNaN(amt) || amt < 0)) {
      toast.error('Amount must be a positive number or empty');
      return;
    }
    setSaving(true);
    try {
      await api.saveBillMonthlyState(row.id, {
        year,
        month,
        actual_amount: amt,
        notes: notes.trim() || null,
        is_skipped: isSkipped,
      });
      toast.success(`${MONTHS[month - 1]} state saved`);
      onSaved();
      onOpenChange(false);
    } catch (err) {
      toast.error(err.message);
    } finally {
      setSaving(false);
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-sm border-border/60 bg-card/95 backdrop-blur-xl">
        <DialogHeader>
          <DialogTitle className="text-base font-semibold tracking-tight">
            {row.name}
            <span className="text-muted-foreground font-normal ml-2">
              {MONTHS[month - 1]} {year}
            </span>
          </DialogTitle>
          <p className="text-[11px] text-muted-foreground">
            Monthly overrides — changes only affect {MONTHS[month - 1]}
          </p>
        </DialogHeader>

        <form id="mbs-form" onSubmit={handleSave} className="space-y-4 py-1">
          {/* Actual amount this month */}
          <div className="space-y-1.5">
            <Label htmlFor="mbs-amount" className="text-xs uppercase tracking-wider text-muted-foreground">
              Actual Amount ($)
            </Label>
            <Input
              id="mbs-amount"
              type="number" min="0" step="0.01"
              placeholder={String(row.expected_amount)}
              value={actualAmount}
              onChange={e => setActualAmount(e.target.value)}
              className="font-mono bg-background/50 border-border/60"
            />
            <p className="text-[11px] text-muted-foreground">
              Leave blank to use the template default ({fmt(row.expected_amount)}).
            </p>
          </div>

          {/* Monthly notes */}
          <div className="space-y-1.5">
            <Label htmlFor="mbs-notes" className="text-xs uppercase tracking-wider text-muted-foreground">
              Notes (this month only)
            </Label>
            <Input
              id="mbs-notes"
              value={notes}
              onChange={e => setNotes(e.target.value)}
              placeholder="e.g. higher than usual, double-billed…"
              className="bg-background/50 border-border/60"
            />
          </div>

          {/* Skip this month */}
          <label className="flex items-start gap-3 cursor-pointer select-none">
            <input
              type="checkbox"
              checked={isSkipped}
              onChange={e => setIsSkipped(e.target.checked)}
              className="mt-0.5 h-4 w-4 rounded border-border accent-primary"
            />
            <div>
              <p className="text-sm font-medium leading-tight">Skip this month</p>
              <p className="text-[11px] text-muted-foreground mt-0.5">
                Excludes this bill from {MONTHS[month - 1]} totals. Other months are unchanged.
              </p>
            </div>
          </label>
        </form>

        <DialogFooter className="mt-2">
          <Button type="button" variant="ghost" disabled={saving} onClick={() => onOpenChange(false)} className="text-xs">
            Cancel
          </Button>
          <Button type="submit" form="mbs-form" disabled={saving} className="text-xs">
            {saving ? 'Saving…' : 'Save'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

export default MonthlyStateDialog;