// js/components/widgets/ApproveCloseRequestModal.jsx
// [Wave 13 v223.38 20260520] Extraído de AprovacoesFrete.jsx L468-544
// Modal aprovar request com preview cálculo MISTO comissão freteiro
//
// Props:
//   selectedRequest, selectedNote, selectedCarrier, previewData,
//   adminNotes, setAdminNotes, inFlight, onConfirm, onClose
//
// Deps runtime: window.Modal, window.ZNX.lib.freight.fmtUSD
(function(){
  'use strict';

  function ApproveCloseRequestModal(props){
    const selectedRequest = props.selectedRequest;
    const selectedNote = props.selectedNote;
    const selectedCarrier = props.selectedCarrier;
    const previewData = props.previewData;
    const adminNotes = props.adminNotes;
    const setAdminNotes = props.setAdminNotes;
    const inFlight = props.inFlight;
    const onConfirm = props.onConfirm;
    const onClose = props.onClose;
    const Modal = window.Modal;
    const fmtUSD = (window.ZNX && window.ZNX.lib && window.ZNX.lib.freight && window.ZNX.lib.freight.fmtUSD) || function(v){ return 'US$ ' + v; };

    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 (!selectedRequest) return null;

    const title = 'Aprovar: ' + (
      selectedRequest.type === 'close_with_loss' ? 'Fechar com perda' :
      selectedRequest.type === 'sku_surprise' ? 'SKU surpresa' : 'Qty extra'
    );

    // Sub-components locais (small, uso só aqui)
    function ViewStat(p) {
      return (
        <div style={{ background: '#F9FAFB', borderRadius: 8, padding: '8px 12px' }}>
          <div style={{ fontSize: 10, color: '#9CA3AF', textTransform: 'uppercase', letterSpacing: 0.5, fontWeight: 600 }}>{p.label}</div>
          <div style={{ fontSize: 13, fontWeight: 700, color: p.color || '#374151', marginTop: 4 }}>{p.value}</div>
        </div>
      );
    }
    function Field(p) {
      return (
        <label style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          <span style={{ fontSize: 12, fontWeight: 600, color: '#374151' }}>{p.label}</span>
          {p.children}
        </label>
      );
    }

    return (
      <Modal title={title} onClose={onClose} large>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 8 }}>
            <ViewStat label="Nota" value={(selectedNote && selectedNote.number) || '—'} />
            <ViewStat label="Freteiro" value={(selectedCarrier && selectedCarrier.name) || '—'} />
            <ViewStat label="Garantia atual" value={fmtUSD(selectedCarrier && selectedCarrier.guarantee_usd)} />
            <ViewStat label="Saldo atual" value={fmtUSD(selectedCarrier && selectedCarrier.current_balance_usd)}
                      color={Number(selectedCarrier && selectedCarrier.current_balance_usd) >= 0 ? '#16A34A' : '#DC2626'} />
          </div>

          {selectedRequest.type === 'close_with_loss' && previewData && (
            <div style={{
              background: previewData.outcome === 'credit' ? '#F0FDF4' : '#FEE2E2',
              border: '1px solid ' + (previewData.outcome === 'credit' ? '#86EFAC' : '#FCA5A5'),
              borderRadius: 10, padding: 14,
            }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: '#374151', marginBottom: 8 }}>
                📊 Preview do cálculo de comissão
              </div>
              <div style={{ fontFamily: 'monospace', fontSize: 12, lineHeight: 1.7, color: '#1F2937' }}>
                {previewData.steps.map((s, i) => <div key={i}>{s}</div>)}
              </div>
              <div style={{ marginTop: 10, paddingTop: 10, borderTop: '1px solid ' + (previewData.outcome === 'credit' ? '#86EFAC' : '#FCA5A5'), display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                <div>
                  <div style={{ fontSize: 11, color: '#6B7280', textTransform: 'uppercase', letterSpacing: 0.5 }}>Nova garantia</div>
                  <div style={{ fontSize: 14, fontWeight: 700, color: '#7C3AED' }}>{fmtUSD(previewData.new_guarantee)}</div>
                </div>
                <div>
                  <div style={{ fontSize: 11, color: '#6B7280', textTransform: 'uppercase', letterSpacing: 0.5 }}>Novo saldo</div>
                  <div style={{ fontSize: 14, fontWeight: 700, color: previewData.new_balance >= 0 ? '#16A34A' : '#DC2626' }}>
                    {fmtUSD(previewData.new_balance)}
                  </div>
                </div>
              </div>
            </div>
          )}

          {selectedRequest.type !== 'close_with_loss' && (
            <div style={{ background: '#FEF3C7', border: '1px solid #FDE68A', borderRadius: 8, padding: 14, fontSize: 12, color: '#92400E' }}>
              <strong>⚠️ Aprovação simbólica.</strong>
              {' '}Pra <code>{selectedRequest.type}</code>, o admin reconhece a situação mas o
              fluxo completo (criar items SKU surpresa, ajustar received_qty, devolução, etc.)
              vem em ondas futuras. Por agora a request fica marcada como aprovada.
            </div>
          )}

          {selectedRequest.reason && (
            <div style={{ fontSize: 12, color: '#6B7280', fontStyle: 'italic', padding: 10, background: '#F9FAFB', borderRadius: 6 }}>
              <strong style={{ color: '#374151' }}>Solicitação:</strong> "{selectedRequest.reason}"
            </div>
          )}

          <Field label="Notas do admin (opcional)">
            <textarea value={adminNotes} onChange={e => setAdminNotes(e.target.value)}
                      rows={2} placeholder="Observações sobre a aprovação"
                      style={{ width: '100%', resize: 'vertical' }} />
          </Field>

          <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', marginTop: 8 }}>
            <button className="btn-outline" onClick={onClose} disabled={inFlight}>Cancelar</button>
            <button className="btn-gold" onClick={onConfirm} disabled={inFlight}>
              {inFlight ? '⏳ Aprovando...' : '✓ Confirmar aprovação'}
            </button>
          </div>
        </div>
      </Modal>
    );
  }

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