// js/components/widgets/SaqueFreteiroModal.jsx
// FRT-C4 (2026-05-09) — Modal de saque do freteiro (admin only).
// Acoplado em Freteiros.jsx (botão "💸 Saque" no row da lista).
// Chama register_carrier_withdrawal_v1 com paid_in USD ou BRL + câmbio.
// Deps runtime: sb, toast, Modal (globals)
(function() {
  'use strict';
  const {useState, useMemo} = React;

  function fmtUSD(v) {
    const n = Number(v) || 0;
    return 'US$ ' + n.toFixed(2).replace('.', ',').replace(/\B(?=(\d{3})+(?=,))/g, '.');
  }
  function fmtBRL(v) {
    const n = Number(v) || 0;
    return 'R$ ' + n.toFixed(2).replace('.', ',').replace(/\B(?=(\d{3})+(?=,))/g, '.');
  }

  function genIdem() {
    return window.crypto?.randomUUID?.() || (Date.now() + '-' + Math.random());
  }

  /**
   * SaqueFreteiroModal — modal isolado pra registrar saque de freteiro.
   * Props:
   *   carrier        — objeto carrier (id, name, current_balance_usd, ...)
   *   onClose()      — fecha modal
   *   onSuccess(txn) — callback após sucesso (refresh data)
   *   user           — currentUser (pra role check defensivo)
   */
  function SaqueFreteiroModal({ carrier, onClose, onSuccess, user }) {
    const [paidIn, setPaidIn] = useState('USD');
    const [amount, setAmount] = useState('');
    const [exchangeRate, setExchangeRate] = useState('5.0');
    const [description, setDescription] = useState('Saque do freteiro');
    const [evidence, setEvidence] = useState('');
    const [saving, setSaving] = useState(false);

    const isAdmin = user?.role === 'admin';

    // Preview do valor convertido
    const preview = useMemo(() => {
      const amt = Number(amount) || 0;
      const xr = Number(exchangeRate) || 0;
      if (paidIn === 'USD') {
        return { amount_usd: amt, amount_brl: null, valid: amt > 0 };
      } else {
        if (xr <= 0 || amt <= 0) return { amount_usd: 0, amount_brl: amt, valid: false };
        return { amount_usd: amt / xr, amount_brl: amt, valid: true };
      }
    }, [paidIn, amount, exchangeRate]);

    const newBalance = useMemo(
      () => Number(carrier?.current_balance_usd || 0) - preview.amount_usd,
      [carrier, preview.amount_usd]
    );

    async function handleSubmit() {
      if (!isAdmin) { toast('⛔ Apenas admin pode registrar saque.', 'error'); return; }
      if (saving) return;
      if (!preview.valid) {
        toast('Preencha amount > 0' + (paidIn === 'BRL' ? ' e exchange_rate > 0' : ''), 'error');
        return;
      }
      const evidenceArr = (evidence || '').split(/[\n,]/).map(s => s.trim()).filter(Boolean);

      setSaving(true);
      try {
        const idem = genIdem();
        const payload = {
          idempotency_key: idem,
          carrier_id: carrier.id,
          paid_in: paidIn,
          amount: Number(amount),
          description: description || 'Saque do freteiro',
          evidence_photos: evidenceArr.length > 0 ? evidenceArr : null,
        };
        if (paidIn === 'BRL') payload.exchange_rate = Number(exchangeRate);

        const { data, error } = await sb.rpc('register_carrier_withdrawal_v1', { payload });
        if (error) throw error;
        if (!data?.success) throw new Error(data?.error_message || 'Falha');

        toast(`✅ Saque registrado: ${fmtUSD(data.amount_usd)} · novo saldo ${fmtUSD(data.new_balance_usd)}`);
        if (typeof onSuccess === 'function') onSuccess(data);
        onClose();
      } catch (e) {
        console.error('[SaqueFreteiroModal] error:', e);
        toast('❌ ' + (e?.message || 'Erro inesperado'), 'error');
        if (typeof Sentry !== 'undefined') Sentry.captureException(e, { extra: { context: 'SaqueFreteiroModal.handleSubmit', carrier_id: carrier?.id } });
      } finally {
        setSaving(false);
      }
    }

    if (!carrier) return null;

    return (
      <Modal title={`💸 Saque · ${carrier.name}`} onClose={onClose}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>

          {/* Header context */}
          <div style={{ background: '#F0F9FF', border: '1px solid #BAE6FD', borderRadius: 8, padding: 12, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8 }}>
            <div>
              <div style={{ fontSize: 11, color: '#0369A1', textTransform: 'uppercase', letterSpacing: 0.5, fontWeight: 600 }}>Saldo atual</div>
              <div style={{ fontSize: 18, fontWeight: 800, color: Number(carrier.current_balance_usd) >= 0 ? '#16A34A' : '#DC2626' }}>
                {fmtUSD(carrier.current_balance_usd)}
              </div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 11, color: '#0369A1', textTransform: 'uppercase', letterSpacing: 0.5, fontWeight: 600 }}>Após saque</div>
              <div style={{ fontSize: 18, fontWeight: 800, color: newBalance >= 0 ? '#16A34A' : '#DC2626' }}>
                {fmtUSD(newBalance)}
              </div>
            </div>
          </div>

          {/* Paid in radio */}
          <div>
            <div style={{ fontSize: 12, fontWeight: 600, color: '#374151', marginBottom: 6 }}>Pago em*</div>
            <div style={{ display: 'flex', gap: 8 }}>
              {[['USD', '🇺🇸 Dólares'], ['BRL', '🇧🇷 Reais']].map(([val, lbl]) => (
                <label key={val} style={{
                  flex: 1, padding: 12, border: `2px solid ${paidIn === val ? '#2563EB' : '#E4E7EC'}`,
                  borderRadius: 8, cursor: 'pointer', textAlign: 'center',
                  background: paidIn === val ? '#EFF6FF' : '#FFF',
                  fontWeight: 600, fontSize: 13,
                  color: paidIn === val ? '#2563EB' : '#374151',
                }}>
                  <input type="radio" value={val} checked={paidIn === val} onChange={e => setPaidIn(e.target.value)}
                         style={{ display: 'none' }} />
                  {lbl}
                </label>
              ))}
            </div>
          </div>

          {/* Amount */}
          <Field label={paidIn === 'USD' ? 'Valor USD*' : 'Valor BRL*'}>
            <input type="number" min="0.01" step="0.01" value={amount} onChange={e => setAmount(e.target.value)}
                   placeholder={paidIn === 'USD' ? 'Ex: 500.00' : 'Ex: 2500.00'}
                   style={{ fontSize: 16, fontWeight: 600 }} autoFocus />
          </Field>

          {/* Exchange rate (só se BRL) */}
          {paidIn === 'BRL' && (
            <>
              <Field label="Câmbio USD/BRL do dia*">
                <input type="number" min="0.01" step="0.0001" value={exchangeRate}
                       onChange={e => setExchangeRate(e.target.value)} placeholder="Ex: 5.0" />
                <span style={{ fontSize: 11, color: '#9CA3AF', marginTop: 2 }}>
                  Câmbio do dia da operação (não da nota emitida)
                </span>
              </Field>
              {preview.valid && (
                <div style={{ padding: 10, background: '#F0FDF4', border: '1px solid #86EFAC', borderRadius: 6, fontSize: 12, color: '#16A34A' }}>
                  Conversão: <strong>{fmtBRL(preview.amount_brl)}</strong> ÷ {Number(exchangeRate).toFixed(4)} = <strong>{fmtUSD(preview.amount_usd)}</strong>
                </div>
              )}
            </>
          )}

          <Field label="Descrição">
            <input type="text" value={description} onChange={e => setDescription(e.target.value)}
                   placeholder="Ex: Adiantamento de comissão · Saque mensal · etc." />
          </Field>

          <Field label="Evidência (URLs ou descrição)">
            <textarea value={evidence} onChange={e => setEvidence(e.target.value)} rows={2}
                      placeholder="Comprovante PIX / TED / WhatsApp foto. Separe múltiplas por vírgula ou nova linha."
                      style={{ width: '100%', resize: 'vertical' }} />
            <span style={{ fontSize: 11, color: '#9CA3AF', marginTop: 2 }}>
              Opcional. Upload via Storage virá em onda futura.
            </span>
          </Field>

          {!isAdmin && (
            <div style={{ padding: 10, background: '#FEE2E2', borderRadius: 6, fontSize: 12, color: '#DC2626' }}>
              ⛔ Apenas admin pode confirmar saque (RPC valida server-side também).
            </div>
          )}

          <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', marginTop: 4 }}>
            <button className="btn-outline" onClick={onClose} disabled={saving}>Cancelar</button>
            <button className="btn-gold" onClick={handleSubmit} disabled={saving || !preview.valid || !isAdmin}>
              {saving ? '⏳ Registrando...' : '✓ Confirmar saque'}
            </button>
          </div>
        </div>
      </Modal>
    );
  }

  function Field({ label, children }) {
    return (
      <label style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        <span style={{ fontSize: 12, fontWeight: 600, color: '#374151' }}>{label}</span>
        {children}
      </label>
    );
  }

  // EXPORT
  window.ZNX = window.ZNX || {};
  window.ZNX.components = window.ZNX.components || {};
  window.ZNX.components.SaqueFreteiroModal = SaqueFreteiroModal;
  window.SaqueFreteiroModal = SaqueFreteiroModal;
})();