import { useState, useEffect, useCallback } from 'react';
import { createPortal } from 'react-dom';
import { CotacaoService } from '../services/api';
import SelectColaborador from '../components/SelectColaborador';
import {
  ShoppingBag, RefreshCw, X, Check, ChevronDown, ClipboardList,
  PackageOpen, ShieldCheck, FileText, Truck, CheckCircle2,
  AlertCircle, Clock, User, Building2, MapPin, Printer,
} from 'lucide-react';

// ─── Tipos ────────────────────────────────────────────────────────────────────

const STATUS_FLOW = [
  { id: 'aguardando',  label: 'Aguardando',  icon: Clock,         color: 'yellow' },
  { id: 'separacao',   label: 'Separação',   icon: ClipboardList, color: 'blue'   },
  { id: 'embalagem',   label: 'Embalagem',   icon: PackageOpen,   color: 'purple' },
  { id: 'auditoria',   label: 'Auditoria',   icon: ShieldCheck,   color: 'orange' },
  { id: 'fiscal',      label: 'Fiscal',      icon: FileText,      color: 'cyan'   },
  { id: 'expedicao',   label: 'Expedição',   icon: Truck,         color: 'teal'   },
  { id: 'entregue',    label: 'Entregue',    icon: CheckCircle2,  color: 'emerald'},
  { id: 'cancelado',   label: 'Cancelado',   icon: AlertCircle,   color: 'rose'   },
];

const COLOR_MAP: Record<string, { badge: string; bg: string; border: string; text: string }> = {
  yellow:  { badge: 'bg-yellow-400/10 text-yellow-400',  bg: 'bg-yellow-400/5',  border: 'border-yellow-400/20',  text: 'text-yellow-400'  },
  blue:    { badge: 'bg-blue-400/10 text-blue-400',      bg: 'bg-blue-400/5',    border: 'border-blue-400/20',    text: 'text-blue-400'    },
  purple:  { badge: 'bg-purple-400/10 text-purple-400',  bg: 'bg-purple-400/5',  border: 'border-purple-400/20',  text: 'text-purple-400'  },
  orange:  { badge: 'bg-orange-400/10 text-orange-400',  bg: 'bg-orange-400/5',  border: 'border-orange-400/20',  text: 'text-orange-400'  },
  cyan:    { badge: 'bg-cyan-400/10 text-cyan-400',      bg: 'bg-cyan-400/5',    border: 'border-cyan-400/20',    text: 'text-cyan-400'    },
  teal:    { badge: 'bg-teal-400/10 text-teal-400',      bg: 'bg-teal-400/5',    border: 'border-teal-400/20',    text: 'text-teal-400'    },
  emerald: { badge: 'bg-emerald-400/10 text-emerald-400',bg: 'bg-emerald-400/5', border: 'border-emerald-400/20', text: 'text-emerald-400' },
  rose:    { badge: 'bg-rose-400/10 text-rose-400',      bg: 'bg-rose-400/5',    border: 'border-rose-400/20',    text: 'text-rose-400'    },
  slate:   { badge: 'bg-slate-700 text-slate-400',       bg: 'bg-slate-800/40',  border: 'border-slate-700',      text: 'text-slate-400'   },
};

const formatBRL = (v: number) => Number(v).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
const fmtDate   = (d: string) => d ? new Date(d).toLocaleString('pt-BR', { day:'2-digit', month:'2-digit', hour:'2-digit', minute:'2-digit' }) : '—';

const PAGTO_LABEL: Record<string, string> = {
  pix:         'PIX',
  cartao:      'Cartão',
  faturado:    'Faturado',
  na_retirada: 'Na Retirada',
  na_entrega:  'Na Entrega',
};

function PagtoLabel({ value, compact = false }: { value?: string; compact?: boolean }) {
  if (!value) return <span className="text-slate-600">—</span>;
  const label = PAGTO_LABEL[value] ?? value;
  if (value === 'na_entrega') {
    return compact
      ? <span className="text-amber-400 text-xs font-bold">{label} ⚠️</span>
      : (
        <span className="inline-flex items-center gap-1 text-amber-400 font-bold">
          {label}
          <span className="text-[10px] bg-amber-500/15 border border-amber-500/30 text-amber-400 px-1.5 py-0.5 rounded-md font-black uppercase tracking-wide">A avaliar</span>
        </span>
      );
  }
  return <span className="font-bold text-white">{label}</span>;
}

