budget-app/client/src/pages/Financing.jsx

import { useState, useEffect } from 'react';

function fmt(value) {
  const num = parseFloat(value) || 0;
  return '$' + num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

function ProgressBar({ paid, total }) {
  const pct = total > 0 ? Math.min(100, (paid / total) * 100) : 0;
  return (
    <div style={{ background: 'var(--surface-raised)', borderRadius: '999px', height: '8px', overflow: 'hidden', margin: '0.4rem 0' }}>
      <div style={{
        height: '100%',
        width: `${pct}%`,
        background: pct >= 100 ? 'var(--success)' : 'var(--accent)',
        borderRadius: '999px',
        transition: 'width 0.3s ease',
      }} />
    </div>
  );
}

const TODAY = new Date().toISOString().slice(0, 10);

const EMPTY_FORM = {
  name: '',
  total_amount: '',
  due_date: '',
  start_date: TODAY,
  assigned_paycheck: 'both',
};

function PlanCard({ plan, onEdit, onDelete }) {
  const pct = plan.total_amount > 0 ? Math.min(100, (plan.paid_total / plan.total_amount) * 100) : 0;

  return (
    <div className="card card-body" style={{ opacity: plan.active ? 1 : 0.6 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '1rem' }}>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.25rem' }}>
            <span style={{ fontWeight: 700, fontSize: '1rem' }}>{plan.name}</span>
            {plan.overdue && (
              <span className="badge" style={{ background: 'var(--danger-bg)', color: 'var(--danger)', border: '1px solid var(--danger)' }}>
                overdue
              </span>
            )}
            {!plan.active && (
              <span className="badge badge-category">paid off</span>
            )}
          </div>
          <div style={{ fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '0.5rem' }}>
            Due {new Date(plan.due_date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' })}
            &nbsp;·&nbsp;
            {plan.assigned_paycheck == null ? 'Split across both paychecks' : `Paycheck ${plan.assigned_paycheck} only`}
          </div>
          <ProgressBar paid={plan.paid_total} total={plan.total_amount} />
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.8rem', color: 'var(--text-muted)' }}>
            <span>{fmt(plan.paid_total)} paid</span>
            <span style={{ fontWeight: 600, color: plan.remaining > 0 ? 'var(--text)' : 'var(--success)' }}>
              {plan.remaining > 0 ? `${fmt(plan.remaining)} remaining` : 'Paid off'} / {fmt(plan.total_amount)}
            </span>
          </div>
        </div>
        {plan.active && (
          <div style={{ display: 'flex', gap: '0.375rem', flexShrink: 0 }}>
            <button className="btn btn-sm" onClick={() => onEdit(plan)}>Edit</button>
            <button className="btn btn-sm btn-danger" onClick={() => onDelete(plan)}>Delete</button>
          </div>
        )}
        {!plan.active && (
          <button className="btn btn-sm btn-danger" onClick={() => onDelete(plan)}>Delete</button>
        )}
      </div>
    </div>
  );
}

export default function Financing() {
  const [plans, setPlans] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [showForm, setShowForm] = useState(false);
  const [editingId, setEditingId] = useState(null);
  const [form, setForm] = useState(EMPTY_FORM);
  const [formError, setFormError] = useState(null);
  const [saving, setSaving] = useState(false);

  async function load() {
    try {
      setLoading(true);
      const res = await fetch('/api/financing');
      if (!res.ok) throw new Error('Failed to load');
      setPlans(await res.json());
      setError(null);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => { load(); }, []);

  function openAdd() {
    setEditingId(null);
    setForm(EMPTY_FORM);
    setFormError(null);
    setShowForm(true);
  }

  function openEdit(plan) {
    setEditingId(plan.id);
    setForm({
      name: plan.name,
      total_amount: plan.total_amount,
      due_date: plan.due_date,
      start_date: plan.start_date || TODAY,
      assigned_paycheck: plan.assigned_paycheck == null ? 'both' : String(plan.assigned_paycheck),
    });
    setFormError(null);
    setShowForm(true);
  }

  function cancel() {
    setShowForm(false);
    setEditingId(null);
    setForm(EMPTY_FORM);
    setFormError(null);
  }

  function handleChange(e) {
    const { name, value } = e.target;
    setForm(prev => ({ ...prev, [name]: value }));
  }

  async function handleSave(e) {
    e.preventDefault();
    setFormError(null);
    setSaving(true);
    try {
      const payload = {
        name: form.name,
        total_amount: parseFloat(form.total_amount),
        due_date: form.due_date,
        start_date: form.start_date || TODAY,
        assigned_paycheck: form.assigned_paycheck === 'both' ? null : parseInt(form.assigned_paycheck, 10),
      };
      const url = editingId ? `/api/financing/${editingId}` : '/api/financing';
      const method = editingId ? 'PUT' : 'POST';
      const res = await fetch(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      const data = await res.json();
      if (!res.ok) { setFormError(data.error || 'Failed to save'); return; }
      await load();
      cancel();
    } catch (err) {
      setFormError(err.message);
    } finally {
      setSaving(false);
    }
  }

  async function handleDelete(plan) {
    if (!window.confirm(`Delete "${plan.name}"? This cannot be undone.`)) return;
    try {
      const res = await fetch(`/api/financing/${plan.id}`, { method: 'DELETE' });
      if (!res.ok) throw new Error('Failed to delete');
      await load();
    } catch (err) {
      alert(err.message);
    }
  }

  const active = plans.filter(p => p.active);
  const inactive = plans.filter(p => !p.active);

  return (
    <div style={{ maxWidth: '680px' }}>
      <div className="page-header">
        <h1 className="page-title">Financing</h1>
        {!showForm && (
          <button className="btn btn-primary" onClick={openAdd}>+ Add Plan</button>
        )}
      </div>

      {showForm && (
        <div className="card card-body mb-2">
          <h2 style={{ margin: '0 0 1rem', fontSize: '1rem', fontWeight: 700 }}>
            {editingId ? 'Edit Financing Plan' : 'New Financing Plan'}
          </h2>
          {formError && <div className="alert alert-error">{formError}</div>}
          <form onSubmit={handleSave} autoComplete="off">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem', marginBottom: '0.75rem' }}>
              <div className="form-group" style={{ gridColumn: '1 / -1' }}>
                <label className="form-label">Name</label>
                <input name="name" type="text" value={form.name} onChange={handleChange}
                  required placeholder="e.g. Couch financing" className="form-input" />
              </div>
              <div className="form-group">
                <label className="form-label">Total Amount ($)</label>
                <input name="total_amount" type="number" min="0" step="0.01" value={form.total_amount}
                  onChange={handleChange} required placeholder="0.00" className="form-input" />
              </div>
              <div className="form-group">
                <label className="form-label">Payoff Due Date</label>
                <input name="due_date" type="date" value={form.due_date}
                  onChange={handleChange} required className="form-input" />
              </div>
              <div className="form-group">
                <label className="form-label">Start Date</label>
                <input name="start_date" type="date" value={form.start_date}
                  onChange={handleChange} required className="form-input" />
              </div>
              <div className="form-group" style={{ gridColumn: '1 / -1' }}>
                <label className="form-label">Assign to paycheck</label>
                <select name="assigned_paycheck" value={form.assigned_paycheck}
                  onChange={handleChange} className="form-select">
                  <option value="both">Split across both paychecks</option>
                  <option value="1">Paycheck 1 only</option>
                  <option value="2">Paycheck 2 only</option>
                </select>
              </div>
            </div>
            <div style={{ display: 'flex', gap: '0.5rem' }}>
              <button className="btn btn-primary" type="submit" disabled={saving}>
                {saving ? 'Saving…' : 'Save'}
              </button>
              <button className="btn" type="button" onClick={cancel}>Cancel</button>
            </div>
          </form>
        </div>
      )}

      {loading && <p className="text-muted">Loading…</p>}
      {error && <div className="alert alert-error">Error: {error}</div>}

      {!loading && !error && (
        <>
          {active.length === 0 && !showForm && (
            <div className="card card-body" style={{ textAlign: 'center', color: 'var(--text-muted)' }}>
              No active financing plans. Click "Add Plan" to get started.
            </div>
          )}

          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
            {active.map(plan => (
              <PlanCard key={plan.id} plan={plan} onEdit={openEdit} onDelete={handleDelete} />
            ))}
          </div>

          {inactive.length > 0 && (
            <>
              <div style={{ fontSize: '0.75rem', fontWeight: 700, textTransform: 'uppercase',
                letterSpacing: '0.06em', color: 'var(--text-faint)', margin: '1.5rem 0 0.75rem' }}>
                Paid Off
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
                {inactive.map(plan => (
                  <PlanCard key={plan.id} plan={plan} onEdit={openEdit} onDelete={handleDelete} />
                ))}
              </div>
            </>
          )}
        </>
      )}
    </div>
  );
}