// Payments & Billing — fresh account state

function Payments() {
  const consults = useConsults();
  const consult = consults[0] || null;
  const paid = consult?.paymentStatus === 'paid';

  return (
    <PortalShell active="payments" title="Payments & Billing" subtitle="Charges appear after a consultation is completed"
      action={<button className="ml-btn ml-btn--primary"><I.plus size={14}/> Add method</button>}>
      <div style={{ padding: '24px 32px', maxWidth: 980 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 20 }}>
          <SummaryCard label="Wallet balance" value="₹0" sub="No credits added" tone="blue"/>
          <SummaryCard label="This month" value="₹0" sub="No completed consults" tone="paper"/>
          <SummaryCard label="Pending" value={consult && !paid ? `₹${consult.fee}` : '₹0'} sub={paid ? 'paid in test mode' : consult ? 'pay after consult' : 'none'} tone="paper"/>
        </div>

        <div className="ml-card" style={{ padding: 0, overflow: 'hidden' }}>
          <div style={{ padding: '18px 20px', borderBottom: '1px solid var(--line)' }}>
            <div className="ml-label">Transactions</div>
            <div style={{ fontSize: 14, fontWeight: 500, marginTop: 2 }}>Fresh account</div>
          </div>
          {consult ? (
            <div style={{ padding: '16px 20px', display: 'grid', gridTemplateColumns: '90px 1fr 120px 110px', gap: 14, alignItems: 'center' }}>
              <span className="ml-muted" style={{ fontSize: 11.5, fontFamily: 'var(--mono)' }}>{consult.date}</span>
              <div>
                <div style={{ fontSize: 13.5 }}>{consult.reason} — {DOC_BY_ID(consult.docId).n}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-4)', fontFamily: 'var(--mono)', marginTop: 2 }}>{consult.id}</div>
              </div>
              <span className={paid ? 'ml-pill ml-pill--mint' : 'ml-pill ml-pill--ghost'} style={{ alignSelf: 'flex-start' }}>{paid ? 'Paid' : 'Pending'}</span>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 14 }}>₹{consult.fee}</div>
                {!paid && (
                  <button onClick={() => updateConsult(consult.id, { paymentStatus: 'paid', paidAt: new Date().toISOString() })}
                    className="ml-btn ml-btn--primary" style={{ marginTop: 8, padding: '7px 10px', fontSize: 12 }}>
                    Pay test fee
                  </button>
                )}
              </div>
            </div>
          ) : (
            <div style={{ padding: 44, textAlign: 'center', color: 'var(--ink-3)' }}>
              No payments yet. Your first consult will stay pending until the visit is completed.
            </div>
          )}
        </div>
      </div>
    </PortalShell>
  );
}

function SummaryCard({ label, value, sub, tone }) {
  return (
    <div className="ml-card" style={{
      padding: 18,
      background: tone === 'blue' ? 'var(--blue)' : '#fff',
      color: tone === 'blue' ? '#fff' : 'var(--ink)',
      border: tone === 'blue' ? 'none' : '1px solid var(--line)',
    }}>
      <div className="ml-label" style={{ color: tone === 'blue' ? 'rgba(255,255,255,.7)' : 'var(--ink-3)' }}>{label}</div>
      <div style={{ fontFamily: 'var(--display)', fontSize: 28, marginTop: 6 }}>{value}</div>
      <div style={{ fontSize: 12, marginTop: 4, opacity: tone === 'blue' ? 0.85 : 0.65 }}>{sub}</div>
    </div>
  );
}

window.Payments = Payments;