/* ============================================================
   AI4Colegios UI Kit — RegisterModal.jsx  (2.0 — rebuilt recording flow)
   3 steps: 1) Método  →  2) Registrar (the recording page that was lost in the
   2.0 transfer: reference/voucher for transfers, date, confirm) → 3) Recibo.
   Also serves the PAID-invoice info view (ctx.mode==='paid' → read-only receipt).
   onSubmit(method, amount, ref) commits (marks the invoice paid) — the modal then
   shows the receipt; "Listo" closes. + lightweight Toast.
   ============================================================ */
(function () {
  const { Cash, CardIcon, Transfer, Check } = window.Icons;
  const { t, money } = window.RZH;
  const D = window.RZDATA;

  function Toast({ toast }) { if (!toast) return null; return <div className={'rz-toast '+(toast.tone||'info')}><Check /> {toast.msg}</div>; }

  function RegisterModal({ lang, ctx, onClose, onSubmit }) {
    if (!ctx) return null;
    const { student, month } = ctx;
    const isPaidView = ctx.mode === 'paid';
    const amount = student.pension;
    const [step, setStep] = React.useState(isPaidView ? 'receipt' : 'method');
    const [method, setMethod] = React.useState(isPaidView ? 'cash' : null);
    const [ref, setRef] = React.useState('');
    const [date, setDate] = React.useState(new Date().toISOString().slice(0,10));
    const recibo = 'RC-2026-' + ('00000' + (40000 + student.no*13 + Math.max(0, D.MONTHS.indexOf(month)))).slice(-5);
    const fac = 'FAC-2026-' + String(student.no).padStart(4,'0');
    const mLabel = (m) => ({ cash:t(lang,'Efectivo','Cash'), transfer:t(lang,'Transferencia','Transfer'), card:t(lang,'Tarjeta','Card') }[m] || m);
    const pickMethod = (m) => { setMethod(m); setStep('record'); };
    const doRegister = () => { onSubmit(method, amount, ref); setStep('receipt'); };

    return (
      <div className="rz-modal-backdrop" onClick={onClose}>
        <div className="rz-modal" role="dialog" aria-modal="true" onClick={(e)=>e.stopPropagation()}>
          <div className="rz-modal-head">
            <div>
              <div className="rz-modal-eyebrow">{isPaidView ? t(lang,'Recibo de pago','Payment receipt') : t(lang,'Registrar pago','Register payment')}</div>
              <h2 className="rz-modal-title">{student.nombres}</h2>
              <div className="rz-modal-sub">{student.grado} · {student.acu}</div>
            </div>
            <button type="button" className="rz-modal-x" onClick={onClose} aria-label={t(lang,'Cerrar','Close')}>×</button>
          </div>

          {!isPaidView && (
            <div className="rz-steps">
              <span className={'rz-step'+(step==='method'?' on':'')}><b>1</b> {t(lang,'Método','Method')}</span><span className="rz-step-sep">›</span>
              <span className={'rz-step'+(step==='record'?' on':'')}><b>2</b> {t(lang,'Registrar','Record')}</span><span className="rz-step-sep">›</span>
              <span className={'rz-step'+(step==='receipt'?' on':'')}><b>3</b> {t(lang,'Recibo','Receipt')}</span>
            </div>
          )}

          <div className="rz-modal-body">
            <div className="rz-invoice">
              <div className="rz-inv-row"><span className="label">{t(lang,'Concepto','Concept')}</span><span className="rz-chip-sel">{t(lang,'Pensión','Tuition')} · {month}</span></div>
              <div className="rz-inv-row"><span className="label">{t(lang,'Valor','Amount')}</span><span className="rz-amount money">$ {money(amount)} <small>COP</small></span></div>
              <div className="rz-inv-row"><span className="label">{t(lang,'Factura ClausERP','ClausERP invoice')}</span><span className="rz-trace mono">{fac}</span></div>
            </div>

            {step==='method' && (
              <React.Fragment>
                <div className="rz-method-h">{t(lang,'Medio de pago','Payment method')}</div>
                <div className="rz-methods">
                  <button type="button" className="method-btn cash" onClick={()=>pickMethod('cash')}><span className="ico" aria-hidden="true"><Cash/></span><span className="method-lbl">{t(lang,'Efectivo','Cash')}</span></button>
                  <button type="button" className="method-btn transfer" onClick={()=>pickMethod('transfer')}><span className="ico" aria-hidden="true"><Transfer/></span><span className="method-lbl">{t(lang,'Transferencia','Transfer')}</span></button>
                  <button type="button" className="method-btn card" disabled><span className="soon-badge">Soon</span><span className="ico" aria-hidden="true"><CardIcon/></span><span className="method-lbl">{t(lang,'Tarjeta','Card')}</span></button>
                </div>
                <p className="rz-modal-note">{t(lang,'Elija el medio de pago para continuar al registro.','Choose the payment method to continue to recording.')}</p>
              </React.Fragment>
            )}

            {step==='record' && (
              <React.Fragment>
                <div className="rz-rec">
                  <div className="rz-inv-row"><span className="label">{t(lang,'Medio','Method')}</span><span className="rz-chip-sel">{mLabel(method)}</span></div>
                  {method==='transfer' && (
                    <label className="rz-field"><span className="label">{t(lang,'Referencia / N° comprobante','Reference / voucher #')}</span>
                      <input value={ref} onChange={(e)=>setRef(e.target.value)} placeholder={t(lang,'Ej. Bancolombia 0098-4471','e.g. Bancolombia 0098-4471')} /></label>
                  )}
                  {method==='cash' && <div className="rz-inv-row"><span className="label">{t(lang,'Recibido por','Received by')}</span><span>{t(lang,'Administración','Front office')}</span></div>}
                  <label className="rz-field"><span className="label">{t(lang,'Fecha','Date')}</span><input type="date" value={date} onChange={(e)=>setDate(e.target.value)} /></label>
                </div>
                <div className="rz-rec-actions">
                  <button type="button" className="btn-secondary" onClick={()=>setStep('method')}>← {t(lang,'Atrás','Back')}</button>
                  <button type="button" className="btn-primary" onClick={doRegister}>{t(lang,'Registrar pago','Record payment')}</button>
                </div>
                <p className="rz-modal-note">{t(lang,'Vista previa — se registra en el libro (no se cobra de verdad).','Preview — recorded in the ledger (no real charge).')}</p>
              </React.Fragment>
            )}

            {step==='receipt' && (
              <React.Fragment>
                <div className="rz-receipt">
                  <div className={'rz-receipt-badge'}><Check /> {isPaidView ? t(lang,'Factura pagada','Invoice paid') : t(lang,'Pago registrado','Payment recorded')}</div>
                  <div className="rz-inv-row"><span className="label">{t(lang,'Recibo N°','Receipt #')}</span><span className="mono">{recibo}</span></div>
                  <div className="rz-inv-row"><span className="label">{t(lang,'Medio','Method')}</span><span>{mLabel(method)}</span></div>
                  {ref && <div className="rz-inv-row"><span className="label">{t(lang,'Referencia','Reference')}</span><span className="mono">{ref}</span></div>}
                  <div className="rz-inv-row"><span className="label">{t(lang,'Fecha','Date')}</span><span className="mono">{date}</span></div>
                  <div className="rz-inv-row"><span className="label">{t(lang,'Conciliación','Reconciliation')}</span><span>{(method==='transfer' && !ref) ? t(lang,'Pendiente','Pending') : t(lang,'Conciliado ✓','Reconciled ✓')}</span></div>
                </div>
                <div className="rz-rec-actions">
                  <button type="button" className="btn-secondary" onClick={(e)=>e.preventDefault()} title={t(lang,'Vista previa','Preview')}>{t(lang,'Imprimir','Print')}</button>
                  <button type="button" className="btn-primary" onClick={onClose}>{t(lang,'Listo','Done')}</button>
                </div>
              </React.Fragment>
            )}
          </div>
        </div>
      </div>
    );
  }
  window.RegisterModal = RegisterModal; window.Toast = Toast;
})();