function Payments({ clients: _clients, onOpenClient, tab: tabProp, onTab }) {
  const paying   = (_clients||CLIENTS).filter(c => c.mrr > 0);
  const totalMrr = paying.reduce((s, c) => s + c.mrr, 0);
  const totalCol = paying.reduce((s, c) => s + (c.totalCollected || 0), 0);
  const avgDeal  = paying.length ? Math.round(totalMrr / paying.length) : 0;
  const [localTab, setLocalTab] = React.useState("active");
  const tab = tabProp || localTab;
  function setTab(v) { if (onTab) onTab(v); setLocalTab(v); }

  function handleExport() {
    const rows = [
      ["Business","Location","MRR","Contract Start","Next Payment","Total Collected"],
      ...paying.map(c => [c.name, c.city, c.mrr, c.contractStart, c.nextPayment, c.totalCollected])
    ];
    const csv = rows.map(r => r.join(",")).join("\n");
    const blob = new Blob([csv], { type:"text/csv" });
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = "payments.csv";
    a.click();
  }

  return (
    <div className="cm-page">
      <div className="cm-bar">
        <div className="cm-bar__l">
          <span className="cm-bar__crumb">Payments <span className="cm-bar__crumbSep">/</span> <span className="cm-bar__crumbMuted">Active subscriptions</span></span>
          <div className="cm-bar__tabs">
            {[["active","Active subs"],["invoices","Invoices"]].map(([k,l]) => (
              <span key={k} className={"cm-bar__tab " + (tab===k?"is-active":"")} onClick={() => setTab(k)}>{l}</span>
            ))}
          </div>
        </div>
        <div className="cm-bar__r">
          <button className="cm-btn cm-btn--ghost" onClick={handleExport}><i data-lucide="download" className="cm-icon-xs"></i>Export CSV</button>
        </div>
      </div>

      <div style={{ padding: "12px 12px 0", display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:10 }}>
        <div className="cm-statBig" style={{ cursor:"default" }}>
          <div className="cm-statBig__lbl">Total MRR</div>
          <div className="cm-statBig__val">${totalMrr}</div>
        </div>
        <div className="cm-statBig" style={{ cursor:"default" }}>
          <div className="cm-statBig__lbl">Clients paying</div>
          <div className="cm-statBig__val">{paying.length}</div>
        </div>
        <div className="cm-statBig" style={{ cursor:"default" }}>
          <div className="cm-statBig__lbl">Avg deal size</div>
          <div className="cm-statBig__val">${avgDeal}<span style={{ fontSize:12, color:"var(--color-ink-subtle)" }}>/mo</span></div>
        </div>
        <div className="cm-statBig" style={{ cursor:"default" }}>
          <div className="cm-statBig__lbl">Total collected</div>
          <div className="cm-statBig__val">${totalCol.toLocaleString()}</div>
        </div>
      </div>

      {tab === "active" && (
        <div className="cm-pageScroll" style={{ marginTop: 12 }}>
          <table className="cm-table">
            <thead>
              <tr>
                <th>Business</th>
                <th>Location</th>
                <th style={{ textAlign:"right" }}>MRR</th>
                <th>Contract start</th>
                <th>Next payment</th>
                <th style={{ textAlign:"right" }}>Total collected</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              {paying.map(c => (
                <tr key={c.id} onClick={() => onOpenClient && onOpenClient(c.id)}>
                  <td style={{ fontWeight:500 }}>{c.name}</td>
                  <td className="muted">{c.city}</td>
                  <td className="num" style={{ textAlign:"right" }}>${c.mrr}</td>
                  <td className="muted">{c.contractStart || "—"}</td>
                  <td className="muted">{c.nextPayment || "—"}</td>
                  <td className="num" style={{ textAlign:"right" }}>${(c.totalCollected||0).toLocaleString()}</td>
                  <td><span className="cm-tag cm-tag--ok">Active</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {tab === "invoices" && (
        <div className="cm-pageScroll" style={{ marginTop:12 }}>
          <table className="cm-table">
            <thead>
              <tr><th>Invoice</th><th>Client</th><th style={{textAlign:"right"}}>Amount</th><th>Date</th><th>Method</th><th>Status</th></tr>
            </thead>
            <tbody>
              {Object.entries(PAYMENT_HISTORY).flatMap(([id, pmnts]) =>
                pmnts.map((p, i) => {
                  const c = CLIENTS.find(x => x.id === id);
                  return (
                    <tr key={id + i} onClick={() => onOpenClient && onOpenClient(id)}>
                      <td className="cm-mono" style={{ fontSize:11 }}>INV-{id.replace("GMA-","")}-{i+1}</td>
                      <td style={{ fontWeight:500 }}>{c?.name || id}</td>
                      <td className="num" style={{ textAlign:"right" }}>${p.amount}</td>
                      <td className="muted">{p.date}</td>
                      <td className="cm-mono" style={{ fontSize:11.5 }}>{p.method}</td>
                      <td><span className="cm-tag cm-tag--ok">Paid</span></td>
                    </tr>
                  );
                })
              )}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}
window.Payments = Payments;