/* ============================================================
   CENTRO DE MENSAJES — Direction A (calm) + Direction B (dense)
   3-pane WhatsApp console: list · thread+composer · family rail
   ============================================================ */
(function () {
  const tt = (lang, es, en) => (lang === 'en' ? en : es);
  const H = window.RZH;

  const CONVOS = [
    { nm: 'Yolanda Mendoza L.', ini: 'YM', bg: '#2C8C99', time: '8:15', status: 'mora2', bal: 1700000, est: 3, prev: 'Claro, se puede abonar. Use el botón…', unread: true },
    { nm: 'Sandra Feria G.', ini: 'SF', bg: '#C9A24B', time: '8:15', status: 'mora1', bal: 330000, est: 2, prev: 'Gracias, transfiero hoy mismo.', unread: true },
    { nm: 'María Romero', ini: 'MR', bg: '#1E40AF', time: '8:11', status: 'mora1', bal: 175000, est: 3, prev: '¿Puedo pagar el viernes?', unread: false },
    { nm: 'Pedro Hoyos D.', ini: 'PH', bg: '#B91C1C', time: '7:58', status: 'mora2', bal: 525000, est: 2, prev: 'Recibido, muchas gracias.', unread: true },
    { nm: 'Rafael Contreras B.', ini: 'RC', bg: '#15803D', time: '7:42', status: 'good', bal: 0, est: 1, prev: 'Perfecto, quedo al día.', unread: false },
    { nm: 'Andrés Ramos M.', ini: 'AR', bg: '#6D4FCB', time: '7:30', status: 'mora1', bal: 170000, est: 1, prev: 'Adjunto comprobante.', unread: false },
    { nm: 'Gloria Cogollo P.', ini: 'GC', bg: '#0E7490', time: '7:18', status: 'mora2', bal: 360000, est: 2, prev: '¿El enlace sigue activo?', unread: true },
    { nm: 'Luz Padilla C.', ini: 'LP', bg: '#9333EA', time: '6:55', status: 'good', bal: 0, est: 1, prev: 'Gracias por el recordatorio.', unread: false },
    { nm: 'Patricia Cogollo R.', ini: 'PC', bg: '#BE185D', time: '6:40', status: 'mora1', bal: 165000, est: 1, prev: 'Mañana sin falta.', unread: false }
  ];

  const THREAD = [
    { day: tt('es', 'Ayer', 'Yesterday') },
    { side: 'out', text: { es: 'Buenas tardes Yolanda. Le recordamos el saldo en mora de Isabella: $ 1.700.000. Puede pagar aquí 👇', en: "Good afternoon Yolanda. Reminder of Isabella's overdue balance: $ 1,700,000. You can pay here 👇" }, time: '4:32 p.m.', read: true },
    { side: 'pay' },
    { day: tt('es', 'Hoy', 'Today') },
    { side: 'in', text: { es: 'Buenos días, ¿ese valor por qué es tan alto?', en: 'Good morning, why is that amount so high?' }, time: '8:06 a.m.' },
    { side: 'out', text: { es: 'Buenos días Yolanda. Corresponde a las pensiones vencidas hasta MAY. ¿Desea el detalle mes a mes?', en: 'Good morning Yolanda. It covers tuition due through MAY. Would you like the month-by-month detail?' }, time: '8:11 a.m.', read: true },
    { side: 'in', text: { es: 'Sí por favor. ¿Puedo abonar una parte hoy?', en: 'Yes please. Can I pay part of it today?' }, time: '8:13 a.m.' },
    { side: 'out', text: { es: 'Claro, se puede abonar. Use el botón Pagar ahora o transfiera y envíenos el comprobante.', en: 'Of course, partial payments are fine. Use the Pay-now button or transfer and send us the voucher.' }, time: '8:15 a.m.', read: false }
  ];

  function ConvoList({ lang, dense }) {
    return (
      <div className={'mc-list' + (dense ? '' : ' wide')}>
        <div className="mc-listhead">
          <h2>{tt(lang, 'Conversaciones', 'Conversations')}</h2>
          <div className="sub">{tt(lang, 'Por atender primero', 'Needs attention first')} · <span style={{ color: 'var(--status-mora2)', fontWeight: 700 }}>{tt(lang, 'mora', 'overdue')}</span></div>
        </div>
        {!dense && (
          <div className="mc-search">
            <div className="field" style={{ width: '100%' }}><span className="ic"><Ic name="search" /></span><input className="inp with-ic" style={{ width: '100%' }} placeholder={tt(lang, 'Buscar acudiente', 'Search guardian')} /></div>
          </div>
        )}
        <div className="mc-filters">
          <button className="qv active" style={{ height: 30, fontSize: 12 }}>{tt(lang, 'Todas', 'All')}</button>
          <button className="qv" style={{ height: 30, fontSize: 12 }}>{tt(lang, 'Sin leer', 'Unread')}</button>
          <button className="qv" style={{ height: 30, fontSize: 12 }}>{tt(lang, 'Mora', 'Overdue')}</button>
        </div>
        <div className="mc-convos">
          {CONVOS.map((c, i) => (
            <div key={i} className={'mc-convo' + (i === 0 ? ' active' : '')} style={dense ? { padding: '9px 16px' } : null}>
              <div className="mc-av" style={{ background: c.bg, width: dense ? 32 : 38, height: dense ? 32 : 38, fontSize: dense ? 11 : 13 }}>{c.ini}</div>
              <div className="mc-cmain">
                <div className="mc-crow1"><span className="mc-cname">{c.nm}</span><span className="mc-ctime">{c.time}</span></div>
                <div className="mc-cprev">{c.prev}</div>
                <div className="mc-cmeta">
                  <Pill status={c.status} lang={lang} sm />
                  {c.bal > 0 && <span className="money" style={{ fontSize: 11, fontWeight: 700, color: 'var(--status-mora2)' }}>$ {H.money(c.bal)}</span>}
                  {dense && <span style={{ fontSize: 10.5, color: 'var(--text-muted)' }}>{c.est} {tt(lang, 'est.', 'std.')}</span>}
                  {c.unread && <span className="mc-unread" style={{ marginLeft: 'auto' }}></span>}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  function Thread({ lang, dense }) {
    return (
      <div className="mc-thread">
        <div className="mc-threadhead">
          <div className="mc-av" style={{ background: '#2C8C99' }}>YM</div>
          <div style={{ flex: 1 }}>
            <h2>Yolanda Mendoza L.</h2>
            <div className="sub">SIERRA RAMOS, Isabella · 8° +2 · <span className="chip wa" style={{ verticalAlign: 'middle' }}><Ic name="whatsapp" size={11} />WhatsApp</span></div>
          </div>
          <Pill status="mora2" lang={lang} />
        </div>
        <div className="mc-msgs">
          {THREAD.map((m, i) => {
            if (m.day) return <div key={i} className="mc-daypill">{m.day}</div>;
            if (m.side === 'pay') return (
              <div key={i} className="bubble pay">
                <div className="pl"><Ic name="link" size={14} />{tt(lang, 'Pagar ahora', 'Pay now')}</div>
                <div className="lk">pagar.ai4colegios.co/RX-0238</div>
              </div>
            );
            return (
              <div key={i} className={'bubble ' + m.side}>
                {tt(lang, m.text.es, m.text.en)}
                <span className="bt">{m.time}{m.side === 'out' && (m.read ? ' ✓✓' : ' ✓')}</span>
              </div>
            );
          })}
        </div>
        <div className="mc-composer">
          <div className="mc-quick">
            <button className="mc-qr">{tt(lang, 'Enviar saldo', 'Send balance')}</button>
            <button className="mc-qr">{tt(lang, 'Confirmar pago', 'Confirm payment')}</button>
            <button className="mc-qr">{tt(lang, 'Pedir comprobante', 'Ask for voucher')}</button>
            {dense && <button className="mc-qr">{tt(lang, 'Enlace de pago', 'Pay link')}</button>}
          </div>
          <select className="inp" style={{ width: '100%', marginBottom: 9 }}><option>{tt(lang, 'Recordatorio de mora · Utilidad', 'Overdue reminder · Utility')}</option></select>
          <textarea className="mc-ta" defaultValue={tt(lang, 'Recordatorio de mora', 'Overdue reminder')}></textarea>
          <div className="mc-warn"><Ic name="alert" size={13} style={{ verticalAlign: '-2px', marginRight: 5 }} />{tt(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 className="mc-send off">{tt(lang, 'Enviar (simulado)', 'Send (simulated)')}</button>
        </div>
      </div>
    );
  }

  function FamilyRail({ lang }) {
    const students = [
      { nm: 'SIERRA RAMOS, Isabella', gr: '8°', ini: 'SI', bg: '#2C8C99' },
      { nm: 'SIERRA ROMERO, Manuela', gr: '8°', ini: 'SM', bg: '#C9A24B' },
      { nm: 'PÁJARO GARCÍA, María José', gr: '8°', ini: 'PM', bg: '#6D4FCB' }
    ];
    return (
      <div className="mc-fam">
        <div className="mc-famhead">
          <h2>{tt(lang, 'Ficha familiar', 'Family profile')}</h2>
          <div className="sub">Yolanda Mendoza L.</div>
        </div>
        <div className="card mc-balcard">
          <div className="card-pad" style={{ padding: '14px 16px' }}>
            <div className="kv"><span className="k">{tt(lang, 'Saldo en mora', 'Overdue')}</span><span className="v money" style={{ color: 'var(--status-mora2)', fontSize: 16 }}>$ 1.700.000</span></div>
            <div className="kv"><span className="k">{tt(lang, 'Estudiantes', 'Students')}</span><span className="v">3</span></div>
            <div className="kv"><span className="k">{tt(lang, 'Opt-in utilidad', 'Utility opt-in')}</span><span className="v" style={{ color: 'var(--status-mora2)' }}>{tt(lang, 'No', 'No')}</span></div>
          </div>
        </div>
        <div className="card" style={{ marginTop: 14 }}>
          <div className="card-pad" style={{ padding: '14px 16px' }}>
            <div className="card-title" style={{ marginBottom: 4 }}>{tt(lang, 'Estudiantes', 'Students')}</div>
            {students.map((s, i) => (
              <div key={i} className="mc-stu">
                <div className="mc-av" style={{ background: s.bg, width: 32, height: 32, fontSize: 11 }}>{s.ini}</div>
                <div style={{ flex: 1, minWidth: 0 }}><div className="r-name" style={{ fontSize: 12.5 }}>{s.nm}</div></div>
                <span style={{ fontSize: 12, color: 'var(--text-muted)', fontWeight: 600 }}>{s.gr}</span>
              </div>
            ))}
          </div>
        </div>
        <button className="btn btn-secondary btn-block" style={{ marginTop: 14 }}><Ic name="user" size={14} />{tt(lang, 'Ver estado de cuenta', 'View statement')}</button>
        <div className="mc-disc">{tt(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).')}</div>
      </div>
    );
  }

  function MensajesA({ lang = 'es' }) {
    return (
      <div className="app v3">
        <AppHeader lang={lang} />
        <div className="app-body">
          <LeftNav active="mensajes" lang={lang} showToday={false} />
          <div className="mc">
            <ConvoList lang={lang} dense={false} />
            <Thread lang={lang} dense={false} />
            <FamilyRail lang={lang} />
          </div>
        </div>
      </div>
    );
  }

  function MensajesB({ lang = 'es' }) {
    return (
      <div className="app v3">
        <AppHeader lang={lang} />
        <div className="app-body">
          <LeftNav active="mensajes" lang={lang} />
          <div className="mc">
            <ConvoList lang={lang} dense={true} />
            <Thread lang={lang} dense={true} />
            <FamilyRail lang={lang} />
          </div>
        </div>
      </div>
    );
  }

  Object.assign(window, { MensajesA, MensajesB });
})();