/* pages/Configuracion.jsx — settings (Costos/calendario · WhatsApp/mensajes · Datos). On the design system. */
(function () {
  const { t, money } = window.RZH;
  const D = window.RZDATA;

  function Configuracion({ lang }) {
    const [tab, setTab] = React.useState('costos');
    const H = D.waHealth || {};
    return (
      <div className="pg" data-screen-label="Configuración">
        <h1 className="page-title" style={{ marginBottom: 4 }}>{t(lang,'Configuración','Settings')}</h1>
        <div className="cfg-tabs">
          <button type="button" className={'cfg-tab' + (tab==='costos'?' active':'')} onClick={() => setTab('costos')}>{t(lang,'Costos y calendario','Fees & calendar')}</button>
          <button type="button" className={'cfg-tab' + (tab==='wa'?' active':'')} onClick={() => setTab('wa')}>{t(lang,'WhatsApp y mensajes','WhatsApp & messages')}</button>
          <button type="button" className={'cfg-tab' + (tab==='datos'?' active':'')} onClick={() => setTab('datos')}>{t(lang,'Datos','Data')}</button>
        </div>

        {tab === 'costos' && (
          <div className="card">
            <h3>{t(lang,'Tarifas por nivel · 2026 (COP)','Fees by level · 2026 (COP)')}</h3>
            <div className="cfg-row"><span className="lbl">{t(lang,'Preescolar — pensión/mes','Preschool — tuition/mo')}</span><input className="cfg-input" defaultValue={money(D.FEES.pre)} /></div>
            <div className="cfg-row"><span className="lbl">{t(lang,'Primaria — pensión/mes','Primary — tuition/mo')}</span><input className="cfg-input" defaultValue={money(D.FEES.pri)} /></div>
            <div className="cfg-row"><span className="lbl">{t(lang,'Bachillerato — pensión/mes','High school — tuition/mo')}</span><input className="cfg-input" defaultValue={money(D.FEES.bach)} /></div>
            <div className="cfg-row"><span className="lbl">{t(lang,'Año lectivo','School year')}<small>{t(lang,'Febrero–Noviembre · 10 cuotas','February–November · 10 instalments')}</small></span><input className="cfg-input" defaultValue="2026" /></div>
            <div className="cfg-row"><span className="lbl">{t(lang,'Mes en curso','Current month')}</span><input className="cfg-input" defaultValue={D.MONTHS[D.CUR]} /></div>
            <p className="rz-modal-note" style={{ textAlign:'left', marginTop:12 }}>{t(lang,'Vista previa — la fuente de verdad de los cobros es el libro contable ClausERP.','Preview — the source of truth for billing is the ClausERP ledger.')}</p>
          </div>
        )}

        {tab === 'wa' && (
          <React.Fragment>
            <div className="card">
              <h3>{t(lang,'Salud de la cuenta WhatsApp','WhatsApp account health')}</h3>
              <div className="cfg-row"><span className="lbl">{t(lang,'Calidad','Quality')}</span><span className="cbadge ok">{H.quality === 'high' ? t(lang,'Alta','High') : (H.quality||'—')}</span></div>
              <div className="cfg-row"><span className="lbl">{t(lang,'Límite diario (tier)','Daily cap (tier)')}</span><span className="v mono">{H.dailyCap}</span></div>
              <div className="cfg-row"><span className="lbl">{t(lang,'Bloqueos (7 días)','Blocks (7 days)')}</span><span className="v mono">{H.blocks7d}</span></div>
            </div>
            <div className="card">
              <h3>{t(lang,'Plantillas','Templates')}</h3>
              {D.templates.utility.map((x) => (<div key={x.id} className="cfg-row"><span className="lbl">{t(lang,x.es,x.en)}</span><span className="cbadge ok">{t(lang,'Utilidad','Utility')}</span></div>))}
              {D.templates.marketing.map((x) => (<div key={x.id} className="cfg-row"><span className="lbl">{t(lang,x.es,x.en)}</span><span className="cbadge no" style={{ color:'var(--accent-dark)' }}>{t(lang,'Marketing','Marketing')}</span></div>))}
              <p className="rz-modal-note" style={{ textAlign:'left', marginTop:12 }}>{t(lang,'Las plantillas de utilidad son para cobros; las de marketing exigen consentimiento de marketing. Toda baja se respeta (responda BAJA).','Utility templates are for billing; marketing templates require marketing consent. Opt-outs are honored (reply BAJA).')}</p>
            </div>
          </React.Fragment>
        )}

        {tab === 'datos' && (
          <div className="card">
            <h3>{t(lang,'Datos del libro','Ledger data')}</h3>
            <div className="cfg-row"><span className="lbl">{t(lang,'Estudiantes','Students')}</span><span className="v mono">{D.totals.total}</span></div>
            <div className="cfg-row"><span className="lbl">{t(lang,'Familias','Families')}</span><span className="v mono">{D.fams.length}</span></div>
            <div className="cfg-row"><span className="lbl">{t(lang,'Recaudo a la fecha','Collected to date')}</span><span className="v mono">$ {money(D.totals.recaudoYTD)}</span></div>
            <div className="cfg-row"><span className="lbl">{t(lang,'Mora pendiente','Outstanding')}</span><span className="v mono">$ {money(D.totals.moraPendiente)}</span></div>
            <div className="pg-actions" style={{ marginTop: 14 }}>
              <button type="button" className="btn-secondary"><window.Icons.Import /> {t(lang,'Importar (CSV)','Import (CSV)')}</button>
              <button type="button" className="btn-primary"><window.Icons.Export /> {t(lang,'Exportar (CSV)','Export (CSV)')}</button>
            </div>
            <p className="rz-modal-note" style={{ textAlign:'left', marginTop:12 }}>{t(lang,'Datos 100% ficticios (sin PII real). Integra SINAI / ClausERP; no los reemplaza en esta vista previa.','100% fabricated data (no real PII). Integrates SINAI / ClausERP; does not replace them in this preview.')}</p>
          </div>
        )}
      </div>
    );
  }
  window.Configuracion = Configuracion;
})();