// js/components/widgets/RequestLossModal.jsx
// [Wave 14 v223.39 20260520] Extraído de ReceberFrete.jsx L684-712 + state lossForm L74
// Modal solicitar fechamento com perda — form completo (reason/evidence)
//
// Props:
//   show, totalMissing, actionInFlight,
//   onSubmit (form) => Promise,
//   onClose () => void
(function(){
  'use strict';
  const {useState, useEffect} = React;

  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>
    );
  }

  function RequestLossModal(props){
    const show = props.show;
    const totalMissing = props.totalMissing || 0;
    const actionInFlight = props.actionInFlight;
    const onSubmit = props.onSubmit;
    const onClose = props.onClose;
    const Modal = window.Modal;
    const [form, setForm] = useState({ reason: '', evidence: '' });

    useEffect(() => {
      if (show) setForm({ reason: '', evidence: '' });
    }, [show]);

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

    function handleSubmit() {
      onSubmit(form);
    }

    return (
      <Modal title="❌ Solicitar fechamento com perda" onClose={onClose}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div style={{ padding: 12, background: '#FEE2E2', borderRadius: 8, fontSize: 12, color: '#7F1D1D' }}>
            Há <strong>{totalMissing} un.</strong> faltando no total. Admin vai aprovar a perda
            e a nota fecha como FECHADA_COM_PERDA. Comissão do freteiro recalculada com base na perda.
          </div>
          <Field label="Motivo">
            <textarea rows={3} value={form.reason}
                      onChange={e => setForm(f => Object.assign({}, f, { reason: e.target.value }))}
                      placeholder="Ex: caixa estourou na rota, perfume vazado, etc." />
          </Field>
          <Field label="Evidência (URLs / descrição*)">
            <textarea rows={2} value={form.evidence}
                      onChange={e => setForm(f => Object.assign({}, f, { evidence: e.target.value }))}
                      placeholder="Cole URL(s) das fotos ou descrição. Pelo menos 1 obrigatório." />
            <span style={{ fontSize: 11, color: '#9CA3AF', marginTop: 2 }}>
              Separe múltiplas por vírgula ou nova linha. Upload via Storage virá em onda futura.
            </span>
          </Field>
          <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 4 }}>
            <button className="btn-outline" onClick={onClose} disabled={actionInFlight}>Cancelar</button>
            <button className="btn-danger" onClick={handleSubmit} disabled={actionInFlight}>
              {actionInFlight ? '⏳ Enviando...' : 'Solicitar fechamento'}
            </button>
          </div>
        </div>
      </Modal>
    );
  }

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