/* ============================================================
   AI4Colegios UI Kit — WhatsAppRail.jsx  (2.0 — redesigned for low-tech admins)
   Reads top→bottom the way you actually send a message:
     1) Para    — who receives + how many can receive
     2) Mensaje — type (Cobro/Evento) · template · text · pay-link
     3) Cuándo  — now or schedule
     4) Enviar  — cost + send button
   Account-health is demoted to a thin status footer (not the first thing you see).
   Collapses to an icon strip. Depicted — nothing is actually sent.
   ============================================================ */
(function () {
  const { WhatsApp, Recipients, Template, Compose, Clock, Send } = window.Icons;
  const { t, money } = window.RZH;
  const D = window.RZDATA;
  const FX = 3580;            // COP per USD (Jun 2026)
  const UTILITY_USD = 0.001;  // CO utility ≈ US$0.001/msg; marketing higher

  function CollapsedRail({ onExpand, count }) {
    const items = [Recipients, Template, Compose, Clock, Send];
    return (
      <div className="mr-icons">
        <span className="mr-ico mr-ico-head" title="WhatsApp"><WhatsApp /></span>
        {items.map((Ico, i) => (
          <button key={i} type="button" className={'mr-ico' + (Ico === Send ? ' mr-ico-send' : '')} onClick={onExpand}>
            <Ico />{Ico === Recipients && count > 0 && <span className="mr-badge">{count}</span>}
          </button>
        ))}
      </div>
    );
  }

  function WhatsAppRail({ lang, collapsed, onToggle, target, state, set }) {
    const [showHealth, setShowHealth] = React.useState(false);
    const H = D.waHealth || {};
    const isMkt = state.type === 'marketing';
    const elig = target.elig || 0;
    const needPermission = (target.noOptin || 0) + (target.notPaired || 0);
    const optOut = target.optOut || 0;
    const perUsd = isMkt ? 0.0125 : UTILITY_USD;
    const totalUsd = perUsd * elig;
    const blocked = elig === 0;
    const tpls = D.templates[state.type] || [];
    const toLine = target.mode === 'single'
      ? t(lang, 'Para: ', 'To: ') + target.student.acu
      : (target.mode === 'bulk' ? t(lang, 'Mensaje masivo', 'Bulk message') : t(lang, 'Elija destinatarios en la tabla', 'Pick recipients in the table'));

    if (collapsed) {
      return (
        <aside className="msgrail" aria-label="WhatsApp">
          <button type="button" className="msgrail-toggle" onClick={onToggle} aria-label={t(lang,'Mostrar mensajes','Show messages')}>«</button>
          <CollapsedRail onExpand={onToggle} count={target.count} />
        </aside>
      );
    }

    return (
      <aside className="msgrail" aria-label="WhatsApp">
        <button type="button" className="msgrail-toggle" onClick={onToggle} aria-label={t(lang,'Ocultar mensajes','Hide messages')}>»</button>
        <div className="mr-panel">
          <div className="mr-head"><h2>WhatsApp</h2><div className="mr-sub">{toLine}</div></div>

          <div className="mr-body">
            {/* 1 · PARA (who) */}
            <div className="mr-card">
              <div className="mr-h">1 · {t(lang,'Para','To')}</div>
              {target.mode === 'empty' && <div className="mr-universe"><div className="uni-empty">{t(lang,'Marque familias en la tabla o use una vista rápida.','Check families in the table or use a quick view.')}</div></div>}
              {target.mode === 'single' && <div className="mr-universe"><div className="uni-one"><span className="uni-nm">{target.student.acu}</span><span className="uni-meta">{target.student.nombres} · {target.student.grado} · {t(lang,'saldo','balance')} $ {money(target.student.saldoMora)}</span></div></div>}
              {target.mode === 'bulk' && <div className="mr-universe"><div className="uni-bulk"><span className="uni-filter">{target.label}</span><span className="uni-names">{(target.sample||[]).join(' · ')}{target.count > (target.sample||[]).length ? ' …' : ''}</span></div></div>}
              <div className="mr-recip"><b>{target.count || 0}</b> {t(lang,'destinatarios','recipients')}</div>
              <div className="mr-elig">
                <span className="ok">✓ {elig} {t(lang,'pueden recibir','can receive')}</span>
                {needPermission > 0 && <span className="mut"> · {needPermission} {t(lang,'necesitan permiso','need permission')}</span>}
                {optOut > 0 && <span className="mut"> · {optOut} {t(lang,'dieron de baja','opted out')}</span>}
              </div>
              {target.mode !== 'single' && <button type="button" className="mr-allbtn">{t(lang,'Usar toda la vista filtrada','Use the whole filtered view')} ({D.totals.total})</button>}
            </div>

            {/* 2 · MENSAJE */}
            <div className="mr-card">
              <div className="mr-h">2 · {t(lang,'Mensaje','Message')}</div>
              <div className="mr-seg">
                <button type="button" className={'mr-segb'+(!isMkt?' active':'')} onClick={()=>set({type:'utility'})}>{t(lang,'Cobro','Billing')}</button>
                <button type="button" className={'mr-segb'+(isMkt?' active':'')} onClick={()=>set({type:'marketing'})}>{t(lang,'Evento','Event')}</button>
              </div>
              <div className="mr-typenote">{isMkt
                ? t(lang,'Evento/promoción. Requiere permiso de marketing.','Event/promotion. Needs marketing permission.')
                : t(lang,'Cobro de matrícula o pensión. Respuestas dentro de 24 h: gratis.','Tuition/fee billing. Replies within 24 h: free.')}</div>
              <select className="mr-tpl" style={{marginTop:8}}>{tpls.map((x)=><option key={x.id}>{t(lang,x.es,x.en)}</option>)}</select>
              <textarea className="mr-draft" value={state.draft} onChange={(e)=>set({draft:e.target.value})} placeholder={t(lang,'Escriba el mensaje…','Write the message…')} />
              <label className="mr-paylink"><input type="checkbox" checked={state.payLink} onChange={()=>set({payLink:!state.payLink})} /> {t(lang,'Adjuntar botón “Pagar ahora” (Wompi)','Attach “Pay now” button (Wompi)')}</label>
            </div>

            {/* 3 · CUÁNDO */}
            <div className="mr-card">
              <div className="mr-h">3 · {t(lang,'Cuándo','When')}</div>
              <label className="mr-radio"><input type="radio" name="mr-when" checked={state.when==='now'} onChange={()=>set({when:'now'})} /> {t(lang,'Enviar ahora','Send now')}</label>
              <label className="mr-radio"><input type="radio" name="mr-when" checked={state.when==='sched'} onChange={()=>set({when:'sched'})} /> {t(lang,'Programar','Schedule')}</label>
              {state.when==='sched' && <input className="mr-when-input" type="datetime-local" defaultValue="2026-06-04T08:00" />}
            </div>
          </div>

          {/* 4 · ENVIAR */}
          <div className="mr-foot">
            <div className="mr-cost">{t(lang,'Costo','Cost')}: <b>US$ {totalUsd.toFixed(3)}</b> · $ {money(Math.round(totalUsd*FX))} COP<span className="mr-free"> · {t(lang,'gratis en ventana de 24 h','free in 24 h window')}</span></div>
            <button type="button" className="mr-send" disabled={blocked} onClick={state.onSend}>
              {blocked ? t(lang,'Nadie puede recibir','Nobody can receive') : t(lang,'Enviar (simulado) · ','Send (simulated) · ') + elig}
            </button>
            <div className="mr-note">{t(lang,'Vista previa — no se envía de verdad.','Preview — nothing is actually sent.')}</div>
            <button type="button" className="mr-health-foot" onClick={()=>setShowHealth(v=>!v)}>
              <span className="hdot" />{t(lang,'Cuenta sana','Account healthy')} · {t(lang,'hoy','today')} {H.sentToday||0}/{H.dailyCap||250}<span className="more">{showHealth?t(lang,'Ocultar','Hide'):t(lang,'Detalles','Details')} ▸</span>
            </button>
            {showHealth && <div className="mr-cost" style={{marginTop:6}}>{t(lang,'Calidad','Quality')}: {H.quality==='high'?t(lang,'Alta','High'):(H.quality||'—')} · {t(lang,'Bloqueos 7 d','Blocks 7 d')}: {H.blocks7d||0} · {t(lang,'Límite','Cap')}: {H.dailyCap||250}</div>}
          </div>
        </div>
      </aside>
    );
  }
  window.WhatsAppRail = WhatsAppRail;
})();