BillTracker/client/components/tracker/NotesCell.jsx

import { useState } from 'react';
import { toast } from 'sonner';
import { api } from '@/api';
import { cn } from '@/lib/utils';

// Monthly notes stored in monthly_bill_state — per-month, not per-bill.
export function NotesCell({ row, refresh }) {
  const savedNote = row.monthly_notes || '';
  const [value, setValue] = useState(savedNote);
  const [saving, setSaving] = useState(false);

  async function handleBlur() {
    const trimmed = value.trim();
    if (trimmed === savedNote) return;

    const year = row.year;
    const month = row.month;

    if (!year || !month) {
      toast.error('Cannot save notes without year/month context');
      setValue(savedNote);
      return;
    }

    setSaving(true);
    try {
      await api.saveBillMonthlyState(row.id, {
        year,
        month,
        notes: trimmed || null,
        is_skipped: row.is_skipped,
        actual_amount: row.actual_amount,
      });
      refresh();
    } catch (err) {
      toast.error(err.message);
      setValue(savedNote);
    } finally { setSaving(false); }
  }

  return (
    <input
      type="text"
      value={value}
      onChange={e => setValue(e.target.value)}
      onBlur={handleBlur}
      onKeyDown={e => { if (e.key === 'Enter') e.currentTarget.blur(); }}
      placeholder='Add monthly notes…'
      disabled={saving}
      className={cn(
        'w-full bg-transparent text-sm placeholder:text-muted-foreground/40',
        'border-0 outline-none ring-0',
        'text-muted-foreground focus:text-foreground',
        'transition-colors duration-150',
        'disabled:cursor-not-allowed disabled:opacity-40',
        value && 'text-foreground/80',
      )}
    />
  );
}