/* pages/Ficha.jsx — student detail (perfil del estudiante). AI4N-authored on the design system.
   Reads the RZDATA contract; uses adapter ficha extras (ced/birth/initials/avatarBg). */
(function () {
  const { t, money } = window.RZH;
  const D = window.RZDATA;

  const PILL = { good:['good','AL DÍA','CURRENT'], mora1:['mora1','MORA 1 MES','1 MONTH LATE'],
    mora2:['mora2','MORA 2+ MESES','2+ MONTHS LATE'], pagado:['pagado','PAGADO','PAID'],
    sinmat:['mora2','SIN MATRÍCULA','NO ENROLLMENT'] };
  function Pill({ status, lang }) { const p = PILL[status] || PILL.good; return <span className={'pill ' + p[0]}>{t(lang, p[1], p[2])}</span>; }

  function Ficha({ lang, student, onBack, onOpenStudent, onFamily, onWhatsApp, onRegister }) {
    if (!student) return null;
    const s = student;
    const sibs = D.students.filter((x) => x.famIdx === s.famIdx);
    const C = (b) => (b ? <span className="cbadge ok">{t(lang,'Sí','Yes')}</span> : <span className="cbadge no">{t(lang,'No','No')}</span>);
    return (
      <div className="pg" data-screen-label="Ficha">
        <button type="button" className="pg-back" onClick={onBack}>← {t(lang,'Volver al Libro de Pago','Back to Payment Ledger')}</button>

        <div className="card">
          <div className="ficha-hd">
            <span className="ficha-av" style={{ background: s.avatarBg }}>{s.initials || s.nombres.slice(0,1)}</span>
            <div>
              <h2 className="nm">{s.nombres}</h2>
              <div className="sub">{s.grado} · {t(lang,'Acudiente','Guardian')}: {s.acu} &nbsp; <Pill status={s.status} lang={lang} /></div>
            </div>
          </div>
        </div>

        <div className="pg-grid2">
          <div>
            <div className="card">
              <h3>{t(lang,'Datos del estudiante','Student details')}</h3>
              <div className="kv"><span className="k">{t(lang,'Cédula / TI','ID')}</span><span className="v mono">{s.ced || '—'}</span></div>
              <div className="kv"><span className="k">{t(lang,'Nacimiento','Birth')}</span><span className="v mono">{s.birth || '—'}</span></div>
              <div className="kv"><span className="k">{t(lang,'Grado','Grade')}</span><span className="v">{s.grado}</span></div>
              <div className="kv"><span className="k">{t(lang,'Pensión / mes','Tuition / mo')}</span><span className="v mono">$ {money(s.pension)}</span></div>
              <div className="kv"><span className="k">{t(lang,'Matrícula','Enrollment')}</span><span className="v mono">$ {money(s.matricula)} {s.matriculaPaid ? '✓' : ''}</span></div>
              <div className="kv"><span className="k">{t(lang,'Costos educativos','Educational fees')}</span><span className="v mono">$ {money(s.costos)} {s.costosPaid ? '✓' : ''}</span></div>
              <div className="kv"><span className="k">{t(lang,'Total año','Year total')}</span><span className="v mono">$ {money(s.totalAno)}</span></div>
            </div>

            <div className="card">
              <h3>{t(lang,'Historial de pagos · 2026','Payment history · 2026')}</h3>
              <div className="months">
                {s.cells.map((c, i) => (
                  <div key={i} className={'mo ' + c + (i === D.CUR ? ' cur' : '')}>
                    <span className="mo-l">{D.MONTHS[i]}</span>
                    <span className="mo-s">{c === 'paid' ? '✓' : c === 'mora' ? '—' : '·'}</span>
                  </div>
                ))}
              </div>
              <div className="kv" style={{ marginTop: 12 }}><span className="k">{t(lang,'Total pagado','Total paid')}</span><span className="v mono">$ {money(s.totalPagado)}</span></div>
              <div className="kv"><span className="k">{t(lang,'Debió pagar a hoy','Owed to date')}</span><span className="v mono">$ {money(s.debioPagar)}</span></div>
              <div className="kv"><span className="k">{t(lang,'Saldo en mora','Overdue balance')}</span><span className="v mono" style={{ color: s.saldoMora > 0 ? 'var(--status-mora2)' : 'var(--status-good)' }}>$ {money(s.saldoMora)}</span></div>
            </div>
          </div>

          <div>
            <div className="card">
              <h3>{t(lang,'Acciones','Actions')}</h3>
              <div className="pg-actions">
                <button type="button" className="btn-primary" onClick={() => onRegister(s, D.MONTHS[D.CUR])}><window.Icons.Register /> {t(lang,'Registrar pago','Register payment')}</button>
                <button type="button" className="btn-secondary" onClick={() => onWhatsApp(s)}><window.Icons.WhatsApp /> WhatsApp</button>
              </div>
            </div>

            <div className="card">
              <h3>{t(lang,'Grupo familiar','Family group')} <span className="fam-count">⌂{sibs.length}</span></h3>
              {sibs.map((x) => (
                <div key={x.no} className="sib" onClick={() => onOpenStudent(x)}>
                  <span className="sib-av" style={{ background: x.avatarBg }}>{x.initials || x.nombres.slice(0,1)}</span>
                  <span className="sib-nm">{x.nombres}{x.no === s.no ? ' ·' : ''}</span>
                  <span className="sib-gr" style={{ color:'var(--text-muted)', fontSize:'12px' }}>{x.grado}</span>
                  <Pill status={x.status} lang={lang} />
                </div>
              ))}
              <button type="button" className="pg-back" style={{ marginTop: 8 }} onClick={() => onFamily(s.famIdx)}>{t(lang,'Ver estado de cuenta familiar','View family statement')} →</button>
            </div>

            <div className="card">
              <h3>{t(lang,'Consentimiento WhatsApp','WhatsApp consent')}</h3>
              <div className="consent-line"><span>{t(lang,'Utilidad (cobros)','Utility (billing)')}</span>{C(s.consent.utility)}</div>
              <div className="consent-line"><span>{t(lang,'Marketing (eventos)','Marketing (events)')}</span>{C(s.consent.marketing)}</div>
              <div className="consent-line"><span>{t(lang,'Número verificado','Number verified')}</span>{C(s.paired)}</div>
            </div>
          </div>
        </div>
      </div>
    );
  }
  window.Ficha = Ficha;
})();