/* pages/MessageCenter.jsx — 3-pane WhatsApp console (list / thread+composer / family rail).
   AI4N-authored on the design system. Consent-gated, depicted-not-live. */
(function () {
  const { t, money } = window.RZH;
  const D = window.RZDATA;

  // build family conversations once (mora first, then by balance)
  const CONVS = (function () {
    return D.fams.map((f, i) => {
      const studs = D.students.filter((s) => s.famIdx === i);
      const saldo = studs.reduce((a, s) => a + s.saldoMora, 0);
      const worst = studs.some(s=>s.status==='mora2'||s.status==='sinmat') ? 'mora2'
                  : studs.some(s=>s.status==='mora1') ? 'mora1'
                  : (studs.every(s=>s.status==='pagado') ? 'pagado' : 'good');
      const utilOk = studs.some((s) => s.consent.utility && s.paired);
      return { i, acu: f.acu, studs, saldo, worst, utilOk, av: studs[0] ? studs[0].avatarBg : '#1F2A44',
        init: studs[0] ? (studs[0].initials || studs[0].acu.slice(0,1)) : '?' };
    }).sort((a, b) => (b.saldo - a.saldo));
  })();
  const DOT = { good:'var(--status-good)', mora1:'var(--status-mora1)', mora2:'var(--status-mora2)', pagado:'var(--status-pagado)' };

  function MessageCenter({ lang, onOpenStudent }) {
    const [selI, setSelI] = React.useState(CONVS.length ? CONVS[0].i : null);
    const [tpl, setTpl] = React.useState(D.templates.utility[0].id);
    const [draft, setDraft] = React.useState('');
    const [sent, setSent] = React.useState(false);
    const conv = CONVS.find((c) => c.i === selI) || CONVS[0];
    const primary = conv ? conv.studs[0] : null;

    React.useEffect(() => { setSent(false); setDraft(''); }, [selI]);

    return (
      <div className="mc" data-screen-label="Centro de Mensajes">
        {/* conversation list */}
        <div className="mc-col">
          <div className="mc-colhd"><h2>{t(lang,'Conversaciones','Conversations')}</h2><div className="sub">{t(lang,'Por atender primero · mora','Needs attention first · overdue')}</div></div>
          <div className="mc-list">
            {CONVS.map((c) => (
              <div key={c.i} className={'mc-conv' + (c.i === selI ? ' active' : '')} onClick={() => setSelI(c.i)}>
                <span className="av" style={{ background: c.av }}>{c.init}</span>
                <div className="body">
                  <div className="nm">{c.acu}</div>
                  <div className="pre">{c.saldo > 0 ? t(lang,'Saldo en mora $ ','Overdue $ ') + money(c.saldo) : t(lang,'Al día','Current')} · {c.studs.length} {t(lang,'est.','st.')}</div>
                </div>
                <div className="meta"><span className="dot" style={{ background: DOT[c.worst] || DOT.good }} />{!c.utilOk && <span title={t(lang,'Sin opt-in','No opt-in')} style={{ fontSize:'9px', color:'var(--text-muted)' }}>○</span>}</div>
              </div>
            ))}
          </div>
        </div>

        {/* thread + composer */}
        <div className="mc-col">
          <div className="mc-colhd"><h2>{conv ? conv.acu : '—'}</h2><div className="sub">{primary ? (primary.nombres + ' · ' + primary.grado) : ''} · {t(lang,'WhatsApp','WhatsApp')}</div></div>
          <div className="mc-thread">
            <div className="bub in">{t(lang,'Buenos días, ¿cuál es el saldo de mi hijo?','Good morning, what is my child’s balance?')}<span className="tm">08:14</span></div>
            {conv && <div className="bub out">{t(lang,'Buenos días. El saldo en mora es $ ','Good morning. The overdue balance is $ ') + money(conv.saldo) + '.'}<span className="tm">08:20 ✓✓</span></div>}
            <div className="bub in">{t(lang,'Gracias, ¿puedo pagar por aquí?','Thanks, can I pay here?')}<span className="tm">08:21</span></div>
            {sent && <div className="bub out">{draft || t(lang,'[Plantilla de utilidad + botón Pagar ahora]','[Utility template + Pay-now button]')}<span className="tm">{t(lang,'ahora','now')} ✓</span></div>}
          </div>
          <div className="mc-compose">
            <select value={tpl} onChange={(e) => setTpl(e.target.value)}>
              {D.templates.utility.map((x) => <option key={x.id} value={x.id}>{t(lang,x.es,x.en)} · {t(lang,'Utilidad','Utility')}</option>)}
            </select>
            <textarea value={draft} onChange={(e) => setDraft(e.target.value)} placeholder={t(lang,'Escriba o use la plantilla… (se adjunta el botón Pagar ahora → Wompi)','Type or use the template… (Pay-now button → Wompi is attached)')} />
            <div className={'mc-gate ' + (conv && conv.utilOk ? 'ok' : 'no')}>
              {conv && conv.utilOk
                ? t(lang,'✓ Acudiente con opt-in de utilidad. Respuestas dentro de 24 h: gratis.','✓ Guardian has utility opt-in. Replies inside 24 h: free.')
                : t(lang,'No elegible — requiere opt-in de utilidad (responda SÍ / formulario de matrícula).','Not eligible — needs utility opt-in (reply YES / enrollment form).')}
            </div>
            <button type="button" className="mc-send" disabled={!(conv && conv.utilOk)} onClick={() => setSent(true)}>
              {sent ? t(lang,'Enviado (simulado) ✓','Sent (simulated) ✓') : t(lang,'Enviar (simulado)','Send (simulated)')}
            </button>
          </div>
        </div>

        {/* family-profile rail */}
        <div className="mc-col mc-rail">
          <div className="mc-colhd"><h2>{t(lang,'Ficha familiar','Family profile')}</h2><div className="sub">{conv ? conv.acu : ''}</div></div>
          <div style={{ overflowY:'auto', padding:'12px 14px' }}>
            {conv && (
              <React.Fragment>
                <div className="card" style={{ margin:0, marginBottom:12 }}>
                  <div className="kv"><span className="k">{t(lang,'Saldo en mora','Overdue')}</span><span className="v mono" style={{ color: conv.saldo>0?'var(--status-mora2)':'var(--status-good)' }}>$ {money(conv.saldo)}</span></div>
                  <div className="kv"><span className="k">{t(lang,'Estudiantes','Students')}</span><span className="v">{conv.studs.length}</span></div>
                  <div className="kv"><span className="k">{t(lang,'Opt-in utilidad','Utility opt-in')}</span><span className={'cbadge ' + (conv.utilOk?'ok':'no')}>{conv.utilOk?t(lang,'Sí','Yes'):t(lang,'No','No')}</span></div>
                </div>
                <div className="card" style={{ margin:0 }}>
                  <h3 style={{ fontSize:'13px' }}>{t(lang,'Estudiantes','Students')}</h3>
                  {conv.studs.map((s) => (
                    <div key={s.no} className="sib" onClick={() => onOpenStudent(s)}>
                      <span className="sib-av" style={{ background: s.avatarBg }}>{s.initials || s.nombres.slice(0,1)}</span>
                      <span className="sib-nm">{s.nombres}</span>
                      <span style={{ color:'var(--text-muted)', fontSize:'12px' }}>{s.grado}</span>
                    </div>
                  ))}
                </div>
                <p className="rz-modal-note" style={{ textAlign:'left', marginTop:12 }}>{t(lang,'Vista previa — los envíos están representados, no activos. La IA redacta; nunca responde montos (los toma del libro).','Preview — sends are depicted, not live. AI drafts; it never answers amounts (those come from the ledger).')}</p>
              </React.Fragment>
            )}
          </div>
        </div>
      </div>
    );
  }
  window.MessageCenter = MessageCenter;
})();