// js/components/widgets/notas_frete/Primitives.jsx
// [Wave NotasFrete 2026-05-19 v223.23] Extraído de pages/NotasFrete.jsx L34-52 + L718-758.
// 5 micro-componentes UI: StatCard, ViewStat, Th, Field, statusBadge.
// Padrão: IIFE + window.ZNX.widgets.notas_frete.Primitives (objeto com 5 members).
(function() {
  'use strict';

  function StatCard({ label, value, icon, color }) {
    return (
      <div style={{ background: '#FFF', border: '1px solid #E4E7EC', borderRadius: 8, padding: 14 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: '#9CA3AF', fontSize: 11, marginBottom: 6 }}>
          {icon && <Icon n={icon} size={12} />}
          <span style={{ textTransform: 'uppercase', letterSpacing: 0.5, fontWeight: 600 }}>{label}</span>
        </div>
        <div style={{ fontSize: 24, fontWeight: 800, color: color || '#1B2A4A' }}>{value}</div>
      </div>
    );
  }

  function ViewStat({ label, value }) {
    return (
      <div style={{ background: '#F9FAFB', borderRadius: 8, padding: '8px 12px' }}>
        <div style={{ fontSize: 10, color: '#9CA3AF', textTransform: 'uppercase', letterSpacing: 0.5, fontWeight: 600 }}>{label}</div>
        <div style={{ fontSize: 13, fontWeight: 600, color: '#374151', marginTop: 4 }}>{value}</div>
      </div>
    );
  }

  function Th({ children, right }) {
    return (
      <th style={{
        padding: '10px 14px', textAlign: right ? 'right' : 'left',
        color: '#6B7280', fontSize: 11, textTransform: 'uppercase',
        letterSpacing: 0.5, fontWeight: 600, whiteSpace: 'nowrap',
      }}>
        {children}
      </th>
    );
  }

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

  function statusBadge(s) {
    const map = {
      EMITIDA: { bg: '#EFF6FF', fg: '#2563EB', label: 'Emitida' },
      CONFIRMADA_FRETEIRO: { bg: '#FEF9E7', fg: '#B89840', label: 'Confirmada' },
      EM_TRANSITO: { bg: '#FEF3C7', fg: '#92400E', label: 'Em Trânsito' },
      EM_RECEBIMENTO: { bg: '#E0F2FE', fg: '#0369A1', label: 'Recebendo' },
      COMPLETA: { bg: '#DCFCE7', fg: '#16A34A', label: 'Completa' },
      FECHADA_COM_PERDA: { bg: '#FEE2E2', fg: '#DC2626', label: 'Fechada c/ Perda' },
      EXTRAVIADA: { bg: '#FEE2E2', fg: '#7F1D1D', label: 'Extraviada' },
      CANCELADA: { bg: '#F3F4F6', fg: '#6B7280', label: 'Cancelada' },
      EM_DISPUTA: { bg: '#FEF9E7', fg: '#A16207', label: 'Em Disputa' },
    };
    const c = map[s] || { bg: '#F3F4F6', fg: '#374151', label: s };
    return (
      <span style={{ background: c.bg, color: c.fg, padding: '3px 10px', borderRadius: 6, fontSize: 11, fontWeight: 700, whiteSpace: 'nowrap' }}>
        {c.label}
      </span>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.notas_frete = window.ZNX.widgets.notas_frete || {};
  window.ZNX.widgets.notas_frete.Primitives = { StatCard, ViewStat, Th, Field, statusBadge };
})();