function StatusBadge({ status }: { status: string }) {
  const s = STATUS_FLOW.find(x => x.id === status);
  if (!s) return null;
  const c = COLOR_MAP[s.color];
  return (
    <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[10px] font-black uppercase tracking-widest border ${c.badge} ${c.border}`}>
      <s.icon size={11} /> {s.label}
    </span>
  );
}

// ─── Impressão do pedido (cupom operacional interno, por setor) ───────────────

const ETAPA_DESCRICAO: Record<string, string> = {
  aguardando: 'Aguardando aprovação',
  separacao:  'Lista de Separação — confira cada item e marque ao retirar',
  embalagem:  'Embalagem — confira itens, embale e lacre',
  auditoria:  'Auditoria — verifique código de barras, qtd. e validade',
  fiscal:     'Fiscal — verifique dados do cliente e totais',
  expedicao:  'Expedição — pedido pronto para saída',
  entregue:   'Pedido entregue',
  cancelado:  'Pedido cancelado',
};

function imprimirPedido(pedido: any, itens: any[]) {
  const fmtBRL = (v: number) => Number(v).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
  const fmtDt  = (d: string) => d ? new Date(d).toLocaleString('pt-BR') : '—';
  const protocolo  = pedido.protocolo || `Pedido #${pedido.id}`;
  const etapaLabel = (STATUS_FLOW.find(x => x.id === pedido.status)?.label ?? pedido.status).toUpperCase();
  const instrucao  = ETAPA_DESCRICAO[pedido.status] ?? '';

  // Separação e embalagem: mostra checkbox ao lado de cada item
  const comCheckbox = ['separacao', 'embalagem', 'auditoria'].includes(pedido.status);

  const linhasItens = itens.map(item => `
    <tr>
      ${comCheckbox ? `<td style="padding:6px 4px 6px 0;border-bottom:1px dashed #ccc;width:20px;">
        <div style="width:14px;height:14px;border:1.5px solid #555;border-radius:3px;display:inline-block;"></div>
      </td>` : ''}
      <td style="padding:6px 0;border-bottom:1px dashed #ccc;">
        <strong>${item.nome_produto}</strong>
        ${item.sku ? `<br/><span style="color:#777;font-size:10px;">SKU: ${item.sku}</span>` : ''}
      </td>
      <td style="padding:6px 0;border-bottom:1px dashed #ccc;text-align:center;font-size:15px;font-weight:bold;white-space:nowrap;">
        ${Number(item.quantidade).toLocaleString('pt-BR')} un
      </td>
      <td style="padding:6px 0;border-bottom:1px dashed #ccc;text-align:right;font-weight:bold;">
        ${fmtBRL(item.subtotal)}
      </td>
    </tr>`).join('');

  const enderecoHtml = pedido.rua ? `
  <hr class="divider"/>
  <p class="section-title">Endereço de Entrega</p>
  <div style="font-size:12px;">${pedido.rua}, ${pedido.end_numero}</div>
  <div style="font-size:11px;color:#555;">${pedido.bairro} · ${pedido.cidade}/${pedido.estado} · CEP ${pedido.cep}</div>
  ` : '';

  const obsHtml = pedido.observacao ? `
  <hr class="divider"/>
  <p class="section-title">Observação</p>
  <div style="font-size:12px;">${pedido.observacao}</div>
  ` : '';

  // Responsável da etapa atual
  const respAtual: Record<string, string | undefined> = {
    separacao: pedido.separador_nome,
    embalagem: pedido.embalador_nome,
    auditoria: pedido.auditor_nome,
    fiscal:    pedido.fiscal_nome,
    expedicao: pedido.expedidor_nome,
  };
  const nomeResp = respAtual[pedido.status];

  const html = `<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8"/>
  <title>${etapaLabel} — ${protocolo}</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Courier New', monospace; font-size: 13px; color: #111; background: #fff;
           width: 80mm; max-width: 80mm; margin: 0 auto; padding: 8px; }
    h1   { font-size: 16px; text-align: center; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 2px; }
    .etapa { text-align: center; font-size: 11px; font-weight: bold; background: #111; color: #fff;
             padding: 3px 0; border-radius: 4px; margin: 6px 0 2px; letter-spacing: 1px; }
    .instrucao { text-align: center; font-size: 10px; color: #555; margin-bottom: 6px; }
    .divider { border: none; border-top: 1px dashed #999; margin: 7px 0; }
    .section-title { font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
                     color: #888; margin: 5px 0 3px; }
    table { width: 100%; border-collapse: collapse; font-size: 12px; }
    th { font-size: 10px; text-transform: uppercase; color: #888; text-align: left;
         padding-bottom: 4px; border-bottom: 1px solid #aaa; }
    th:last-child { text-align: right; }
    .total-row td { font-size: 14px; font-weight: bold; padding-top: 6px; }
    .assinatura { border-top: 1px solid #aaa; margin-top: 30px; padding-top: 4px;
                  font-size: 10px; color: #888; text-align: center; }
    @media print {
      @page { margin: 4mm; size: 80mm auto; }
      body { padding: 0; }
    }
  </style>
</head>
<body>
  <h1>Alemão Conveniências</h1>
  <div class="etapa">${etapaLabel}</div>
  <p class="instrucao">${instrucao}</p>
  <hr class="divider"/>

  <p class="section-title">Pedido</p>
  <div style="font-size:14px;font-weight:bold;">${protocolo}</div>
  <div style="font-size:11px;color:#555;">${fmtDt(pedido.created_at)}</div>

  <hr class="divider"/>

  <p class="section-title">Cliente</p>
  <div style="font-size:13px;font-weight:bold;">${pedido.cliente_nome || 'Consumidor'}</div>
  ${pedido.cpf_cnpj ? `<div style="font-size:11px;color:#555;">${pedido.cpf_cnpj}</div>` : ''}
  <div style="font-size:11px;margin-top:2px;">
    ${pedido.tipo_entrega ? `<strong>${String(pedido.tipo_entrega).toUpperCase()}</strong> · ` : ''}
    ${{ pix:'PIX', cartao:'Cartão', faturado:'Faturado', na_retirada:'Na Retirada', na_entrega:'NA ENTREGA ⚠' }[pedido.forma_pagto as string] || pedido.forma_pagto || ''}
  </div>

  ${enderecoHtml}
  ${obsHtml}

  <hr class="divider"/>

  <p class="section-title">Itens (${itens.length})</p>
  <table>
    <thead><tr>
      ${comCheckbox ? '<th style="width:20px;"></th>' : ''}
      <th>Produto</th>
      <th style="text-align:center;">Qtd</th>
      <th style="text-align:right;">Total</th>
    </tr></thead>
    <tbody>${linhasItens}</tbody>
  </table>

  <hr class="divider"/>

  <table>
    ${pedido.desconto > 0 ? `
    <tr>
      <td style="font-size:11px;color:#555;" colspan="${comCheckbox ? 2 : 1}">Desconto</td>
      <td style="text-align:right;font-size:11px;color:#059669;" colspan="2">-${fmtBRL(pedido.desconto)}</td>
    </tr>` : ''}
    <tr class="total-row">
      <td colspan="${comCheckbox ? 2 : 1}">TOTAL</td>
      <td style="text-align:right;" colspan="2">${fmtBRL(pedido.total)}</td>
    </tr>
  </table>

  ${nomeResp ? `
  <hr class="divider"/>
  <p class="section-title">Responsável — ${etapaLabel}</p>
  <div style="font-size:13px;font-weight:bold;">${nomeResp}</div>
  ` : ''}

  ${pedido.expedidor_nome && pedido.expedidor_saida_em ? `
  <hr class="divider"/>
  <div style="font-size:11px;color:#0d9488;font-weight:bold;">
    ↗ Saída: ${fmtDt(pedido.expedidor_saida_em)} · ${pedido.expedidor_nome}
  </div>` : ''}

  <div class="assinatura">
    ${nomeResp ? `Assinatura: ____________________` : '&nbsp;'}
  </div>

  <p style="text-align:center;font-size:9px;color:#bbb;margin-top:8px;">
    Documento interno · ${new Date().toLocaleString('pt-BR')}
  </p>
</body>
</html>`;

  const win = window.open('', '_blank', 'width=420,height=720');
  if (!win) { alert('Permita pop-ups para imprimir.'); return; }
  win.document.write(html);
  win.document.close();
  win.focus();
  setTimeout(() => { win.print(); win.close(); }, 350);
}

// ─── Modal de detalhe do pedido (full-screen, 3 páginas em slide) ─────────────

const PAGES = ['Resumo', 'Itens', 'Ações'];

function PedidoDrawer({ pedido: initialPedido, onClose, onUpdate }: {
  pedido: any;
  onClose: () => void;
  onUpdate: () => void;
}) {
  const [pedido, setPedido]   = useState<any>(initialPedido);
  const [itens, setItens]     = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving]   = useState(false);
  const [motivo, setMotivo]   = useState('');
  const [page, setPage]       = useState(0);
  const [responsavelEntrega, setResponsavelEntrega] = useState('');
  const [embalador, setEmbalador] = useState('');
  // Atribuições de responsáveis por etapa (FK accounts.id) — padrão profissional;
  // os campos texto acima ficam só como fallback caso a equipe não esteja configurada.
  const [embaladorId,  setEmbaladorId]  = useState<number | null>(null);
  const [separadorId,  setSeparadorId]  = useState<number | null>(null);
  const [auditorId,    setAuditorId]    = useState<number | null>(null);
  const [fiscalId,     setFiscalId]     = useState<number | null>(null);
  const [expedidorId,  setExpedidorId]  = useState<number | null>(null);

  // Emissão de cupom fiscal (registro manual — sem integração SEFAZ).
  // Disponível em todas as fases ativas; o operador insere número e/ou chave
  // de acesso (44 dígitos NFC-e) gerados no PDV/ECF externo.
  const [cupomOpen,    setCupomOpen]    = useState(false);
  const [cupomNumero,  setCupomNumero]  = useState('');
  const [cupomChave,   setCupomChave]   = useState('');
  const [cupomSaving,  setCupomSaving]  = useState(false);

  async function emitirCupom() {
    const num = cupomNumero.trim();
    const key = cupomChave.replace(/\D/g, '');
    if (!num && !key) { alert('Informe o número do cupom ou a chave de acesso (44 dígitos).'); return; }
    if (key && key.length !== 44) { alert('Chave de acesso NFC-e deve ter 44 dígitos.'); return; }
    setCupomSaving(true);
    try {
      const res = await CotacaoService.registrarCupom(pedido.id, { numero: num || undefined, chave: key || undefined });
      setPedido((p: any) => ({
        ...p,
        cupom_numero:           res.cupom_numero,
        cupom_chave:            res.cupom_chave,
        cupom_emitido_em:       res.cupom_emitido_em,
        cupom_emitido_por:      res.cupom_emitido_por,
        cupom_emitido_por_nome: res.cupom_emitido_por_nome,
      }));
      setCupomOpen(false);
      setCupomNumero(''); setCupomChave('');
      onUpdate();
    } catch (e: any) {
      alert(e?.response?.data?.error || 'Erro ao registrar cupom fiscal');
    } finally {
      setCupomSaving(false);
    }
  }

  useEffect(() => {
    CotacaoService.getPedido(pedido.id)
      .then(d => { setPedido(d); setItens(d.itens || []); })
      .finally(() => setLoading(false));
  }, [pedido.id]);

  // Fechar com ESC
  useEffect(() => {
    const fn = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', fn);
    return () => document.removeEventListener('keydown', fn);
  }, [onClose]);

  const s      = STATUS_FLOW.find(x => x.id === pedido.status);
  const sColor = s ? COLOR_MAP[s.color] : COLOR_MAP.slate;
  const idx    = STATUS_FLOW.findIndex(x => x.id === pedido.status);
  const nextS  = STATUS_FLOW[idx + 1];
  const todosSeparados = itens.length > 0 && itens.every(i => i.separado);

  async function avancar() {
    if (!nextS || nextS.id === 'cancelado') return;
    if (nextS.id === 'embalagem') { await avancarEmbalagem(); return; }
    setSaving(true);
    try {
      // Se o usuário selecionou um responsável para a etapa atual antes de
      // avançar, registramos primeiro (apenas separador/auditor/fiscal — embalagem
      // e expedição têm fluxos próprios com mudança de status acoplada).
      if (pedido.status === 'separacao' && separadorId) {
        await CotacaoService.setResponsavel(pedido.id, 'separador', separadorId);
      } else if (pedido.status === 'auditoria' && auditorId) {
        await CotacaoService.setResponsavel(pedido.id, 'auditor', auditorId);
      } else if (pedido.status === 'fiscal' && fiscalId) {
        await CotacaoService.setResponsavel(pedido.id, 'fiscal', fiscalId);
      }

      if (nextS.id === 'entregue') {
        if (expedidorId) {
          await CotacaoService.marcarEntreguePorId(pedido.id, expedidorId);
        } else {
          await CotacaoService.marcarEntregue(pedido.id, responsavelEntrega || undefined);
        }
      } else {
        await CotacaoService.updateStatus(pedido.id, nextS.id);
      }
      setPedido((p: any) => ({ ...p, status: nextS.id }));
      onUpdate();
    } finally { setSaving(false); }
  }

  async function avancarEmbalagem() {
    // Backend exige embalador ou embalador_id; evita 400 quando o usuário clica
    // "Avançar" sem ter selecionado ninguém no <SelectColaborador>.
    if (!embaladorId && !embalador.trim()) {
      alert('Selecione o embalador antes de avançar.');
      return;
    }
    setSaving(true);
    try {
      if (embaladorId) {
        await CotacaoService.marcarEmbaladoPorId(pedido.id, embaladorId);
      } else {
        await CotacaoService.marcarEmbalado(pedido.id, embalador);
      }
      setPedido((p: any) => ({ ...p, status: 'embalagem' }));
      onUpdate();
    } finally { setSaving(false); }
  }

  async function reprovar() {
    setSaving(true);
    try {
      await CotacaoService.updateStatus(pedido.id, 'separacao');
      setPedido((p: any) => ({ ...p, status: 'separacao' }));
      setMotivo('');
      onUpdate();
    } finally { setSaving(false); }
  }

  async function cancelar() {
    if (!confirm('Cancelar pedido?')) return;
    setSaving(true);
    try {
      await CotacaoService.updateStatus(pedido.id, 'cancelado');
      setPedido((p: any) => ({ ...p, status: 'cancelado' }));
      onUpdate();
    } finally { setSaving(false); }
  }

  async function toggleSeparado(item: any) {
    const novo = !item.separado;
    await CotacaoService.marcarSeparado(item.id, novo);
    setItens(its => its.map(i => i.id === item.id ? { ...i, separado: novo } : i));
  }

  const canAdvance = nextS && nextS.id !== 'cancelado'
    && pedido.status !== 'entregue'
    && pedido.status !== 'cancelado';

  // Pré-requisitos por etapa antes de avançar — evita 400 do backend e dá
  // feedback visual claro ao usuário sobre o que falta preencher.
  const itensFaltando = pedido.status === 'separacao' && itens.length > 0 && !todosSeparados;
  const embaladorFaltando = nextS?.id === 'embalagem' && !embaladorId && !embalador.trim();
  const expedidorFaltando = pedido.status === 'expedicao' && nextS?.id === 'entregue'
    && !expedidorId && !responsavelEntrega.trim();
  const advanceBlocked = itensFaltando || embaladorFaltando || expedidorFaltando;
  const advanceBlockMsg = itensFaltando      ? 'separe todos os itens'
                       : embaladorFaltando   ? 'selecione o embalador'
                       : expedidorFaltando   ? 'selecione o entregador'
                       : '';

  // ── Página 0 — Resumo ────────────────────────────────────────────────────
  const pageResumo = (
    <div className="space-y-4">
      {/* 4 cards em linha */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        <div className="bg-slate-900 border border-slate-800 rounded-2xl p-4 col-span-2 md:col-span-1">
          <p className="text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Cliente</p>
          <div className="flex items-center gap-2 mb-1">
            {pedido.cliente_tipo === 'PJ'
              ? <Building2 size={15} className="text-purple-400 shrink-0" />
              : <User size={15} className="text-cyan-400 shrink-0" />}
            <span className="text-sm font-bold text-white leading-tight">{pedido.cliente_nome || 'Sem cadastro'}</span>
          </div>
          {pedido.cpf_cnpj && <p className="text-xs text-slate-500 font-mono mt-0.5">{pedido.cpf_cnpj}</p>}
        </div>
        <div className="bg-slate-900 border border-slate-800 rounded-2xl p-4">
          <p className="text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Total</p>
          <p className="text-2xl font-black text-white tabular-nums">{formatBRL(pedido.total)}</p>
          {pedido.desconto > 0 && <p className="text-xs text-emerald-400 mt-0.5">Desc: {formatBRL(pedido.desconto)}</p>}
        </div>
        <div className="bg-slate-900 border border-slate-800 rounded-2xl p-4">
          <p className="text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Pagamento</p>
          <PagtoLabel value={pedido.forma_pagto} />
        </div>
        <div className="bg-slate-900 border border-slate-800 rounded-2xl p-4">
          <p className="text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Modalidade</p>
          <p className="text-sm font-bold text-white capitalize">{pedido.tipo_entrega || '—'}</p>
        </div>
      </div>

      {/* Endereço */}
      {pedido.rua && (
        <div className="bg-slate-900 border border-slate-800 rounded-2xl p-4">
          <p className="text-xs font-black text-slate-500 uppercase tracking-widest mb-2 flex items-center gap-1.5">
            <MapPin size={11} /> Endereço de Entrega
          </p>
          <p className="text-sm text-white font-bold">{pedido.rua}, {pedido.end_numero}</p>
          <p className="text-xs text-slate-400 mt-0.5">{pedido.bairro} · {pedido.cidade}/{pedido.estado} · CEP {pedido.cep}</p>
        </div>
      )}

      {/* Observação */}
      {pedido.observacao && (
        <div className="bg-slate-900 border border-slate-800 rounded-2xl p-4">
          <p className="text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Observação</p>
          <p className="text-sm text-slate-300">{pedido.observacao}</p>
        </div>
      )}

      {/* Alerta pagamento na entrega */}
      {pedido.forma_pagto === 'na_entrega' && pedido.status === 'aguardando' && (
        <div className="bg-amber-500/10 border border-amber-500/30 rounded-2xl p-4 flex items-start gap-3">
          <AlertCircle size={18} className="text-amber-400 shrink-0 mt-0.5" />
          <div>
            <p className="text-xs font-black text-amber-400 uppercase tracking-widest">Pagamento na entrega — avaliar</p>
            <p className="text-xs text-amber-400/70 mt-1">Avalie antes de avançar para separação. Confirme apenas se aprovado pela equipe.</p>
          </div>
        </div>
      )}

      {/* Embalador registrado */}
      {pedido.status !== 'separacao' && pedido.embalador && (
        <div className="bg-slate-900 border border-purple-400/10 rounded-2xl p-3 flex items-center gap-2">
          <PackageOpen size={13} className="text-purple-400 shrink-0" />
          <span className="text-xs text-slate-400">Embalado por: <strong className="text-white">{pedido.embalador}</strong></span>
        </div>
      )}

      {/* ── Linha do Tempo — visível a partir de separacao ─────────────────── */}
      {Array.isArray(pedido.historico_responsaveis) && pedido.historico_responsaveis.length > 0 && (
        <div className="bg-slate-900 border border-slate-800 rounded-2xl p-4">
          <p className="text-xs font-black text-slate-500 uppercase tracking-widest mb-4 flex items-center gap-1.5">
            <Clock size={11} /> Linha do Tempo
          </p>
          <div className="space-y-0">
            {pedido.historico_responsaveis.map((h: any, i: number) => {
              const sf      = STATUS_FLOW.find(x => x.id === h.status);
              const c       = sf ? COLOR_MAP[sf.color] : COLOR_MAP.slate;
              const isLast  = i === pedido.historico_responsaveis.length - 1;
              const isSaida = h.status === 'expedicao' && pedido.expedidor_saida_em;
              // responsável nomeado registrado no pedido (FK por etapa)
              const nomeResp: Record<string, string | undefined> = {
                separacao: pedido.separador_nome,
                embalagem: pedido.embalador_nome,
                auditoria: pedido.auditor_nome,
                fiscal:    pedido.fiscal_nome,
                expedicao: pedido.expedidor_nome,
              };
              const respNome = nomeResp[h.status] || h.account_name || null;

              return (
                <div key={h.id ?? i} className="flex gap-3">
                  {/* Trilha vertical */}
                  <div className="flex flex-col items-center w-7 shrink-0">
                    <div className={`w-7 h-7 rounded-xl flex items-center justify-center border ${c.bg} ${c.border}`}>
                      {sf ? <sf.icon size={11} className={c.text} /> : <Check size={11} className="text-slate-400" />}
                    </div>
                    {!isLast && <div className="w-px flex-1 min-h-[20px] bg-slate-800 my-1" />}
                  </div>

                  {/* Conteúdo */}
                  <div className={`flex-1 min-w-0 ${isLast ? '' : 'pb-4'}`}>
                    <div className="flex items-baseline gap-2 flex-wrap">
                      <span className={`text-xs font-black uppercase tracking-widest ${c.text}`}>
                        {sf?.label ?? h.status}
                      </span>
                      <span className="text-[10px] text-slate-600 tabular-nums shrink-0">
                        {fmtDate(h.feito_em)}
                      </span>
                    </div>

                    {respNome && (
                      <p className="text-xs text-slate-400 mt-0.5 flex items-center gap-1">
                        <User size={10} className="shrink-0" /> {respNome}
                      </p>
                    )}

                    {/* Hora de saída do entregador */}
                    {isSaida && (
                      <p className="text-[11px] text-teal-400 font-bold mt-1 flex items-center gap-1">
                        <Truck size={10} className="shrink-0" />
                        Saiu para entrega às {fmtDate(pedido.expedidor_saida_em)}
                      </p>
                    )}

                    {/* Cupom fiscal emitido (marca na linha de expedicao ou fiscal) */}
                    {(h.status === 'fiscal' || h.status === 'expedicao') && pedido.cupom_emitido_em && (
                      <p className="text-[11px] text-cyan-400 mt-1 flex items-center gap-1">
                        <FileText size={10} className="shrink-0" />
                        Cupom {pedido.cupom_numero ? `#${pedido.cupom_numero}` : 'registrado'}
                        {' '}· {fmtDate(pedido.cupom_emitido_em)}
                        {pedido.cupom_emitido_por_nome && ` · ${pedido.cupom_emitido_por_nome}`}
                      </p>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );

  // ── Página 1 — Itens ─────────────────────────────────────────────────────
  const pageItens = (
    <div className="space-y-3">
      <div className="flex items-center justify-between">
        <p className="text-xs font-black text-slate-500 uppercase tracking-widest flex items-center gap-1.5">
          <ClipboardList size={11} /> {itens.length} {itens.length === 1 ? 'item' : 'itens'}
        </p>
        {['separacao','embalagem'].includes(pedido.status) && itens.length > 0 && (
          <span className={`text-xs font-bold ${todosSeparados ? 'text-emerald-400' : 'text-slate-500'}`}>
            {itens.filter(i => i.separado).length}/{itens.length} separados
            {todosSeparados && ' ✓'}
          </span>
        )}
      </div>
      <div className="space-y-2">
        {itens.map(item => (
          <div key={item.id} className={`flex items-center gap-3 p-4 rounded-2xl border transition-colors
            ${item.separado ? 'border-emerald-400/20 bg-emerald-400/5' : 'border-slate-800 bg-slate-900'}`}>
            {['separacao','embalagem'].includes(pedido.status) && (
              <button onClick={() => toggleSeparado(item)}
                className={`w-7 h-7 rounded-xl border-2 flex items-center justify-center shrink-0 transition-colors
                  ${item.separado ? 'border-emerald-500 bg-emerald-500' : 'border-slate-600 hover:border-emerald-500'}`}>
                {item.separado && <Check size={13} className="text-black" />}
              </button>
            )}
            <div className="flex-1 min-w-0">
              <p className={`text-sm font-bold truncate ${item.separado ? 'text-slate-400 line-through' : 'text-white'}`}>
                {item.nome_produto}
              </p>
              <p className="text-xs text-slate-500 mt-0.5">{item.sku || ''} · {Number(item.quantidade).toLocaleString('pt-BR')}x · {formatBRL(item.preco_unitario)}</p>
            </div>
            <p className="text-sm font-black text-white tabular-nums shrink-0">{formatBRL(item.subtotal)}</p>
          </div>
        ))}
      </div>
      {/* Total rodapé */}
      <div className="flex justify-between items-center pt-2 border-t border-slate-800">
        <span className="text-xs font-black text-slate-500 uppercase tracking-widest">Total</span>
        <span className="text-xl font-black text-white tabular-nums">{formatBRL(pedido.total)}</span>
      </div>
    </div>
  );

  // ── Página 2 — Ações / status específico ─────────────────────────────────
  const pageAcoes = (
    <div className="space-y-4">
      {/* Status atual */}
      <div className={`rounded-2xl p-4 border ${sColor.bg} ${sColor.border}`}>
        <p className="text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Status atual</p>
        <StatusBadge status={pedido.status} />
        {pedido.status === 'entregue' && (
          <p className="text-xs text-emerald-400 mt-2 font-bold">✓ Pedido finalizado com sucesso</p>
        )}
        {pedido.status === 'cancelado' && (
          <p className="text-xs text-rose-400 mt-2 font-bold">✗ Pedido cancelado</p>
        )}
      </div>

      {/* Fiscal — info do cliente (visível só na fase fiscal) */}
      {pedido.status === 'fiscal' && (
        <div className="bg-slate-900 border border-cyan-400/20 rounded-2xl p-4 space-y-3">
          <p className="text-xs font-black text-cyan-400 uppercase tracking-widest flex items-center gap-1.5"><FileText size={11} /> Dados Fiscais do Cliente</p>
          <div className="text-sm space-y-2">
            {[['CPF/CNPJ', pedido.cpf_cnpj || '—'], ['Cliente', pedido.cliente_nome || '—'], ['Total', formatBRL(pedido.total)]].map(([l, v]) => (
              <div key={l} className="flex justify-between">
                <span className="text-slate-400">{l}</span>
                <span className="font-bold text-white font-mono">{v}</span>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Cupom Fiscal — disponível em TODAS as fases ativas (após pagamento aprovado) */}
      {!['aguardando','cancelado'].includes(pedido.status) && (
        <div className="bg-slate-900 border border-cyan-400/20 rounded-2xl p-4 space-y-3">
          <div className="flex items-center justify-between">
            <p className="text-xs font-black text-cyan-400 uppercase tracking-widest flex items-center gap-1.5">
              <FileText size={11} /> Cupom Fiscal
            </p>
            {pedido.cupom_emitido_em && (
              <span className="inline-flex items-center gap-1 text-[10px] text-emerald-400 font-black uppercase">
                <Check size={10} /> Emitido
              </span>
            )}
          </div>

          {pedido.cupom_emitido_em && !cupomOpen ? (
            <>
              <div className="text-sm space-y-1.5">
                {pedido.cupom_numero && (
                  <div className="flex justify-between">
                    <span className="text-slate-400">Número</span>
                    <span className="font-bold text-white font-mono">{pedido.cupom_numero}</span>
                  </div>
                )}
                {pedido.cupom_chave && (
                  <div className="flex justify-between gap-2">
                    <span className="text-slate-400">Chave</span>
                    <span className="font-mono text-[11px] text-white break-all text-right">{pedido.cupom_chave}</span>
                  </div>
                )}
                <div className="flex justify-between">
                  <span className="text-slate-400">Emitido em</span>
                  <span className="font-bold text-white">{fmtDate(pedido.cupom_emitido_em)}</span>
                </div>
                {pedido.cupom_emitido_por_nome && (
                  <div className="flex justify-between">
                    <span className="text-slate-400">Por</span>
                    <span className="font-bold text-white">{pedido.cupom_emitido_por_nome}</span>
                  </div>
                )}
              </div>
              <button onClick={() => { setCupomOpen(true); setCupomNumero(pedido.cupom_numero || ''); setCupomChave(pedido.cupom_chave || ''); }}
                className="w-full py-2 bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded-xl text-slate-300 font-bold text-xs transition-colors">
                Re-emitir / Corrigir
              </button>
            </>
          ) : cupomOpen ? (
            <div className="space-y-3">
              <div>
                <label className="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1">Número do cupom</label>
                <input type="text" value={cupomNumero} onChange={e => setCupomNumero(e.target.value)} disabled={cupomSaving}
                  placeholder="Ex.: COO 000123"
                  className="w-full bg-slate-800 border border-slate-700 rounded-xl px-3 py-2 text-sm text-white font-mono focus:outline-none focus:border-cyan-500" />
              </div>
              <div>
                <label className="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1">Chave de acesso NFC-e (44 dígitos)</label>
                <input type="text" value={cupomChave} onChange={e => setCupomChave(e.target.value)} disabled={cupomSaving} maxLength={56}
                  placeholder="00000000000000000000000000000000000000000000"
                  className="w-full bg-slate-800 border border-slate-700 rounded-xl px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-cyan-500" />
                <p className="text-[10px] text-slate-500 mt-1">{cupomChave.replace(/\D/g, '').length}/44 dígitos</p>
              </div>
              <div className="grid grid-cols-2 gap-2">
                <button onClick={() => { setCupomOpen(false); setCupomNumero(''); setCupomChave(''); }} disabled={cupomSaving}
                  className="py-2.5 bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded-xl text-slate-400 font-black text-xs transition-colors">
                  Cancelar
                </button>
                <button onClick={emitirCupom} disabled={cupomSaving}
                  className="py-2.5 bg-cyan-500/20 hover:bg-cyan-500/30 border border-cyan-500/40 rounded-xl text-cyan-300 font-black text-xs transition-colors flex items-center justify-center gap-1.5 disabled:opacity-40">
                  {cupomSaving ? <RefreshCw size={12} className="animate-spin" /> : <Check size={12} />} Registrar
                </button>
              </div>
            </div>
          ) : (
            <button onClick={() => setCupomOpen(true)}
              className="w-full py-2.5 bg-cyan-500/10 hover:bg-cyan-500/20 border border-cyan-500/30 rounded-xl text-cyan-400 font-black text-xs transition-colors flex items-center justify-center gap-1.5">
              <FileText size={12} /> Emitir Cupom Fiscal
            </button>
          )}
          <p className="text-[10px] text-slate-500 leading-relaxed">
            Registro do cupom emitido no PDV/ECF — sem integração SEFAZ. Pode ser feito em qualquer fase pós-pagamento.
          </p>
        </div>
      )}

      {/* Separação — quem está separando */}
      {pedido.status === 'separacao' && (
        <div className="bg-slate-900 border border-blue-400/20 rounded-2xl p-4 space-y-3">
          <p className="text-xs font-black text-blue-400 uppercase tracking-widest flex items-center gap-1.5"><ClipboardList size={11} /> Separador Responsável</p>
          <SelectColaborador funcao="separador" value={separadorId} onChange={setSeparadorId} accentColor="cyan" />
          <p className="text-xs text-slate-500">Será registrado ao avançar para Embalagem.</p>
        </div>
      )}

      {/* Embalagem — quem vai embalar (selecionar antes de avançar de Separação) */}
      {nextS?.id === 'embalagem' && pedido.status === 'separacao' && (
        <div className="bg-slate-900 border border-purple-400/20 rounded-2xl p-4 space-y-3">
          <p className="text-xs font-black text-purple-400 uppercase tracking-widest flex items-center gap-1.5"><PackageOpen size={11} /> Embalador Responsável</p>
          <SelectColaborador funcao="embalador" value={embaladorId} onChange={(id, nome) => { setEmbaladorId(id); setEmbalador(nome || ''); }} accentColor="purple" />
          <p className="text-xs text-slate-500">Selecione o colaborador antes de avançar.</p>
        </div>
      )}

      {/* Auditoria — quem está auditando */}
      {pedido.status === 'auditoria' && (
        <div className="bg-slate-900 border border-orange-400/20 rounded-2xl p-4 space-y-3">
          <p className="text-xs font-black text-orange-400 uppercase tracking-widest flex items-center gap-1.5"><ShieldCheck size={11} /> Auditor Responsável</p>
          <SelectColaborador funcao="auditor" value={auditorId} onChange={setAuditorId} accentColor="orange" />
        </div>
      )}

      {/* Fiscal — responsável (além do bloco de cupom/NFe acima) */}
      {pedido.status === 'fiscal' && (
        <div className="bg-slate-900 border border-cyan-400/20 rounded-2xl p-4 space-y-3">
          <p className="text-xs font-black text-cyan-400 uppercase tracking-widest flex items-center gap-1.5"><FileText size={11} /> Fiscal Responsável</p>
          <SelectColaborador funcao="fiscal" value={fiscalId} onChange={setFiscalId} accentColor="cyan" />
        </div>
      )}

      {/* Expedição — responsável */}
      {pedido.status === 'expedicao' && (
        <div className="bg-slate-900 border border-teal-400/20 rounded-2xl p-4 space-y-3">
          <p className="text-xs font-black text-teal-400 uppercase tracking-widest flex items-center gap-1.5"><Truck size={11} /> Expedidor / Entregador</p>
          <SelectColaborador funcao="expedidor" value={expedidorId} onChange={(id, nome) => { setExpedidorId(id); setResponsavelEntrega(nome || ''); }} accentColor="teal" />
          <p className="text-xs text-slate-500">Modalidade: <span className="font-bold text-white capitalize">{pedido.tipo_entrega}</span></p>
        </div>
      )}

      {/* Auditoria */}
      {pedido.status === 'auditoria' && (
        <div className="bg-slate-900 border border-orange-400/20 rounded-2xl p-4 space-y-3">
          <p className="text-xs font-black text-orange-400 uppercase tracking-widest">Auditoria Final</p>
          <p className="text-xs text-slate-400">Confira código de barras, quantidades e validade antes de aprovar.</p>
          <textarea value={motivo} onChange={e => setMotivo(e.target.value)} rows={3}
            placeholder="Motivo da reprovação (opcional)..."
            className="w-full bg-slate-800 border border-slate-700 rounded-xl px-3 py-2 text-sm text-white focus:outline-none focus:border-orange-500 resize-none" />
          <button onClick={reprovar} disabled={saving}
            className="w-full py-3 bg-rose-500/20 hover:bg-rose-500/30 border border-rose-500/30 rounded-xl text-rose-400 font-black text-sm transition-colors flex items-center justify-center gap-2">
            <AlertCircle size={14} /> Reprovar — Voltar à Separação
          </button>
        </div>
      )}

      {/* Cancelamento */}
      {pedido.status !== 'cancelado' && pedido.status !== 'entregue' && (
        <div className="bg-slate-900 border border-slate-800 rounded-2xl p-4">
          <p className="text-xs font-black text-slate-500 uppercase tracking-widest mb-3">Zona de Risco</p>
          <button onClick={cancelar} disabled={saving}
            className="w-full py-3 bg-rose-500/10 hover:bg-rose-500/20 border border-rose-500/20 rounded-xl text-rose-400 font-black text-sm transition-colors flex items-center justify-center gap-2">
            <AlertCircle size={14} /> Cancelar Pedido
          </button>
        </div>
      )}
    </div>
  );

  const pages = [pageResumo, pageItens, pageAcoes];

  return createPortal(
    <div className="fixed inset-0 z-[100] bg-slate-950 flex flex-col overflow-hidden" style={{ width: '100vw', height: '100vh' }}>

        {/* ── Header ── */}
        <div className={`px-6 pt-5 pb-4 border-b border-slate-800 ${sColor.bg} shrink-0`}>
          <div className="max-w-5xl mx-auto w-full">
          <div className="flex items-start justify-between gap-3 mb-3">
            <div>
              <h3 className="text-xl font-black text-white tracking-tight">
                {pedido.protocolo || `Pedido #${pedido.id}`}
              </h3>
              <p className="text-xs text-slate-500 mt-0.5">{fmtDate(pedido.created_at)}</p>
            </div>
            <div className="flex items-center gap-2 shrink-0">
              <StatusBadge status={pedido.status} />
              <button
                onClick={() => imprimirPedido(pedido, itens)}
                title="Imprimir cupom do pedido"
                className="p-1.5 text-slate-500 hover:text-white hover:bg-slate-800 rounded-xl transition-colors"
              >
                <Printer size={18} />
              </button>
              <button onClick={onClose} className="p-1.5 text-slate-500 hover:text-white hover:bg-slate-800 rounded-xl transition-colors">
                <X size={18} />
              </button>
            </div>
          </div>

          {/* Barra de progresso do fluxo */}
          <div className="flex gap-1 overflow-x-auto scrollbar-hide mt-3">
            {STATUS_FLOW.filter(sf => sf.id !== 'cancelado').map((sf, i) => {
              const done  = idx > i;
              const atual = idx === i;
              const c     = COLOR_MAP[sf.color];
              return (
                <div key={sf.id} className="flex items-center gap-1 shrink-0">
                  <div className={`flex items-center gap-1 px-2 py-1 rounded-lg text-[10px] font-black transition-all
                    ${atual ? `${c.badge} ${c.border} border` : done ? 'text-emerald-400' : 'text-slate-700'}`}>
                    {done ? <Check size={9} /> : <sf.icon size={9} />}
                    <span>{sf.label}</span>
                  </div>
                  {i < STATUS_FLOW.length - 2 && <div className={`w-2 h-px ${done ? 'bg-emerald-700' : 'bg-slate-800'}`} />}
                </div>
              );
            })}
          </div>
          </div>{/* /max-w-5xl */}
        </div>

        {/* ── Tabs de página ── */}
        <div className="flex border-b border-slate-800 shrink-0">
          {PAGES.map((label, i) => (
            <button key={i} onClick={() => setPage(i)}
              className={`flex-1 py-3 text-xs font-black uppercase tracking-widest transition-colors
                ${page === i ? 'text-white border-b-2 border-cyan-400' : 'text-slate-600 hover:text-slate-400'}`}>
              {label}
              {i === 1 && itens.length > 0 && (
                <span className={`ml-1.5 px-1.5 py-0.5 rounded-full text-[10px] ${page === i ? 'bg-cyan-400/20 text-cyan-400' : 'bg-slate-800 text-slate-500'}`}>
                  {itens.length}
                </span>
              )}
            </button>
          ))}
        </div>

        {/* ── Conteúdo scrollável ── */}
        <div className="flex-1 overflow-y-auto p-6 max-w-5xl w-full mx-auto">
          {loading ? (
            <div className="space-y-3 animate-pulse">
              {[...Array(4)].map((_, i) => <div key={i} className="h-20 bg-slate-800 rounded-2xl" />)}
            </div>
          ) : pages[page]}
        </div>

        {/* ── Rodapé fixo ── */}
        <div className="shrink-0 border-t border-slate-800 px-6 py-4 bg-slate-950/95 backdrop-blur-sm">
          <div className="flex items-center gap-3 max-w-5xl mx-auto w-full">
            {/* Navegação entre páginas */}
            <button onClick={() => setPage(p => Math.max(0, p - 1))} disabled={page === 0}
              className="px-4 py-2.5 bg-slate-900 border border-slate-800 rounded-xl text-sm font-black text-slate-400 hover:text-white disabled:opacity-30 transition-colors shrink-0">
              ← Anterior
            </button>

            {/* Indicadores de página */}
            <div className="flex gap-1.5 flex-1 justify-center">
              {PAGES.map((_, i) => (
                <button key={i} onClick={() => setPage(i)}
                  className={`h-1.5 rounded-full transition-all ${i === page ? 'w-6 bg-cyan-400' : 'w-1.5 bg-slate-700 hover:bg-slate-600'}`} />
              ))}
            </div>

            {/* Botão primário — avançar status */}
            {canAdvance ? (
              <button onClick={avancar}
                disabled={saving || advanceBlocked}
                title={advanceBlocked ? `Antes de avançar, ${advanceBlockMsg}.` : ''}
                className={`flex-1 max-w-xs py-2.5 rounded-xl font-black text-sm transition-colors flex items-center justify-center gap-2 disabled:opacity-40
                  ${COLOR_MAP[STATUS_FLOW.find(x => x.id === nextS!.id)?.color || 'slate'].badge}
                  border ${COLOR_MAP[STATUS_FLOW.find(x => x.id === nextS!.id)?.color || 'slate'].border}`}>
                {saving ? <RefreshCw size={15} className="animate-spin" /> : nextS && <nextS.icon size={15} />}
                Avançar para {nextS?.label}
                {advanceBlocked && <span className="text-[10px] opacity-60">({advanceBlockMsg})</span>}
              </button>
            ) : (
              <button onClick={() => setPage(p => Math.min(PAGES.length - 1, p + 1))} disabled={page === PAGES.length - 1}
                className="px-4 py-2.5 bg-slate-900 border border-slate-800 rounded-xl text-sm font-black text-slate-400 hover:text-white disabled:opacity-30 transition-colors shrink-0">
                Próximo →
              </button>
            )}
          </div>
        </div>

    </div>,
    document.body
  );
}

// ─── Contadores ───────────────────────────────────────────────────────────────

function ContadorCard({ label, value, icon: Icon, color, onClick, active }: {
  label: string; value: number; icon: any; color: string; onClick: () => void; active: boolean;
}) {
  const c = COLOR_MAP[color] || COLOR_MAP.slate;
  return (
    <button onClick={onClick}
      className={`flex-1 min-w-28 p-4 rounded-2xl border transition-all text-left ${active ? `${c.bg} ${c.border}` : 'bg-slate-900/40 border-slate-800 hover:border-slate-700'}`}>
      <div className={`mb-2 ${active ? c.text : 'text-slate-500'}`}><Icon size={18} /></div>
      <p className="text-2xl font-black text-white tabular-nums">{value}</p>
      <p className={`text-[10px] font-black uppercase tracking-widest mt-0.5 ${active ? c.text : 'text-slate-600'}`}>{label}</p>
    </button>
  );
}

// ─── Page ─────────────────────────────────────────────────────────────────────

export default function PedidosPage() {
  const [pedidos, setPedidos]           = useState<any[]>([]);
  const [contadores, setContadores]     = useState<any>({});
  const [loading, setLoading]           = useState(true);
  const [statusFiltro, setStatusFiltro] = useState('aguardando');
  const [drawer, setDrawer]             = useState<any>(null);
  const [periodo, setPeriodo]           = useState<'hoje'|'7d'|'30d'|''>('hoje');

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const params: any = { status: statusFiltro || undefined };
      if (periodo === 'hoje') { params.from = new Date().toISOString().slice(0,10); params.to = params.from; }
      else if (periodo === '7d') { const d = new Date(); d.setDate(d.getDate()-7); params.from = d.toISOString().slice(0,10); }
      else if (periodo === '30d') { const d = new Date(); d.setDate(d.getDate()-30); params.from = d.toISOString().slice(0,10); }
      const [ped, cnt] = await Promise.all([
        CotacaoService.listPedidos(params),
        CotacaoService.contadores(),
      ]);
      setPedidos(ped);
      setContadores(cnt);
    } catch (e) { console.error(e); }
    finally { setLoading(false); }
  }, [statusFiltro, periodo]);

  useEffect(() => { load(); }, [load]);

  // Auto-refresh a cada 30s
  useEffect(() => {
    const id = setInterval(load, 30_000);
    return () => clearInterval(id);
  }, [load]);

  const CONTADORES = [
    { id: 'aguardando', label: 'Aguardando', icon: Clock,        color: 'yellow',  value: contadores.aguardando ?? 0 },
    { id: 'separacao',  label: 'Separação',  icon: ClipboardList,color: 'blue',    value: contadores.em_separacao ?? 0 },
    { id: 'embalagem',  label: 'Embalagem',  icon: PackageOpen,  color: 'purple',  value: contadores.em_embalagem ?? 0 },
    { id: 'auditoria',  label: 'Auditoria',  icon: ShieldCheck,  color: 'orange',  value: contadores.em_auditoria ?? 0 },
    { id: 'expedicao',  label: 'Expedição',  icon: Truck,        color: 'teal',    value: contadores.prontos ?? 0 },
    { id: 'entregue',   label: 'Entregues',  icon: CheckCircle2, color: 'emerald', value: contadores.entregues ?? 0 },
  ];

  return (
    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
      <header className="flex flex-wrap justify-between items-start gap-4">
        <div>
          <h2 className="text-3xl font-black text-white tracking-tighter flex items-center gap-3">
            <ShoppingBag className="text-cyan-400" size={28} /> Pedidos
          </h2>
          <p className="text-slate-400 mt-1 font-medium">Fluxo operacional · separação · embalagem · auditoria · expedição</p>
        </div>
        <button onClick={load} className="flex items-center gap-2 p-2 bg-slate-900 border border-slate-800 rounded-xl text-slate-400 hover:text-white transition-colors">
          <RefreshCw size={16} className={loading ? 'animate-spin' : ''} />
        </button>
      </header>

      {/* Contadores / filtros */}
      <div className="flex gap-3 overflow-x-auto pb-1">
        {CONTADORES.map(c => (
          <ContadorCard key={c.id} label={c.label} value={c.value} icon={c.icon} color={c.color}
            active={statusFiltro === c.id} onClick={() => setStatusFiltro(c.id)} />
        ))}
      </div>

      {/* Filtros complementares — DASH-03 */}
      <div className="flex gap-3 items-center flex-wrap">
        <div className="relative">
          <select value={statusFiltro} onChange={e => setStatusFiltro(e.target.value)}
            className="bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-sm text-slate-300 focus:outline-none focus:border-cyan-500 appearance-none cursor-pointer pr-8">
            <option value="" style={{ background: '#0f172a', color: '#cbd5e1' }}>Todos os status</option>
            {STATUS_FLOW.map(s => <option key={s.id} value={s.id} style={{ background: '#0f172a', color: '#cbd5e1' }}>{s.label}</option>)}
          </select>
          <ChevronDown size={14} className="absolute right-2 top-1/2 -translate-y-1/2 text-slate-500 pointer-events-none" />
        </div>
        <div className="flex bg-slate-900 border border-slate-800 rounded-xl overflow-hidden">
          {([['hoje','Hoje'],['7d','7 dias'],['30d','30 dias'],['','Todos']] as const).map(([v, l]) => (
            <button key={v} onClick={() => setPeriodo(v)}
              className={`px-3 py-2 text-xs font-black transition-colors ${periodo === v ? 'bg-cyan-500/20 text-cyan-400' : 'text-slate-500 hover:text-slate-300'}`}>
              {l}
            </button>
          ))}
        </div>
        <span className="text-xs text-slate-600">{pedidos.length} pedido{pedidos.length !== 1 ? 's' : ''}</span>
      </div>

      {/* Lista */}
      <div className="space-y-3">
        {loading ? (
          [...Array(5)].map((_, i) => (
            <div key={i} className="bg-slate-900/40 border border-slate-800 rounded-2xl p-5 animate-pulse flex gap-4">
              <div className="h-10 w-10 bg-slate-800 rounded-xl" />
              <div className="flex-1 space-y-2">
                <div className="h-4 w-32 bg-slate-800 rounded" />
                <div className="h-3 w-48 bg-slate-800/60 rounded" />
              </div>
            </div>
          ))
        ) : pedidos.length === 0 ? (
          <div className="bg-slate-900/40 border border-slate-800 rounded-3xl p-16 text-center">
            <CheckCircle2 size={40} className="text-slate-700 mx-auto mb-3" />
            <p className="text-slate-600 text-sm italic">Nenhum pedido neste status.</p>
          </div>
        ) : (
          pedidos.map(p => {
            const s = STATUS_FLOW.find(x => x.id === p.status);
            const c = s ? COLOR_MAP[s.color] : COLOR_MAP.slate;
            return (
              <button key={p.id} onClick={() => setDrawer(p)}
                className={`w-full text-left bg-slate-900/40 border rounded-2xl p-5 hover:border-slate-600 transition-all group flex items-center gap-4 ${c.border}`}>
                <div className={`w-11 h-11 rounded-xl flex items-center justify-center shrink-0 ${c.bg} border ${c.border}`}>
                  {s && <s.icon size={18} className={c.text} />}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-3 mb-1 flex-wrap">
                    <span className="font-black text-white">{p.protocolo || `Pedido #${p.id}`}</span>
                    <StatusBadge status={p.status} />
                    {p.cliente_tipo && (
                      <span className={`text-[10px] font-black uppercase ${p.cliente_tipo==='PJ' ? 'text-purple-400' : 'text-cyan-400'}`}>
                        {p.cliente_tipo}
                      </span>
                    )}
                  </div>
                  <p className="text-sm text-slate-400 truncate">{p.cliente_nome || 'Sem cadastro'}</p>
                  <p className="text-xs text-slate-600 mt-0.5">{fmtDate(p.created_at)} · {p.tipo_entrega}</p>
                </div>
                <div className="text-right shrink-0">
                  <p className="font-black text-white tabular-nums text-lg">{formatBRL(p.total)}</p>
                  <PagtoLabel value={p.forma_pagto} compact />
                </div>
              </button>
            );
          })
        )}
      </div>

      {drawer && (
        <PedidoDrawer
          pedido={drawer}
          onClose={() => setDrawer(null)}
          onUpdate={load}
        />
      )}
    </div>
  );
}
