// js/components/widgets/freteiros/CarriersTable.jsx
// [Wave 31 v224.12 NUCLEAR EXTRACT 2026-05-24] Search + loading + error + empty + tabela carriers
// Extract LITERAL de Freteiros.jsx L257-358 (search + states + table)
//
// Props:
//   - filteredCarriers (array) — já filtrado pelo searchQ via useMemo
//   - carrierScores (object) — {[id]: scoreObj}
//   - searchQ, setSearchQ — controla input search
//   - loading, error — estados load
//   - onSelectCarrier(id) — abre ficha 360°
//   - onEditCarrier(carrier) — abre modal CRUD edit
//   - onSaqueCarrier(id) — abre modal saque (admin only)
//   - canEdit, isAdmin — flags de role
// Deps lazy: ZNX.widgets.freteiros.SharedComponents.Th + ZNX.freteiros.calcs.{fmtUSD, fmtPct, scoreColor}
(function(){
  'use strict';
  function CarriersTable(props){
    const SC = window.ZNX && window.ZNX.widgets && window.ZNX.widgets.freteiros && window.ZNX.widgets.freteiros.SharedComponents;
    const calcs = window.ZNX && window.ZNX.freteiros && window.ZNX.freteiros.calcs;
    const Th = SC && SC.Th;
    if(!Th || !calcs) return null;
    const fmtUSD = calcs.fmtUSD;
    const fmtPct = calcs.fmtPct;
    const scoreColor = calcs.scoreColor;
    const { filteredCarriers, carrierScores, searchQ, setSearchQ, loading, error,
            onSelectCarrier, onEditCarrier, onSaqueCarrier, canEdit, isAdmin } = props;

    return (
      <React.Fragment>
        {/* Search [LITERAL L257-265] */}
        <div style={{ marginBottom: 12 }}>
          <input
            type="text"
            placeholder="Buscar por nome, documento ou telefone..."
            value={searchQ}
            onChange={e => setSearchQ(e.target.value)}
            style={{ width: '100%', maxWidth: 400, padding: '8px 12px', borderRadius: 8, border: '1px solid #E4E7EC', fontSize: 13 }}
          />
        </div>

        {/* Loading / Error / Empty [LITERAL L268-278] */}
        {loading && <div style={{ padding: 40, textAlign: 'center', color: '#9CA3AF' }}>Carregando freteiros...</div>}
        {error && (
          <div style={{ padding: 16, background: '#FEE2E2', border: '1px solid #FCA5A5', borderRadius: 8, color: '#DC2626', marginBottom: 12 }}>
            <strong>Erro ao carregar:</strong> {error}
          </div>
        )}
        {!loading && !error && filteredCarriers.length === 0 && (
          <div style={{ padding: 60, textAlign: 'center', color: '#9CA3AF', background: '#F9FAFB', borderRadius: 8 }}>
            {searchQ ? 'Nenhum freteiro encontrado pela busca.' : 'Nenhum freteiro cadastrado ainda. Clique em "Novo Freteiro" pra começar.'}
          </div>
        )}

        {/* Tabela [LITERAL L279-358] */}
        {!loading && !error && filteredCarriers.length > 0 && (
          <div style={{ overflowX: 'auto', background: '#FFF', borderRadius: 8, border: '1px solid #E4E7EC' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
              <thead>
                <tr style={{ background: '#F9FAFB', borderBottom: '1px solid #E4E7EC' }}>
                  <Th>Nome</Th>
                  <Th>Contato</Th>
                  <Th right>Saldo USD</Th>
                  <Th right>Garantia USD</Th>
                  <Th right>Comissão %</Th>
                  <Th>Score</Th>
                  <Th>Status</Th>
                  <Th></Th>
                </tr>
              </thead>
              <tbody>
                {filteredCarriers.map(c => {
                  const sc = carrierScores[c.id] || { score: 0 };
                  const balanceColor = Number(c.current_balance_usd) >= 0 ? '#16A34A' : '#DC2626';
                  return (
                    <tr key={c.id} style={{ borderBottom: '1px solid #F3F4F6', cursor: 'pointer', transition: 'background .15s' }}
                        onClick={() => onSelectCarrier(c.id)}
                        onMouseEnter={e => e.currentTarget.style.background = '#F9FAFB'}
                        onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                      <td style={{ padding: '10px 14px', fontWeight: 600 }}>{c.name}</td>
                      <td style={{ padding: '10px 14px', color: '#6B7280', fontSize: 12 }}>
                        {c.document || '—'}
                        {c.phone && <div style={{ fontSize: 11, color: '#9CA3AF' }}>{c.phone}</div>}
                      </td>
                      <td style={{ padding: '10px 14px', textAlign: 'right', fontWeight: 700, color: balanceColor }}>
                        {fmtUSD(c.current_balance_usd)}
                      </td>
                      <td style={{ padding: '10px 14px', textAlign: 'right', color: '#374151' }}>
                        {fmtUSD(c.guarantee_usd)}
                      </td>
                      <td style={{ padding: '10px 14px', textAlign: 'right', color: '#374151' }}>
                        {fmtPct(c.commission_pct)}
                      </td>
                      <td style={{ padding: '10px 14px' }}>
                        <span style={{ background: scoreColor(sc.score) + '22', color: scoreColor(sc.score), padding: '3px 10px', borderRadius: 6, fontSize: 11, fontWeight: 700 }}>
                          {sc.score}
                        </span>
                      </td>
                      <td style={{ padding: '10px 14px' }}>
                        {c.active
                          ? <span style={{ background: '#DCFCE7', color: '#16A34A', padding: '2px 8px', borderRadius: 6, fontSize: 11, fontWeight: 700 }}>ativo</span>
                          : <span style={{ background: '#F3F4F6', color: '#6B7280', padding: '2px 8px', borderRadius: 6, fontSize: 11, fontWeight: 700 }}>inativo</span>
                        }
                      </td>
                      <td style={{ padding: '10px 14px', textAlign: 'right' }}>
                        <div style={{ display: 'flex', gap: 4, justifyContent: 'flex-end' }} onClick={e => e.stopPropagation()}>
                          {canEdit && (
                            <button
                              onClick={() => onEditCarrier(c)}
                              className="btn-outline btn-sm"
                              style={{ padding: '4px 10px', fontSize: 11 }}
                            >
                              ✏️ Editar
                            </button>
                          )}
                          {/* FRT-C4 (2026-05-09) — Botão Saque (admin only) */}
                          {isAdmin && (
                            <button
                              onClick={() => onSaqueCarrier(c.id)}
                              className="btn-gold btn-sm"
                              style={{ padding: '4px 10px', fontSize: 11 }}
                              title="Registrar saque deste freteiro"
                            >
                              💸 Saque
                            </button>
                          )}
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </React.Fragment>
    );
  }
  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.freteiros = window.ZNX.widgets.freteiros || {};
  window.ZNX.widgets.freteiros.CarriersTable = CarriersTable;
  // [Wave 31 marker v224.12] confirma CarriersTable executado
  window.FreteirosCarriersTable_v224_12_wave31 = true;
})();