/* pages/Family.jsx — estado de cuenta familiar. AI4N-authored on the design system. */
(function () {
  const { t, money } = window.RZH;
  const D = window.RZDATA;
  const PILL = { good:['good','AL DÍA','CURRENT'], mora1:['mora1','MORA 1 MES','1 MO LATE'],
    mora2:['mora2','MORA 2+','2+ MO LATE'], pagado:['pagado','PAGADO','PAID'], sinmat:['mora2','SIN MATR.','NO ENR.'] };
  function Pill({ status, lang }) { const p = PILL[status] || PILL.good; return <span className={'pill ' + p[0]}>{t(lang, p[1], p[2])}</span>; }

  function Family({ lang, famIdx, onBack, onOpenStudent, onWhatsApp }) {
    if (famIdx == null) return null;
    const members = D.students.filter((x) => x.famIdx === famIdx);
    if (!members.length) return null;
    const acu = members[0].acu;
    const sum = (k) => members.reduce((a, s) => a + (s[k] || 0), 0);
    const saldo = sum('saldoMora'), totAno = sum('totalAno'), totPag = sum('totalPagado');
    return (
      <div className="pg" data-screen-label="Family">
        <button type="button" className="pg-back" onClick={onBack}>← {t(lang,'Volver al Libro de Pago','Back to Payment Ledger')}</button>
        <div className="card">
          <h3 style={{ marginBottom: 4 }}>{t(lang,'Estado de cuenta familiar','Family statement')}</h3>
          <div className="sub" style={{ color:'var(--text-muted)', fontSize:'13px', marginBottom:12 }}>{t(lang,'Acudiente','Guardian')}: <b>{acu}</b> · {members.length} {t(lang,'estudiantes','students')}</div>
          <div className="fam-total">
            <span className="k" style={{ fontSize:'11px', textTransform:'uppercase', letterSpacing:'.06em', color:'var(--text-muted)', fontWeight:700 }}>{t(lang,'Saldo combinado en mora','Combined overdue balance')}</span>
            <span className={'amt' + (saldo > 0 ? '' : ' ok')}>$ {money(saldo)}</span>
          </div>
          <table className="fam-tbl">
            <thead><tr>
              <th>{t(lang,'Estudiante','Student')}</th><th>{t(lang,'Grado','Grade')}</th><th>{t(lang,'Estado','Status')}</th>
              <th className="money">{t(lang,'Total año','Year total')}</th><th className="money">{t(lang,'Pagado','Paid')}</th><th className="money">{t(lang,'Saldo','Balance')}</th>
            </tr></thead>
            <tbody>
              {members.map((s) => (
                <tr key={s.no}>
                  <td><button type="button" className="name-link" onClick={() => onOpenStudent(s)}>{s.nombres}</button></td>
                  <td>{s.grado}</td><td><Pill status={s.status} lang={lang} /></td>
                  <td className="money">{money(s.totalAno)}</td><td className="money">{money(s.totalPagado)}</td>
                  <td className="money" style={{ color: s.saldoMora > 0 ? 'var(--status-mora2)' : 'var(--status-good)' }}>{money(s.saldoMora)}</td>
                </tr>
              ))}
              <tr className="tot"><td colSpan={3}>{t(lang,'Total familia','Family total')}</td>
                <td className="money">{money(totAno)}</td><td className="money">{money(totPag)}</td><td className="money">{money(saldo)}</td></tr>
            </tbody>
          </table>
          <div className="pg-actions" style={{ marginTop: 14 }}>
            <button type="button" className="btn-secondary" onClick={() => onWhatsApp(members[0])}><window.Icons.WhatsApp /> {t(lang,'Enviar al acudiente','Message the guardian')}</button>
          </div>
        </div>
      </div>
    );
  }
  window.Family = Family;
})();