// js/components/widgets/freteiros/SharedComponents.jsx
// [Wave 31 v224.12 NUCLEAR EXTRACT 2026-05-24] 5 sub-components LITERAL de Freteiros.jsx L571-611
// + NoteStatusBadge (substituindo noteStatusBadge function L42-60)
//
// Exports: window.ZNX.widgets.freteiros.SharedComponents = { StatCard, FichaStat, Th, Field, NoteStatusBadge }
// Deps lazy: window.Icon (global), window.ZNX.freteiros.calcs.getNoteStatusColor (Wave 31 expansion)
(function(){
  'use strict';

  // [Freteiros L571-581 LITERAL] StatCard — usado em StatsRow (4 stats globais)
  function StatCard({ label, value, icon, color }){
    const Icon = window.Icon;
    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: 22, fontWeight: 800, color: color || '#1B2A4A' }}>{value}</div>
      </div>
    );
  }

  // [Freteiros L583-590 LITERAL] FichaStat — usado dentro da Ficha 360° (mini stats)
  function FichaStat({ label, value, color }){
    return (
      <div style={{ background: '#F9FAFB', borderRadius: 8, padding: '10px 14px' }}>
        <div style={{ fontSize: 10, color: '#9CA3AF', textTransform: 'uppercase', letterSpacing: 0.5, fontWeight: 600 }}>{label}</div>
        <div style={{ fontSize: 16, fontWeight: 700, color: color || '#374151', marginTop: 4 }}>{value}</div>
      </div>
    );
  }

  // [Freteiros L592-602 LITERAL] Th — cabeçalho de tabela (carriers + notas + extrato)
  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>
    );
  }

  // [Freteiros L604-611 LITERAL] Field — label + input wrapper (CRUD 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>
    );
  }

  // [Freteiros L42-60 LITERAL adapted] NoteStatusBadge — componente (era função noteStatusBadge)
  // Color lookup via calcs.getNoteStatusColor (Wave 31 expansion)
  function NoteStatusBadge({ status }){
    const calcs = window.ZNX && window.ZNX.freteiros && window.ZNX.freteiros.calcs;
    const c = (calcs && calcs.getNoteStatusColor && calcs.getNoteStatusColor(status)) || { bg: '#F3F4F6', fg: '#374151' };
    return (
      <span style={{ background: c.bg, color: c.fg, padding: '2px 8px', borderRadius: 6, fontSize: 11, fontWeight: 700 }}>
        {status}
      </span>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.freteiros = window.ZNX.widgets.freteiros || {};
  window.ZNX.widgets.freteiros.SharedComponents = { StatCard, FichaStat, Th, Field, NoteStatusBadge };
  // [Wave 31 marker v224.12] confirma SharedComponents executado
  window.FreteirosShared_v224_12_wave31 = true;
})();