/* ============================================================
   AI4Colegios UI Kit — RegisterModal.jsx
   Press an unpaid cell → register modal, pre-filled for that invoice.
   Concepts/months → pick method = submit (no separate Confirm).
   + lightweight Toast.
   ============================================================ */
(function () {
  const { Cash, CardIcon, Transfer, Check } = window.Icons;
  const { t, money } = window.RZH;

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

  function Method({ id, icon, label, soon, onPick }) {
    return (
      <button type="button" className={'method-btn ' + id} disabled={soon} onClick={() => !soon && onPick(id)}>
        {soon && <span className="soon-badge">Soon</span>}
        <span className="ico" aria-hidden="true">{icon}</span>
        <span className="method-lbl">{label}</span>
      </button>
    );
  }

  function RegisterModal({ lang, ctx, onClose, onSubmit }) {
    if (!ctx) return null;
    const { student, month } = ctx;
    const amount = student.pension;
    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">{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>

          <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-2026-{String(student.no).padStart(4, '0')}</span>
              </div>
            </div>

            <div className="rz-method-h">{t(lang, 'Método = registrar', 'Method = submit')}</div>
            <div className="rz-methods">
              <Method id="cash" icon={<Cash />} label={t(lang, 'Efectivo', 'Cash')} onPick={(m) => onSubmit(m, amount)} />
              <Method id="transfer" icon={<Transfer />} label={t(lang, 'Transferencia', 'Transfer')} onPick={(m) => onSubmit(m, amount)} />
              <Method id="card" icon={<CardIcon />} label={t(lang, 'Tarjeta', 'Card')} soon onPick={() => {}} />
            </div>
            <p className="rz-modal-note">{t(lang, 'Al elegir el método se registra el pago (vista previa).', 'Choosing the method registers the payment (preview).')}</p>
          </div>
        </div>
      </div>
    );
  }

  window.RegisterModal = RegisterModal;
  window.Toast = Toast;
})();