// js/components/widgets/LeftoverActionModal.jsx
// [Wave 14 v223.39 20260520] Extraído de ReceberFrete.jsx L611-638
// Modal 4 ações pra leftover (qty extra além da nota): accept_real/recount/accept_and_return/block_pending
(function(){
  'use strict';

  function LeftoverActionModal(props){
    const modalLeftover = props.modalLeftover;
    const productMap = props.productMap || {};
    const actionInFlight = props.actionInFlight;
    const onAction = props.onAction;
    const onClose = props.onClose;
    const Modal = window.Modal;
    if (!Modal) {
      console.error('[ZNX v224.71] Modal ausente');
      if(window.Sentry) window.Sentry.captureMessage('[v224.71] Modal undefined em widget', 'warning');
      if(typeof window.ZNX_toast === 'function') window.ZNX_toast('⚠ Modal indisponível · pressione Ctrl+Shift+R', 'warning');
      return null;
    }
    if (!modalLeftover) return null;

    const prod = productMap[modalLeftover.product_id];

    return (
      <Modal title="⚠️ Excesso de quantidade" onClose={onClose}>
        <div style={{ marginBottom: 14, padding: 12, background: '#FEF3C7', borderRadius: 8, fontSize: 13, color: '#92400E' }}>
          Sobrou <strong>{modalLeftover.leftover} un.</strong> de
          <strong> {(prod && prod.name) || modalLeftover.product_id}</strong> além do
          que foi distribuído nas notas. O que fazer?
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <button className="btn-gold" onClick={() => onAction('accept_real')} disabled={actionInFlight}
                  style={{ padding: 14, textAlign: 'left' }}>
            ✅ <strong>Aceitar real</strong> — sobra entra no estoque
          </button>
          <button className="btn-outline" onClick={() => onAction('recount')} disabled={actionInFlight}
                  style={{ padding: 14, textAlign: 'left' }}>
            🔢 <strong>Contar de novo</strong> — fechar e ajustar qty
          </button>
          <button className="btn-outline" onClick={() => onAction('accept_and_return')} disabled={actionInFlight}
                  style={{ padding: 14, textAlign: 'left', opacity: 0.5 }}>
            ↩️ <strong>Aceitar e devolver excesso</strong> <span style={{ fontSize: 11, color: '#9CA3AF' }}>(em breve)</span>
          </button>
          <button className="btn-danger" onClick={() => onAction('block_pending')} disabled={actionInFlight}
                  style={{ padding: 14, textAlign: 'left' }}>
            🛑 <strong>Bloquear</strong> — admin decide depois
          </button>
        </div>
      </Modal>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.components = window.ZNX.components || {};
  window.ZNX.components.LeftoverActionModal = LeftoverActionModal;
  window.LeftoverActionModal = LeftoverActionModal;
})();