// admin/pages/finance.jsx — income, expenses, GST, PDF statement

function FinancePage() {
  const admin = useAdmin();
  const [range, setRange] = React.useState('30');
  const [addOpen, setAddOpen] = React.useState(false);
  const orders = admin.getOrders();
  const expenses = admin.getExpenses();
  const now = Date.now(), day = 86400000;
  const days = range === 'all' ? Infinity : +range;
  const since = now - days * day;

  const fOrders = orders.filter(o => o.placedAt >= since && o.status !== 'cancelled');
  const fExp = expenses.filter(e => e.at >= since);
  const income = fOrders.reduce((s, o) => s + o.total, 0);
  const expTotal = fExp.reduce((s, e) => s + e.amount, 0);
  const gstCollected = fOrders.reduce((s, o) => s + ((o.gst && o.gst.total) || 0), 0);
  const gstPaid = fExp.reduce((s, e) => s + (e.amount - e.amount * 100 / (100 + (e.gst || 0))), 0);
  const netGst = gstCollected - gstPaid;

  const rangeLabel = range === 'all' ? 'All time' : 'Last ' + range + ' days';

  return (
    <div>
      <div className="toolbar">
        {[['7', '7 days'], ['30', '30 days'], ['90', '90 days'], ['all', 'All time']].map(([k, l]) => (
          <button key={k} className={'chip' + (range === k ? ' active' : '')} onClick={() => setRange(k)}>{l}</button>
        ))}
        <div style={{ flex: 1 }}></div>
        <button className="btn btn-soft" onClick={() => setAddOpen(true)}><AIcon name="plus" size={15} />Add expense</button>
        <button className="btn btn-primary" onClick={() => AdminPDF.financeStatement(rangeLabel, { income, expenses: expTotal, gstCollected, orders: fOrders, expList: fExp })}><AIcon name="pdf" size={15} />Export statement</button>
      </div>

      <div className="kpi-grid" style={{ marginBottom: 22 }}>
        <div className="kpi"><div className="kpi__label"><AIcon name="rupee" />Income</div><div className="kpi__value">{money(income)}</div><div className="kpi__delta up">{fOrders.length} orders</div></div>
        <div className="kpi"><div className="kpi__label"><AIcon name="wallet" />Expenses</div><div className="kpi__value">{money(expTotal)}</div><div className="kpi__delta">{fExp.length} entries</div></div>
        <div className="kpi"><div className="kpi__label"><AIcon name="tag" />Sales − expenses</div><div className="kpi__value" style={{ color: income - expTotal >= 0 ? 'var(--a-green)' : 'var(--a-red)' }}>{money(income - expTotal)}</div><div className="kpi__delta muted">Not full profit (no COGS)</div></div>
        <div className="kpi"><div className="kpi__label"><AIcon name="pkg-check" />GST payable</div><div className="kpi__value">{money(netGst)}</div><div className="kpi__delta">collected {money(gstCollected)} · paid {money(gstPaid)}</div></div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 20 }} className="fin-grid">
        <div className="card">
          <div className="panel-head"><h2>Income (orders)</h2></div>
          <table className="tbl">
            <thead><tr><th>Order</th><th>Date</th><th className="num">Taxable</th><th className="num">GST</th><th className="num">Total</th></tr></thead>
            <tbody>
              {fOrders.slice(0, 12).map(o => (
                <tr key={o.id}>
                  <td><b>{o.id}</b></td><td className="muted">{dateFmt(o.placedAt)}</td>
                  <td className="num">{money((o.gst && o.gst.taxable) || o.total)}</td>
                  <td className="num">{money((o.gst && o.gst.total) || 0)}</td>
                  <td className="num">{money(o.total)}</td>
                </tr>
              ))}
            </tbody>
          </table>
          {fOrders.length === 0 && <Empty icon="rupee" title="No income in range" note="Orders in this period will show here." />}
        </div>

        <div className="card">
          <div className="panel-head"><h2>Expenses</h2></div>
          <table className="tbl">
            <thead><tr><th>Category</th><th className="num">GST</th><th className="num">Amount</th><th></th></tr></thead>
            <tbody>
              {fExp.map(e => (
                <tr key={e.id}>
                  <td><b>{e.category}</b><br /><span className="muted" style={{ fontSize: '.74rem' }}>{e.vendor} · {dateFmt(e.at)}</span></td>
                  <td className="num muted">{e.gst || 0}%</td>
                  <td className="num">{money(e.amount)}</td>
                  <td><button className="btn btn-icon btn-ghost btn-sm" onClick={() => admin.deleteExpense(e.id)}><AIcon name="trash" size={14} /></button></td>
                </tr>
              ))}
            </tbody>
          </table>
          {fExp.length === 0 && <Empty icon="wallet" title="No expenses" note="Add a business expense to track profit & GST." />}
        </div>
      </div>

      {addOpen && <AddExpense onClose={() => setAddOpen(false)} />}
      <style>{`@media (max-width: 900px){ .fin-grid { grid-template-columns: 1fr !important; } }`}</style>
    </div>
  );
}

function AddExpense({ onClose }) {
  const admin = useAdmin();
  const [e, setE] = React.useState({ category: 'Stock purchase', vendor: '', amount: '', gst: 18, note: '', at: new Date().toISOString().slice(0, 10) });
  const set = (patch) => setE(prev => ({ ...prev, ...patch }));
  function save() {
    if (!e.amount) { alert('Enter an amount'); return; }
    admin.addExpense({ ...e, amount: +e.amount, gst: +e.gst, at: new Date(e.at).getTime() });
    onClose();
  }
  return (
    <Modal title="Add expense" onClose={onClose}
      foot={<><button className="btn btn-ghost" onClick={onClose}>Cancel</button><button className="btn btn-primary" onClick={save}>Add expense</button></>}>
      <div className="form-grid">
        <div className="field"><label>Category</label>
          <select className="sel" value={e.category} onChange={ev => set({ category: ev.target.value })}>
            {['Stock purchase', 'Freight', 'Packaging', 'Marketing', 'Rent', 'Salaries', 'Utilities', 'Equipment', 'Other'].map(c => <option key={c}>{c}</option>)}
          </select>
        </div>
        <div className="field"><label>Date</label><input className="inp" type="date" value={e.at} onChange={ev => set({ at: ev.target.value })} /></div>
        <div className="field"><label>Vendor / payee</label><input className="inp" value={e.vendor} onChange={ev => set({ vendor: ev.target.value })} /></div>
        <div className="field"><label>GST rate (%)</label>
          <select className="sel" value={e.gst} onChange={ev => set({ gst: ev.target.value })}>{[0, 5, 12, 18, 28].map(r => <option key={r} value={r}>{r}%</option>)}</select>
        </div>
        <div className="field"><label>Amount (₹, incl. GST)</label><input className="inp" type="number" value={e.amount} onChange={ev => set({ amount: ev.target.value })} /></div>
        <div className="field"><label>Note</label><input className="inp" value={e.note} onChange={ev => set({ note: ev.target.value })} /></div>
      </div>
    </Modal>
  );
}
window.FinancePage = FinancePage;