/* ============================================================
   LIBRO DE PAGO — Direction A (calm roster) + Direction B (dense ledger)
   ============================================================ */
(function () {
  const D = window.RZDATA, H = window.RZH;
  const tt = (lang, es, en) => (lang === 'en' ? en : es);

  function progressLabel(s, lang) {
    const months = D.MONTHS;
    const moraIdx = s.cells.map((c, i) => c === 'mora' ? i : -1).filter(i => i >= 0);
    if (s.status === 'pagado') return tt(lang, 'Año pagado · 10/10', 'Year paid · 10/10');
    if (s.status === 'sinmat') return tt(lang, 'Matrícula pendiente', 'Enrollment pending');
    if (moraIdx.length === 0) {
      const paid = s.cells.filter(c => c === 'paid').length;
      return tt(lang, 'Pagó hasta ' + months[paid - 1] + ' · ' + paid + '/10', 'Paid through ' + months[paid - 1] + ' · ' + paid + '/10');
    }
    const lbl = moraIdx.length === 1 ? months[moraIdx[0]] : months[moraIdx[0]] + '–' + months[moraIdx[moraIdx.length - 1]];
    return tt(lang, 'Debe ' + lbl + ' · ' + moraIdx.length + ' mes' + (moraIdx.length > 1 ? 'es' : ''), 'Owes ' + lbl + ' · ' + moraIdx.length + ' mo');
  }

  function Kpi({ lbl, val, cur, foot, tone, ico, spark }) {
    return (
      <div className={'kpi' + (tone ? ' ' + tone : '')}>
        <div className="kl">
          {ico && <span className="kico" style={{ background: 'var(--warm-2)', color: 'var(--text-soft)' }}><Ic name={ico} size={15} /></span>}
          {lbl}
        </div>
        <div className="kv">{val}{cur && <span className="cur">{cur}</span>}</div>
        {foot && <div className="kfoot">{foot}</div>}
        {spark && <div className="kpi-spark"><i style={{ width: spark + '%', background: tone === 'warn' ? 'var(--status-mora2)' : 'var(--accent)' }}></i></div>}
      </div>
    );
  }

  function Toolbar({ lang, dense }) {
    return (
      <div className="toolbar">
        <div className="field">
          <span className="ic"><Ic name="search" /></span>
          <input className="inp with-ic" style={{ minWidth: 230 }} placeholder={tt(lang, 'Buscar estudiante o acudiente', 'Find student or guardian')} />
        </div>
        <select className="inp"><option>{tt(lang, 'Todos los grados', 'All grades')}</option></select>
        <select className="inp"><option>{tt(lang, 'Todos los estados', 'All status')}</option></select>
        <select className="inp"><option>{tt(lang, 'Todos los meses', 'All months')}</option></select>
        <div className="spacer"></div>
        <span className="qvl">{tt(lang, 'Vistas rápidas', 'Quick views')}</span>
        <button className="qv active">{tt(lang, 'Todos', 'All')}<span className="ct">342</span></button>
        <button className="qv">{tt(lang, 'Mora 1+', 'Late 1+')}<span className="ct">292</span></button>
        <button className="qv">{tt(lang, 'Mora 2+', 'Late 2+')}<span className="ct">191</span></button>
        <button className="qv"><Ic name="users" size={14} />{tt(lang, 'Familias', 'Households')}<span className="ct">254</span></button>
        {dense && <button className="btn btn-ghost"><Ic name="columns" size={14} />{tt(lang, 'Columnas 9/9', 'Columns 9/9')}<Ic name="chevDown" size={13} /></button>}
      </div>
    );
  }

  function PageHead({ lang }) {
    return (
      <div className="pagehead">
        <div>
          <div className="ph-eyebrow">{tt(lang, 'Relación de pago · 2026', 'Payment record · 2026')}</div>
          <h1>{tt(lang, 'Libro de Pago', 'Payment Ledger')}</h1>
          <div className="ph-sub">{tt(lang, 'Matrículas y pensiones · año lectivo 2026 · v3', 'Tuition & fees · school year 2026 · v3')}</div>
        </div>
        <div className="ph-actions">
          <button className="btn btn-secondary"><Ic name="download" size={15} />{tt(lang, 'Importar / Exportar', 'Import / Export')}</button>
          <button className="btn btn-primary"><Ic name="plus" size={16} />{tt(lang, 'Registrar pago', 'Register payment')}</button>
        </div>
      </div>
    );
  }

  /* ---------------- DIRECTION A — calm roster ---------------- */
  function LibroA({ lang = 'es' }) {
    const rows = D.students.slice(0, 9);
    return (
      <div className="app v3">
        <AppHeader lang={lang} />
        <div className="app-body">
          <LeftNav active="ledger" lang={lang} />
          <div className="main">
            <PageHead lang={lang} />
            <div className="main-scroll">
              <div className="kpis cols5">
                <Kpi lbl={tt(lang, 'Recaudo a la fecha', 'Collected to date')} val="$ 231.855.000" cur="COP" ico="trend" spark={70} foot={tt(lang, '+ $ 12,4M esta semana', '+ $ 12.4M this week')} />
                <Kpi lbl={tt(lang, 'Mora pendiente', 'Outstanding')} val="$ 101.745.000" cur="COP" tone="warn" ico="alert" spark={44} foot={tt(lang, '292 estudiantes', '292 students')} />
                <Kpi lbl={tt(lang, 'Al día', 'Current')} val="50" cur={tt(lang, 'de 342', 'of 342')} tone="good" ico="check" />
                <Kpi lbl={tt(lang, 'En mora 1+ mes', 'Late 1+ month')} val="292" tone="warn" ico="clock" />
                <Kpi lbl={tt(lang, 'Total estudiantes', 'Total students')} val="342" ico="users" />
              </div>
              <Toolbar lang={lang} />
              <div className="roster">
                <div className="roster-head">
                  <span></span><span></span><span>{tt(lang, 'Estudiante', 'Student')}</span><span>{tt(lang, 'Estado', 'Status')}</span>
                  <span>{tt(lang, 'Progreso del año', 'Year progress')}</span><span style={{ textAlign: 'right' }}>{tt(lang, 'Saldo en mora', 'Overdue')}</span><span></span>
                </div>
                {rows.map((s, ri) => {
                  const moraIdx = s.cells.map((c, i) => c === 'mora' ? i : -1).filter(i => i >= 0);
                  return (
                    <div key={s.no} className={'roster-row' + (ri === 0 ? ' sel' : '')}>
                      <span className={'checkbox' + (ri === 0 ? ' on' : '')}>{ri === 0 && <Ic name="check" size={11} sw={3} />}</span>
                      <div className="r-av" style={{ background: s.avatarBg }}>{s.initials}</div>
                      <div>
                        <div className="r-name">{s.nombres}</div>
                        <div className="r-meta">{s.grado} · {s.acu}</div>
                      </div>
                      <div><Pill status={s.status} lang={lang} /></div>
                      <div className="r-prog">
                        <div className="r-bars">
                          {s.cells.map((c, i) => <i key={i} className={(c === 'paid' ? 'paid' : c === 'mora' ? 'mora' : '') + (i === D.CUR ? ' cur' : '')}></i>)}
                        </div>
                        <div className="r-proglabel">{progressLabel(s, lang)}</div>
                      </div>
                      <div className={'r-saldo ' + (s.saldoMora > 0 ? 'mora' : 'zero')}>{s.saldoMora > 0 ? '$ ' + H.money(s.saldoMora) : '$ 0'}</div>
                      <div className="r-act">
                        {s.saldoMora > 0
                          ? <button className="btn btn-primary btn-sm">{tt(lang, 'Registrar', 'Register')}</button>
                          : <button className="btn btn-secondary btn-sm">{tt(lang, 'Recibo', 'Receipt')}</button>}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
            <div className="ctxbar">
              <span>{tt(lang, 'Mostrando', 'Showing')} <b>1–9</b> {tt(lang, 'de', 'of')} <b>342</b> {tt(lang, 'estudiantes', 'students')}</span>
              <span>{tt(lang, 'Mora en vista', 'Overdue in view')}: <b>$ 101.745.000</b></span>
              <div className="pager"><button disabled>‹ {tt(lang, 'Anterior', 'Prev')}</button><span style={{ fontSize: 12 }}>{tt(lang, 'Página 1 de 38', 'Page 1 of 38')}</span><button>{tt(lang, 'Siguiente', 'Next')} ›</button></div>
            </div>
          </div>
          <WaRail lang={lang} />
        </div>
        <button className="fab" style={{ right: 356 }}><span className="pl"><Ic name="plus" size={16} sw={2.5} /></span>{tt(lang, 'Registrar Pago', 'Register Payment')}</button>
      </div>
    );
  }

  /* ---------------- DIRECTION B — dense banded ledger ---------------- */
  function LibroB({ lang = 'es' }) {
    const rows = D.students;
    const M = D.MONTHS;
    return (
      <div className="app v3">
        <AppHeader lang={lang} />
        <div className="app-body">
          <LeftNav active="ledger" lang={lang} />
          <div className="main">
            <PageHead lang={lang} />
            <div className="kpibar">
              <div className="kc"><div className="kl">{tt(lang, 'Recaudo a la fecha', 'Collected to date')}</div><div className="kv">$ 231.855.000<span className="cur">COP</span></div></div>
              <div className="kc warn"><div className="kl">{tt(lang, 'Mora pendiente', 'Outstanding')}</div><div className="kv">$ 101.745.000<span className="cur">COP</span></div></div>
              <div className="kc good"><div className="kl">{tt(lang, 'Al día', 'Current')}</div><div className="kv">50 <span className="cur">{tt(lang, 'de 342', 'of 342')}</span></div></div>
              <div className="kc warn"><div className="kl">{tt(lang, 'En mora 1+ mes', 'Late 1+ month')}</div><div className="kv">292</div></div>
              <div className="kc"><div className="kl">{tt(lang, 'Total estudiantes', 'Total students')}</div><div className="kv">342</div></div>
            </div>
            <Toolbar lang={lang} dense />
            <div className="legend">
              <span style={{ fontWeight: 700, color: 'var(--text-soft)' }}>{tt(lang, 'CONVENCIONES', 'LEGEND')}:</span>
              <span className="li"><span className="sw paid"></span>{tt(lang, 'Mes pagado', 'Paid month')}</span>
              <span className="li"><span className="sw mora"></span>{tt(lang, 'Mes pendiente', 'Outstanding month')}</span>
              <span className="li"><span className="sw cur"></span>{tt(lang, 'Mes actual', 'Current month')}</span>
              <span className="li"><span className="sw future"></span>{tt(lang, 'Meses futuros', 'Future months')}</span>
            </div>
            <div className="sheet">
              <table className="libro dense">
                <thead>
                  <tr className="band">
                    <th className="s0"></th><th className="s1"></th><th className="s2" style={{ textAlign: 'left' }}>{tt(lang, 'Identidad', 'Identity')}</th><th className="s3">{tt(lang, 'Estado', 'Status')}</th>
                    <th className="b-pay" colSpan={4}>{tt(lang, 'Valor a pagar', 'Amount due')}</th>
                    <th className="b-paid" colSpan={M.length}>{tt(lang, 'Pagos realizados', 'Payments made')}</th>
                    <th className="b-saldo" colSpan={2}>{tt(lang, 'Saldo', 'Balance')}</th>
                  </tr>
                  <tr className="cols">
                    <th className="s0"></th>
                    <th className="s1">{tt(lang, 'No', 'No')}</th>
                    <th className="s2" style={{ textAlign: 'left' }}>{tt(lang, 'Nombres', 'Names')}</th>
                    <th className="s3">{tt(lang, 'Grado', 'Grade')}</th>
                    <th className="m">{tt(lang, 'Matríc.', 'Enr.')}</th>
                    <th className="m">{tt(lang, 'Costos', 'Fees')}</th>
                    <th className="m">{tt(lang, 'Pensión', 'Tuition')}</th>
                    <th className="m">{tt(lang, 'Total año', 'Year total')}</th>
                    {M.map((m, i) => <th key={m} className={'m mc' + (i === D.CUR ? ' curm' : '')}>{m}</th>)}
                    <th className="m">{tt(lang, 'Pagado', 'Paid')}</th>
                    <th className="m">{tt(lang, 'Saldo', 'Balance')}</th>
                  </tr>
                </thead>
                <tbody>
                  {rows.map((s, ri) => (
                    <tr key={s.no} className={ri === 0 ? 'sel' : ''}>
                      <td className="s0"><span className={'checkbox' + (ri === 0 ? ' on' : '')} style={{ width: 15, height: 15 }}>{ri === 0 && <Ic name="check" size={10} sw={3} />}</span></td>
                      <td className="s1 col-no">{s.no}</td>
                      <td className="s2"><button className="lname">{s.nombres}</button>{s.famIdx != null && <span className="fcount">{D.fams[s.famIdx] ? D.fams[s.famIdx].members.length : 2}</span>}</td>
                      <td className="s3 col-gr">{s.grado}</td>
                      <td className="m">{H.money(s.matricula)}{s.matriculaPaid && ' ✓'}</td>
                      <td className="m">{H.money(s.costos)}{s.costosPaid && ' ✓'}</td>
                      <td className="m">{H.money(s.pension)}</td>
                      <td className="m" style={{ fontWeight: 700 }}>{H.money(s.totalAno)}</td>
                      {s.cells.map((c, i) => (
                        <td key={i} className={'mcell mc ' + c + (i === D.CUR ? ' curcol' : '')}>{c === 'future' ? '·' : H.money(s.pension)}</td>
                      ))}
                      <td className="m" style={{ color: 'var(--status-good)', fontWeight: 700 }}>{H.money(s.totalPagado)}</td>
                      <td className="m" style={{ color: s.saldoMora > 0 ? 'var(--status-mora2)' : 'var(--text-muted)', fontWeight: 700 }}>{H.money(s.saldoMora)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <div className="ctxbar">
              <span>{tt(lang, 'Mostrando', 'Showing')} <b>1–{rows.length}</b> {tt(lang, 'de', 'of')} <b>342</b> {tt(lang, 'estudiantes', 'students')}</span>
              <span>{tt(lang, 'Mora en vista', 'Overdue in view')}: <b>$ 101.745.000</b></span>
              <span>{tt(lang, 'Al día', 'Current')}: <b>50</b></span>
              <div className="pager"><button disabled>‹ {tt(lang, 'Anterior', 'Prev')}</button><span style={{ fontSize: 12 }}>{tt(lang, 'Página 1 de 18', 'Page 1 of 18')}</span><button>{tt(lang, 'Siguiente', 'Next')} ›</button></div>
            </div>
          </div>
          <WaRail lang={lang} />
        </div>
        <button className="fab" style={{ right: 356 }}><span className="pl"><Ic name="plus" size={16} sw={2.5} /></span>{tt(lang, 'Registrar Pago', 'Register Payment')}</button>
      </div>
    );
  }

  Object.assign(window, { LibroA, LibroB });
})();