/* ============================================================
   AI4Colegios UI Kit — WhatsAppRail.jsx
   Persistent right rail (330 ⇄ 58px). Top→bottom:
   health (critical trio) · recipients/universe + consent breakdown ·
   message type (utility/marketing) · template · compose + pay-link ·
   review & send (now/schedule) · cost (USD + COP, in-window-free).
   ============================================================ */
(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;

  function HealthChip({ tone, label, value }) {
    return (
      <span className={'wahb-chip ' + tone}>
        <span className="wahb-dot" />{label} <b>{value}</b>
      </span>
    );
  }

  function Health({ lang }) {
    const h = D.waHealth;
    return (
      <div className="mr-card mr-health">
        <div className="mr-h">{t(lang, 'Salud WhatsApp · crítico', 'WhatsApp health · critical')}</div>
        <div className="wahb-metrics">
          <HealthChip tone="ok" label={t(lang, 'Calidad', 'Quality')} value={t(lang, 'Alta', 'High')} />
          <HealthChip tone="ok" label={t(lang, 'Hoy', 'Today')} value={h.sentToday + ' / ' + h.dailyCap} />
          <HealthChip tone="ok" label={t(lang, 'Bloqueos 7d', 'Blocks 7d')} value={h.blocks7d} />
        </div>
        <button type="button" className="wahb-more">{t(lang, 'Detalles', 'Details')} ▸</button>
      </div>
    );
  }

  // recipients universe — single | bulk | empty
  function Recip({ lang, target }) {
    return (
      <div className="mr-card">
        <div className="mr-h">{t(lang, 'Destinatarios (quién)', 'Recipients (who)')}</div>
        {target.mode === 'empty' && (
          <div className="mr-universe"><div className="uni-empty">
            {t(lang, 'Sin destinatarios — marque familias o use la vista filtrada', 'No recipients — check families or use the filtered 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}</b> {t(lang, 'destinatarios', 'recipients')} <span className="mr-scope">· {target.checked} {t(lang, 'marcadas', 'checked')}</span>
        </div>
        {target.mode !== 'single' && (
          <button type="button" className="mr-allbtn">{t(lang, 'Usar toda la vista filtrada', 'Target the whole filtered view')} ({D.totals.total})</button>
        )}
        <div className="mr-breakdown">
          <div className="mr-row ok"><span>{t(lang, 'Elegibles', 'Eligible')}</span><span className="v">{target.elig}</span></div>
          <div className="mr-row mut"><span>{t(lang, 'Sin opt-in', 'No opt-in')}</span><span className="v">{target.noOptin}</span></div>
          <div className="mr-row mut"><span>{t(lang, 'En baja', 'Opted out')}</span><span className="v">{target.optOut}</span></div>
          <div className="mr-row mut"><span>{t(lang, 'No vinculados', 'Not paired')}</span><span className="v">{target.notPaired}</span></div>
        </div>
      </div>
    );
  }

  function MsgType({ lang, type, setType }) {
    return (
      <div className="mr-card">
        <div className="mr-h">{t(lang, 'Tipo de mensaje', 'Message type')}</div>
        <div className="mr-seg">
          <button type="button" className={'mr-segb' + (type === 'utility' ? ' active' : '')} onClick={() => setType('utility')}>{t(lang, 'Utilidad', 'Utility')}</button>
          <button type="button" className={'mr-segb' + (type === 'marketing' ? ' active' : '')} onClick={() => setType('marketing')}>{t(lang, 'Marketing', 'Marketing')}</button>
        </div>
        <div className="mr-typenote">
          {type === 'utility'
            ? t(lang, 'Utilidad: cobros. Las respuestas dentro de 24 h son gratis.', 'Utility: billing. Replies inside 24 h are free.')
            : t(lang, 'Marketing: requiere consentimiento de marketing. Siempre se cobra.', 'Marketing: needs marketing consent. Always charged.')}
        </div>
      </div>
    );
  }

  function Composer({ lang, type, payLink, setPayLink, draft, setDraft }) {
    const tpls = D.templates[type];
    return (
      <div className="mr-card">
        <div className="mr-h">{t(lang, 'Plantilla', 'Template')}</div>
        <select className="mr-tpl">{tpls.map((x) => <option key={x.id}>{t(lang, x.es, x.en)}</option>)}</select>
        <div className="mr-h" style={{ marginTop: 11 }}>{t(lang, 'Redactar mensaje', 'Compose message')}</div>
        <textarea className="mr-draft" value={draft} onChange={(e) => setDraft(e.target.value)} />
        <label className="mr-paylink">
          <input type="checkbox" checked={payLink} onChange={() => setPayLink(!payLink)} />
          {t(lang, 'Agregar enlace de pago (botón)', 'Add payment link (CTA button)')}
        </label>
      </div>
    );
  }

  function Send_({ lang, when, setWhen, eligible, type, payLink, onSend }) {
    const perMsg = type === 'utility' ? UTILITY_USD : 0.0125;
    const totalUsd = perMsg * eligible;
    const blocked = eligible === 0;
    return (
      <div className="mr-foot">
        <div className="mr-card" style={{ background: 'transparent', border: 0, padding: 0, margin: 0 }}>
          <label className="mr-radio"><input type="radio" name="when" checked={when === 'now'} onChange={() => setWhen('now')} />{t(lang, 'Enviar ahora', 'Send now')}</label>
          <label className="mr-radio"><input type="radio" name="when" checked={when === 'sched'} onChange={() => setWhen('sched')} />{t(lang, 'Programar', 'Schedule')}</label>
          {when === 'sched' && <input className="mr-when-input" type="datetime-local" defaultValue="2026-06-04T08:00" />}
        </div>
        <div className="mr-cost">
          {payLink && <span className="mr-cta-note">{t(lang, 'Incluye botón Wompi (PSE/Bancolombia)', 'Includes Wompi CTA (PSE/Bancolombia)')} · </span>}
          {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={onSend}>
          {blocked ? t(lang, 'Nadie elegible', 'Nobody eligible') : t(lang, 'Enviar (simulado) · ', 'Send (simulated) · ') + eligible}
        </button>
        <div className="mr-note">{t(lang, 'Vista previa — los envíos están representados, no activos.', 'Preview — sends are depicted, not live.')}</div>
      </div>
    );
  }

  function CollapsedRail({ onExpand, count }) {
    const items = [WhatsApp, Recipients, Template, Compose, Clock, Send];
    return (
      <div className="mr-icons">
        <span className="mr-ico mr-ico-head" title="WhatsApp"><WhatsApp /></span>
        {items.slice(1).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 }) {
    return (
      <aside className="msgrail" aria-label="WhatsApp">
        <button type="button" className="msgrail-toggle" onClick={onToggle}
          aria-label={t(lang, 'Mostrar u ocultar mensajes', 'Toggle message panel')}>{collapsed ? '«' : '»'}</button>

        {collapsed
          ? <CollapsedRail onExpand={onToggle} count={target.count} />
          : (
            <div className="mr-panel">
              <div className="mr-head">
                <h2>WhatsApp</h2>
                <div className="mr-sub">{target.mode === 'single'
                  ? t(lang, 'Para: ', 'To: ') + target.student.acu
                  : t(lang, 'Mensaje masivo · selección de la tabla', 'Bulk · table selection')}</div>
              </div>
              <div className="mr-body">
                <Health lang={lang} />
                <Recip lang={lang} target={target} />
                <MsgType lang={lang} type={state.type} setType={(v) => set({ type: v })} />
                <Composer lang={lang} type={state.type} payLink={state.payLink}
                  setPayLink={(v) => set({ payLink: v })} draft={state.draft} setDraft={(v) => set({ draft: v })} />
              </div>
              <Send_ lang={lang} when={state.when} setWhen={(v) => set({ when: v })}
                eligible={target.elig} type={state.type} payLink={state.payLink} onSend={state.onSend} />
            </div>
          )}
      </aside>
    );
  }

  window.WhatsAppRail = WhatsAppRail;
})();