/* ============================================================
   v3 — WhatsApp composer rail (right rail on ledger / ficha / family)
   States: empty (no recipients) · selected (n recipients)
   ============================================================ */
function WaRail({ lang = 'es', recipients = 0, eligible = 0, names = [] }) {
  const t = (es, en) => (lang === 'en' ? en : es);
  const has = recipients > 0;
  return (
    <aside className="warail">
      <div className="wr-head">
        <h2 className="wr-title"><span className="wr-dot"></span>WhatsApp</h2>
        <div className="wr-sub">
          {has ? t('Para: ' + names.join(', '), 'To: ' + names.join(', ')) : t('Elija destinatarios en la tabla', 'Pick recipients in the table')}
        </div>
      </div>
      <div className="wr-body">
        {/* PARA */}
        <div className="wr-block">
          <div className="wr-step"><span className="wr-num">1</span>{t('PARA', 'TO')}</div>
          {has ? (
            <div className="wr-recip">
              <div className="wr-recip-row"><b>{recipients}</b> {t('destinatarios', 'recipients')}</div>
              <div className="wr-elig"><Ic name="check" size={13} sw={3} /> {eligible} {t('pueden recibir', 'can receive')}</div>
              <div className="wr-names">{names.join(' · ')}</div>
            </div>
          ) : (
            <div className="wr-recip">
              <div className="wr-recip-row"><b>0</b> {t('destinatarios', 'recipients')}</div>
              <div className="wr-elig"><Ic name="check" size={13} sw={3} /> 0 {t('pueden recibir', 'can receive')}</div>
              <button className="wr-allbtn">{t('Usar toda la vista filtrada (342)', 'Use the whole filtered view (342)')}</button>
            </div>
          )}
        </div>
        {/* MENSAJE */}
        <div className="wr-block">
          <div className="wr-step"><span className="wr-num">2</span>{t('MENSAJE', 'MESSAGE')}</div>
          <div className="seg" style={{ width: '100%' }}>
            <button className="active" style={{ flex: 1 }}>{t('Cobro', 'Billing')}</button>
            <button style={{ flex: 1 }}>{t('Evento', 'Event')}</button>
          </div>
          <div className="wr-note">{t('Cobro de matrícula o pensión. Respuestas en 24 h: gratis.', 'Tuition/fee billing. Replies within 24 h: free.')}</div>
          <select className="inp" style={{ width: '100%' }}>
            <option>{t('Recordatorio de mora', 'Overdue reminder')}</option>
            <option>{t('Próximo vencimiento', 'Upcoming due-date')}</option>
            <option>{t('Vence hoy + enlace de pago', 'Due today + pay link')}</option>
          </select>
          <div className="wr-draft">[{t('Botón: Pagar ahora', 'Button: Pay now')} → pagar.ai4colegios.co/RX-####]</div>
          <label className="wr-check"><span className="checkbox on"><Ic name="check" size={11} sw={3} /></span>{t('Adjuntar botón “Pagar ahora” (Wompi)', 'Attach “Pay now” button (Wompi)')}</label>
        </div>
        {/* CUÁNDO */}
        <div className="wr-block">
          <div className="wr-step"><span className="wr-num">3</span>{t('CUÁNDO', 'WHEN')}</div>
          <label className="wr-radio"><span className="radio on"></span>{t('Enviar ahora', 'Send now')}</label>
          <label className="wr-radio"><span className="radio"></span>{t('Programar', 'Schedule')}</label>
        </div>
      </div>
      <div className="wr-foot">
        <div className="wr-cost">{t('Costo:', 'Cost:')} <b>US$ {has ? '0.001' : '0.000'}</b> · $ {has ? '4' : '0'} COP · <span className="wr-free">{t('gratis en ventana de 24 h', 'free in 24 h window')}</span></div>
        <button className={'wr-send' + (has ? '' : ' off')} disabled={!has}>
          {has ? t('Enviar (simulado) · ' + recipients, 'Send (simulated) · ' + recipients) : t('Nadie puede recibir', 'Nobody can receive')}
        </button>
        <div className="wr-health"><span className="wr-hdot"></span>{t('Cuenta sana · hoy 0/250', 'Account healthy · today 0/250')}<a className="wr-det">{t('Detalles', 'Details')} <Ic name="chevRight" size={11} /></a></div>
        <div className="wr-disc">{t('Vista previa — no se envía de verdad.', 'Preview — nothing is actually sent.')}</div>
      </div>
    </aside>
  );
}
window.WaRail = WaRail;