// Facturación — Stripe, suscripción, consumo
const Billing = () => {
  const D = window.BW_DATA;
  return (
    <div className="page-enter" style={{ padding: '24px 32px 40px' }}>
      <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom: 20 }}>
        <div>
          <div style={{ fontSize: 13, color:'var(--color-text-secondary)' }}>Suscripción y consumo gestionados con Stripe</div>
          <h1 style={{ fontFamily:'var(--font-ui)', fontWeight: 400, fontSize: 36, margin: '4px 0 0', letterSpacing:'-0.025em', color:'var(--brand-navy)' }}>Facturación</h1>
        </div>
        <button className="btn"><I.ExternalLink size={14}/> Abrir portal Stripe</button>
      </div>

      {/* Plan + payment + usage summary */}
      <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr', gap: 16, marginBottom: 16 }}>
        <div className="card">
          <div className="card-head">
            <div><div className="card-title">Plan activo</div><div className="card-sub">Renovación automática el 1 de junio</div></div>
            <span className="badge green dot">Activo</span>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'1.5fr 1fr 1fr', borderTop:'1px solid var(--color-border)' }}>
            <div style={{ padding: 24, borderRight:'1px solid var(--color-border)' }}>
              <div style={{ fontFamily:'var(--font-ui)', fontWeight: 600, fontSize: 22, letterSpacing:'-0.018em' }}>Blueways · Standard</div>
              <div style={{ fontSize: 13, color:'var(--color-text-secondary)', marginTop: 4 }}>Multi-tenant · 5 usuarios · 3 canales</div>
              <div style={{ marginTop: 14, display:'flex', gap: 8 }}>
                <button className="btn btn-sm">Cambiar plan</button>
                <button className="btn btn-sm">Ver detalles</button>
              </div>
            </div>
            <div style={{ padding: 24, borderRight:'1px solid var(--color-border)' }}>
              <div style={{ fontSize: 12, color:'var(--color-text-muted)', textTransform:'uppercase', letterSpacing:'.04em' }}>Cuota fija mensual</div>
              <div style={{ fontFamily:'var(--font-ui)', fontWeight: 400, fontSize: 34, marginTop: 6, color:'var(--brand-navy)' }}>690 €</div>
              <div style={{ fontSize: 12, color:'var(--color-text-secondary)' }}>+ IVA</div>
            </div>
            <div style={{ padding: 24 }}>
              <div style={{ fontSize: 12, color:'var(--color-text-muted)', textTransform:'uppercase', letterSpacing:'.04em' }}>Próxima renovación</div>
              <div style={{ fontFamily:'var(--font-ui)', fontWeight: 400, fontSize: 34, marginTop: 6, color:'var(--brand-navy)' }}>1 jun</div>
              <div style={{ fontSize: 12, color:'var(--color-text-secondary)' }}>en 31 días</div>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><div className="card-title">Método de pago</div></div>
          <div className="card-body">
            <div style={{ background: 'linear-gradient(135deg,#1E3A8A,#2563EB)', color:'white', borderRadius: 12, padding: 18, marginBottom: 14 }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                <I.Card size={24}/>
                <span style={{ fontSize: 11, letterSpacing:'.1em', opacity: .8 }}>VISA</span>
              </div>
              <div style={{ fontFamily:'var(--font-mono)', fontSize: 16, marginTop: 24, letterSpacing:'.1em' }}>•••• •••• •••• 4242</div>
              <div style={{ display:'flex', justifyContent:'space-between', fontSize: 11, marginTop: 8, opacity: .8 }}>
                <span>ADRIÁN NÚÑEZ</span>
                <span className="mono">12/28</span>
              </div>
            </div>
            <button className="btn" style={{ width:'100%', justifyContent:'center' }}>Actualizar método de pago</button>
          </div>
        </div>
      </div>

      {/* Variable consumption breakdown */}
      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-head">
          <div><div className="card-title">Consumo variable · Telefonía · Mayo 2026</div><div className="card-sub">Acumulado del mes en curso · 8.412 minutos</div></div>
          <div style={{ textAlign:'right' }}>
            <div style={{ fontFamily:'var(--font-ui)', fontWeight: 400, fontSize: 34, color:'var(--brand-navy)', lineHeight: 1 }}>1.247,31 €</div>
            <div style={{ fontSize: 12, color:'var(--color-text-muted)' }}>Tipo BCE 30/04 · 1 USD = 0,9265 EUR</div>
          </div>
        </div>
        <table className="tbl">
          <thead><tr><th>Proveedor</th><th>Servicio</th><th>Minutos</th><th>Coste/min</th><th style={{textAlign:'right'}}>Total</th></tr></thead>
          <tbody>
            {D.VARIABLE_BREAKDOWN.map(r=>(
              <tr key={r.provider}>
                <td><span style={{ fontWeight: 500 }}>{r.provider}</span></td>
                <td style={{ color:'var(--color-text-secondary)' }}>{r.desc}</td>
                <td><span className="num">{r.minutes.toLocaleString('es')}</span></td>
                <td><span className="num">{r.unit} €</span></td>
                <td style={{ textAlign:'right' }}><span className="num" style={{ fontWeight: 600 }}>{r.total.toFixed(2)} €</span></td>
              </tr>
            ))}
            <tr style={{ background: 'var(--color-surface)' }}>
              <td colSpan="4" style={{ fontWeight: 600, textAlign:'right' }}>Subtotal variable</td>
              <td style={{ textAlign:'right' }}><span className="num" style={{ fontFamily:'var(--font-ui)', fontWeight: 400, fontSize: 18, color:'var(--brand-navy)' }}>1.247,31 €</span></td>
            </tr>
          </tbody>
        </table>
      </div>

      {/* Invoices history */}
      <div className="card">
        <div className="card-head"><div className="card-title">Historial de facturas</div><button className="btn btn-sm"><I.Download size={12}/> Descargar todas</button></div>
        <table className="tbl">
          <thead><tr><th>Nº factura</th><th>Período</th><th>Cuota fija</th><th>Variable</th><th>Total</th><th>Estado</th><th>Emitida</th><th></th></tr></thead>
          <tbody>
            {D.INVOICES.map(inv => (
              <tr key={inv.n}>
                <td><span className="mono" style={{ fontWeight: 500 }}>{inv.n}</span></td>
                <td>{inv.period}</td>
                <td><span className="num">{inv.fixed.toFixed(2)} €</span></td>
                <td><span className="num">{inv.variable.toFixed(2)} €</span></td>
                <td><span className="num" style={{ fontWeight: 600 }}>{inv.total.toFixed(2)} €</span></td>
                <td><span className="badge green dot">Pagada</span></td>
                <td><span className="num muted">{inv.issued}</span></td>
                <td><button className="btn btn-sm"><I.Download size={12}/> PDF</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

window.BillingPage = Billing;