/* global React, API, useApp */
const { useState, useEffect, useCallback } = React;

const fmtEur  = v => v == null ? '—' : `€${Number(v).toLocaleString('nl-NL',{minimumFractionDigits:2,maximumFractionDigits:2})}`;
const fmtDate = v => v ? new Date(v).toLocaleDateString('nl-NL') : '—';
const today   = () => new Date().toISOString().split('T')[0];
const CATS    = ['travel','software','office','subscriptions','other'];

function ExpenseModal({ expense, companies, onSave, onClose }) {
  const isNew = !expense?.id;
  const [form, setForm] = useState({ description:'', amount:0, vat_amount:0, vat_rate:0.21, expense_date:today(), category:'other', supplier_id:'', notes:'', ...(expense||{}) });
  const [file, setFile] = useState(null);
  const [busy, setBusy] = useState(false);
  const { toast } = useApp();
  const f = k => e => setForm(p => ({ ...p, [k]: e.target.value }));

  async function save(e) {
    e.preventDefault(); setBusy(true);
    try {
      let file_r2_key = form.file_r2_key;
      if (file) {
        const fd = new FormData(); fd.append('file', file); fd.append('folder', 'expenses');
        const res = await API.upload('/upload', fd);
        file_r2_key = res.key;
      }
      const body = { ...form, file_r2_key };
      isNew ? await API.post('/expenses', body) : await API.put(`/expenses/${expense.id}`, body);
      toast(isNew ? 'Expense added' : 'Expense updated'); onSave();
    } catch (e) { toast(e.error || 'Error', 'error'); }
    finally { setBusy(false); }
  }

  return (
    <div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="modal">
        <div className="modal-head"><span className="modal-title">{isNew?'Add expense':'Edit expense'}</span><button className="modal-close" onClick={onClose}>×</button></div>
        <form onSubmit={save}>
          <div className="modal-body">
            <div className="form-grid">
              <div className="field field--full">
                <label className="field-label">Description *</label>
                <input className="field-input" required value={form.description} onChange={f('description')} />
              </div>
              <div className="field">
                <label className="field-label">Amount (excl. BTW)</label>
                <input className="field-input" type="number" step="0.01" value={form.amount} onChange={f('amount')} />
              </div>
              <div className="field">
                <label className="field-label">VAT rate</label>
                <select className="field-select" value={form.vat_rate} onChange={f('vat_rate')}>
                  <option value="0.21">21%</option><option value="0.09">9%</option><option value="0.00">0%</option>
                </select>
              </div>
              <div className="field">
                <label className="field-label">VAT amount</label>
                <input className="field-input" type="number" step="0.01" value={form.vat_amount} onChange={f('vat_amount')} />
              </div>
              <div className="field">
                <label className="field-label">Date</label>
                <input className="field-input" type="date" value={form.expense_date} onChange={f('expense_date')} />
              </div>
              <div className="field">
                <label className="field-label">Category</label>
                <select className="field-select" value={form.category} onChange={f('category')}>
                  {CATS.map(c => <option key={c} value={c}>{c}</option>)}
                </select>
              </div>
              <div className="field field--full">
                <label className="field-label">Supplier</label>
                <select className="field-select" value={form.supplier_id} onChange={f('supplier_id')}>
                  <option value="">— none —</option>
                  {companies.filter(c => c.type !== 'customer').map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
                </select>
              </div>
              <div className="field field--full">
                <label className="field-label">Receipt (PDF/image)</label>
                <input type="file" accept=".pdf,.jpg,.jpeg,.png" onChange={e => setFile(e.target.files[0])} style={{fontSize:12,color:'var(--fg-muted)'}} />
                {form.file_r2_key && !file && <div style={{fontSize:11,marginTop:4}}><a href={`/api/upload?key=${encodeURIComponent(form.file_r2_key)}`} target="_blank" style={{color:'var(--signal)'}}>View existing receipt ↗</a></div>}
              </div>
              <div className="field field--full">
                <label className="field-label">Notes</label>
                <textarea className="field-textarea" rows={2} value={form.notes} onChange={f('notes')} />
              </div>
            </div>
          </div>
          <div className="modal-foot">
            <button type="button" className="btn btn--ghost" onClick={onClose}>Cancel</button>
            <button type="submit" className="btn btn--primary" disabled={busy}>{busy?'Saving…':'Save expense'}</button>
          </div>
        </form>
      </div>
    </div>
  );
}

function Expenses() {
  const [expenses, setExpenses]   = useState([]);
  const [companies, setCompanies] = useState([]);
  const [filter, setFilter]       = useState('all');
  const [modal, setModal]         = useState(null);
  const { toast } = useApp();

  const load = useCallback(() => {
    API.get('/expenses').then(setExpenses).catch(() => {});
  }, []);

  useEffect(() => {
    load();
    API.get('/companies').then(setCompanies).catch(() => {});
  }, [load]);

  async function del(exp) {
    if (!confirm('Delete this expense?')) return;
    await API.del(`/expenses/${exp.id}`).catch(e => toast(e.error || 'Error', 'error'));
    load(); toast('Expense deleted');
  }

  const visible = expenses.filter(e => filter === 'all' || e.category === filter);
  const total   = visible.reduce((s, e) => s + Number(e.amount), 0);
  const totalVat = visible.reduce((s, e) => s + Number(e.vat_amount), 0);
  const coMap   = Object.fromEntries(companies.map(c => [c.id, c.name]));

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">Expenses</h1>
          <div className="page-subtitle">Costs and receipts</div>
        </div>
        <div className="page-actions">
          <button className="btn btn--primary" onClick={() => setModal({})}>+ Add expense</button>
        </div>
      </div>

      <div style={{display:'flex',gap:1,background:'var(--border)',border:'1px solid var(--border)',marginBottom:24}}>
        {[['Total excl. BTW', fmtEur(total), ''], ['BTW voorbelasting', fmtEur(totalVat), 'signal']].map(([l, v, cls]) => (
          <div key={l} className="stat-cell" style={{flex:1}}>
            <div className="stat-label">{l}</div>
            <div className={`stat-value ${cls}`}>{v}</div>
          </div>
        ))}
      </div>

      <div className="tabs">
        <button className={`tab ${filter==='all'?'is-active':''}`} onClick={() => setFilter('all')}>All</button>
        {CATS.map(c => <button key={c} className={`tab ${filter===c?'is-active':''}`} onClick={() => setFilter(c)}>{c}</button>)}
      </div>

      <div className="card" style={{margin:0}}>
        <div className="table-wrap">
          <table className="data-table" style={{padding:'0 20px'}}>
            <thead><tr><th>Date</th><th>Description</th><th>Category</th><th>Supplier</th><th>Amount</th><th>BTW</th><th></th></tr></thead>
            <tbody>
              {visible.length === 0 && <tr><td colSpan={7}><div className="empty-state">No expenses</div></td></tr>}
              {visible.map(exp => (
                <tr key={exp.id}>
                  <td className="mono">{fmtDate(exp.expense_date)}</td>
                  <td>{exp.description}</td>
                  <td><span className="badge">{exp.category}</span></td>
                  <td className="muted">{exp.supplier_id ? coMap[exp.supplier_id] : '—'}</td>
                  <td className="mono">{fmtEur(exp.amount)}</td>
                  <td className="mono">{fmtEur(exp.vat_amount)}</td>
                  <td>
                    <div className="row-actions">
                      {exp.file_r2_key && <a className="btn btn--ghost btn--sm" href={`/api/upload?key=${encodeURIComponent(exp.file_r2_key)}`} target="_blank">Receipt</a>}
                      <button className="btn btn--ghost btn--sm" onClick={() => setModal(exp)}>Edit</button>
                      <button className="btn btn--danger btn--sm" onClick={() => del(exp)}>Del</button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {modal !== null && (
        <ExpenseModal expense={modal.id?modal:null} companies={companies} onSave={() => { load(); setModal(null); }} onClose={() => setModal(null)} />
      )}
    </div>
  );
}
window.Expenses = Expenses;