import React, { useState, useEffect, useMemo, useRef, Fragment } from 'react';
import { createRoot } from 'react-dom/client';
import {
  Plus, Trash2, ChevronLeft, ChevronRight, ChevronDown, ChevronUp, TrendingUp, TrendingDown,
  Wallet, BarChart3, Megaphone, Check, X, Receipt, Zap, Loader2, RefreshCw,
  PieChart, Users, Percent, Sparkles, Pencil, Package, Truck, Award, Calendar,
  Save, Download, Upload, Cloud, CloudOff, LogOut, LockKeyhole, Database, Search, CircleDollarSign, Copy, ClipboardList,
  Store, ShoppingCart, FileText, Link2, ShieldCheck, KeyRound, ExternalLink, Printer,
} from 'https://esm.sh/lucide-react@0.468.0?external=react';

/* ---------- helpers ---------- */
const brl = (n) => new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(Number(n) || 0);
const brlMsg = (n) => brl(n).replace(/\s/g, '');
const brlMsgCurto = (n) => {
  const v = Number(n) || 0;
  const opts = Number.isInteger(v)
    ? { minimumFractionDigits: 0, maximumFractionDigits: 0 }
    : { minimumFractionDigits: 2, maximumFractionDigits: 2 };
  return `R$${new Intl.NumberFormat('pt-BR', opts).format(v)}`;
};
const num = (n, d = 1) => new Intl.NumberFormat('pt-BR', { minimumFractionDigits: d, maximumFractionDigits: d }).format(Number(n) || 0);
const pct = (n) => new Intl.NumberFormat('pt-BR', { style: 'percent', minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(Number(n) || 0);
const parseBRL = (s) => {
  if (typeof s === 'number') return s;
  if (!s) return 0;
  let t = String(s).trim().replace(/[^\d.,-]/g, '');
  if (t.includes('.') && t.includes(',')) t = t.replace(/\./g, '').replace(',', '.');
  else if (t.includes(',')) t = t.replace(',', '.');
  const v = parseFloat(t);
  return isNaN(v) ? 0 : v;
};
const MESES = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
const monthLabel = (ym) => { const [y, m] = ym.split('-').map(Number); return `${MESES[m - 1]} ${y}`; };
const shiftMonth = (ym, d) => { let [y, m] = ym.split('-').map(Number); m += d; while (m < 1) { m += 12; y--; } while (m > 12) { m -= 12; y++; } return `${y}-${String(m).padStart(2, '0')}`; };
const lastDay = (ym) => { const [y, m] = ym.split('-').map(Number); return String(new Date(y, m, 0).getDate()).padStart(2, '0'); };
const todayISO = () => { const d = new Date(); return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`; };
const yesterdayISO = () => { const d = new Date(); d.setDate(d.getDate() - 1); return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`; };
const currentMonth = () => todayISO().slice(0, 7);
const dISO = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
const brDate = (iso) => iso ? `${iso.slice(8, 10)}/${iso.slice(5, 7)}/${iso.slice(0, 4)}` : '';
const uid = () => Math.random().toString(36).slice(2, 10);
const norm = (s) => (s || '').toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/\s+/g, ' ').trim();
const mesesEntre = (from, to) => {
  const out = []; let cur = from.slice(0, 7); const end = to.slice(0, 7);
  let guard = 0;
  while (cur <= end && guard < 240) { out.push(cur); cur = shiftMonth(cur, 1); guard++; }
  return out;
};
const diasEntre = (from, to) => {
  const out = []; if (!from || !to) return out;
  const [fy,fm,fd] = from.split('-').map(Number); const [ty,tm,td] = to.split('-').map(Number);
  let d = new Date(fy, fm - 1, fd); const end = new Date(ty, tm - 1, td); let guard = 0;
  while (d <= end && guard < 370) { out.push(dISO(d)); d.setDate(d.getDate() + 1); guard++; }
  return out;
};

const LOJAS_SUGERIDAS = ['Essential Estofados', 'Luna Comfort', 'Empório Sofás'];
// Loja principal usada como padrão para dados antigos (o painel nasceu só da Essential).
const LOJA_PADRAO = { id: 'essential', nome: 'Essential Estofados' };
const LOJAS_SEED = [
  LOJA_PADRAO,
  { id: 'emporio', nome: 'Empório Sofás' },
  { id: 'luna', nome: 'Luna Comfort' },
];

// Regras operacionais por loja. A Essential mantém exatamente a lógica anterior.
const TAXAS_LOJA = {
  debito: 1.09,
  1: 3.49, 2: 4.49, 3: 5.29, 4: 5.99, 5: 6.49, 6: 7.49,
  7: 8.49, 8: 8.99, 9: 9.99, 10: 10.49, 11: 10.99, 12: 10.99,
};
const TAXAS_VENDEDOR = {
  debito: 2.69,
  1: 2.69, 2: 4.59, 3: 5.71, 4: 6.83, 5: 7.95, 6: 9.07,
  7: 10.19, 8: 11.31, 9: 12.43, 10: 13.55, 11: 14.67, 12: 15.79,
};
const EMPORIO_MODELOS = [
  { id: 'emp-new-york-180', nome: 'New York 1.80m', custo: 680, comissao: 85, fornecedor: 'Fornecedor Empório' },
  { id: 'emp-new-york-2m', nome: 'New York 2m', custo: 680, comissao: 85, precoBaseNatan: 1000, fornecedor: 'Fornecedor Empório' },
  // New York Premium: custo do fornecedor = R$750 e comissão do Natan = R$200 fixa.
  // A taxa da maquininha é calculada e descontada separadamente no financeiro da loja.
  { id: 'emp-new-york-premium', nome: 'New York Premium', custo: 750, comissao: 200, comissaoFixa: true, fornecedor: 'Fornecedor Empório' },
  { id: 'emp-texas-170', nome: 'Texas 1.70m', custo: 550, comissao: 50, fornecedor: 'Fornecedor Empório' },
  { id: 'emp-texas-2m', nome: 'Texas 2m', custo: 550, comissao: 100, fornecedor: 'Fornecedor Empório' },
];
const LUNA_MODELOS = [
  { id: 'luna-cama-casal-7', nome: 'Cama Casal 7cm', custo: 200, fornecedor: 'FG Colchões' },
  { id: 'luna-cama-casal-12', nome: 'Cama Casal 12cm', custo: 300, fornecedor: 'FG Colchões' },
  { id: 'luna-cama-solteiro-7', nome: 'Cama Solteiro 7cm', custo: 190, fornecedor: 'FG Colchões' },
  { id: 'luna-cama-solteiro-aux-7', nome: 'Cama Solteiro com auxiliar 7cm', custo: 360, fornecedor: 'FG Colchões' },
  { id: 'luna-base-casal', nome: 'Base Casal', custo: 170, fornecedor: 'FG Colchões' },
  { id: 'luna-base-solteiro', nome: 'Base Solteiro', custo: 140, fornecedor: 'FG Colchões' },
  { id: 'luna-base-casal-bau', nome: 'Base Casal Baú', custo: 400, fornecedor: 'FG Colchões' },
  { id: 'luna-puff-casal', nome: 'Puff Casal', custo: 160, fornecedor: 'FG Colchões' },
  { id: 'luna-cabeceira', nome: 'Cabeceira', custo: 110, fornecedor: 'FG Colchões' },
  { id: 'luna-colchao-bonnel-solteiro', nome: 'Colchão Bonnel Solteiro', custo: 290, fornecedor: 'FG Colchões' },
  { id: 'luna-colchao-pillow-casal', nome: 'Colchão Bonnel/Pillowtop Casal', custo: 400, fornecedor: 'FG Colchões' },
  { id: 'luna-base-bau-casal-bip', nome: 'Base box baú casal bipartido', custo: 700, fornecedor: 'FG Colchões' },
  { id: 'luna-base-bau-solteiro', nome: 'Base box baú solteiro', custo: 369, fornecedor: 'FG Colchões' },
  { id: 'luna-base-bau-bip', nome: 'Base box baú bipartido', custo: 300, fornecedor: 'FG Colchões' },
  { id: 'luna-cama-box-casal-avulsa', nome: 'Cama Box casal (base+colchão)', custo: 570, fornecedor: 'FG Colchões' },
];
// Camas do fornecedor FG também podem ser vendidas pela Empório Sofás.
// Para essas camas: comissão do Natan = R$50 fixa; frete segue a mesma Tabela 2 da Luna;
// taxas de cartão do lucro geral seguem a tabela oficial já usada pela Luna/Empório.
// Sofás da Empório continuam com as regras atuais, sem alteração.
const EMPORIO_CAMA_FG_MODELOS = [
  { id: 'emp-fg-cama-casal-7', nome: 'Cama Casal 7cm', custo: 200, comissao: 50, fornecedor: 'FG Colchões', tipoProduto: 'cama_fg' },
  { id: 'emp-fg-cama-casal-12', nome: 'Cama Casal 12cm', custo: 300, comissao: 50, fornecedor: 'FG Colchões', tipoProduto: 'cama_fg' },
  { id: 'emp-fg-cama-solteiro-7', nome: 'Cama Solteiro 7cm', custo: 190, comissao: 50, fornecedor: 'FG Colchões', tipoProduto: 'cama_fg' },
  { id: 'emp-fg-cama-solteiro-aux-7', nome: 'Cama Solteiro com auxiliar 7cm', custo: 360, comissao: 50, fornecedor: 'FG Colchões', tipoProduto: 'cama_fg' },
  // O custo da Cama Casal 14cm ainda não foi informado. O painel reconhece a ficha,
  // aplica frete/comissão corretamente e deixa o custo para conferência manual.
  { id: 'emp-fg-cama-casal-14', nome: 'Cama Casal 14cm', custo: 0, comissao: 50, fornecedor: 'FG Colchões', tipoProduto: 'cama_fg', custoPendente: true },
  { id: 'emp-fg-cama-outro', nome: 'Cama FG (outro modelo)', custo: 0, comissao: 50, fornecedor: 'FG Colchões', tipoProduto: 'cama_fg', custoPendente: true },
];
const FRETE_LUNA_T1 = [
  [10,15,100],[20,25,100],[26,29,100],[30,39,100],[40,49,130],[50,55,110],[56,58,120],[60,62,110],
  [63,68,120],[70,73,100],[74,76,100],[77,79,120],[80,85,100],[86,89,100],[90,93,100],[94,99,100],
];
const FRETE_LUNA_T2 = [
  [10,15,90],[20,25,80],[26,29,90],[30,39,80],[40,49,110],[50,55,80],[56,58,120],[60,62,110],
  [63,68,120],[70,73,80],[74,76,90],[77,79,120],[80,85,80],[86,89,100],[90,93,90],[94,99,100],
];
const HISTORICO_AGOSTO = [
  ...[
    [1,974.77,1821.95,910],[4,380,0,0],[5,200,0,0],[7,1467.93,0,0],[8,622.16,1451.88,406],[10,600,315.58,0],
    [11,200,0,0],[12,645.29,0,0],[13,600,481.71,0],[14,323,0,0],[15,466.86,0,0],[16,0,689.71,482],
    [17,740.41,0,0],[18,100,0,0],[19,420,0,0],[20,200,0,0],[22,1253.08,1092,755],
  ].map(([dia,lucroBase,ads,vendedor]) => ({ id:`hist-emporio-2026-08-${String(dia).padStart(2,'0')}`, lojaId:'emporio', data:`2026-08-${String(dia).padStart(2,'0')}`, lucroBase, ads, vendedor, resultado: lucroBase-ads-vendedor, origem:'Controle_Emporio_Sofas_Final_ATUALIZADO.xlsx' })),
  ...[
    [1,342.65,0,0],[5,218,0,0],[6,119,0,0],[7,439.47,0,0],[8,386,0,0],[10,228,0,0],[11,160,0,0],[12,505,0,0],
    [13,89,0,0],[14,188,0,0],[15,0,1897,0],[18,189.17,0,0],[19,79,0,0],[20,119,0,0],[21,436.46,0,0],[22,416.46,0,0],
  ].map(([dia,lucroBase,ads,vendedor]) => ({ id:`hist-luna-2026-08-${String(dia).padStart(2,'0')}`, lojaId:'luna', data:`2026-08-${String(dia).padStart(2,'0')}`, lucroBase, ads, vendedor, resultado: lucroBase-ads-vendedor, origem:'Controle_Luna.Comfort_Final.xlsx' })),
];
const PAGAMENTO_PESSOA = {
  emporio: { vendedor: 'Natan', freteiro: 'Rogério' },
  luna: { vendedor: 'Douglas', freteiro: 'Entregadores Luna' },
};
const LUNA_ENTREGADORES = ['Rogério', 'Tarcísio', 'Goldstar', 'FG'];
const LUNA_ENTREGADORES_FRETE = ['Rogério', 'Tarcísio', 'Goldstar'];
const LUNA_RECEBEDORES = [
  { id: 'luna', nome: 'Luna Comfort' },
  { id: 'fg', nome: 'FG' },
];
const taxaPagamentoPct = (forma, parcelas, tabela = TAXAS_LOJA) => {
  if (forma === 'debito') return Number(tabela.debito) || 0;
  if (forma !== 'credito') return 0;
  const p = Math.min(12, Math.max(1, Number(parcelas) || 1));
  return Number(tabela[p]) || 0;
};
// A calculadora dos vendedores cobra a taxa arredondando o valor da taxa para cima
// no centavo (ex.: R$1.134,16 × 6,83% = R$77,463... => R$77,47).
// Isso reproduz os valores líquidos mostrados no app da maquininha.
const valorTaxaVendedor = (bruto, pct) => {
  const taxaBruta = (Number(bruto) || 0) * (Number(pct) || 0) / 100;
  return Math.ceil((taxaBruta - 1e-9) * 100) / 100;
};

// Empório Sofás — regra do Natan:
// O valor cobrado do cliente no cartão já contém o acréscimo do parcelamento.
// Para descobrir o extra real do Natan, primeiro retiramos a taxa da TABELA DO VENDEDOR
// daquele parcelamento e só então comparamos o líquido restante com o preço normal do modelo.
// Natan recebe: comissão-base + 50% do que SOBRAR acima do preço normal depois da taxa.
// Ex.: New York 2m, R$1.182,73 em 10x -> líquido da tabela do vendedor ~R$1.022,47;
// base normal R$1.000,00 -> extra líquido ~R$22,47 -> metade ~R$11,24 + R$85 = ~R$96,24.
// O lucro/faturamento geral da loja continua usando exclusivamente TAXAS_LOJA (primeiro print).
const calculoComissaoNatan = (bruto, forma, parcelas, comissaoBase = 0, valorNormalPagamento = 0) => {
  const valor = Number(bruto) || 0;
  const base = Number(comissaoBase) || 0;
  const normal = Number(valorNormalPagamento) || 0;
  const p = Math.min(12, Math.max(1, Number(parcelas) || 1));
  const taxaAtual = forma === 'credito' ? taxaPagamentoPct('credito', p, TAXAS_VENDEDOR) : (forma === 'debito' ? taxaPagamentoPct('debito', 1, TAXAS_VENDEDOR) : 0);
  const taxaValor = taxaAtual > 0 ? valorTaxaVendedor(valor, taxaAtual) : 0;
  const valorLiquidoVendedor = Math.max(0, valor - taxaValor);
  const parcelado = forma === 'credito' && p > 1;
  const acrescimoParcelamento = parcelado && normal > 0 ? Math.max(0, valorLiquidoVendedor - normal) : 0;
  const extraNatan = acrescimoParcelamento / 2;
  const total = base + extraNatan;
  return { total, base, extraNatan, acrescimoParcelamento, valorNormalPagamento: normal, taxaAtual, taxaValor, valorLiquidoVendedor };
};
const calculoComissaoNatanModelo = (bruto, forma, parcelas, regra, valorNormalPagamento = 0) => {
  const base = Number(regra?.comissao) || 0;
  if (!regra?.comissaoFixa) return calculoComissaoNatan(bruto, forma, parcelas, base, valorNormalPagamento);
  const valor = Number(bruto) || 0;
  const p = Math.min(12, Math.max(1, Number(parcelas) || 1));
  const taxaAtual = forma === 'credito' ? taxaPagamentoPct('credito', p, TAXAS_VENDEDOR) : (forma === 'debito' ? taxaPagamentoPct('debito', 1, TAXAS_VENDEDOR) : 0);
  const taxaValor = taxaAtual > 0 ? valorTaxaVendedor(valor, taxaAtual) : 0;
  return {
    total: base,
    base,
    extraNatan: 0,
    acrescimoParcelamento: 0,
    valorNormalPagamento: Number(valorNormalPagamento) || 0,
    taxaAtual,
    taxaValor,
    valorLiquidoVendedor: Math.max(0, valor - taxaValor),
    fixa: true,
  };
};
const prefixoCep = (cep) => { const d = String(cep || '').replace(/\D/g, ''); return d.length >= 3 ? Number(d.slice(0,3)) : null; };
const freteFaixa = (cep, tabela) => {
  const p = prefixoCep(cep); if (p === null) return null;
  const f = tabela.find(([a,b]) => p >= a && p <= b); return f ? f[2] : null;
};
const normalizarNomeModelo = (s) => norm(String(s || '').replace(/\*/g,'').replace(/[_–—]/g,' '));
const regraModeloEmporio = (nome) => {
  const n = normalizarNomeModelo(nome);
  if (n.includes('new york') && n.includes('premium')) return EMPORIO_MODELOS[2];
  if (n.includes('new york') && (n.includes('1.80') || n.includes('1,80') || n.includes('1 80'))) return EMPORIO_MODELOS[0];
  if (n.includes('new york') && (n.includes('2m') || n.includes('2 m'))) return EMPORIO_MODELOS[1];
  if (n.includes('texas') && (n.includes('1.70') || n.includes('1,70') || n.includes('1 70'))) return EMPORIO_MODELOS[3];
  if (n.includes('texas')) return EMPORIO_MODELOS[4];
  if (n.includes('cama') || n.includes('conjugada')) {
    if (n.includes('solteiro') && n.includes('auxiliar') && n.includes('7')) return EMPORIO_CAMA_FG_MODELOS[3];
    if (n.includes('solteiro') && n.includes('7')) return EMPORIO_CAMA_FG_MODELOS[2];
    if (n.includes('casal') && n.includes('14')) return EMPORIO_CAMA_FG_MODELOS[4];
    if (n.includes('casal') && n.includes('12')) return EMPORIO_CAMA_FG_MODELOS[1];
    if (n.includes('casal') && n.includes('7')) return EMPORIO_CAMA_FG_MODELOS[0];
    return EMPORIO_CAMA_FG_MODELOS[5];
  }
  return null;
};
const modeloEhCamaFgEmporio = (m) => Boolean(m && (m.tipoProduto === 'cama_fg' || (norm(m.fornecedor).includes('fg') && /\bcama\b/.test(normalizarNomeModelo(m.nome)))));
const regraModeloLuna = (nome) => {
  const n = normalizarNomeModelo(nome);
  if (n.includes('cama box') && n.includes('conjugada') && n.includes('solteiro') && n.includes('7')) return LUNA_MODELOS[2];
  if (n.includes('conjugada') && n.includes('solteiro') && n.includes('7')) return LUNA_MODELOS[2];
  if (n.includes('conjugada') && n.includes('casal') && n.includes('12')) return LUNA_MODELOS[1];
  if (n.includes('conjugada') && n.includes('12')) return LUNA_MODELOS[1];
  if ((n.includes('cama box') || n.includes('conjugada')) && n.includes('7')) return LUNA_MODELOS[0];
  if (n.includes('ortopillow')) return LUNA_MODELOS[10];
  if (n.includes('pillowtop') && n.includes('casal')) return LUNA_MODELOS[10];
  if (n.includes('bonnel') && n.includes('solteiro')) return LUNA_MODELOS[9];
  if (n.includes('base box bau casal bipartido') || (n.includes('base') && n.includes('bau') && n.includes('casal') && n.includes('bipartido'))) return LUNA_MODELOS[11];
  if (n.includes('base box bau bipartido') || (n.includes('base') && n.includes('bau') && n.includes('bipartido'))) return LUNA_MODELOS[13];
  if (n.includes('base box bau solteiro') || (n.includes('base') && n.includes('bau') && n.includes('solteiro'))) return LUNA_MODELOS[12];
  if (n.includes('cama box casal') && (n.includes('base+colchao') || n.includes('base colchao'))) return LUNA_MODELOS[14];
  if (n.includes('base casal bau') || (n.includes('base') && n.includes('casal') && n.includes('bau'))) return LUNA_MODELOS[6];
  if (n.includes('base solteiro')) return LUNA_MODELOS[5];
  if (n.includes('base casal')) return LUNA_MODELOS[4];
  if (n.includes('puff') && n.includes('casal')) return LUNA_MODELOS[7];
  if (n.includes('cabeceira')) return LUNA_MODELOS[8];
  if (n.includes('solteiro') && n.includes('auxiliar') && n.includes('7')) return LUNA_MODELOS[3];
  return null;
};
const PLATAFORMAS = ['Instagram', 'Facebook', 'WhatsApp', 'Outro'];
const ORIGENS = ['Indicação', 'Cliente antigo', 'Passou na loja', 'Outro'];
const ADX = '__ad_nao_rastreado__';
const ORG = '__organico__';
const DEFAULT_SEC = ['desempenho', 'ajustes', 'windsor', 'comparativo', 'vendas', 'campanhas'];
const MARKETPLACES = ['Magalu', 'Shopee'];
const MARKETPLACE_STATUS = [
  { value: 'pendente', label: 'Aguardando pagamento' },
  { value: 'pago', label: 'Pago' },
  { value: 'enviado', label: 'Enviado' },
  { value: 'entregue', label: 'Entregue' },
  { value: 'cancelado', label: 'Cancelado' },
  { value: 'devolvido', label: 'Devolvido / reembolsado' },
];
const MARKETPLACE_STATUS_VALIDOS = new Set(['pago', 'enviado', 'entregue']);
const STATUS_PEDIDO = [
  { value: 'pendente', label: 'Pedido recebido' },
  { value: 'confirmado', label: 'Confirmado com cliente' },
  { value: 'entregue', label: 'Entregue' },
  { value: 'cancelado', label: 'Cancelado' },
  { value: 'devolvido', label: 'Devolvido' },
];
const STATUS_INFO = {
  pendente: { label: 'Pedido recebido', cls: 'bg-amber-50 text-amber-700 border-amber-200' },
  confirmado: { label: 'Confirmado', cls: 'bg-sky-50 text-sky-700 border-sky-200' },
  entregue: { label: 'Entregue', cls: 'bg-emerald-50 text-emerald-700 border-emerald-200' },
  cancelado: { label: 'Cancelado', cls: 'bg-rose-50 text-rose-700 border-rose-200' },
  devolvido: { label: 'Devolvido', cls: 'bg-slate-100 text-slate-600 border-slate-200' },
};
const statusVenda = (v) => {
  const raw = norm(String(v?.status || ''));
  if (!raw) return 'entregue'; // registros antigos continuam como entregues
  if (['em_rota', 'em rota'].includes(raw)) return 'confirmado';
  if (['cancelado', 'cancelada', 'cancelled', 'canceled'].includes(raw)) return 'cancelado';
  if (['devolvido', 'devolvida', 'devolucao', 'devolução'].includes(raw)) return 'devolvido';
  if (['confirmado', 'confirmada', 'confirmado com cliente'].includes(raw)) return 'confirmado';
  if (['pendente', 'pedido recebido', 'recebido'].includes(raw)) return 'pendente';
  if (['entregue', 'entregues'].includes(raw)) return 'entregue';
  return raw;
};
const vendaEntregue = (v) => statusVenda(v) === 'entregue';
const vendaCancelada = (v) => ['cancelado', 'devolvido'].includes(statusVenda(v));
const vendaPendente = (v) => {
  if (vendaCancelada(v) || vendaEntregue(v)) return false;
  return ['pendente', 'confirmado'].includes(statusVenda(v));
};
// Mantém a mesma regra de pendência na contagem e na listagem. A data é
// normalizada para evitar que valores vindos do banco com horário/espaços
// sejam excluídos mesmo aparecendo corretamente no histórico de pedidos.
const dataISO = (value) => {
  const match = String(value || '').trim().match(/^(\d{4}-\d{2}-\d{2})/);
  return match ? match[1] : '';
};
const vendaPendenteNoPeriodo = (v, from, to) => {
  if (!vendaPendente(v)) return false;
  const prevista = dataISO(v?.dataPrevista);
  return Boolean(prevista && prevista >= from && prevista <= to);
};
const addDaysISO = (iso, days) => {
  const [y, m, d] = String(iso || todayISO()).split('-').map(Number);
  const dt = new Date(y, (m || 1) - 1, (d || 1) + days);
  return dISO(dt);
};
const semanaISO = (ref = todayISO()) => {
  const [y, m, d] = String(ref || todayISO()).split('-').map(Number);
  const dt = new Date(y, (m || 1) - 1, d || 1);
  const desloc = (dt.getDay() + 6) % 7; // segunda = início da semana
  dt.setDate(dt.getDate() - desloc);
  const from = dISO(dt);
  dt.setDate(dt.getDate() + 6);
  return { from, to: dISO(dt) };
};
const brDateShort = (iso) => iso ? `${iso.slice(8, 10)}/${iso.slice(5, 7)}` : '';
const diaSemanaPt = (iso) => {
  if (!iso) return '';
  const [y,m,d] = iso.split('-').map(Number);
  const nome = new Intl.DateTimeFormat('pt-BR', { weekday:'long' }).format(new Date(y, (m||1)-1, d||1)).replace('-feira','');
  return nome ? nome.charAt(0).toUpperCase() + nome.slice(1) : '';
};

/* ---------- armazenamento local + API ---------- */
const KEY = 'cpa_whatsapp_v2';
const OLDKEY = 'cpa_whatsapp_v1';

async function readKey(k) {
  try {
    if (typeof window === 'undefined' || !window.localStorage) return null;
    const raw = window.localStorage.getItem(k);
    return raw ? JSON.parse(raw) : null;
  } catch { return null; }
}

const mergeById = (a, b) => { const m = new Map(); [...(b || []), ...(a || [])].forEach((it) => { if (it && it.id) m.set(it.id, it); }); return [...m.values()]; };
const mergeGastos = (a, b) => {
  const m = new Map();
  [...(b || []), ...(a || [])].forEach((g) => {
    if (!g || !g.campanhaId) return;
    const periodo = g.date || g.mes;
    if (!periodo) return;
    m.set(`${g.campanhaId}|${periodo}`, g);
  });
  return [...m.values()];
};

// Converte dados antigos (loja como texto na campanha) para lojas com id.
// Regra: campanha sem loja definida vai para a loja padrão (Essential Estofados), já que o painel nasceu só dela.
function migrarLojas(safe) {
  const slug = (s) => (s || '').toString().toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '') || uid();
  const lojas = Array.isArray(safe.lojas) && safe.lojas.length
    ? safe.lojas.map((l) => ({ id: l.id || slug(l.nome), nome: l.nome || 'Loja' }))
    : LOJAS_SEED.map((l) => ({ ...l }));
  const byId = new Map(lojas.map((l) => [l.id, l]));
  const byNome = new Map(lojas.map((l) => [norm(l.nome), l]));
  // As lojas principais precisam existir antes de resolver campanhas/vendas já marcadas com lojaId.
  LOJAS_SEED.forEach((seed) => {
    if (!byId.has(seed.id)) { const x={ ...seed }; lojas.push(x); byId.set(x.id, x); byNome.set(norm(x.nome), x); }
  });
  const acharOuCriar = (nome) => {
    const n = norm(nome);
    if (!n) return LOJA_PADRAO.id;
    // Nomes antigos usados durante o desenvolvimento também pertencem à Essential.
    if (n === 'essenza' || n === 'essenza moveis' || n === 'essential' || n === 'essential estofados') return LOJA_PADRAO.id;
    if (byNome.has(n)) return byNome.get(n).id;
    const nova = { id: slug(nome), nome: nome.trim() };
    lojas.push(nova); byId.set(nova.id, nova); byNome.set(n, nova);
    return nova.id;
  };
  const campanhas = (safe.campanhas || []).map((c) => {
    if (c.lojaId && byId.has(c.lojaId)) return c;
    const lojaId = c.loja ? acharOuCriar(c.loja) : LOJA_PADRAO.id;
    return { ...c, lojaId };
  });
  const campLoja = new Map(campanhas.map((c) => [c.id, c.lojaId]));
  const vendasBase = (safe.vendas || []).map((v) => {
    if (v.lojaId && byId.has(v.lojaId)) return v;
    const lojaId = campLoja.get(v.campanhaId) || LOJA_PADRAO.id;
    return { ...v, lojaId };
  });
  // Garante que as três lojas principais existam, mesmo ao migrar um estado intermediário.
  LOJAS_SEED.forEach((seed) => {
    if (!byId.has(seed.id)) { lojas.push({ ...seed }); byId.set(seed.id, seed); byNome.set(norm(seed.nome), seed); }
  });
  // Modelos antigos pertencem à Essential; modelos novos podem ser compartilhados explicitamente com lojaId=''.
  const modelosAntigos = (safe.modelos || []).map((m) => ({ ...m, lojaId: m.lojaId === undefined ? LOJA_PADRAO.id : m.lojaId }));
  const modelosSeed = [
    ...EMPORIO_MODELOS.map((m) => ({ ...m, lojaId:'emporio', preco:0, frete:130 })),
    ...EMPORIO_CAMA_FG_MODELOS.map((m) => ({ ...m, lojaId:'emporio', preco:0, frete:0 })),
    ...LUNA_MODELOS.map((m) => ({ ...m, lojaId:'luna', preco:0, frete:0 })),
  ];
  const modelosMesclados = mergeById(modelosAntigos, modelosSeed);
  // Migração V22: corrige uma única vez o cadastro já salvo do New York Premium.
  const premiumV22Aplicado = Boolean(safe.config?.migracoes?.newYorkPremiumV22);
  const premiumPedidosV22Aplicado = Boolean(safe.config?.migracoes?.newYorkPremiumPedidosV22);
  const modelos = premiumV22Aplicado ? modelosMesclados : modelosMesclados.map((m) => (
    m.id === 'emp-new-york-premium'
      ? { ...m, custo:750, comissao:200, comissaoFixa:true }
      : m
  ));
  // Corrige também pedidos que ainda guardavam exatamente os padrões antigos.
  // Valores diferentes (ajustes manuais reais) permanecem intocados.
  const vendas = premiumPedidosV22Aplicado ? vendasBase : vendasBase.map((v) => {
    if ((v.lojaId || LOJA_PADRAO.id) !== 'emporio' || v.modeloId !== 'emp-new-york-premium') return v;
    const custoAtual = Number(v.custo) || 0;
    const manualAtual = v.comissaoVendedorManual;
    return {
      ...v,
      custo: (!custoAtual || Math.abs(custoAtual - 880) < 0.005) ? 750 : v.custo,
      vendedorDevido: 200,
      comissaoVendedorManual: manualAtual !== null && manualAtual !== undefined && Math.abs((Number(manualAtual) || 0) - 185) < 0.005 ? 200 : manualAtual,
    };
  });
  const config = premiumV22Aplicado && premiumPedidosV22Aplicado ? safe.config : {
    ...(safe.config || {}),
    migracoes: {
      ...(safe.config?.migracoes || {}),
      newYorkPremiumV22:true,
      newYorkPremiumPedidosV22:true,
    },
  };
  const historico = mergeById(safe.historico || [], HISTORICO_AGOSTO);
  return {
    ...safe, lojas, campanhas, vendas, modelos, historico, config,
    adsManuais: Array.isArray(safe.adsManuais) ? safe.adsManuais : [],
    pagamentos: Array.isArray(safe.pagamentos) ? safe.pagamentos : [],
    fgMovimentos: Array.isArray(safe.fgMovimentos) ? safe.fgMovimentos : [],
    marketplaceProdutos: Array.isArray(safe.marketplaceProdutos) ? safe.marketplaceProdutos : [],
    marketplacePedidos: Array.isArray(safe.marketplacePedidos) ? safe.marketplacePedidos : [],
    marketplaceAds: Array.isArray(safe.marketplaceAds) ? safe.marketplaceAds : [],
  };
}

async function loadLocalData() {
  const v2 = await readKey(KEY);
  const v1 = await readKey(OLDKEY);
  if (!v2 && !v1) return null;
  const a = v2 || {}, b = v1 || {};
  return {
    lojas: mergeById(a.lojas, b.lojas),
    campanhas: mergeById(a.campanhas, b.campanhas),
    gastos: mergeGastos(a.gastos, b.gastos),
    vendas: mergeById(a.vendas, b.vendas),
    modelos: mergeById(a.modelos, b.modelos),
    despesas: mergeById(a.despesas, b.despesas),
    adsManuais: mergeById(a.adsManuais, b.adsManuais),
    pagamentos: mergeById(a.pagamentos, b.pagamentos),
    fgMovimentos: mergeById(a.fgMovimentos, b.fgMovimentos),
    historico: mergeById(a.historico, b.historico),
    marketplaceProdutos: mergeById(a.marketplaceProdutos, b.marketplaceProdutos),
    marketplacePedidos: mergeById(a.marketplacePedidos, b.marketplacePedidos),
    marketplaceAds: mergeById(a.marketplaceAds, b.marketplaceAds),
    config: a.config || b.config || { impostoAdPct: 0 },
  };
}

async function saveLocalData(data) {
  try {
    if (typeof window === 'undefined' || !window.localStorage) return;
    window.localStorage.setItem(KEY, JSON.stringify(data));
  } catch (e) { console.error('Erro ao salvar cache local:', e); }
}

async function apiRequest(url, options = {}) {
  const init = { credentials: 'same-origin', cache: 'no-store', ...options };
  if (init.body && !init.headers) init.headers = { 'Content-Type': 'application/json' };
  const response = await fetch(url, init);
  const payload = await response.json().catch(() => ({ error: `Resposta inválida do servidor (HTTP ${response.status}).` }));
  if (!response.ok) {
    const error = new Error(payload.error || `Erro HTTP ${response.status}`);
    error.status = response.status;
    error.payload = payload;
    throw error;
  }
  return payload;
}

function App() {
  const [campanhas, setCampanhas] = useState([]);
  const [gastos, setGastos] = useState([]);
  const [vendas, setVendas] = useState([]);
  const [modelos, setModelos] = useState([]);
  const [lojas, setLojas] = useState([]);
  const [despesas, setDespesas] = useState([]);
  const [adsManuais, setAdsManuais] = useState([]);
  const [pagamentos, setPagamentos] = useState([]);
  const [fgMovimentos, setFgMovimentos] = useState([]);
  const [historico, setHistorico] = useState([]);
  const [marketplaceProdutos, setMarketplaceProdutos] = useState([]);
  const [marketplacePedidos, setMarketplacePedidos] = useState([]);
  const [marketplaceAds, setMarketplaceAds] = useState([]);
  const [config, setConfig] = useState({ impostoAdPct: 0 });
  const [loaded, setLoaded] = useState(false);

  const [periodo, setPeriodo] = useState({ tipo: 'mes', mesRef: currentMonth(), from: todayISO(), to: todayISO() });
  const [lojaFiltro, setLojaFiltro] = useState('todas');
  const [aba, setAba] = useState('anuncio');
  const [paginaAtiva, setPaginaAtiva] = useState('painel'); // painel | ajustes
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  const [modelosView, setModelosView] = useState('modelos');
  const [financeiroView, setFinanceiroView] = useState('comercial');
  const [finData, setFinData] = useState(todayISO());
  const [finDescricao, setFinDescricao] = useState('');
  const [finCategoria, setFinCategoria] = useState('Software / assinaturas');
  const [finValor, setFinValor] = useState('');
  const [finRecorrencia, setFinRecorrencia] = useState('nao');
  const [finLojaId, setFinLojaId] = useState('geral');
  const [adManualData, setAdManualData] = useState(todayISO());
  const [adManualLoja, setAdManualLoja] = useState('emporio');
  const [adManualValor, setAdManualValor] = useState('');
  const [adManualObs, setAdManualObs] = useState('');
  const [pagData, setPagData] = useState(todayISO());
  const [pagLoja, setPagLoja] = useState('emporio');
  const [pagTipo, setPagTipo] = useState('vendedor');
  const [pagValor, setPagValor] = useState('');
  const [pagObs, setPagObs] = useState('');
  const [ajustePeriodoAdsInput, setAjustePeriodoAdsInput] = useState('');
  const [ajustePeriodoVendedorInput, setAjustePeriodoVendedorInput] = useState('');
  const [ajustePeriodoMsg, setAjustePeriodoMsg] = useState('');
  const [acertoSemanaRef, setAcertoSemanaRef] = useState(todayISO());
  const [acertoSomentePendentes, setAcertoSomentePendentes] = useState(true);
  const [acertoMsg, setAcertoMsg] = useState('');
  const [lunaFechamentoDia, setLunaFechamentoDia] = useState(todayISO());
  const [lunaFreteEntregadorFiltro, setLunaFreteEntregadorFiltro] = useState('todos');
  const [fgRetiradaData, setFgRetiradaData] = useState(todayISO());
  const [fgRetiradaDescricao, setFgRetiradaDescricao] = useState('');
  const [fgRetiradaValor, setFgRetiradaValor] = useState('');
  const [fgSaldoAnteriorInput, setFgSaldoAnteriorInput] = useState('');
  const [pedidoPaste, setPedidoPaste] = useState('');
  const [pedidoParseMsg, setPedidoParseMsg] = useState('');
  const [vendasBusca, setVendasBusca] = useState('');
  const [pedidosDataFiltro, setPedidosDataFiltro] = useState('');
  const [pedidosModoData, setPedidosModoData] = useState('pedido');
  const [pedidosFiltroRapido, setPedidosFiltroRapido] = useState('hoje');
  const [pedidosDataFrom, setPedidosDataFrom] = useState(todayISO());
  const [pedidosDataTo, setPedidosDataTo] = useState(todayISO());
  const [expandedCamp, setExpandedCamp] = useState(null);
  const [ordenacao, setOrdenacao] = useState('lucro'); // 'lucro' | 'manual'
  const dragCampIdx = useRef(null);
  const dragSecKey = useRef(null);
  const entregasPendentesRef = useRef(null);

  const [vData, setVData] = useState(todayISO());
  const [vCampanha, setVCampanha] = useState('');
  const [vOrigem, setVOrigem] = useState(ORIGENS[0]);
  const [vModelo, setVModelo] = useState('');
  const [vCliente, setVCliente] = useState('');
  const [vReceita, setVReceita] = useState('');
  const [vCusto, setVCusto] = useState('');
  const [vFrete, setVFrete] = useState('');
  const [vFreteTabela1, setVFreteTabela1] = useState('');
  const [vDataPrevista, setVDataPrevista] = useState('');
  const [vStatus, setVStatus] = useState('confirmado');
  const [vDataEntrega, setVDataEntrega] = useState('');
  const [vFormaPagamento, setVFormaPagamento] = useState('nao_informado');
  const [vParcelas, setVParcelas] = useState(1);
  const [vCep, setVCep] = useState('');
  const [vQtdItens, setVQtdItens] = useState(1);
  const [vLojaId, setVLojaId] = useState(LOJA_PADRAO.id);
  const [vEntregadorLuna, setVEntregadorLuna] = useState('Tarcísio');
  const [vEntregadorEmporioCama, setVEntregadorEmporioCama] = useState('Rogério');
  const [vPagamentoRecebidoPorLuna, setVPagamentoRecebidoPorLuna] = useState('luna');
  const [entregaFiltro, setEntregaFiltro] = useState('todas');
  const [entregaDataFrom, setEntregaDataFrom] = useState('');
  const [entregaDataTo, setEntregaDataTo] = useState('');

  const [cNome, setCNome] = useState('');
  const [cLojaId, setCLojaId] = useState(LOJA_PADRAO.id);
  const [cPlataforma, setCPlataforma] = useState('Instagram');
  const [novaLoja, setNovaLoja] = useState('');
  const [lojaMsg, setLojaMsg] = useState('');

  const [mNome, setMNome] = useState('');
  const [mPreco, setMPreco] = useState('');
  const [mCusto, setMCusto] = useState('');
  const [mFrete, setMFrete] = useState('');
  const [mFornecedor, setMFornecedor] = useState('');
  const [mLojaId, setMLojaId] = useState('');
  const [editModelo, setEditModelo] = useState(null);

  const [confirmDel, setConfirmDel] = useState(null);
  const [mergePending, setMergePending] = useState(null); // { from, to }
  const [editId, setEditId] = useState(null);
  const [editDraft, setEditDraft] = useState(null);

  const [fetchingMeta, setFetchingMeta] = useState(false);
  const [metaRows, setMetaRows] = useState([]);   // [{campanha, gastoTotal, mapId}]
  const [metaDetail, setMetaDetail] = useState([]); // [{campanha, mes, gasto}]
  const [metaError, setMetaError] = useState('');
  const [metaPaste, setMetaPaste] = useState('');
  const [metaMsg, setMetaMsg] = useState('');
  const [backupMsg, setBackupMsg] = useState('');

  const [authChecked, setAuthChecked] = useState(false);
  const [authenticated, setAuthenticated] = useState(false);
  const [loginPassword, setLoginPassword] = useState('');
  const [loginError, setLoginError] = useState('');
  const [bootError, setBootError] = useState('');
  const [syncStatus, setSyncStatus] = useState('carregando'); // carregando | salvando | salvo | erro | conflito
  const [syncError, setSyncError] = useState('');
  const serverRevisionRef = useRef(0);
  const lastSavedJsonRef = useRef('');
  const queuedSaveRef = useRef(null);
  const saveTimerRef = useRef(null);
  const saveInFlightRef = useRef(false);

  const applyLoadedData = (d) => {
    const safe = d || {};
    const migrated = migrarLojas(safe);
    setLojas(migrated.lojas);
    setCampanhas(migrated.campanhas);
    setGastos(migrated.gastos || []);
    setVendas(migrated.vendas);
    setModelos(migrated.modelos || []);
    setDespesas((migrated.despesas || []).map((x) => ({ ...x, lojaId: x.lojaId || 'geral' })));
    setAdsManuais(migrated.adsManuais || []);
    setPagamentos(migrated.pagamentos || []);
    setFgMovimentos(migrated.fgMovimentos || []);
    setHistorico(migrated.historico || []);
    setMarketplaceProdutos(migrated.marketplaceProdutos || []);
    setMarketplacePedidos(migrated.marketplacePedidos || []);
    setMarketplaceAds(migrated.marketplaceAds || []);
    setConfig(migrated.config || { impostoAdPct: 0 });
  };

  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const session = await apiRequest('/api/session.php');
        if (cancelled) return;
        setAuthChecked(true);
        if (!session.authenticated) {
          setAuthenticated(false);
          setSyncStatus('erro');
          return;
        }

        setAuthenticated(true);
        let local = await loadLocalData();
        try {
          const server = await apiRequest('/api/state.php');
          serverRevisionRef.current = Number(server.revision) || 0;
          let data = server.data;

          // Primeira migração: se o banco estiver vazio, envia automaticamente os dados já existentes no navegador.
          if (!data && local) {
            const migrated = await apiRequest('/api/state.php', {
              method: 'POST',
              body: JSON.stringify({ data: local, revision: 0 }),
            });
            serverRevisionRef.current = Number(migrated.revision) || 1;
            data = local;
          }

          const chosen = data || local || { lojas: [], campanhas: [], gastos: [], vendas: [], modelos: [], despesas: [], adsManuais: [], pagamentos: [], fgMovimentos: [], historico: [], marketplaceProdutos: [], marketplacePedidos: [], marketplaceAds: [], config: { impostoAdPct: 0 } };
          if (cancelled) return;
          applyLoadedData(chosen);
          const json = JSON.stringify(chosen);
          lastSavedJsonRef.current = json;
          await saveLocalData(chosen);
          setSyncStatus('salvo');
          setSyncError('');
          setLoaded(true);
        } catch (error) {
          // Se o banco estiver temporariamente indisponível, mantém o painel utilizável com a cópia local.
          const chosen = local || { lojas: [], campanhas: [], gastos: [], vendas: [], modelos: [], despesas: [], adsManuais: [], pagamentos: [], fgMovimentos: [], historico: [], marketplaceProdutos: [], marketplacePedidos: [], marketplaceAds: [], config: { impostoAdPct: 0 } };
          if (cancelled) return;
          applyLoadedData(chosen);
          lastSavedJsonRef.current = JSON.stringify(chosen);
          setBootError(error.message || 'Não foi possível carregar o banco.');
          setSyncStatus('erro');
          setSyncError('Banco indisponível; usando a cópia local.');
          setLoaded(true);
        }
      } catch (error) {
        if (cancelled) return;
        setAuthChecked(true);
        setAuthenticated(false);
        setLoginError(error.message || 'Não foi possível acessar o servidor.');
        setSyncStatus('erro');
      }
    })();
    return () => { cancelled = true; };
  }, []);

  const flushServerSave = async () => {
    if (saveInFlightRef.current || !authenticated) return;
    const queued = queuedSaveRef.current;
    if (!queued || queued.json === lastSavedJsonRef.current) return;
    queuedSaveRef.current = null;
    saveInFlightRef.current = true;
    let savedSuccessfully = false;
    try {
      const response = await apiRequest('/api/state.php', {
        method: 'POST',
        body: JSON.stringify({ data: queued.data, revision: serverRevisionRef.current }),
      });
      serverRevisionRef.current = Number(response.revision) || (serverRevisionRef.current + 1);
      lastSavedJsonRef.current = queued.json;
      savedSuccessfully = true;
      setSyncError('');
      if (!queuedSaveRef.current || queuedSaveRef.current.json === queued.json) setSyncStatus('salvo');
    } catch (error) {
      if (error.status === 401) {
        setAuthenticated(false);
        setAuthChecked(true);
        setLoginError('Sua sessão expirou. Entre novamente.');
      } else if (error.status === 409) {
        setSyncStatus('conflito');
        setSyncError(error.message || 'Dados alterados em outro dispositivo. Atualize a página.');
      } else {
        setSyncStatus('erro');
        setSyncError(error.message || 'Falha ao salvar no banco. A cópia local foi mantida.');
        // Mantém a versão mais recente na fila; uma nova alteração fará outra tentativa.
        if (!queuedSaveRef.current) queuedSaveRef.current = queued;
      }
    } finally {
      saveInFlightRef.current = false;
      if (savedSuccessfully && queuedSaveRef.current) {
        window.setTimeout(() => flushServerSave(), 150);
      }
    }
  };

  useEffect(() => {
    if (!loaded) return;
    const data = { lojas, campanhas, gastos, vendas, modelos, despesas, adsManuais, pagamentos, fgMovimentos, historico, marketplaceProdutos, marketplacePedidos, marketplaceAds, config };
    const json = JSON.stringify(data);
    saveLocalData(data);
    if (!authenticated || json === lastSavedJsonRef.current) return;

    queuedSaveRef.current = { data, json };
    setSyncStatus('salvando');
    setSyncError('');
    window.clearTimeout(saveTimerRef.current);
    saveTimerRef.current = window.setTimeout(() => flushServerSave(), 450);
    return () => window.clearTimeout(saveTimerRef.current);
  }, [lojas, campanhas, gastos, vendas, modelos, despesas, adsManuais, pagamentos, fgMovimentos, historico, marketplaceProdutos, marketplacePedidos, marketplaceAds, config, loaded, authenticated]);

  const doLogin = async (event) => {
    event.preventDefault();
    if (!loginPassword) return;
    setLoginError('');
    try {
      await apiRequest('/api/login.php', { method: 'POST', body: JSON.stringify({ password: loginPassword }) });
      window.location.reload();
    } catch (error) {
      setLoginError(error.message || 'Não foi possível entrar.');
    }
  };

  const doLogout = async () => {
    try { await apiRequest('/api/logout.php', { method: 'POST', body: '{}' }); } catch { /* ignora */ }
    window.location.reload();
  };

  /* ---------- período ---------- */
  const per = useMemo(() => {
    const p = periodo; const now = new Date();
    if (p.tipo === 'hoje') { const d = todayISO(); return { from: d, to: d, label: `Hoje · ${brDate(d)}` }; }
    if (p.tipo === 'ontem') { const d = yesterdayISO(); return { from: d, to: d, label: `Ontem · ${brDate(d)}` }; }
    if (p.tipo === 'amanha') { const d = addDaysISO(todayISO(), 1); return { from: d, to: d, label: `Amanhã · ${brDate(d)}` }; }
    if (p.tipo === 'mes') return { from: `${p.mesRef}-01`, to: `${p.mesRef}-${lastDay(p.mesRef)}`, label: monthLabel(p.mesRef) };
    if (p.tipo === 'mes_passado') { const mr = shiftMonth(currentMonth(), -1); return { from: `${mr}-01`, to: `${mr}-${lastDay(mr)}`, label: monthLabel(mr) }; }
    if (p.tipo === 'ano') { const y = now.getFullYear(); return { from: `${y}-01-01`, to: `${y}-12-31`, label: `Ano de ${y}` }; }
    if (p.tipo === 'custom') return { from: p.from, to: p.to, label: `${brDate(p.from)} – ${brDate(p.to)}` };
    return { from: `${currentMonth()}-01`, to: `${currentMonth()}-${lastDay(currentMonth())}`, label: monthLabel(currentMonth()) };
  }, [periodo]);
  const mesesPeriodo = useMemo(() => mesesEntre(per.from, per.to), [per]);
  const mesUnico = per.from.slice(0, 7) === per.to.slice(0, 7) ? per.from.slice(0, 7) : null;
  const mesRefAtual = periodo.tipo === 'mes' ? periodo.mesRef : currentMonth();
  const shiftPeriodo = (delta) => setPeriodo({ ...periodo, tipo: 'mes', mesRef: shiftMonth(mesRefAtual, delta) });

  const impPct = Number(config.impostoAdPct) || 0;
  const comImp = (g) => g * (1 + impPct / 100);

  const nomeLoja = (id) => lojas.find((l) => l.id === id)?.nome || (id === 'geral' ? 'Geral da empresa' : id || '—');
  const modeloPorId = (id) => modelos.find((m) => m.id === id);
  const lojaFormulario = vCampanha && ![ORG, ADX].includes(vCampanha)
    ? (campanhas.find((c) => c.id === vCampanha)?.lojaId || vLojaId || LOJA_PADRAO.id)
    : (vLojaId || (lojaFiltro !== 'todas' ? lojaFiltro : LOJA_PADRAO.id));
  const modelosVisiveis = modelos.filter((m) => !m.lojaId || lojaFormulario === 'todas' || m.lojaId === lojaFormulario);
  const campanhasFormulario = campanhas.filter((c) => lojaFiltro === 'todas' || (c.lojaId || LOJA_PADRAO.id) === lojaFiltro);

  useEffect(() => {
    if (lojaFiltro !== 'todas' && lojas.some((l) => l.id === lojaFiltro)) {
      setVLojaId(lojaFiltro); setCLojaId(lojaFiltro);
      if (['emporio','luna'].includes(lojaFiltro)) setAdManualLoja(lojaFiltro);
      setFinLojaId(lojaFiltro);
      setPagLoja(['emporio','luna'].includes(lojaFiltro) ? lojaFiltro : 'emporio');
    }
  }, [lojaFiltro, lojas]);

  const taxaCartaoPctVenda = (v, tabela = TAXAS_LOJA) => {
    const lojaId = v.lojaId || LOJA_PADRAO.id;
    if (!['emporio','luna'].includes(lojaId)) return 0;
    // A taxa oficial da loja é congelada no pedido para que alterações futuras da tabela
    // não mudem o resultado de vendas antigas. A tabela dos vendedores é calculada separadamente.
    if (tabela === TAXAS_LOJA && Number.isFinite(Number(v.taxaCartaoPct))) return Number(v.taxaCartaoPct) || 0;
    return taxaPagamentoPct(v.formaPagamento, v.parcelas, tabela);
  };
  const taxaCartaoValorVenda = (v, tabela = TAXAS_LOJA) => {
    if (tabela === TAXAS_LOJA && Number.isFinite(Number(v.taxaCartaoValor))) return Number(v.taxaCartaoValor) || 0;
    return (Number(v.receita) || 0) * taxaCartaoPctVenda(v, tabela) / 100;
  };
  const receitaLiquidaVenda = (v) => (Number(v.receita) || 0) - taxaCartaoValorVenda(v);
  const receitaFinanceiraVenda = (v) => receitaLiquidaVenda(v);
  // Resultado calculado pelas regras normais da loja, sem qualquer ajuste manual do fechamento FG.
  const lucroBaseVendaCalculado = (v) => receitaLiquidaVenda(v) - (Number(v.custo) || 0) - (Number(v.frete) || 0);
  // Quando o usuário corrige manualmente o crédito de uma entrega feita pelo FG, esse valor vira
  // a referência financeira daquele pedido em todo o painel (Lucro Loja, cards, anúncios e fechamentos).
  // "Usar sugerido" remove o override e volta para lucroBaseVendaCalculado.
  const lucroBaseVenda = (v) => {
    const over = fgMovimentos.find((x) => x.tipo === 'credito_entrega_override' && x.vendaId === v.id);
    if (over && Number.isFinite(Number(over.valor)) && vendaEntreguePeloFgOperacao(v)) return Math.max(0, Number(over.valor) || 0);
    return lucroBaseVendaCalculado(v);
  };
  // Tabela específica usada no cálculo do Douglas/Luna. O lucro geral NÃO usa esta tabela.
  // Na Empório, o Natan NÃO é calculado comparando taxas: usa o acréscimo real sobre o valor normal da venda.
  const taxaVendedorPctVenda = (v) => taxaCartaoPctVenda(v, TAXAS_VENDEDOR);
  const taxaVendedorValorVenda = (v) => valorTaxaVendedor(Number(v.receita) || 0, taxaVendedorPctVenda(v));
  // Douglas/Luna usa uma conta própria para o acerto: taxa dos vendedores + frete da planilha T1.
  // Essa base NÃO altera o lucro oficial da empresa, que continua usando TAXAS_LOJA + frete T2 (v.frete).
  const freteAcertoDouglasVenda = (v) => {
    if ((v.lojaId || LOJA_PADRAO.id) !== 'luna') return 0;
    if (Number.isFinite(Number(v.freteTabela1)) && Number(v.freteTabela1) > 0) return Number(v.freteTabela1);
    const calc = freteLuna(v.cep, FRETE_LUNA_T1, Math.max(1, Number(v.qtdItens) || 1));
    return calc === null ? 0 : calc;
  };
  const resultadoBaseVendedorLunaCalculado = (v) => (Number(v.receita) || 0) - taxaVendedorValorVenda(v) - (Number(v.custo) || 0) - freteAcertoDouglasVenda(v);
  const resultadoBaseVendedorLuna = (v) => {
    const over = fgMovimentos.find((x) => x.tipo === 'credito_entrega_override' && x.vendaId === v.id);
    // Em uma entrega Luna feita pelo FG, a correção digitada no Acerto FG passa a ser o número
    // cheio de referência também para o Acerto Douglas. A comissão paga continua sendo 50%.
    if (over && Number.isFinite(Number(over.valor)) && vendaEntreguePeloFgLuna(v)) return Math.max(0, Number(over.valor) || 0);
    return resultadoBaseVendedorLunaCalculado(v);
  };
  const entregadorLunaVenda = (v) => (v.lojaId || LOJA_PADRAO.id) === 'luna' ? (v.entregadorLuna || 'Tarcísio') : '';
  const pagamentoRecebidoPorLunaVenda = (v) => {
    if ((v.lojaId || LOJA_PADRAO.id) !== 'luna') return 'loja';
    if (v.pagamentoRecebidoPor === 'fg' || v.pagamentoRecebidoPor === 'luna') return v.pagamentoRecebidoPor;
    return entregadorLunaVenda(v) === 'FG' ? 'fg' : 'luna';
  };
  // Luna Comfort: o que define se a venda entra no faturamento financeiro é o ENTREGADOR.
  // Somente pedidos com Entregador = FG ficam fora do faturamento/recebido pela loja.
  // Eles continuam entrando normalmente no Lucro Loja e no acerto do Douglas.
  // O fornecedor do produto NÃO interfere nessa regra: cama/colchão do FG entregue por Rogério,
  // Tarcísio ou Goldstar entra normalmente no faturamento da Luna.
  const vendaEntreguePeloFgLuna = (v) => (v.lojaId || LOJA_PADRAO.id) === 'luna' && entregadorLunaVenda(v) === 'FG';

  const ehCamaFgEmporio = (v) => {
    if ((v.lojaId || LOJA_PADRAO.id) !== 'emporio') return false;
    if (v.tipoProduto === 'cama_fg') return true;
    return modeloEhCamaFgEmporio(modeloPorId(v.modeloId));
  };
  const entregadorEmporioCamaVenda = (v) => ehCamaFgEmporio(v) ? (v.entregadorEmporioCama || 'Rogério') : '';
  // A mesma regra operacional do FG vale para Luna e para camas FG da Empório:
  // se o entregador for FG, a venda não entra no faturamento/recebido da loja,
  // mas continua no lucro da loja e nas obrigações do vendedor.
  const vendaEntreguePeloFgEmporioCama = (v) => ehCamaFgEmporio(v) && entregadorEmporioCamaVenda(v) === 'FG';
  const vendaEntreguePeloFgOperacao = (v) => vendaEntreguePeloFgLuna(v) || vendaEntreguePeloFgEmporioCama(v);
  const vendaEntraFinanceiroLoja = (v) => !vendaEntreguePeloFgOperacao(v);

  // Empório: resolve automaticamente o preço normal usado como base do Natan.
  // Essa regra vale SOMENTE para os sofás. Camas FG têm comissão fixa de R$50.
  // Prioridade: preço cadastrado no modelo > venda recente em Pix/Dinheiro do mesmo modelo
  // > venda recente sem parcelamento > preço-base conhecido da regra.
  const valorNormalNatanAutomatico = (v) => {
    if ((v.lojaId || LOJA_PADRAO.id) !== 'emporio' || ehCamaFgEmporio(v)) return 0;
    const m = modeloPorId(v.modeloId);
    if (Number(m?.preco) > 0) return Number(m.preco);
    if (v.modeloId) {
      const historicas = vendas
        .filter((x) => x.id !== v.id && (x.lojaId || LOJA_PADRAO.id) === 'emporio' && x.modeloId === v.modeloId && statusVenda(x) !== 'cancelado' && statusVenda(x) !== 'devolvido')
        .filter((x) => Number(x.receita) > 0)
        .sort((a,b) => String(b.data || '').localeCompare(String(a.data || '')));
      const semTaxa = historicas.find((x) => ['pix','dinheiro','nao_informado'].includes(x.formaPagamento || 'nao_informado'));
      if (semTaxa) return Number(semTaxa.receita) || 0;
      const naoParcelada = historicas.find((x) => x.formaPagamento !== 'credito' || Number(x.parcelas || 1) <= 1);
      if (naoParcelada) return Number(naoParcelada.receita) || 0;
    }
    const regra = regraModeloEmporio(m?.nome);
    if (Number(regra?.precoBaseNatan) > 0) return Number(regra.precoBaseNatan);
    return 0;
  };

  const freteLuna = (cep, tabela, qtd = 1) => {
    const base = freteFaixa(cep, tabela); if (base === null) return null;
    return base + Math.max(0, (Number(qtd) || 1) - 1) * 10;
  };
  // Configuração de comissão por loja. O modo “atual” preserva integralmente as regras
  // históricas já configuradas (Natan por modelo/parcelamento e Douglas pelo acerto próprio).
  // O usuário pode sobrescrever a regra globalmente ou definir um valor específico por modelo.
  const comissaoConfigLoja = (lojaId) => {
    const salvo = config?.comissoes?.[lojaId] || {};
    return { tipo: salvo.tipo || 'atual', valorFixo: Number(salvo.valorFixo) || 0, porModelo: salvo.porModelo || {} };
  };
  const comissaoModeloConfigurada = (v) => {
    const lojaId = v.lojaId || LOJA_PADRAO.id;
    if (!['emporio','luna'].includes(lojaId) || !v.modeloId) return null;
    const cfg = comissaoConfigLoja(lojaId);
    const raw = cfg.porModelo?.[v.modeloId];
    if (raw === '' || raw === null || raw === undefined) return null;
    const n = Number(raw);
    return Number.isFinite(n) ? Math.max(0, n) : null;
  };
  const comissaoConfiguradaVenda = (v) => {
    const lojaId = v.lojaId || LOJA_PADRAO.id;
    if (!['emporio','luna'].includes(lojaId)) return null;
    const porModelo = comissaoModeloConfigurada(v);
    if (porModelo !== null) return porModelo;
    const cfg = comissaoConfigLoja(lojaId);
    if (cfg.tipo === 'fixo') return Math.max(0, Number(cfg.valorFixo) || 0);
    if (cfg.tipo === 'metade_lucro') return Math.max(0, lucroBaseVenda(v)) / 2;
    return null;
  };
  const comissaoUsaRegraConfigurada = (v) => {
    const lojaId = v.lojaId || LOJA_PADRAO.id;
    if (!['emporio','luna'].includes(lojaId)) return false;
    return comissaoModeloConfigurada(v) !== null || comissaoConfigLoja(lojaId).tipo !== 'atual';
  };

  const comissaoVendedorManualVenda = (v) => {
    const raw = v?.comissaoVendedorManual;
    if (raw === null || raw === undefined || raw === '') return null;
    const n = Number(raw);
    return Number.isFinite(n) ? Math.max(0, n) : null;
  };
  const vendedorDevidoVenda = (v) => {
    const lojaId = v.lojaId || LOJA_PADRAO.id;
    const manual = comissaoVendedorManualVenda(v);
    // Uma comissão ajustada manualmente na edição do pedido passa a ser a obrigação oficial
    // daquele vendedor em todas as contas. O usuário pode voltar ao cálculo automático.
    if (['emporio','luna'].includes(lojaId) && manual !== null) return manual;
    const configurada = comissaoConfiguradaVenda(v);
    if (configurada !== null) return configurada;
    const m = modeloPorId(v.modeloId);
    // Empório é recalculada dinamicamente para que pedidos antigos que estavam
    // congelados apenas com a comissão-base também recebam o ajuste do parcelamento.
    if (lojaId === 'emporio') {
      if (ehCamaFgEmporio(v)) return 50;
      const regra = regraModeloEmporio(m?.nome);
      return calculoComissaoNatanModelo(v.receita, v.formaPagamento, v.parcelas, regra, valorNormalNatanAutomatico(v)).total;
    }
    if (lojaId === 'luna') {
      // Luna Comfort: a comissão do Douglas usa a tabela específica dos vendedores.
      // Depois da taxa específica do acerto, fornecedor e frete T1, 50% do resultado positivo vai para Douglas.
      // O lucro geral da loja continua usando TAXAS_LOJA + frete T2, sem misturar as duas contas.
      return Math.max(0, resultadoBaseVendedorLuna(v)) / 2;
    }
    if (Number.isFinite(Number(v.vendedorDevido))) return Number(v.vendedorDevido) || 0;
    return 0;
  };
  const vendedorNomeVenda = (v) => v.vendedorNome || PAGAMENTO_PESSOA[v.lojaId]?.vendedor || '';
  const detalheNatanVenda = (v) => {
    const manual = comissaoVendedorManualVenda(v);
    if (manual !== null) return { total:manual, base:manual, extraNatan:0, acrescimoParcelamento:0, valorNormalPagamento:0, manual:true, camaFg:ehCamaFgEmporio(v) };
    const configurada = comissaoConfiguradaVenda(v);
    if (configurada !== null) return { total:configurada, base:configurada, extraNatan:0, acrescimoParcelamento:0, valorNormalPagamento:0, configurada:true, camaFg:ehCamaFgEmporio(v) };
    if (ehCamaFgEmporio(v)) return { total:50, base:50, extraNatan:0, acrescimoParcelamento:0, valorNormalPagamento:0, camaFg:true };
    const m = modeloPorId(v.modeloId);
    const regra = regraModeloEmporio(m?.nome);
    return calculoComissaoNatanModelo(v.receita, v.formaPagamento, v.parcelas, regra, valorNormalNatanAutomatico(v));
  };
  const ajusteAdsPeriodoRegistro = (lojaId, from = per.from, to = per.to) => adsManuais.find((x) => x.origem === 'ajuste_periodo' && x.lojaId === lojaId && x.periodoFrom === from && x.periodoTo === to) || null;
  const ajusteVendedorPeriodoRegistro = (lojaId, from = per.from, to = per.to) => pagamentos.find((x) => x.origem === 'ajuste_periodo' && x.tipo === 'vendedor' && x.lojaId === lojaId && x.periodoFrom === from && x.periodoTo === to) || null;
  const pagamentoPeriodo = (lojaId, tipo, from = per.from, to = per.to) => pagamentos.filter((x) => x.origem !== 'ajuste_periodo' && x.lojaId === lojaId && x.tipo === tipo && x.data >= from && x.data <= to).reduce((s,x) => s + (Number(x.valor) || 0), 0);
  const vendedorPagoLojaNoPeriodo = (lojaId, from = per.from, to = per.to) => {
    const ajuste = ajusteVendedorPeriodoRegistro(lojaId, from, to);
    if (ajuste) return Math.max(0, Number(ajuste.valor) || 0);
    return pagamentos.filter((x) => x.origem !== 'ajuste_periodo' && x.tipo === 'vendedor' && x.lojaId === lojaId && x.data >= from && x.data <= to).reduce((s,x) => s + (Number(x.valor) || 0), 0);
  };
  // Vendedor só vira despesa quando o pagamento é efetivamente marcado/registrado como pago.
  // Empório/Luna podem sobrescrever manualmente o TOTAL do período selecionado. O ajuste substitui
  // os lançamentos detalhados apenas naquele intervalo, sem apagar o histórico original.
  const vendedorPagoNoPeriodo = (from = per.from, to = per.to) => {
    const lojasAlvo = lojaFiltro === 'todas' ? ['emporio','luna'] : (['emporio','luna'].includes(lojaFiltro) ? [lojaFiltro] : []);
    if (!lojasAlvo.length) return 0;
    return lojasAlvo.reduce((s, lojaId) => {
      const ajusteAtual = ajusteVendedorPeriodoRegistro(lojaId, per.from, per.to);
      // Na tabela diária, um total manual do período aparece apenas no último dia,
      // sem inventar uma divisão por dia. O TOTAL continua exatamente igual ao digitado.
      if (ajusteAtual && from === to && (per.from !== per.to || from !== per.from)) {
        return s + (from === per.to ? Math.max(0, Number(ajusteAtual.valor) || 0) : 0);
      }
      return s + vendedorPagoLojaNoPeriodo(lojaId, from, to);
    }, 0);
  };

  const acertoValorVenda = (v) => {
    const lojaId = v.lojaId || LOJA_PADRAO.id;
    // Luna: o valor mostrado/marcado no acerto e enviado ao Douglas é o resultado CHEIO
    // antes da divisão de 50%. A comissão efetiva do Douglas continua sendo metade dele.
    // Um valor digitado manualmente pelo usuário continua sendo respeitado.
    if (lojaId === 'luna' && !acertoPagoVenda(v) && !v.acertoValorManual) {
      const manual = comissaoVendedorManualVenda(v);
      // O número enviado ao Douglas é sempre o valor cheio. Se a comissão foi editada
      // no pedido ou configurada na página Ajustes, o acerto cheio vira 2x a comissão,
      // preservando a apresentação 50/50 do fechamento.
      if (manual !== null) return Math.max(0, manual * 2);
      if (comissaoUsaRegraConfigurada(v)) return Math.max(0, vendedorDevidoVenda(v) * 2);
      return Math.max(0, resultadoBaseVendedorLuna(v));
    }
    if (lojaId === 'emporio' && !acertoPagoVenda(v) && !v.acertoValorManual) return Math.max(0, vendedorDevidoVenda(v));
    if (Number.isFinite(Number(v.acertoValor))) return Number(v.acertoValor) || 0;
    return lojaId === 'luna' ? Math.max(0, resultadoBaseVendedorLuna(v)) : Math.max(0, vendedorDevidoVenda(v));
  };
  const valorPagamentoAcertoVenda = (v) => {
    const base = Math.max(0, acertoValorVenda(v));
    // Na Luna, o número do acerto é enviado cheio no WhatsApp; somente 50% vira pagamento/despesa do Douglas.
    return (v.lojaId || LOJA_PADRAO.id) === 'luna' ? base / 2 : base;
  };
  const acertoRecebedorVenda = (v) => v.acertoRecebedor || vendedorNomeVenda(v) || 'Recebedor';
  const acertoTipoVenda = (v) => v.acertoTipo || 'vendedor';
  const acertoPagoVenda = (v) => v.acertoStatus === 'pago';
  const pagamentoAcertoId = (v) => `acerto-${v.id}`;

  const enriquecerVenda = (base, lojaId, modeloId) => {
    const m = modelos.find((x) => x.id === modeloId);
    const bruto = Number(base.receita) || 0;
    const parcelas = Math.min(12, Math.max(1, Number(base.parcelas) || 1));
    const qtdItens = Math.max(1, Number(base.qtdItens) || 1);
    const formaPagamento = base.formaPagamento || 'nao_informado';
    let custo = Number(base.custo) || 0;
    let frete = Number(base.frete) || 0;
    let freteTabela1 = Number(base.freteTabela1) || 0;
    let vendedorNome = '';
    let vendedorDevido = 0;
    if (lojaId === 'emporio') {
      const regra = regraModeloEmporio(m?.nome);
      const camaFg = modeloEhCamaFgEmporio(m) || regra?.tipoProduto === 'cama_fg' || base.tipoProduto === 'cama_fg';
      if (regra && !custo) custo = regra.custo;
      vendedorNome = 'Natan';
      if (camaFg) {
        const calcT2 = freteLuna(base.cep, FRETE_LUNA_T2, qtdItens);
        if (!frete && calcT2 !== null) frete = calcT2;
        vendedorDevido = 50;
        base = { ...base, entregadorEmporioCama: base.entregadorEmporioCama || 'Rogério' };
      } else {
        if (!frete) frete = 130;
        const normalAuto = valorNormalNatanAutomatico({ ...base, lojaId, modeloId });
        vendedorDevido = calculoComissaoNatanModelo(bruto, formaPagamento, parcelas, regra, normalAuto).total;
      }
      base = { ...base, tipoProduto: camaFg ? 'cama_fg' : (base.tipoProduto || 'sofa') };
    } else if (lojaId === 'luna') {
      const regra = regraModeloLuna(m?.nome) || LUNA_MODELOS.find((x) => x.id === modeloId);
      if (regra && !custo) custo = regra.custo;
      const calcT2 = freteLuna(base.cep, FRETE_LUNA_T2, qtdItens);
      const calcT1 = freteLuna(base.cep, FRETE_LUNA_T1, qtdItens);
      if (!frete && calcT2 !== null) frete = calcT2;
      // T1 é a planilha usada exclusivamente no acerto do Douglas; T2 (frete) segue no lucro oficial da loja.
      if (!freteTabela1 && calcT1 !== null) freteTabela1 = calcT1;
      vendedorNome = 'Douglas';
    }
    const taxaPct = ['emporio','luna'].includes(lojaId) ? taxaPagamentoPct(formaPagamento, parcelas, TAXAS_LOJA) : 0;
    const taxaValor = bruto * taxaPct / 100;
    if (lojaId === 'luna') {
      const taxaVendedorPct = taxaPagamentoPct(formaPagamento, parcelas, TAXAS_VENDEDOR);
      const taxaVendedorValor = bruto * taxaVendedorPct / 100;
      vendedorDevido = Math.max(0, bruto - taxaVendedorValor - custo - freteTabela1) / 2;
    }
    const entregadorLuna = lojaId === 'luna' ? (base.entregadorLuna || 'Tarcísio') : '';
    const pagamentoRecebidoPor = lojaId === 'luna'
      ? ((base.pagamentoRecebidoPor === 'fg' || base.pagamentoRecebidoPor === 'luna') ? base.pagamentoRecebidoPor : (entregadorLuna === 'FG' ? 'fg' : 'luna'))
      : '';
    const entregadorEmporioCama = lojaId === 'emporio' && (base.tipoProduto === 'cama_fg' || modeloEhCamaFgEmporio(m)) ? (base.entregadorEmporioCama || 'Rogério') : '';
    return { ...base, lojaId, custo, frete, parcelas, qtdItens, taxaCartaoPct: taxaPct, taxaCartaoValor: taxaValor, freteTabela1, vendedorNome, vendedorDevido, entregadorLuna, entregadorEmporioCama, pagamentoRecebidoPor };
  };

  const sugerirModeloPorTexto = (texto, lojaId) => {
    const regra = lojaId === 'emporio' ? regraModeloEmporio(texto) : lojaId === 'luna' ? regraModeloLuna(texto) : null;
    if (regra) return modelos.find((m) => m.id === regra.id) || regra;
    const n = normalizarNomeModelo(texto);
    return modelos.find((m) => (!m.lojaId || m.lojaId === lojaId) && (normalizarNomeModelo(m.nome) === n || n.includes(normalizarNomeModelo(m.nome)) || normalizarNomeModelo(m.nome).includes(n)));
  };

  const interpretarFicha = () => {
    const txt = String(pedidoPaste || '').replace(/\r/g,'');
    if (!txt.trim()) return;
    const lojaId = lojaFiltro !== 'todas' ? lojaFiltro : vLojaId;
    const pick = (re) => (txt.match(re)?.[1] || '').trim();
    const nome = pick(/NOME\s*:\s*([^\n]+)/i);
    const cep = (pick(/CEP\s*:\s*([0-9.\-]+)/i) || '').replace(/\D/g,'');
    const item = pick(/ITENS?\s*:\s*([^\n]+)/i).replace(/^[^A-Za-zÀ-ÿ0-9]+/,'').trim();
    const dataRaw = pick(/(?:ENTREGA|PREVISÃO PARA)\s*:\s*[^0-9]*(\d{1,2}\/\d{1,2}\/\d{4})/i) || pick(/ENTREGA\s*:[^0-9]*(\d{1,2}\/\d{1,2}\/\d{4})/i);
    const dataPrev = dataRaw ? dataRaw.split('/').reverse().join('-') : '';
    const linhaPag = pick(/(?:FORMA|CONDIÇÃO)\s*(?:DE\s*)?PAGAMENTO\s*:\s*([^\n]+)/i);
    const blocoPag = (txt.match(/(?:FORMA|CONDIÇÃO)\s*(?:DE\s*)?PAGAMENTO\s*:\s*([\s\S]{0,120})/i)?.[1] || linhaPag).split(/(?:ATENÇÃO|OBSERVAÇÃO|PONTO DE REFERÊNCIA)/i)[0];
    let forma = 'nao_informado';
    if (/pix/i.test(linhaPag)) forma = 'pix'; else if (/dinheiro/i.test(linhaPag)) forma = 'dinheiro'; else if (/d[eé]bito/i.test(linhaPag)) forma = 'debito'; else if (/cr[eé]dito/i.test(linhaPag)) forma = 'credito';
    const parcelas = Number((linhaPag.match(/(\d{1,2})\s*x/i)||[])[1]) || 1;
    const valores = [...blocoPag.matchAll(/(?:R\$\s*)?([0-9]{1,3}(?:\.[0-9]{3})*,[0-9]{2}|[0-9]+,[0-9]{2}|[0-9]{1,3}(?:\.[0-9]{3})+)/g)].map((m) => parseBRL(m[1]));
    const valorProdutoFicha = parseBRL((txt.match(/(?:^|\n)\s*VALOR\s*:\s*(?:R\$\s*)?([0-9.]+(?:,[0-9]{1,2})?)/im)||[])[1]);
    const valorFreteFicha = parseBRL((txt.match(/VALOR\s+DO\s+FRETE\s*:\s*(?:R\$\s*)?([0-9.]+(?:,[0-9]{1,2})?)/i)||[])[1]);
    let receita = valorProdutoFicha > 0 ? valorProdutoFicha : (valores.length ? valores[valores.length-1] : 0);
    // Formatos comuns das fichas: “Crédito 10x de 126,00” / “5x R$ 228,18”.
    // Nesses casos o valor escrito é a parcela, então o faturamento é parcela × quantidade.
    if (valorProdutoFicha <= 0 && forma === 'credito' && parcelas > 1) {
      const pm = linhaPag.match(/(\d{1,2})\s*x\s*(?:de\s*)?(?:R\$\s*)?([0-9]{1,3}(?:\.[0-9]{3})*,[0-9]{2}|[0-9]+(?:,[0-9]{2})?)/i);
      if (pm) receita = Number(pm[1]) * parseBRL(pm[2]);
    }
    // Quantidade: nunca deixe \s* atravessar uma quebra de linha aqui.
    // Ex.: um telefone na linha anterior a "Itens:" estava sendo lido como quantidade.
    const qtdRotulo = (txt.match(/(?:^|\n)[ \t]*(?:QTD(?:\.|ADE)?|QUANTIDADE)[ \t]*:[ \t]*(\d+)/im) || [])[1];
    const qtdNaMesmaLinha = (txt.match(/(?:^|\n)[^\n]*?\b(\d+)[ \t]+itens?\b[^\n]*$/im) || [])[1];
    const qtdNoInicioDoItem = (item.match(/^[ \t]*(\d+)[ \t]*(?:x\b|un(?:id(?:ades?)?)?\b)?/i) || [])[1];
    const qtd = Math.max(1, Number(qtdRotulo || qtdNaMesmaLinha || qtdNoInicioDoItem) || 1);
    const m = sugerirModeloPorTexto(item, lojaId);
    setVCliente(nome); setVCep(cep); setVQtdItens(qtd); setVFormaPagamento(forma); setVParcelas(parcelas); if (dataPrev) setVDataPrevista(dataPrev); if (receita) setVReceita(String(receita));
    if (m) {
      setVModelo(m.id); setVCusto(m.custo ? String(m.custo) : '');
      if (lojaId === 'emporio') {
        if (modeloEhCamaFgEmporio(m)) {
          const f2 = freteLuna(cep, FRETE_LUNA_T2, qtd);
          setVFrete(f2 === null ? '' : String(f2));
          setVFreteTabela1('');
        } else setVFrete('130');
      }
      if (lojaId === 'luna') {
        const f2 = freteLuna(cep, FRETE_LUNA_T2, qtd);
        const f1 = freteLuna(cep, FRETE_LUNA_T1, qtd);
        setVFrete(f2 === null ? '' : String(f2));
        setVFreteTabela1(f1 === null ? '' : String(f1));
      }
    }
    setVLojaId(lojaId || LOJA_PADRAO.id);
    if (!vCampanha) setVCampanha(ADX);
    const avisoCusto = lojaId === 'emporio' && modeloEhCamaFgEmporio(m) && !(Number(m?.custo)>0) ? ' · ATENÇÃO: custo FG não cadastrado; preencha o custo do produto' : '';
    const infoFreteFicha = valorFreteFicha > 0 ? ` · frete informado ao cliente ${brl(valorFreteFicha)} (o painel usa a tabela de frete da loja)` : '';
    setPedidoParseMsg(`Ficha lida${m ? ` · ${m.nome}` : item ? ` · modelo não reconhecido: ${item}` : ''}${cep ? ` · CEP ${cep.slice(0,5)}-${cep.slice(5)}` : ''}${infoFreteFicha}${avisoCusto}. Confira os campos antes de registrar.`);
  };

  /* ---------- ações ---------- */
  const dailyMonths = useMemo(() => { const s = new Set(); for (const g of gastos) if (g.date) s.add(g.date.slice(0, 7)); return s; }, [gastos]);
  const getGastoMes = (cid, m) => {
    if (dailyMonths.has(m)) return gastos.filter((g) => g.campanhaId === cid && g.date && g.date.slice(0, 7) === m).reduce((s, g) => s + g.valor, 0);
    return gastos.filter((g) => g.campanhaId === cid && g.mes === m).reduce((s, g) => s + g.valor, 0);
  };
  const getGastoPeriodo = (cid) => {
    let sum = 0;
    for (const g of gastos) {
      if (g.campanhaId !== cid) continue;
      if (g.date) { if (g.date >= per.from && g.date <= per.to) sum += g.valor; }
      else if (g.mes && !dailyMonths.has(g.mes)) { const ms = `${g.mes}-01`, me = `${g.mes}-${lastDay(g.mes)}`; if (per.from <= me && per.to >= ms) sum += g.valor; }
    }
    return sum;
  };
  const upsertGasto = (cid, m, valor) => setGastos((prev) => {
    const rest = prev.filter((g) => !(g.campanhaId === cid && (g.mes === m || (g.date && g.date.slice(0, 7) === m))));
    return valor > 0 ? [...rest, { campanhaId: cid, mes: m, valor }] : rest;
  });

  const isOrg = vCampanha === ORG;
  const onModelo = (id) => {
    setVModelo(id);
    const m = modelos.find((x) => x.id === id);
    if (!m) return;
    setVReceita(m.preco ? String(m.preco) : ''); setVCusto(m.custo ? String(m.custo) : '');
    if (lojaFormulario === 'emporio') {
      if (modeloEhCamaFgEmporio(m)) {
        const f2 = freteLuna(vCep, FRETE_LUNA_T2, vQtdItens);
        setVFrete(f2 === null ? '' : String(f2));
        setVFreteTabela1('');
        setVEntregadorEmporioCama('Rogério');
      } else setVFrete(String(m.frete || 130));
    }
    else if (lojaFormulario === 'luna') {
      const f2 = freteLuna(vCep, FRETE_LUNA_T2, vQtdItens);
      const f1 = freteLuna(vCep, FRETE_LUNA_T1, vQtdItens);
      setVFrete(f2 === null ? '' : String(f2));
      setVFreteTabela1(f1 === null ? '' : String(f1));
    }
    else setVFrete(m.frete ? String(m.frete) : '');
  };
  const addVenda = () => {
    const receita = parseBRL(vReceita);
    if (!vCampanha || receita <= 0) return;
    const base = {
      id: uid(), data: vData, cliente: vCliente.trim(), receita,
      custo: parseBRL(vCusto), frete: parseBRL(vFrete), modeloId: vModelo || null,
      status: vStatus === 'em_rota' ? 'confirmado' : vStatus, dataPrevista: vDataPrevista || '', formaPagamento: vFormaPagamento,
      parcelas: vParcelas, cep: vCep, qtdItens: vQtdItens, freteTabela1: parseBRL(vFreteTabela1),
      tipoProduto: lojaFormulario === 'emporio' && modeloEhCamaFgEmporio(modelos.find((x)=>x.id===vModelo)) ? 'cama_fg' : (lojaFormulario === 'emporio' ? 'sofa' : ''),
      entregadorLuna: lojaFormulario === 'luna' ? vEntregadorLuna : '',
      entregadorEmporioCama: lojaFormulario === 'emporio' && modeloEhCamaFgEmporio(modelos.find((x)=>x.id===vModelo)) ? vEntregadorEmporioCama : '',
      pagamentoRecebidoPor: lojaFormulario === 'luna' ? vPagamentoRecebidoPorLuna : '',
      dataEntrega: ['entregue', 'devolvido'].includes(vStatus) ? (vDataEntrega || todayISO()) : '',
    };
    const lojaExplicita = (vLojaId && lojas.some((l) => l.id === vLojaId)) ? vLojaId : LOJA_PADRAO.id;
    let lojaId = lojaExplicita;
    if (![ORG, ADX].includes(vCampanha)) lojaId = campanhas.find((c) => c.id === vCampanha)?.lojaId || lojaExplicita;
    let nova = enriquecerVenda(base, lojaId, vModelo || null);
    if (vCampanha === ORG) nova = { ...nova, campanhaId: ORG, origem: vOrigem };
    else if (vCampanha === ADX) nova = { ...nova, campanhaId: ADX };
    else nova = { ...nova, campanhaId: vCampanha };
    setVendas((p) => [...p, nova]);
    setVCliente(''); setVReceita(''); setVCusto(''); setVFrete(''); setVModelo(''); setVDataPrevista(''); setVCep(''); setVQtdItens(1); setVParcelas(1); setVFreteTabela1(''); setPedidoPaste(''); setPedidoParseMsg('');
    setVStatus('confirmado'); setVDataEntrega(''); setVFormaPagamento('nao_informado'); setVEntregadorLuna('Tarcísio'); setVEntregadorEmporioCama('Rogério'); setVPagamentoRecebidoPorLuna('luna');
  };

  const atualizarStatusVenda = (id, status) => setVendas((prev) => prev.map((v) => {
    if (v.id !== id) return v;
    const dataEntrega = status === 'entregue' ? (v.dataEntrega || todayISO()) : (status === 'devolvido' ? (v.dataEntrega || todayISO()) : '');
    return { ...v, status, dataEntrega };
  }));
  const confirmarEntrega = (id) => atualizarStatusVenda(id, 'entregue');
  const addDespesa = () => {
    const valor = parseBRL(finValor);
    if (!finDescricao.trim() || valor <= 0 || !finData) return;
    setDespesas((p) => [...p, { id: uid(), data: finData, descricao: finDescricao.trim(), categoria: finCategoria, valor, recorrencia: finRecorrencia, lojaId: finLojaId || 'geral' }]);
    setFinDescricao(''); setFinValor(''); setFinRecorrencia('nao');
  };
  const delDespesa = (id) => setDespesas((p) => p.filter((d) => d.id !== id));
  const addAdManual = () => {
    const valor = parseBRL(adManualValor); if (!adManualData || !['emporio','luna'].includes(adManualLoja) || valor <= 0) return;
    setAdsManuais((p) => [...p, { id: uid(), data: adManualData, lojaId: adManualLoja, valor, observacao: adManualObs.trim(), origem:'manual' }]);
    setAdManualValor(''); setAdManualObs('');
  };
  const delAdManual = (id) => setAdsManuais((p) => p.filter((x) => x.id !== id));
  const addPagamento = () => {
    const valor = parseBRL(pagValor); if (!pagData || !['emporio','luna'].includes(pagLoja) || valor <= 0) return;
    const pessoa = PAGAMENTO_PESSOA[pagLoja]?.[pagTipo] || (pagTipo === 'vendedor' ? 'Vendedor' : 'Freteiro');
    setPagamentos((p) => [...p, { id:uid(), data:pagData, lojaId:pagLoja, tipo:pagTipo, pessoa, valor, observacao:pagObs.trim() }]);
    setPagValor(''); setPagObs('');
  };
  const delPagamento = (id) => {
    const rec = pagamentos.find((x) => x.id === id);
    setPagamentos((p) => p.filter((x) => x.id !== id));
    if (rec?.origem === 'acerto_semanal' && rec.vendaId) {
      setVendas((p) => p.map((v) => v.id === rec.vendaId ? { ...v, acertoStatus:'pendente', acertoDataPagamento:'' } : v));
    }
  };

  const salvarAjustePeriodoFinanceiro = () => {
    if (!['emporio','luna'].includes(lojaFiltro)) return;
    const temAds = String(ajustePeriodoAdsInput).trim() !== '';
    const temVendedor = String(ajustePeriodoVendedorInput).trim() !== '';
    const adsValor = Math.max(0, parseBRL(ajustePeriodoAdsInput));
    const vendedorValor = Math.max(0, parseBRL(ajustePeriodoVendedorInput));
    const pessoa = PAGAMENTO_PESSOA[lojaFiltro]?.vendedor || 'Vendedor';
    setAdsManuais((prev) => {
      const base = prev.filter((x) => !(x.origem === 'ajuste_periodo' && x.lojaId === lojaFiltro && x.periodoFrom === per.from && x.periodoTo === per.to));
      if (!temAds) return base;
      return [...base, { id:uid(), data:per.to, lojaId:lojaFiltro, valor:adsValor, observacao:`Total manual do período ${brDate(per.from)} a ${brDate(per.to)}`, origem:'ajuste_periodo', periodoFrom:per.from, periodoTo:per.to }];
    });
    setPagamentos((prev) => {
      const base = prev.filter((x) => !(x.origem === 'ajuste_periodo' && x.tipo === 'vendedor' && x.lojaId === lojaFiltro && x.periodoFrom === per.from && x.periodoTo === per.to));
      if (!temVendedor) return base;
      return [...base, { id:uid(), data:per.to, lojaId:lojaFiltro, tipo:'vendedor', pessoa, valor:vendedorValor, observacao:`Total manual pago no período ${brDate(per.from)} a ${brDate(per.to)}`, origem:'ajuste_periodo', periodoFrom:per.from, periodoTo:per.to }];
    });
    setAjustePeriodoMsg('Valores do período atualizados ✓');
  };
  const limparAjustePeriodoFinanceiro = () => {
    if (!['emporio','luna'].includes(lojaFiltro)) return;
    setAdsManuais((prev) => prev.filter((x) => !(x.origem === 'ajuste_periodo' && x.lojaId === lojaFiltro && x.periodoFrom === per.from && x.periodoTo === per.to)));
    setPagamentos((prev) => prev.filter((x) => !(x.origem === 'ajuste_periodo' && x.tipo === 'vendedor' && x.lojaId === lojaFiltro && x.periodoFrom === per.from && x.periodoTo === per.to)));
    setAjustePeriodoAdsInput(''); setAjustePeriodoVendedorInput('');
    setAjustePeriodoMsg('Ajuste removido. O painel voltou a usar os lançamentos detalhados.');
  };

  const syncPagamentoAcerto = (v, patch = {}) => {
    const next = { ...v, ...patch };
    if (!next.acertoAtivo || next.acertoStatus !== 'pago') return;
    const id = pagamentoAcertoId(next);
    const valor = valorPagamentoAcertoVenda(next);
    const pessoa = next.acertoRecebedor || acertoRecebedorVenda(next);
    const tipo = next.acertoTipo || 'vendedor';
    const data = next.acertoDataPagamento || todayISO();
    const rec = { id, data, lojaId: next.lojaId || LOJA_PADRAO.id, tipo, pessoa, valor, observacao: `Acerto semanal · ${next.cliente || 'pedido'}`, origem:'acerto_semanal', vendaId: next.id };
    setPagamentos((p) => [...p.filter((x) => x.id !== id && !(x.origem === 'acerto_semanal' && x.vendaId === next.id)), rec]);
  };

  const toggleAcertoVenda = (v) => {
    if (v.acertoAtivo && acertoPagoVenda(v)) {
      setAcertoMsg('Este pedido já está marcado como pago. Desmarque o pagamento antes de removê-lo do acerto.');
      return;
    }
    const ativar = !v.acertoAtivo;
    setVendas((p) => p.map((x) => x.id !== v.id ? x : ativar ? {
      ...x, acertoAtivo:true, acertoValor:acertoValorVenda(x), acertoRecebedor:acertoRecebedorVenda(x),
      acertoTipo:acertoTipoVenda(x), acertoStatus:x.acertoStatus || 'pendente', acertoDataPagamento:x.acertoDataPagamento || '', acertoObservacao:x.acertoObservacao || '',
    } : { ...x, acertoAtivo:false }));
    setAcertoMsg(ativar ? 'Pedido incluído no acerto semanal ✓' : 'Pedido removido do acerto semanal.');
  };

  const atualizarAcertoVenda = (v, patch) => {
    const enrichedPatch = Object.prototype.hasOwnProperty.call(patch, 'acertoValor') ? { ...patch, acertoValorManual:true } : patch;
    const next = { ...v, ...enrichedPatch };
    setVendas((p) => p.map((x) => x.id === v.id ? { ...x, ...enrichedPatch } : x));
    syncPagamentoAcerto(next);
  };

  const marcarAcertoPago = (v, pago) => {
    const id = pagamentoAcertoId(v);
    if (!pago) {
      setVendas((p) => p.map((x) => x.id === v.id ? { ...x, acertoAtivo:true, acertoStatus:'pendente', acertoDataPagamento:'' } : x));
      setPagamentos((p) => p.filter((x) => x.id !== id && !(x.origem === 'acerto_semanal' && x.vendaId === v.id)));
      setAcertoMsg('Pagamento desmarcado; o pedido voltou para pendente.');
      return;
    }
    const patch = {
      acertoAtivo:true, acertoStatus:'pago', acertoDataPagamento:v.acertoDataPagamento || todayISO(),
      acertoValor:acertoValorVenda(v), acertoRecebedor:acertoRecebedorVenda(v), acertoTipo:acertoTipoVenda(v),
    };
    setVendas((p) => p.map((x) => x.id === v.id ? { ...x, ...patch } : x));
    syncPagamentoAcerto({ ...v, ...patch });
    setAcertoMsg('Pagamento marcado como pago e registrado em “A pagar” ✓');
  };

  const copiarAcerto = async (texto, label = 'Atualização copiada ✓') => {
    if (!texto) return;
    try {
      await navigator.clipboard.writeText(texto);
      setAcertoMsg(label);
    } catch {
      try {
        const ta = document.createElement('textarea'); ta.value = texto; ta.style.position='fixed'; ta.style.opacity='0';
        document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); setAcertoMsg(label);
      } catch { setAcertoMsg('Não consegui copiar automaticamente.'); }
    }
  };
  const baixarTexto = (nome, texto) => {
    if (!texto) return;
    try {
      const blob = new Blob([texto], { type:'text/plain;charset=utf-8' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a'); a.href=url; a.download=nome; document.body.appendChild(a); a.click(); a.remove();
      setTimeout(() => URL.revokeObjectURL(url), 500);
      setAcertoMsg('Arquivo TXT gerado ✓');
    } catch { setAcertoMsg('Não consegui gerar o arquivo TXT.'); }
  };

  const addCampanha = () => {
    if (!cNome.trim()) return;
    const lojaId = (cLojaId && lojas.some((l) => l.id === cLojaId)) ? cLojaId : (lojas[0]?.id || LOJA_PADRAO.id);
    setCampanhas((p) => [...p, { id: uid(), nome: cNome.trim(), lojaId, plataforma: cPlataforma }]);
    setCNome('');
  };
  const addLoja = () => {
    const nome = novaLoja.trim();
    if (!nome) return;
    if (lojas.some((l) => norm(l.nome) === norm(nome))) { setNovaLoja(''); return; }
    const id = nome.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '') || uid();
    const finalId = lojas.some((l) => l.id === id) ? `${id}-${uid().slice(0, 4)}` : id;
    setLojas((p) => [...p, { id: finalId, nome }]);
    setNovaLoja('');
  };
  const renameLoja = (id, nome) => setLojas((p) => p.map((l) => (l.id === id ? { ...l, nome } : l)));
  const delLoja = (id) => {
    if (LOJAS_SEED.some((l) => l.id === id)) { setLojaMsg('Essential, Empório e Luna são lojas principais e não podem ser excluídas.'); return; }
    const emUso = campanhas.some((c) => (c.lojaId || LOJA_PADRAO.id) === id)
      || vendas.some((v) => lojaDaVenda(v) === id)
      || despesas.some((d) => d.lojaId === id)
      || modelos.some((m) => m.lojaId === id)
      || adsManuais.some((a) => a.lojaId === id)
      || pagamentos.some((a) => a.lojaId === id);
    if (emUso) { setLojaMsg('Essa loja tem pedidos, campanhas, modelos ou lançamentos vinculados — mova-os antes de excluir.'); return; }
    setLojas((p) => p.filter((l) => l.id !== id));
    if (lojaFiltro === id) setLojaFiltro('todas');
    setLojaMsg('');
  };
  const delVenda = (id) => {
    setVendas((p) => p.filter((v) => v.id !== id));
    setPagamentos((p) => p.filter((x) => !(x.origem === 'acerto_semanal' && x.vendaId === id)));
  };
  const delCampanha = (id) => {
    setCampanhas((p) => p.filter((c) => c.id !== id));
    setGastos((p) => p.filter((g) => g.campanhaId !== id));
    setVendas((p) => p.filter((v) => v.campanhaId !== id));
    if (vCampanha === id) setVCampanha('');
  };
  const mergeCampanha = (fromId, toId) => {
    if (!fromId || !toId || fromId === toId) { setMergePending(null); return; }
    const from = campanhas.find((c) => c.id === fromId), to = campanhas.find((c) => c.id === toId);
    if (!from || !to || (from.lojaId || LOJA_PADRAO.id) !== (to.lojaId || LOJA_PADRAO.id)) { setMergePending(null); return; }
    setGastos((prev) => {
      const reassigned = prev.map((g) => (g.campanhaId === fromId ? { ...g, campanhaId: toId } : g));
      const map = new Map();
      reassigned.forEach((g) => {
        const k = `${g.campanhaId}|${g.date || g.mes}`;
        if (map.has(k)) map.get(k).valor += g.valor;
        else map.set(k, { ...g });
      });
      return [...map.values()];
    });
    setVendas((prev) => prev.map((v) => (v.campanhaId === fromId ? { ...v, campanhaId: toId } : v)));
    setCampanhas((prev) => prev.filter((c) => c.id !== fromId));
    if (vCampanha === fromId) setVCampanha(toId);
    setMergePending(null);
  };

  const salvarModelo = () => {
    if (!mNome.trim()) return;
    const rec = { nome: mNome.trim(), preco: parseBRL(mPreco), custo: parseBRL(mCusto), frete: parseBRL(mFrete), fornecedor: mFornecedor.trim(), lojaId: mLojaId || '' };
    if (editModelo) setModelos((p) => p.map((m) => (m.id === editModelo ? { ...m, ...rec } : m)));
    else setModelos((p) => [...p, { id: uid(), ...rec }]);
    setMNome(''); setMPreco(''); setMCusto(''); setMFrete(''); setMFornecedor(''); setMLojaId(''); setEditModelo(null);
  };
  const startEditModelo = (m) => { setEditModelo(m.id); setMNome(m.nome); setMPreco(m.preco ? String(m.preco) : ''); setMCusto(m.custo ? String(m.custo) : ''); setMFrete(m.frete ? String(m.frete) : ''); setMFornecedor(m.fornecedor || ''); setMLojaId(m.lojaId || ''); };
  const delModelo = (id) => { setModelos((p) => p.filter((m) => m.id !== id)); setVendas((p) => p.map((v) => (v.modeloId === id ? { ...v, modeloId: null } : v))); };

  const exportBackup = () => {
    try {
      const dump = { app: 'metricas-campanhas-whatsapp', versao: 10, exportadoEm: new Date().toISOString(), lojas, campanhas, gastos, vendas, modelos, despesas, adsManuais, pagamentos, fgMovimentos, historico, marketplaceProdutos, marketplacePedidos, marketplaceAds, config };
      const blob = new Blob([JSON.stringify(dump, null, 2)], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = `metricas-backup-${todayISO()}.json`;
      document.body.appendChild(a); a.click(); document.body.removeChild(a);
      URL.revokeObjectURL(url);
      setBackupMsg('Backup baixado ✓');
    } catch { setBackupMsg('Não consegui gerar o backup.'); }
  };
  const importBackup = (e) => {
    const file = e.target.files && e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = () => {
      try {
        const d = migrarLojas(JSON.parse(String(reader.result)));
        setLojas(mergeById(d.lojas, lojas));
        setCampanhas(mergeById(d.campanhas, campanhas));
        setGastos(mergeGastos(d.gastos, gastos));
        setVendas(mergeById(d.vendas, vendas));
        setModelos(mergeById(d.modelos, modelos));
        setDespesas(mergeById((d.despesas || []).map((x) => ({ ...x, lojaId: x.lojaId || 'geral' })), despesas));
        setAdsManuais(mergeById(d.adsManuais || [], adsManuais));
        setPagamentos(mergeById(d.pagamentos || [], pagamentos));
        setFgMovimentos(mergeById(d.fgMovimentos || [], fgMovimentos));
        setHistorico(mergeById(d.historico || [], historico));
        setMarketplaceProdutos(mergeById(d.marketplaceProdutos || [], marketplaceProdutos));
        setMarketplacePedidos(mergeById(d.marketplacePedidos || [], marketplacePedidos));
        setMarketplaceAds(mergeById(d.marketplaceAds || [], marketplaceAds));
        if (d.config) setConfig(d.config);
        setBackupMsg('Backup restaurado e mesclado ✓');
      } catch { setBackupMsg('Arquivo inválido — não consegui ler o backup.'); }
    };
    reader.readAsText(file);
    e.target.value = '';
  };

  const startEdit = (v) => {
    setEditId(v.id);
    setEditDraft({
      data: v.data || todayISO(), tipo: v.campanhaId, origem: v.origem || ORIGENS[0],
      modeloId: v.modeloId || '', cliente: v.cliente || '', receita: String(v.receita ?? ''),
      custo: String(v.custo ?? ''), frete: String(v.frete ?? ''), status: statusVenda(v),
      dataPrevista: v.dataPrevista || '', dataEntrega: v.dataEntrega || '', formaPagamento: v.formaPagamento || 'nao_informado',
      lojaId: v.lojaId || LOJA_PADRAO.id, parcelas: v.parcelas || 1, cep: v.cep || '', qtdItens: v.qtdItens || 1, freteTabela1: String(v.freteTabela1 ?? ''), tipoProduto: v.tipoProduto || '',
      entregadorLuna: entregadorLunaVenda(v) || 'Tarcísio', entregadorEmporioCama: entregadorEmporioCamaVenda(v) || 'Rogério', pagamentoRecebidoPor: pagamentoRecebidoPorLunaVenda(v) === 'fg' ? 'fg' : 'luna',
      comissaoVendedorManual: String(comissaoVendedorManualVenda(v) ?? vendedorDevidoVenda(v) ?? 0),
      comissaoVendedorManualAtiva: comissaoVendedorManualVenda(v) !== null,
    });
  };
  const cancelEdit = () => { setEditId(null); setEditDraft(null); };
  const saveEdit = () => {
    if (!editDraft) return;
    const receita = parseBRL(editDraft.receita);
    if (receita <= 0) return;
    setVendas((p) => p.map((v) => {
      if (v.id !== editId) return v;
      const status = editDraft.status === 'em_rota' ? 'confirmado' : (editDraft.status || statusVenda(v));
      const base = {
        id: v.id, data: editDraft.data, cliente: editDraft.cliente.trim(), receita,
        custo: parseBRL(editDraft.custo), frete: parseBRL(editDraft.frete), modeloId: editDraft.modeloId || null,
        status, dataPrevista: editDraft.dataPrevista || '', formaPagamento: editDraft.formaPagamento || 'nao_informado',
        parcelas: editDraft.parcelas || 1, cep: editDraft.cep || '', qtdItens: editDraft.qtdItens || 1, freteTabela1: parseBRL(editDraft.freteTabela1), tipoProduto: editDraft.tipoProduto || '',
        entregadorLuna: editDraft.lojaId === 'luna' ? (editDraft.entregadorLuna || 'Tarcísio') : '',
        entregadorEmporioCama: editDraft.lojaId === 'emporio' && (editDraft.tipoProduto === 'cama_fg' || modeloEhCamaFgEmporio(modelos.find((x)=>x.id===editDraft.modeloId))) ? (editDraft.entregadorEmporioCama || 'Rogério') : '',
        pagamentoRecebidoPor: editDraft.lojaId === 'luna' ? (editDraft.pagamentoRecebidoPor || 'luna') : '',
        comissaoVendedorManual: ['emporio','luna'].includes(editDraft.lojaId) && editDraft.comissaoVendedorManualAtiva ? parseBRL(editDraft.comissaoVendedorManual) : null,
        dataEntrega: status === 'entregue' ? (editDraft.dataEntrega || todayISO()) : (status === 'devolvido' ? (editDraft.dataEntrega || v.dataEntrega || todayISO()) : ''),
      };
      let lojaId = editDraft.lojaId || v.lojaId || LOJA_PADRAO.id;
      if (![ORG, ADX].includes(editDraft.tipo)) lojaId = campanhas.find((c) => c.id === editDraft.tipo)?.lojaId || lojaId;
      const rich = enriquecerVenda(base, lojaId, editDraft.modeloId || null);
      if (editDraft.tipo === ORG) return { ...v, ...rich, campanhaId: ORG, origem: editDraft.origem };
      if (editDraft.tipo === ADX) return { ...v, ...rich, campanhaId: ADX };
      return { ...v, ...rich, campanhaId: editDraft.tipo };
    }));
    cancelEdit();
  };

  /* ---------- Windsor.ai ---------- */
  const autoMatch = (name) => {
    const n = norm(name);
    if (!n) return '';
    // Por enquanto o Windsor pertence somente à Essential Estofados.
    const pool = campanhas.filter((c) => (c.lojaId || LOJA_PADRAO.id) === LOJA_PADRAO.id);
    const exact = pool.find((c) => norm(c.nome) === n);
    if (exact) return exact.id;
    const part = pool.find((c) => norm(c.nome) && (n.includes(norm(c.nome)) || norm(c.nome).includes(n)));
    return part ? part.id : '';
  };
  const loadMetaArray = (arr) => {
    if (!Array.isArray(arr) || arr.length === 0) { setMetaError('Nenhum dado válido encontrado.'); return false; }
    const detail = arr.map((r) => ({ campanha: String(r.campanha ?? r.campaign ?? '—'), date: String(r.data ?? r.date ?? '').slice(0, 10), gasto: parseBRL(r.gasto ?? r.spend ?? 0) })).filter((d) => d.gasto > 0 && d.date.length === 10);
    if (detail.length === 0) { setMetaError('Nenhum registro válido (esperado: campanha, data YYYY-MM-DD e gasto).'); return false; }
    const byName = {};
    detail.forEach((d) => { byName[d.campanha] = (byName[d.campanha] || 0) + d.gasto; });
    setMetaError(''); setMetaMsg('');
    setMetaDetail(detail);
    setMetaRows(Object.keys(byName).map((nome) => ({ campanha: nome, gastoTotal: byName[nome], mapId: autoMatch(nome) || '__new__' })));
    return true;
  };
  const carregarColado = () => {
    setMetaMsg('');
    try {
      const t = (metaPaste || '').trim();
      const a = t.indexOf('['), b = t.lastIndexOf(']');
      if (a === -1 || b === -1) throw new Error('sem json');
      const arr = JSON.parse(t.slice(a, b + 1));
      if (loadMetaArray(arr)) setMetaPaste('');
    } catch { setMetaError('Não consegui ler o texto colado. Cole o JSON exatamente como recebeu.'); }
  };
  const fetchMeta = async () => {
    setFetchingMeta(true); setMetaError(''); setMetaMsg(''); setMetaRows([]); setMetaDetail([]);
    try {
      const qs = new URLSearchParams({ from: per.from, to: per.to });
      const res = await fetch(`/api/windsor-meta.php?${qs.toString()}`, { headers: { Accept: 'application/json' } });
      const payload = await res.json().catch(() => ({}));
      if (!res.ok) throw new Error(payload.error || `Falha HTTP ${res.status}`);
      const arr = Array.isArray(payload) ? payload : (payload.data || []);
      if (!Array.isArray(arr) || arr.length === 0) {
        setMetaError('Nenhum gasto retornado para este período. Confirme no Windsor.ai se a conta do Meta está conectada e com dados nas datas escolhidas.');
      } else {
        loadMetaArray(arr);
      }
    } catch (e) {
      setMetaError(e?.message || 'Não consegui puxar do Windsor.ai agora. Use a opção de colar o gasto abaixo ou tente novamente.');
    } finally { setFetchingMeta(false); }
  };

  const applyMeta = () => {
    let newCamps = [...campanhas];
    const nameToCid = {};
    metaRows.forEach((r) => {
      let cid = r.mapId; if (!cid) { nameToCid[r.campanha] = null; return; }
      if (cid === '__new__') { cid = uid(); newCamps.push({ id: cid, nome: r.campanha, lojaId: LOJA_PADRAO.id, plataforma: 'Facebook' }); }
      nameToCid[r.campanha] = cid;
    });
    const touched = new Set(Object.values(nameToCid).filter(Boolean));
    const mesesPuxados = new Set(metaDetail.map((d) => d.date.slice(0, 7)));
    // remove registros antigos (diários no intervalo ou mensais legado dos meses puxados) das campanhas atualizadas
    let newGastos = gastos.filter((g) => {
      if (!touched.has(g.campanhaId)) return true;
      if (g.date && g.date >= per.from && g.date <= per.to) return false;
      if (g.mes && mesesPuxados.has(g.mes)) return false;
      return true;
    });
    let n = 0;
    metaDetail.forEach((d) => {
      const cid = nameToCid[d.campanha]; if (!cid) return;
      newGastos.push({ campanhaId: cid, date: d.date, valor: d.gasto });
      n++;
    });
    setCampanhas(newCamps); setGastos(newGastos); setMetaRows([]); setMetaDetail([]);
    setMetaMsg(n > 0 ? `Gasto aplicado (${n} registro(s)) ✓` : 'Nada aplicado — tudo estava como "Ignorar".');
  };

  /* ---------- dados calculados ---------- */
  // Resolve a loja de uma venda: própria > da campanha > padrão.
  const campLojaMap = useMemo(() => new Map(campanhas.map((c) => [c.id, c.lojaId || LOJA_PADRAO.id])), [campanhas]);
  const lojaDaVenda = (v) => v.lojaId || campLojaMap.get(v.campanhaId) || LOJA_PADRAO.id;
  const campNoEscopo = (c) => lojaFiltro === 'todas' || (c.lojaId || LOJA_PADRAO.id) === lojaFiltro;
  const vendaNoEscopo = (v) => lojaFiltro === 'todas' || lojaDaVenda(v) === lojaFiltro;

  const emPeriodo = (v) => (v.data || '') >= per.from && (v.data || '') <= per.to;
  // Fontes já filtradas pela loja selecionada — todos os cálculos financeiros consomem estas.
  const campanhasEsc = useMemo(() => campanhas.filter(campNoEscopo), [campanhas, lojaFiltro]);
  const vendasEsc = useMemo(() => vendas.filter(vendaNoEscopo), [vendas, lojaFiltro, campLojaMap]);
  const vendasPer = useMemo(() => vendas.filter((v) => emPeriodo(v) && vendaNoEscopo(v)), [vendas, per, lojaFiltro, campLojaMap]);
  const gastosEsc = useMemo(() => {
    if (lojaFiltro === 'todas') return gastos;
    const ids = new Set(campanhasEsc.map((c) => c.id));
    return gastos.filter((g) => ids.has(g.campanhaId));
  }, [gastos, campanhasEsc, lojaFiltro]);
  const hasOrg = useMemo(() => vendas.some((v) => v.campanhaId === ORG), [vendas]);
  const nomeModelo = (id) => modelos.find((m) => m.id === id)?.nome || null;
  const custoTot = (v) => receitaFinanceiraVenda(v) - lucroBaseVenda(v);

  const secOrder = useMemo(() => {
    const saved = Array.isArray(config.secOrder) ? config.secOrder.filter((k) => DEFAULT_SEC.includes(k)) : [];
    return [...saved, ...DEFAULT_SEC.filter((k) => !saved.includes(k))];
  }, [config.secOrder]);
  const visibleSecKeys = () => secOrder;
  const moveSection = (key, dir) => {
    const vis = visibleSecKeys();
    const target = vis[vis.indexOf(key) + dir];
    if (target == null) return;
    const order = secOrder.slice();
    const a = order.indexOf(key), b = order.indexOf(target);
    [order[a], order[b]] = [order[b], order[a]];
    setConfig((c) => ({ ...c, secOrder: order }));
  };
  const secUp = (key) => (visibleSecKeys().indexOf(key) > 0 ? () => moveSection(key, -1) : null);
  const secDown = (key) => { const vis = visibleSecKeys(); return vis.indexOf(key) < vis.length - 1 ? () => moveSection(key, 1) : null; };
  const moveCamp = (i, dir) => {
    const j = i + dir;
    if (j < 0 || j >= campanhas.length) return;
    setCampanhas((prev) => { const a = [...prev]; [a[i], a[j]] = [a[j], a[i]]; return a; });
  };

  const nomeVenda = (v) => {
    if (v.campanhaId === ORG) return `Orgânico · ${v.origem || 'Outro'}`;
    if (v.campanhaId === ADX) return 'Anúncio (não rastreado)';
    return campanhas.find((c) => c.id === v.campanhaId)?.nome || '—';
  };

  const todasPendentes = vendas.filter((v) => vendaPendente(v) && vendaNoEscopo(v)).slice().sort((a, b) => {
    const da = dataISO(a.dataPrevista) || '9999-12-31'; const db = dataISO(b.dataPrevista) || '9999-12-31';
    return da.localeCompare(db) || String(a.data || '').localeCompare(String(b.data || ''));
  });
  // Toda a área de entregas acompanha o período principal escolhido no topo.
  // Para pedidos ainda pendentes, a referência é a DATA PREVISTA DE ENTREGA.
  // Derivado em cada render para nunca manter uma lista antiga depois de
  // cadastrar, editar ou sincronizar um pedido.
  const entregasPendentes = todasPendentes.filter((v) =>
    vendaPendenteNoPeriodo(v, per.from, per.to)
  );

  const abrirPendentesDoPeriodo = () => {
    window.setTimeout(() => entregasPendentesRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' }), 50);
  };
  const abrirTodosPendentes = abrirPendentesDoPeriodo;
  const abrirPendentesPrevistosPeriodo = abrirPendentesDoPeriodo;

  const campDetalhe = (cid) => {
    const vs = vendasPer.filter((v) => v.campanhaId === cid && !vendaCancelada(v));
    const byModel = {};
    vs.forEach((v) => {
      const k = v.modeloId || '__sem__';
      if (!byModel[k]) byModel[k] = { id: k, nome: v.modeloId ? (nomeModelo(v.modeloId) || 'Modelo removido') : 'Sem modelo', n: 0, receita: 0, custo: 0 };
      byModel[k].n++; byModel[k].receita += receitaFinanceiraVenda(v); byModel[k].custo += custoTot(v);
    });
    const modelosList = Object.values(byModel).map((m) => ({ ...m, lucro: m.receita - m.custo })).sort((a, b) => b.n - a.n);
    return { vs: vs.slice().sort((a, b) => (b.data > a.data ? 1 : -1)), modelosList };
  };

  const detalheNaoRastreado = expandedCamp === ADX ? campDetalhe(ADX) : null;

  const rows = useMemo(() => {
    const filt = campanhasEsc;
    const out = filt.map((c) => {
      const vs = vendasPer.filter((v) => v.campanhaId === c.id && !vendaCancelada(v));
      const nPedidos = vs.length;
      const receita = vs.reduce((s, v) => s + receitaFinanceiraVenda(v), 0);
      const custoProd = vs.reduce((s, v) => s + custoTot(v), 0);
      const gastoMidia = getGastoPeriodo(c.id);
      const gasto = comImp(gastoMidia);
      const cpaPedido = nPedidos > 0 ? gasto / nPedidos : null;
      const ticket = nPedidos > 0 ? receita / nPedidos : null;
      const roas = gasto > 0 ? receita / gasto : null;
      const lucro = receita - custoProd - gasto;
      return { c, nPedidos, receita, custoProd, gastoMidia, gasto, cpaPedido, ticket, roas, lucro };
    });
    // O comparativo mostra somente anúncios que realmente tiveram gasto no
    // período selecionado. O cadastro continua preservado para outros períodos.
    const comGastoNoPeriodo = out.filter((r) => Number(r.gastoMidia) > 0.005);
    return ordenacao === 'manual' ? comGastoNoPeriodo : comGastoNoPeriodo.sort((a, b) => b.lucro - a.lucro);
  }, [campanhas, vendasPer, gastos, per, lojaFiltro, impPct, ordenacao, fgMovimentos]);

  const adReal = useMemo(() => {
    // Pedidos são atribuídos à data em que foram feitos.
    const pedidosTracked = vendasPer.filter((v) => v.campanhaId !== ORG && v.campanhaId !== ADX);
    const pedidosUntrackedLista = vendasPer.filter((v) => v.campanhaId === ADX);
    const pedidosAd = [...pedidosTracked, ...pedidosUntrackedLista];

    // Entregas são atribuídas à data real da entrega, mesmo quando o pedido foi feito em outro dia.
    const entreguesPeriodo = vendasEsc.filter((v) => {
      if (!vendaEntregue(v) || v.campanhaId === ORG) return false;
      const dataEntrega = v.dataEntrega || '';
      return dataEntrega && dataEntrega >= per.from && dataEntrega <= per.to;
    });
    const trackedEntregues = entreguesPeriodo.filter((v) => v.campanhaId !== ADX);
    const untrackedEntregues = entreguesPeriodo.filter((v) => v.campanhaId === ADX);
    const ativos = pedidosAd.filter((v) => !vendaCancelada(v));

    const gastoMidiaCalculado = campanhasEsc.reduce((s, c) => s + getGastoPeriodo(c.id), 0);
    const ajusteAds = ['emporio','luna'].includes(lojaFiltro) ? ajusteAdsPeriodoRegistro(lojaFiltro, per.from, per.to) : null;
    const gastoMidia = ajusteAds ? Math.max(0, Number(ajusteAds.valor) || 0) : gastoMidiaCalculado;
    const imposto = ajusteAds ? 0 : gastoMidiaCalculado * impPct / 100;
    const gastoTotal = ajusteAds ? gastoMidia : gastoMidia + imposto;
    const receita = entreguesPeriodo.reduce((s, v) => s + receitaFinanceiraVenda(v), 0);
    const custo = entreguesPeriodo.reduce((s, v) => s + custoTot(v), 0);
    const receitaPrevista = ativos.reduce((s, v) => s + receitaFinanceiraVenda(v), 0);
    const custoPrevisto = ativos.reduce((s, v) => s + custoTot(v), 0);
    const nPedidos = pedidosAd.length;
    const nEntregues = entreguesPeriodo.length;
    return {
      gastoMidia, imposto, gastoTotal, receita, custo, receitaPrevista, custoPrevisto,
      nPedidos, nEntregues, nPendentes: pedidosAd.filter(vendaPendente).length, nCancelados: pedidosAd.filter(vendaCancelada).length,
      nTracked: trackedEntregues.length, nUntracked: untrackedEntregues.length,
      cpaPedido: nPedidos > 0 ? gastoTotal / nPedidos : null,
      cpaEntrega: nEntregues > 0 ? gastoTotal / nEntregues : null,
      roas: gastoTotal > 0 ? receita / gastoTotal : null,
      lucro: receita - custo - gastoTotal,
      lucroPrevisto: receitaPrevista - custoPrevisto - gastoTotal,
      recUntracked: untrackedEntregues.reduce((s, v) => s + receitaFinanceiraVenda(v), 0),
      custoUntracked: untrackedEntregues.reduce((s, v) => s + custoTot(v), 0),
      pedidosUntracked: pedidosUntrackedLista.length,
    };
  }, [vendas, vendasEsc, vendasPer, campanhasEsc, gastosEsc, per, impPct, lojaFiltro, fgMovimentos]);

  const adComparativo = useMemo(() => {
    const ajusteAds = ['emporio','luna'].includes(lojaFiltro) ? ajusteAdsPeriodoRegistro(lojaFiltro, per.from, per.to) : null;
    const campanhasComGasto = new Set(rows.map((r) => r.c.id));
    // Sem ajuste geral, os totais acompanham exatamente os anúncios visíveis.
    // Quando existe um ajuste agregado da loja, não há rateio confiável por
    // campanha; nesse caso preservamos todos os pedidos rastreados no total.
    const tracked = vendasPer.filter((v) => v.campanhaId !== ORG && v.campanhaId !== ADX && !vendaCancelada(v) && (ajusteAds || campanhasComGasto.has(v.campanhaId)));
    const untracked = vendasPer.filter((v) => v.campanhaId === ADX && !vendaCancelada(v));
    const ad = [...tracked, ...untracked];
    const gastoMidiaCalculado = rows.reduce((s, r) => s + r.gastoMidia, 0);
    const gastoMidia = ajusteAds ? Math.max(0, Number(ajusteAds.valor) || 0) : gastoMidiaCalculado;
    const imposto = ajusteAds ? 0 : gastoMidiaCalculado * impPct / 100;
    const gastoTotal = ajusteAds ? gastoMidia : gastoMidia + imposto;
    const receita = ad.reduce((s, v) => s + receitaFinanceiraVenda(v), 0);
    const custo = ad.reduce((s, v) => s + custoTot(v), 0);
    const nPedidos = ad.length;
    return {
      gastoMidia, imposto, gastoTotal, receita, custo, nPedidos,
      cpa: nPedidos > 0 ? gastoTotal / nPedidos : null,
      ticket: nPedidos > 0 ? receita / nPedidos : null,
      roas: gastoTotal > 0 ? receita / gastoTotal : null,
      lucro: receita - custo - gastoTotal,
      recUntracked: untracked.reduce((s, v) => s + receitaFinanceiraVenda(v), 0),
      custoUntracked: untracked.reduce((s, v) => s + custoTot(v), 0),
      pedidosUntracked: untracked.length,
    };
  }, [vendasPer, rows, per, impPct, lojaFiltro, fgMovimentos]);

  const trackedTot = useMemo(() => rows.reduce((s, r) => ({
    gasto: s.gasto + r.gasto, receita: s.receita + r.receita,
    nPedidos: s.nPedidos + r.nPedidos,
    lucro: s.lucro + r.lucro,
  }), { gasto: 0, receita: 0, nPedidos: 0, lucro: 0 }), [rows]);

  const vendasOrg = useMemo(() => vendasPer.filter((v) => v.campanhaId === ORG), [vendasPer]);
  const orgResumo = useMemo(() => {
    const entregues = vendasEsc.filter((v) => {
      if (v.campanhaId !== ORG || !vendaEntregue(v)) return false;
      const dataEntrega = v.dataEntrega || '';
      return dataEntrega && dataEntrega >= per.from && dataEntrega <= per.to;
    });
    const ativos = vendasOrg.filter((v) => !vendaCancelada(v));
    const receita = entregues.reduce((s, v) => s + receitaFinanceiraVenda(v), 0);
    const custo = entregues.reduce((s, v) => s + custoTot(v), 0);
    const receitaPrevista = ativos.reduce((s, v) => s + receitaFinanceiraVenda(v), 0);
    const custoPrevisto = ativos.reduce((s, v) => s + custoTot(v), 0);
    return {
      nPedidos: vendasOrg.length, nEntregues: entregues.length, nPendentes: vendasOrg.filter(vendaPendente).length,
      receita, custo, lucro: receita - custo, receitaPrevista, lucroPrevisto: receitaPrevista - custoPrevisto,
    };
  }, [vendas, vendasEsc, vendasOrg, per, lojaFiltro, fgMovimentos]);
  const orgPorOrigem = useMemo(() => {
    const map = {};
    vendasOrg.forEach((v) => {
      const k = v.origem || 'Outro';
      if (!map[k]) map[k] = { origem: k, pedidos: 0, entregues: 0, receita: 0, custo: 0 };
      map[k].pedidos++;
      if (vendaEntregue(v)) { map[k].entregues++; map[k].receita += receitaFinanceiraVenda(v); map[k].custo += custoTot(v); }
    });
    return Object.values(map).map((o) => ({ ...o, lucro: o.receita - o.custo })).sort((a, b) => b.lucro - a.lucro);
  }, [vendasOrg, fgMovimentos]);

  const geral = useMemo(() => {
    const receitaPrevista = adReal.receitaPrevista + orgResumo.receitaPrevista;
    const receitaRealizada = adReal.receita + orgResumo.receita;
    const lucroPrevisto = adReal.lucroPrevisto + orgResumo.lucroPrevisto;
    const lucroRealizado = adReal.lucro + orgResumo.lucro;
    return {
      receitaPrevista, receitaRealizada, gastoTotal: adReal.gastoTotal, lucroPrevisto, lucroRealizado,
      pendentes: vendasEsc.filter((v) => vendaPendenteNoPeriodo(v, per.from, per.to)).length,
      totalPedidos: vendasPer.filter((v) => vendaEntregue(v) || vendaPendente(v)).length,
      share: receitaRealizada > 0 ? adReal.receita / receitaRealizada : null,
    };
  }, [adReal, orgResumo, vendasPer, vendasEsc, per.from, per.to]);

  const modelosRank = useMemo(() => {
    const map = {};
    // Mais vendidos deve representar os pedidos válidos feitos no período,
    // mesmo que ainda estejam confirmados ou pendentes. Cancelados e
    // devolvidos não entram no ranking.
    const pedidosValidos = vendasPer.filter((v) => !vendaCancelada(v));
    pedidosValidos.forEach((v) => {
      if (!v.modeloId) return;
      if (!map[v.modeloId]) map[v.modeloId] = { n: 0, receita: 0, custo: 0 };
      map[v.modeloId].n++; map[v.modeloId].receita += receitaFinanceiraVenda(v); map[v.modeloId].custo += custoTot(v);
    });
    const semModelo = pedidosValidos.filter((v) => !v.modeloId).length;
    const list = modelos.map((m) => { const a = map[m.id] || { n: 0, receita: 0, custo: 0 }; return { m, n: a.n, receita: a.receita, custo: a.custo, lucro: a.receita - a.custo }; })
      .sort((a, b) => b.n - a.n || b.receita - a.receita);
    return { list, semModelo };
  }, [vendasPer, modelos, fgMovimentos]);

  const fornecedoresRank = useMemo(() => {
    const pedidosValidos = vendasPer.filter((v) => !vendaCancelada(v) && v.modeloId);
    const map = {};
    pedidosValidos.forEach((v) => {
      const modelo = modelos.find((m) => m.id === v.modeloId);
      if (!modelo) return;
      const fornecedor = (modelo.fornecedor || 'Sem fornecedor').trim() || 'Sem fornecedor';
      if (!map[fornecedor]) map[fornecedor] = { fornecedor, pedidos: 0, faturamento: 0, gasto: 0, modelos: {} };
      const item = map[fornecedor];
      item.pedidos += 1;
      item.faturamento += receitaFinanceiraVenda(v);
      // Gasto com o fornecedor considera somente o custo do produto.
      // O frete fica fora deste ranking, conforme solicitado.
      item.gasto += Number(v.custo) || 0;
      if (!item.modelos[modelo.id]) item.modelos[modelo.id] = { nome: modelo.nome, n: 0, faturamento: 0 };
      item.modelos[modelo.id].n += 1;
      item.modelos[modelo.id].faturamento += receitaFinanceiraVenda(v);
    });
    return Object.values(map)
      .map((x) => ({
        ...x,
        lucro: x.faturamento - x.gasto,
        modelosRank: Object.values(x.modelos).sort((a, b) => b.n - a.n || b.faturamento - a.faturamento),
      }))
      .sort((a, b) => b.faturamento - a.faturamento || b.pedidos - a.pedidos);
  }, [vendasPer, modelos, fgMovimentos]);

  const recentesAba = useMemo(() => {
    const src = aba === 'organico' ? vendasOrg : vendasPer.filter((v) => v.campanhaId !== ORG);
    return src.slice().sort((a, b) => (b.data > a.data ? 1 : b.data < a.data ? -1 : 0)).slice(0, 100);
  }, [aba, vendasPer, vendasOrg]);

  // O histórico do bloco de pedidos usa todos os pedidos de anúncio.
  // A data é aplicada depois conforme a aba: pedido, entrega ou confirmação.
  // Isso evita perder entregas feitas no dia quando o pedido foi criado em outra data.
  const pedidosAnuncioBase = useMemo(() => {
    const dataRef = (v) => pedidosModoData === 'entregue' ? (v.dataEntrega || v.data || '') : (v.data || '');
    return vendas
      .filter((v) => vendaNoEscopo(v) && v.campanhaId !== ORG)
      .slice()
      .sort((a, b) => dataRef(b).localeCompare(dataRef(a)))
      .slice(0, 500);
  }, [vendas, pedidosModoData, lojaFiltro, campLojaMap]);

  // A lista de pedidos usa sempre o mesmo período principal do topo.
  // O modo abaixo define apenas qual data será comparada (pedido/entrega/confirmação).
  const pedidosRange = useMemo(() => ({ from: per.from, to: per.to }), [per.from, per.to]);


  const recentesFiltradas = useMemo(() => {
    const q = norm(vendasBusca);
    const { from, to } = pedidosRange;
    return pedidosAnuncioBase.filter((v) => {
      const stRaw = statusVenda(v);
      if (pedidosModoData === 'entregue' && stRaw !== 'entregue') return false;
      if (pedidosModoData === 'confirmado' && stRaw !== 'confirmado') return false;
      const dataRef = pedidosModoData === 'entregue' ? (v.dataEntrega || '') : (v.data || '');
      if (from && (!dataRef || dataRef < from)) return false;
      if (to && (!dataRef || dataRef > to)) return false;
      if (!q) return true;
      const cliente = norm(v.cliente || '');
      const modelo = norm(nomeModelo(v.modeloId) || '');
      const anuncio = norm(nomeVenda(v) || '');
      const status = norm(STATUS_INFO[stRaw]?.label || '');
      return cliente.includes(q) || modelo.includes(q) || anuncio.includes(q) || status.includes(q);
    });
  }, [pedidosAnuncioBase, vendasBusca, pedidosDataFiltro, pedidosModoData, pedidosRange, campanhas, modelos]);


  const despesaNoDia = (d, dia) => {
    if (!d || !dia) return 0;
    if ((d.recorrencia || 'nao') !== 'mensal') return d.data === dia ? (Number(d.valor) || 0) : 0;
    if (!d.data || dia < d.data) return 0;
    const originalDay = Number(d.data.slice(8, 10)) || 1;
    const ym = dia.slice(0, 7); const diaAlvo = Math.min(originalDay, Number(lastDay(ym)));
    return Number(dia.slice(8, 10)) === diaAlvo ? (Number(d.valor) || 0) : 0;
  };
  const gastoAdsDia = (dia) => {
    const lojasAlvo = lojaFiltro === 'todas' ? lojas.map((l) => l.id) : [lojaFiltro];
    return lojasAlvo.reduce((total, lojaId) => {
      const ajuste = ['emporio','luna'].includes(lojaId) ? ajusteAdsPeriodoRegistro(lojaId, per.from, per.to) : null;
      // Um total digitado para o período é aplicado uma única vez no último dia do intervalo,
      // apenas para fechar corretamente o total. Ele não é inventado/distribuído pelos dias.
      if (ajuste) return total + (dia === per.to ? Math.max(0, Number(ajuste.valor) || 0) : 0);
      const campIds = new Set(campanhas.filter((c) => (c.lojaId || LOJA_PADRAO.id) === lojaId).map((c) => c.id));
      const midia = gastos.filter((g) => g.date === dia && campIds.has(g.campanhaId)).reduce((s, g) => s + (Number(g.valor) || 0), 0);
      const manual = adsManuais.filter((a) => a.origem !== 'ajuste_periodo' && a.data === dia && a.lojaId === lojaId).reduce((s,a) => s + (Number(a.valor) || 0), 0);
      return total + comImp(midia) + manual;
    }, 0);
  };
  useEffect(() => {
    if (!['emporio','luna'].includes(lojaFiltro)) {
      setAjustePeriodoAdsInput(''); setAjustePeriodoVendedorInput(''); setAjustePeriodoMsg('');
      return;
    }
    const a = ajusteAdsPeriodoRegistro(lojaFiltro, per.from, per.to);
    const p = ajusteVendedorPeriodoRegistro(lojaFiltro, per.from, per.to);
    setAjustePeriodoAdsInput(a ? num(Number(a.valor) || 0, 2) : '');
    setAjustePeriodoVendedorInput(p ? num(Number(p.valor) || 0, 2) : '');
    setAjustePeriodoMsg('');
  }, [lojaFiltro, per.from, per.to, adsManuais, pagamentos]);

  // Custos operacionais do dia que ENTRAM no lucro:
  //  - "Todas as lojas": todos os custos (específicos + gerais), uma única vez.
  //  - Loja individual: apenas os custos específicos daquela loja. Os gerais NÃO são descontados
  //    da loja (aparecem separados como "Custos gerais não alocados"). Sem rateio automático.
  const custosOpNoDia = (dia) => despesas.reduce((s, d) => {
    const base = despesaNoDia(d, dia);
    if (!base) return s;
    if (lojaFiltro === 'todas') return s + base;
    return (d.lojaId || 'geral') === lojaFiltro ? s + base : s;
  }, 0);
  // Custos gerais (não alocados a uma loja) no dia — usados só para exibição na visão de loja individual.
  const custosGeraisNoDia = (dia) => despesas.reduce((s, d) => {
    if ((d.lojaId || 'geral') !== 'geral') return s;
    return s + despesaNoDia(d, dia);
  }, 0);
  const financeiro = useMemo(() => {
    const dias = diasEntre(per.from, per.to);
    const pedidosBase = vendasEsc.filter((v) => !vendaCancelada(v) && (financeiroView === 'comercial'
      ? (v.data >= per.from && v.data <= per.to)
      : (vendaEntregue(v) && v.dataEntrega && v.dataEntrega >= per.from && v.dataEntrega <= per.to)));
    const rows = dias.map((dia) => {
      const pedidosDiaTodos = pedidosBase.filter((v) => (financeiroView === 'comercial' ? v.data : v.dataEntrega) === dia);
      // Faturamento mostra apenas o dinheiro que deve entrar na própria loja.
      const pedidosDiaFaturamento = pedidosDiaTodos.filter(vendaEntraFinanceiroLoja);
      const faturamento = pedidosDiaFaturamento.reduce((s, v) => s + receitaFinanceiraVenda(v), 0);
      const receitaBaseLucro = pedidosDiaTodos.reduce((s, v) => s + receitaFinanceiraVenda(v), 0);
      // Lucro Loja, por outro lado, considera TODOS os pedidos válidos. Na Luna isso inclui
      // os pedidos entregues pelo FG, mesmo quando ficam fora do faturamento financeiro.
      const taxasCartao = pedidosDiaTodos.reduce((s, v) => s + taxaCartaoValorVenda(v), 0);
      const fornecedor = pedidosDiaTodos.reduce((s, v) => s + (Number(v.custo) || 0), 0);
      const frete = pedidosDiaTodos.reduce((s, v) => s + (Number(v.frete) || 0), 0);
      const vendedorDevido = pedidosDiaTodos.reduce((s, v) => s + vendedorDevidoVenda(v), 0);
      const vendedorPago = vendedorPagoNoPeriodo(dia, dia);
      const creditoFg = pedidosDiaTodos.filter(vendaEntreguePeloFgOperacao).reduce((s,v)=>s+Math.max(0,lucroBaseVenda(v)),0);
      const ads = gastoAdsDia(dia);
      const custosOp = custosOpNoDia(dia);
      const margemCalculada = receitaBaseLucro - fornecedor - frete;
      const margemPedidos = pedidosDiaTodos.reduce((s, v) => s + lucroBaseVenda(v), 0);
      const ajusteFgManual = margemPedidos - margemCalculada;
      const lucroLoja = margemPedidos - ads - custosOp;
      const resultadoAposVendedor = lucroLoja - vendedorPago;
      const dinheiro = pedidosDiaFaturamento.filter((v) => v.formaPagamento === 'dinheiro').reduce((s, v) => s + receitaFinanceiraVenda(v), 0);
      return { dia, pedidos: pedidosDiaTodos.length, pedidosFaturamento: pedidosDiaFaturamento.length, faturamento, receitaBaseLucro, taxasCartao, fornecedor, frete, vendedorDevido, vendedorPago, creditoFg, ajusteFgManual, ads, custosOp, lucroLoja, lucro: lucroLoja, resultadoAposVendedor, dinheiro };
    });
    const total = rows.reduce((a, r) => ({
      pedidos: a.pedidos + r.pedidos, pedidosFaturamento: a.pedidosFaturamento + (r.pedidosFaturamento || 0), faturamento: a.faturamento + r.faturamento, receitaBaseLucro: a.receitaBaseLucro + (r.receitaBaseLucro || 0), taxasCartao: a.taxasCartao + r.taxasCartao, fornecedor: a.fornecedor + r.fornecedor,
      frete: a.frete + r.frete, vendedorDevido: a.vendedorDevido + r.vendedorDevido, vendedorPago: a.vendedorPago + r.vendedorPago, creditoFg: a.creditoFg + r.creditoFg, ajusteFgManual: a.ajusteFgManual + (r.ajusteFgManual || 0), ads: a.ads + r.ads, custosOp: a.custosOp + r.custosOp,
      lucroLoja: a.lucroLoja + r.lucroLoja, lucro: a.lucro + r.lucro, resultadoAposVendedor: a.resultadoAposVendedor + r.resultadoAposVendedor, dinheiro: a.dinheiro + r.dinheiro,
    }), { pedidos: 0, pedidosFaturamento: 0, faturamento: 0, receitaBaseLucro: 0, taxasCartao: 0, fornecedor: 0, frete: 0, vendedorDevido: 0, vendedorPago: 0, creditoFg: 0, ajusteFgManual: 0, ads: 0, custosOp: 0, lucroLoja: 0, lucro: 0, resultadoAposVendedor: 0, dinheiro: 0 });
    const formas = {};
    pedidosBase.filter(vendaEntraFinanceiroLoja).forEach((v) => { const k = v.formaPagamento || 'nao_informado'; formas[k] = (formas[k] || 0) + receitaFinanceiraVenda(v); });
    // Custos gerais do período (só para exibir separado quando uma loja específica está selecionada).
    const custosGerais = lojaFiltro === 'todas' ? 0 : dias.reduce((s, dia) => s + custosGeraisNoDia(dia), 0);
    return { rows, total, formas, custosGerais };
  }, [vendas, vendasEsc, gastosEsc, despesas, adsManuais, pagamentos, modelos, per, financeiroView, impPct, lojaFiltro, fgMovimentos]);
  const margemFinanceira = financeiro.total.receitaBaseLucro > 0 ? financeiro.total.lucro / financeiro.total.receitaBaseLucro : 0;
  const margemAposVendedor = financeiro.total.receitaBaseLucro > 0 ? financeiro.total.resultadoAposVendedor / financeiro.total.receitaBaseLucro : 0;
  const ticketFinanceiro = financeiro.total.pedidosFaturamento > 0 ? financeiro.total.faturamento / financeiro.total.pedidosFaturamento : 0;
  const pctAds = financeiro.total.faturamento > 0 ? financeiro.total.ads / financeiro.total.faturamento : 0;
  const pctFornecedor = financeiro.total.faturamento > 0 ? financeiro.total.fornecedor / financeiro.total.faturamento : 0;
  const formasLabel = { pix: 'Pix', dinheiro: 'Dinheiro', debito: 'Débito', credito: 'Crédito', nao_informado: 'Não informado' };

  // Resumo financeiro principal: deixa explícito de onde vem o lucro.
  // Ads já entram com o imposto configurado e são descontados UMA única vez.
  const resumoOperacional = useMemo(() => {
    const dias = diasEntre(per.from, per.to);
    const ads = dias.reduce((s, dia) => s + gastoAdsDia(dia), 0);
    const custosOp = dias.reduce((s, dia) => s + custosOpNoDia(dia), 0);
    const custosGerais = lojaFiltro === 'todas' ? 0 : dias.reduce((s, dia) => s + custosGeraisNoDia(dia), 0);

    const montar = (tipo) => {
      const baseTodos = vendasEsc.filter((v) => {
        if (vendaCancelada(v)) return false;
        if (tipo === 'realizado') return vendaEntregue(v) && v.dataEntrega && v.dataEntrega >= per.from && v.dataEntrega <= per.to;
        return v.data && v.data >= per.from && v.data <= per.to;
      });
      const baseFaturamento = baseTodos.filter(vendaEntraFinanceiroLoja);
      const faturamento = baseFaturamento.reduce((s, v) => s + receitaFinanceiraVenda(v), 0);
      // O lucro é calculado sobre todos os pedidos, inclusive Luna/FG que não entram no faturamento.
      const receitaBaseLucro = baseTodos.reduce((s, v) => s + receitaFinanceiraVenda(v), 0);
      const taxasCartao = baseTodos.reduce((s, v) => s + taxaCartaoValorVenda(v), 0);
      const fornecedor = baseTodos.reduce((s, v) => s + (Number(v.custo) || 0), 0);
      const frete = baseTodos.reduce((s, v) => s + (Number(v.frete) || 0), 0);
      const vendedorDevido = baseTodos.reduce((s, v) => s + vendedorDevidoVenda(v), 0);
      const vendedorPago = vendedorPagoNoPeriodo(per.from, per.to);
      const creditoFg = baseTodos.filter(vendaEntreguePeloFgOperacao).reduce((s,v)=>s+Math.max(0,lucroBaseVenda(v)),0);
      const margemCalculada = receitaBaseLucro - fornecedor - frete;
      const margemAntesAds = baseTodos.reduce((s, v) => s + lucroBaseVenda(v), 0);
      const ajusteFgManual = margemAntesAds - margemCalculada;
      const lucroLoja = margemAntesAds - ads - custosOp;
      const resultadoAposVendedor = lucroLoja - vendedorPago;
      const margem = receitaBaseLucro > 0 ? lucroLoja / receitaBaseLucro : 0;
      const margemAposVendedor = receitaBaseLucro > 0 ? resultadoAposVendedor / receitaBaseLucro : 0;
      return { faturamento, receitaBaseLucro, taxasCartao, fornecedor, frete, vendedorDevido, vendedorPago, creditoFg, margemAntesAds, ajusteFgManual, ads, custosOp, lucroLoja, lucro: lucroLoja, resultadoAposVendedor, margem, margemAposVendedor, pedidos: baseTodos.length, pedidosFg: baseTodos.filter(vendaEntreguePeloFgOperacao).length, pedidosForaFaturamento: baseTodos.length-baseFaturamento.length };
    };

    return { comercial: montar('comercial'), realizado: montar('realizado'), custosGerais };
  }, [vendas, vendasEsc, gastosEsc, despesas, adsManuais, pagamentos, modelos, per, impPct, lojaFiltro, fgMovimentos]);


  // Previsão usa a DATA PREVISTA DE ENTREGA dos pedidos ainda não entregues/cancelados.
  // Ads futuros não são projetados: o lucro previsto abaixo representa a margem conhecida
  // depois de fornecedor, frete e custos operacionais já cadastrados/recorrentes.
  const previsaoPeriodo = useMemo(() => {
    const baseTodos = vendasEsc.filter((v) => {
      if (vendaCancelada(v) || vendaEntregue(v)) return false;
      return vendaPendenteNoPeriodo(v, per.from, per.to);
    });
    const baseFaturamento = baseTodos.filter(vendaEntraFinanceiroLoja);
    const faturamento = baseFaturamento.reduce((s, v) => s + receitaFinanceiraVenda(v), 0);
    const receitaBaseLucro = baseTodos.reduce((s, v) => s + receitaFinanceiraVenda(v), 0);
    const taxasCartao = baseTodos.reduce((s, v) => s + taxaCartaoValorVenda(v), 0);
    const fornecedor = baseTodos.reduce((s, v) => s + (Number(v.custo) || 0), 0);
    const frete = baseTodos.reduce((s, v) => s + (Number(v.frete) || 0), 0);
    const vendedorPrevisto = baseTodos.reduce((s, v) => s + vendedorDevidoVenda(v), 0);
    const dias = diasEntre(per.from, per.to);
    const custosOp = dias.reduce((s, dia) => s + custosOpNoDia(dia), 0);
    const margemAntesAds = receitaBaseLucro - fornecedor - frete;
    const lucroPrevisto = margemAntesAds - custosOp;
    const resultadoAposVendedorPrevisto = lucroPrevisto - vendedorPrevisto;
    const margem = receitaBaseLucro > 0 ? lucroPrevisto / receitaBaseLucro : 0;
    const margemAposVendedor = receitaBaseLucro > 0 ? resultadoAposVendedorPrevisto / receitaBaseLucro : 0;
    const creditoFgPrevisto = baseTodos.filter(vendaEntreguePeloFgOperacao).reduce((s,v)=>s+Math.max(0,lucroBaseVenda(v)),0);
    return { pedidos: baseTodos.length, pedidosFg: baseTodos.filter(vendaEntreguePeloFgOperacao).length, pedidosForaFaturamento: baseTodos.length-baseFaturamento.length, faturamento, receitaBaseLucro, taxasCartao, fornecedor, frete, vendedorPrevisto, custosOp, margemAntesAds, lucroPrevisto, resultadoAposVendedorPrevisto, margem, margemAposVendedor, creditoFgPrevisto };
  }, [vendas, vendasEsc, despesas, modelos, per, lojaFiltro]);
  const periodoFuturo = per.from > todayISO();

  const historicoPeriodo = useMemo(() => {
    const base = historico.filter((h) => h.data >= per.from && h.data <= per.to && (lojaFiltro === 'todas' || h.lojaId === lojaFiltro));
    return base.reduce((a,h) => ({ dias:a.dias+1, lucroBase:a.lucroBase+(Number(h.lucroBase)||0), ads:a.ads+(Number(h.ads)||0), vendedor:a.vendedor+(Number(h.vendedor)||0), resultado:a.resultado+(Number(h.resultado)||0) }), { dias:0,lucroBase:0,ads:0,vendedor:0,resultado:0 });
  }, [historico, per, lojaFiltro]);

  const contasAPagar = useMemo(() => {
    const base = vendas.filter((v) => !vendaCancelada(v) && vendaEntregue(v) && ['emporio','luna'].includes(v.lojaId) && (lojaFiltro === 'todas' || v.lojaId === lojaFiltro));
    const due = { emporio:{vendedor:0,freteiro:0}, luna:{vendedor:0,freteiro:0} };
    base.forEach((v) => {
      due[v.lojaId].vendedor += vendedorDevidoVenda(v);
      if (!vendaEntreguePeloFgOperacao(v)) due[v.lojaId].freteiro += Number(v.frete)||0;
    });
    const paid = { emporio:{vendedor:0,freteiro:0}, luna:{vendedor:0,freteiro:0} };
    ['emporio','luna'].forEach((lojaId) => {
      const ajustesVend = pagamentos.filter((x) => x.origem === 'ajuste_periodo' && x.lojaId === lojaId && x.tipo === 'vendedor');
      const vendedorRegular = pagamentos.filter((x) => x.origem !== 'ajuste_periodo' && x.lojaId === lojaId && x.tipo === 'vendedor')
        .filter((x) => !ajustesVend.some((a) => x.data >= a.periodoFrom && x.data <= a.periodoTo))
        .reduce((s,x) => s + (Number(x.valor)||0), 0);
      paid[lojaId].vendedor = vendedorRegular + ajustesVend.reduce((s,x)=>s+(Number(x.valor)||0),0);
      paid[lojaId].freteiro = pagamentos.filter((x) => x.lojaId === lojaId && x.tipo === 'freteiro').reduce((s,x)=>s+(Number(x.valor)||0),0);
    });
    return { due, paid };
  }, [vendas, pagamentos, modelos, lojaFiltro, fgMovimentos]);

  // Acertos e fechamento FG seguem o mesmo período principal do topo.
  const semanaAcerto = useMemo(() => ({ from: per.from, to: per.to }), [per.from, per.to]);
  const candidatosAcerto = useMemo(() => vendas.filter((v) => {
    if (!vendaEntregue(v) || !v.dataEntrega || v.dataEntrega < semanaAcerto.from || v.dataEntrega > semanaAcerto.to) return false;
    if (lojaFiltro !== 'todas' && (v.lojaId || LOJA_PADRAO.id) !== lojaFiltro) return false;
    // Mostra automaticamente lojas com vendedor calculado; pedidos já marcados continuam visíveis mesmo se o valor for zero.
    return !!v.acertoAtivo || !!vendedorNomeVenda(v) || vendedorDevidoVenda(v) !== 0;
  }).sort((a,b) => String(a.dataEntrega).localeCompare(String(b.dataEntrega)) || String(a.cliente||'').localeCompare(String(b.cliente||''))), [vendas, semanaAcerto, lojaFiltro, modelos, fgMovimentos]);
  const acertosSemana = useMemo(() => candidatosAcerto.filter((v) => v.acertoAtivo), [candidatosAcerto]);
  const acertosSemanaVisiveis = useMemo(() => acertosSemana.filter((v) => !acertoSomentePendentes || !acertoPagoVenda(v)), [acertosSemana, acertoSomentePendentes]);
  const acertoResumo = useMemo(() => {
    const selecionados = acertosSemana.length;
    const total = acertosSemana.reduce((a,v)=>a+acertoValorVenda(v),0);
    const pagos = acertosSemana.filter(acertoPagoVenda);
    const pendentes = acertosSemana.filter((v)=>!acertoPagoVenda(v));
    const pendentesAcumulados = vendas.filter((v) => v.acertoAtivo && !acertoPagoVenda(v) && (lojaFiltro==='todas'||(v.lojaId||LOJA_PADRAO.id)===lojaFiltro));
    return { selecionados, total, pagos:pagos.reduce((a,v)=>a+acertoValorVenda(v),0), pendentes:pendentes.reduce((a,v)=>a+acertoValorVenda(v),0), qtdPendentes:pendentes.length, acumulado:pendentesAcumulados.reduce((a,v)=>a+acertoValorVenda(v),0), qtdAcumulado:pendentesAcumulados.length };
  }, [acertosSemana, vendas, lojaFiltro, modelos, fgMovimentos]);

  const gruposAcerto = useMemo(() => {
    const map = new Map();
    acertosSemanaVisiveis.forEach((v) => {
      const lojaId = v.lojaId || LOJA_PADRAO.id;
      const pessoa = acertoRecebedorVenda(v);
      const tipo = acertoTipoVenda(v);
      const key = `${lojaId}|${tipo}|${pessoa}`;
      if (!map.has(key)) map.set(key, { key, lojaId, pessoa, tipo, vendas:[] });
      map.get(key).vendas.push(v);
    });
    return [...map.values()].map((g) => ({ ...g, vendas:g.vendas.sort((a,b)=>String(a.dataEntrega).localeCompare(String(b.dataEntrega)) || String(a.cliente||'').localeCompare(String(b.cliente||'')) ) }));
  }, [acertosSemanaVisiveis]);

  const textoGrupoAcerto = (g, somenteDia = '') => {
    const lista = g.vendas.filter((v) => !somenteDia || v.dataEntrega === somenteDia);
    const dias = [...new Set(lista.map((v)=>v.dataEntrega))].sort();
    const blocos = dias.map((dia) => {
      const vs = lista.filter((v)=>v.dataEntrega===dia);
      const linhas = vs.map((v,i)=>`${i+1}. ${v.cliente || 'Sem nome'} - ${brlMsg(acertoValorVenda(v))}`);
      const totalDia = vs.reduce((a,v)=>a+acertoValorVenda(v),0);
      return `📦 ${nomeLoja(g.lojaId)} — ${diaSemanaPt(dia)}, ${brDateShort(dia)}\n${linhas.join('\n')}\nTotal do dia: ${brlMsg(totalDia)}`;
    });
    const total = lista.reduce((a,v)=>a+acertoValorVenda(v),0);
    if (somenteDia) return blocos.join('\n\n');
    return `${blocos.join('\n\n')}\n\nTotal do período: ${brlMsg(total)}`;
  };


  // Acerto compartilhado com FG. Entram as entregas da Luna feitas pelo FG e
  // as camas FG da Empório cujo entregador também foi FG. O crédito padrão é o
  // lucro oficial da venda. Quando ajustado manualmente, o valor corrigido passa a ser a referência do pedido em todo o painel.
  const fgVendasSemana = useMemo(() => vendas.filter((v) =>
    !vendaCancelada(v) && vendaEntregue(v) && vendaEntreguePeloFgOperacao(v) &&
    v.dataEntrega >= semanaAcerto.from && v.dataEntrega <= semanaAcerto.to
  ).sort((a,b)=>String(a.dataEntrega).localeCompare(String(b.dataEntrega)) || String(a.cliente||'').localeCompare(String(b.cliente||''))), [vendas, semanaAcerto]);

  // Retiradas manuais continuam disponíveis para estoque/ajustes que não vieram de um pedido.
  const fgRetiradasSemana = useMemo(() => fgMovimentos.filter((x) => x.tipo === 'retirada' && x.data >= semanaAcerto.from && x.data <= semanaAcerto.to)
    .sort((a,b)=>String(a.data).localeCompare(String(b.data)) || String(a.descricao||'').localeCompare(String(b.descricao||''))), [fgMovimentos, semanaAcerto]);

  // Se a mercadoria do FG foi entregue por outro entregador, ela necessariamente saiu do FG.
  // Luna: qualquer pedido entregue por Rogério/Tarcísio/Goldstar gera retirada automática.
  // Empório: a mesma regra vale somente para as camas FG. Entregador = FG NÃO gera retirada,
  // porque nesse caso o pedido entra como crédito de entrega do próprio FG.
  const retiradaAutomaticaFgVenda = (v) => {
    if (vendaCancelada(v) || !vendaEntregue(v) || !v.dataEntrega) return null;
    const lojaId = v.lojaId || LOJA_PADRAO.id;
    let entregador = '';
    if (lojaId === 'luna') entregador = entregadorLunaVenda(v);
    else if (lojaId === 'emporio' && ehCamaFgEmporio(v)) entregador = entregadorEmporioCamaVenda(v);
    else return null;
    if (!entregador || entregador === 'FG') return null;

    const m = modeloPorId(v.modeloId);
    const qtd = Math.max(1, Number(v.qtdItens) || 1);
    const regra = lojaId === 'luna'
      ? (regraModeloLuna(m?.nome) || LUNA_MODELOS.find((x)=>x.id===v.modeloId))
      : (regraModeloEmporio(m?.nome) || EMPORIO_CAMA_FG_MODELOS.find((x)=>x.id===v.modeloId));
    let custoUnitario = Number(regra?.custo) || Number(m?.custo) || 0;
    // Modelos com custo ainda não cadastrado (ex.: algum FG novo) usam o custo informado no pedido.
    if (!(custoUnitario > 0) && Number(v.custo) > 0) custoUnitario = (Number(v.custo) || 0) / qtd;
    const valor = Math.max(0, custoUnitario * qtd);
    if (!(valor > 0)) return null;

    const nome = String(m?.nome || regra?.nome || 'Produto FG').trim();
    const n = normalizarNomeModelo(nome);
    let item = nome;
    if (n.includes('cama solteiro') && n.includes('auxiliar') && n.includes('7')) item = 'solteiro com auxiliar 7cm';
    else if (n.includes('cama solteiro') && n.includes('7')) item = 'solteiro 7cm';
    else if (n.includes('cama casal') && n.includes('14')) item = 'casal 14cm';
    else if (n.includes('cama casal') && n.includes('12')) item = 'casal 12cm';
    else if (n.includes('cama casal') && n.includes('7')) item = 'casal 7cm';

    return {
      id:`auto-ret-${v.id}`, tipo:'retirada_auto', automatico:true, vendaId:v.id,
      data:v.dataEntrega, descricao:`${qtd} ${item}`, valor, lojaId, entregador,
      cliente:v.cliente || 'Sem nome'
    };
  };

  const fgRetiradasAutomaticasSemana = useMemo(() => vendas
    .map(retiradaAutomaticaFgVenda)
    .filter((x) => x && x.data >= semanaAcerto.from && x.data <= semanaAcerto.to)
    .sort((a,b)=>String(a.data).localeCompare(String(b.data)) || String(a.descricao||'').localeCompare(String(b.descricao||''))),
    [vendas, modelos, semanaAcerto]);

  const fgRetiradasTodasSemana = useMemo(() => [...fgRetiradasSemana, ...fgRetiradasAutomaticasSemana]
    .sort((a,b)=>String(a.data).localeCompare(String(b.data)) || String(a.descricao||'').localeCompare(String(b.descricao||''))),
    [fgRetiradasSemana, fgRetiradasAutomaticasSemana]);

  const fgSaldoAnteriorRec = useMemo(() => fgMovimentos.find((x) => x.tipo === 'saldo_anterior' && x.semana === semanaAcerto.from) || null, [fgMovimentos, semanaAcerto]);
  const fgSaldoAnterior = Number(fgSaldoAnteriorRec?.valor) || 0;
  const fgCreditoOverride = (vendaId) => fgMovimentos.find((x)=>x.tipo==='credito_entrega_override' && x.vendaId===vendaId) || null;
  const creditoFgVenda = (v) => {
    const over = fgCreditoOverride(v.id);
    return over && Number.isFinite(Number(over.valor)) ? Math.max(0, Number(over.valor)||0) : Math.max(0,lucroBaseVendaCalculado(v));
  };
  const setCreditoFgVenda = (v, raw) => {
    const texto = String(raw ?? '').trim();
    setFgMovimentos((prev)=>{
      const sem = prev.filter((x)=>!(x.tipo==='credito_entrega_override' && x.vendaId===v.id));
      if (texto === '') return sem;
      const valor = Math.max(0, parseBRL(texto));
      const atual = prev.find((x)=>x.tipo==='credito_entrega_override' && x.vendaId===v.id);
      return [...sem,{ id:atual?.id || uid(), tipo:'credito_entrega_override', vendaId:v.id, data:v.dataEntrega || todayISO(), descricao:`Crédito entrega FG · ${v.cliente || 'Sem nome'}`, valor }];
    });
  };
  const updateMovimentoFg = (id, patch) => setFgMovimentos((prev)=>prev.map((x)=>x.id===id?{...x,...patch}:x));
  const fgTotalRetirado = fgRetiradasTodasSemana.reduce((s,x)=>s+(Number(x.valor)||0),0);
  const fgTotalEntregue = fgVendasSemana.reduce((s,v)=>s+creditoFgVenda(v),0);
  const fgSaldoFinal = fgTotalRetirado - fgTotalEntregue - fgSaldoAnterior;

  useEffect(() => { setFgSaldoAnteriorInput(fgSaldoAnterior ? String(fgSaldoAnterior) : ''); }, [semanaAcerto.from, fgSaldoAnteriorRec?.id, fgSaldoAnteriorRec?.valor]);

  const salvarSaldoAnteriorFg = () => {
    const valor = parseBRL(fgSaldoAnteriorInput);
    setFgMovimentos((prev) => {
      const sem = prev.filter((x) => !(x.tipo === 'saldo_anterior' && x.semana === semanaAcerto.from));
      return valor > 0 ? [...sem, { id: fgSaldoAnteriorRec?.id || uid(), tipo:'saldo_anterior', semana:semanaAcerto.from, data:semanaAcerto.from, descricao:'Saldo anterior com FG', valor }] : sem;
    });
  };
  const addRetiradaFg = () => {
    const valor = parseBRL(fgRetiradaValor);
    if (!fgRetiradaData || !fgRetiradaDescricao.trim() || valor <= 0) return;
    setFgMovimentos((prev)=>[...prev,{ id:uid(), tipo:'retirada', data:fgRetiradaData, descricao:fgRetiradaDescricao.trim(), valor }]);
    setFgRetiradaDescricao(''); setFgRetiradaValor('');
  };
  const delMovimentoFg = (id) => setFgMovimentos((prev)=>prev.filter((x)=>x.id!==id));

  const textoAcertoFg = () => {
    const dias = [...new Set([...fgVendasSemana.map((v)=>v.dataEntrega), ...fgRetiradasTodasSemana.map((x)=>x.data)])].sort();
    const blocos = dias.map((dia) => {
      const vendasDia = fgVendasSemana.filter((v)=>v.dataEntrega===dia);
      const retiradasDia = fgRetiradasTodasSemana.filter((x)=>x.data===dia);
      const partes = [`${diaSemanaPt(dia)} ${brDateShort(dia)}`];
      if (vendasDia.length) {
        partes.push('Entregue');
        vendasDia.forEach((v)=>{ const p=prefixoCep(v.cep); partes.push(`${p===null?'SEM CEP':String(p).padStart(3,'0')} - ${brlMsg(creditoFgVenda(v))}`); });
        if (vendasDia.length>1) partes.push(`Total entregue: ${brlMsg(vendasDia.reduce((a,v)=>a+creditoFgVenda(v),0))}`);
      }
      if (retiradasDia.length) {
        partes.push('Retirado');
        retiradasDia.forEach((x)=>partes.push(`${x.descricao} - ${brlMsg(x.valor)}`));
      }
      return partes.join('\n');
    });
    const resultado = fgSaldoFinal > 0.005 ? `${brlMsg(fgSaldoFinal)} a pagar ao FG` : fgSaldoFinal < -0.005 ? `${brlMsg(Math.abs(fgSaldoFinal))} com FG` : 'Acerto zerado';
    const formula = `${brlMsg(fgTotalRetirado)} - ${brlMsg(fgTotalEntregue)} - ${brlMsg(fgSaldoAnterior)} = ${brlMsg(fgSaldoFinal)}`;
    return `FG -\n\n${fgSaldoAnterior>0?`${brlMsg(fgSaldoAnterior)} com FG (saldo anterior ao período)\n\n`:''}${blocos.join('\n\n')}\n\nTotal\n\nRetirado - ${brlMsg(fgTotalRetirado)}\nEntregue - ${brlMsg(fgTotalEntregue)}\nSaldo anterior - ${brlMsg(fgSaldoAnterior)}\n\n${formula}\n\n${resultado}`;
  };


  // Fechamento Luna também segue o período global. Em um único dia mantém o formato curto;
  // em períodos maiores, agrupa por dia e inclui o total do período.
  const lunaFechamentoVendas = useMemo(() => vendas.filter((v) =>
    !vendaCancelada(v) && vendaEntregue(v) && (v.lojaId || LOJA_PADRAO.id) === 'luna' &&
    v.dataEntrega && v.dataEntrega >= per.from && v.dataEntrega <= per.to
  ).sort((a,b) => String(a.dataEntrega || '').localeCompare(String(b.dataEntrega || '')) || String(a.cliente || '').localeCompare(String(b.cliente || ''))), [vendas, per.from, per.to]);

  // As camas da Empório entregues por Tarcísio também pertencem ao fechamento
  // de fretes dele. Elas entram somente na conta de frete, sem alterar lucro,
  // faturamento ou o acerto do Douglas da Luna Comfort.
  const emporioCamasTarcisioFretes = useMemo(() => vendas.filter((v) =>
    !vendaCancelada(v) && vendaEntregue(v) && ehCamaFgEmporio(v) &&
    entregadorEmporioCamaVenda(v) === 'Tarcísio' &&
    v.dataEntrega && v.dataEntrega >= per.from && v.dataEntrega <= per.to
  ).sort((a,b) => String(a.dataEntrega || '').localeCompare(String(b.dataEntrega || '')) || String(a.cliente || '').localeCompare(String(b.cliente || ''))), [vendas, per.from, per.to, modelos]);

  const lunaFretesVendas = useMemo(() => [...lunaFechamentoVendas, ...emporioCamasTarcisioFretes].filter((v) => {
    const entregador = (v.lojaId || LOJA_PADRAO.id) === 'emporio' ? entregadorEmporioCamaVenda(v) : entregadorLunaVenda(v);
    if (entregador === 'FG') return false;
    return lunaFreteEntregadorFiltro === 'todos' || entregador === lunaFreteEntregadorFiltro;
  }), [lunaFechamentoVendas, emporioCamasTarcisioFretes, lunaFreteEntregadorFiltro]);

  const lunaFechamentoResumo = useMemo(() => {
    const fretes = lunaFretesVendas.reduce((a,v) => a + (Number(v.frete) || 0), 0);
    const lucroLoja = lunaFechamentoVendas.reduce((a,v) => a + lucroBaseVenda(v), 0);
    const semCep = lunaFechamentoVendas.filter((v) => prefixoCep(v.cep) === null).length;
    const fg = lunaFechamentoVendas.filter(vendaEntreguePeloFgOperacao);
    const creditoFg = fg.reduce((a,v)=>a+Math.max(0,lucroBaseVenda(v)),0);
    return { pedidos:lunaFechamentoVendas.length, fretes, lucroLoja, semCep, pedidosFg:fg.length, creditoFg };
  }, [lunaFechamentoVendas, lunaFretesVendas, fgMovimentos]);

  const textoFretesLuna = () => {
    if (!lunaFretesVendas.length) return '';
    const dias = [...new Set(lunaFretesVendas.map((v)=>v.dataEntrega))].sort();
    const tituloEntregador = lunaFreteEntregadorFiltro === 'todos' ? '' : ` — ${lunaFreteEntregadorFiltro}`;
    const blocos = dias.map((dia) => {
      const vs = lunaFretesVendas.filter((v)=>v.dataEntrega===dia);
      const linhas = vs.map((v) => {
        const p = prefixoCep(v.cep);
        return `${p === null ? 'SEM CEP' : String(p).padStart(3,'0')}: ${brlMsgCurto(Number(v.frete) || 0)}`;
      });
      const totalDia = vs.reduce((a,v)=>a+(Number(v.frete)||0),0);
      return `${brDateShort(dia)}${tituloEntregador}\n${linhas.join('\n')}\nTotal: ${brlMsgCurto(totalDia)}`;
    });
    return `${blocos.join('\n\n')}${dias.length > 1 ? `\n\nTotal do período: ${brlMsgCurto(lunaFechamentoResumo.fretes)}` : ''}`;
  };

  const textoLucroLojaLuna = () => {
    if (!lunaFechamentoVendas.length) return '';
    const dias = [...new Set(lunaFechamentoVendas.map((v)=>v.dataEntrega))].sort();
    const blocos = dias.map((dia) => {
      const vs = lunaFechamentoVendas.filter((v)=>v.dataEntrega===dia);
      const linhas = vs.map((v) => {
        const p = prefixoCep(v.cep);
        return `${p === null ? 'SEM CEP' : String(p).padStart(3,'0')}: ${brlMsg(lucroBaseVenda(v))}`;
      });
      const totalDia = vs.reduce((a,v)=>a+lucroBaseVenda(v),0);
      return `${diaSemanaPt(dia)}, ${brDateShort(dia)} — Lucro Loja\n${linhas.join('\n')}\nTotal: ${brlMsg(totalDia)}`;
    });
    return `${blocos.join('\n\n')}${dias.length > 1 ? `\n\nTotal do período: ${brlMsg(lunaFechamentoResumo.lucroLoja)}` : ''}`;
  };

  const textoAcertoDouglasLuna = () => {
    if (!lunaFechamentoVendas.length) return '';
    // Envia ao Douglas o número CHEIO de cada pedido. A divisão de 50% só acontece
    // quando o pagamento é efetivamente marcado como pago no painel.
    const dias = [...new Set(lunaFechamentoVendas.map((v)=>v.dataEntrega))].sort();
    const blocos = dias.map((dia) => {
      const vs = lunaFechamentoVendas.filter((v)=>v.dataEntrega===dia);
      const linhas = vs.map((v, i) => `${i + 1}. ${v.cliente || 'Sem nome'} - ${brlMsg(Math.max(0, resultadoBaseVendedorLuna(v)))}`);
      const totalDia = vs.reduce((a, v) => a + Math.max(0, resultadoBaseVendedorLuna(v)), 0);
      return `${brDateShort(dia)}\n${linhas.join('\n')}\nTotal do dia: ${brlMsg(totalDia)}`;
    });
    const total = lunaFechamentoVendas.reduce((a, v) => a + Math.max(0, resultadoBaseVendedorLuna(v)), 0);
    return `${blocos.join('\n\n')}${dias.length > 1 ? `\n\nTotal do período: ${brlMsg(total)}` : ''}`;
  };


  const modeloOptions = (
    <>
      <option value="">— sem modelo —</option>
      {modelosVisiveis.map((m) => <option key={m.id} value={m.id}>{m.nome}</option>)}
    </>
  );

  const renderVenda = (v) => {
    if (editId === v.id && editDraft) {
      return (
        <div key={v.id} className="py-3">
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2 items-end">
            <Field label="Data do pedido"><input type="date" value={editDraft.data} onChange={(e) => setEditDraft((d) => ({ ...d, data: e.target.value }))} className="inp" /></Field>
            <Field label="De onde veio" className="col-span-2 lg:col-span-1">
              <select value={editDraft.tipo} onChange={(e) => setEditDraft((d) => ({ ...d, tipo: e.target.value }))} className="inp">
                <optgroup label="Não sei qual anúncio"><option value={ADX}>Anúncio não rastreado</option><option value={ORG}>Orgânico de verdade</option></optgroup>
                {campanhas.length > 0 && <optgroup label="Anúncios rastreados">{campanhas.filter((c) => (c.lojaId || LOJA_PADRAO.id) === (editDraft.lojaId || LOJA_PADRAO.id)).map((c) => <option key={c.id} value={c.id}>{c.nome}</option>)}</optgroup>}
              </select>
            </Field>
            {editDraft.tipo === ORG && <Field label="Origem"><select value={editDraft.origem} onChange={(e) => setEditDraft((d) => ({ ...d, origem: e.target.value }))} className="inp">{ORIGENS.map((o) => <option key={o} value={o}>{o}</option>)}</select></Field>}
            {[ORG,ADX].includes(editDraft.tipo) && <Field label="Loja"><select value={editDraft.lojaId || LOJA_PADRAO.id} onChange={(e) => setEditDraft((d) => ({ ...d, lojaId:e.target.value, modeloId:'' }))} className="inp">{lojas.map((l) => <option key={l.id} value={l.id}>{l.nome}</option>)}</select></Field>}
            <Field label="Modelo"><select value={editDraft.modeloId} onChange={(e) => { const id = e.target.value; const m = modelos.find((x) => x.id === id); setEditDraft((d) => { const camaFg=d.lojaId==='emporio' && modeloEhCamaFgEmporio(m); const f2=camaFg?freteLuna(d.cep,FRETE_LUNA_T2,d.qtdItens||1):null; return { ...d, modeloId:id, receita:m?.preco?String(m.preco):d.receita, custo:m?String(m.custo||''):d.custo, tipoProduto:camaFg?'cama_fg':(d.lojaId==='emporio'?'sofa':d.tipoProduto), frete:d.lojaId==='emporio'?(camaFg?(f2===null?'':String(f2)):String(m?.frete||130)):d.frete }; }); }} className="inp"><option value="">— sem modelo —</option>{modelos.filter((m) => !m.lojaId || m.lojaId === (editDraft.lojaId || LOJA_PADRAO.id)).map((m) => <option key={m.id} value={m.id}>{m.nome}</option>)}</select></Field>
            <Field label="Cliente"><input value={editDraft.cliente} onChange={(e) => setEditDraft((d) => ({ ...d, cliente: e.target.value }))} className="inp" /></Field>
            <Field label="Pagamento"><select value={editDraft.formaPagamento || 'nao_informado'} onChange={(e) => setEditDraft((d) => ({ ...d, formaPagamento: e.target.value }))} className="inp"><option value="nao_informado">Não informado</option><option value="pix">Pix</option><option value="dinheiro">Dinheiro</option><option value="debito">Débito</option><option value="credito">Crédito</option></select></Field>
            {editDraft.formaPagamento === 'credito' && <Field label="Parcelas"><select value={editDraft.parcelas || 1} onChange={(e) => setEditDraft((d) => ({ ...d, parcelas:Number(e.target.value) }))} className="inp">{Array.from({length:12},(_,i)=>i+1).map((n)=><option key={n} value={n}>{n}x</option>)}</select></Field>}
            {['emporio','luna'].includes(editDraft.lojaId) && <Field label="CEP"><input value={editDraft.cep || ''} onChange={(e) => {
              const cep=e.target.value.replace(/\D/g,'').slice(0,8);
              setEditDraft((d) => {
                if (d.lojaId === 'luna') {
                  const q=d.qtdItens||1, f2=freteLuna(cep,FRETE_LUNA_T2,q), f1=freteLuna(cep,FRETE_LUNA_T1,q);
                  return { ...d, cep, frete:f2===null?d.frete:String(f2), freteTabela1:f1===null?d.freteTabela1:String(f1) };
                }
                if (d.lojaId === 'emporio' && ehCamaFgEmporio(d)) {
                  const f2=freteLuna(cep,FRETE_LUNA_T2,d.qtdItens||1);
                  return { ...d, cep, frete:f2===null?d.frete:String(f2), tipoProduto:'cama_fg' };
                }
                return { ...d, cep };
              });
            }} className="inp" placeholder="00000000" /></Field>}
            {(editDraft.lojaId === 'luna' || (editDraft.lojaId==='emporio' && ehCamaFgEmporio(editDraft))) && <Field label="Qtd. itens"><input type="number" min="1" value={editDraft.qtdItens || 1} onChange={(e) => {
              const q=Math.max(1,Number(e.target.value)||1);
              setEditDraft((d) => { const f2=freteLuna(d.cep,FRETE_LUNA_T2,q); if (d.lojaId==='luna') { const f1=freteLuna(d.cep,FRETE_LUNA_T1,q); return { ...d, qtdItens:q, frete:f2===null?d.frete:String(f2), freteTabela1:f1===null?d.freteTabela1:String(f1) }; } return { ...d, qtdItens:q, frete:f2===null?d.frete:String(f2), tipoProduto:'cama_fg' }; });
            }} className="inp" /></Field>}
            {editDraft.lojaId === 'luna' && <Field label="Entregador"><select value={editDraft.entregadorLuna || 'Tarcísio'} onChange={(e) => { const entregador=e.target.value; setEditDraft((d)=>({ ...d, entregadorLuna:entregador, pagamentoRecebidoPor:entregador==='FG'?'fg':d.pagamentoRecebidoPor })); }} className="inp">{LUNA_ENTREGADORES.map((x)=><option key={x} value={x}>{x}</option>)}</select></Field>}
            {editDraft.lojaId === 'emporio' && (editDraft.tipoProduto === 'cama_fg' || modeloEhCamaFgEmporio(modelos.find((x)=>x.id===editDraft.modeloId))) && <Field label="Entregador da cama"><select value={editDraft.entregadorEmporioCama || 'Rogério'} onChange={(e)=>setEditDraft((d)=>({ ...d, entregadorEmporioCama:e.target.value }))} className="inp">{LUNA_ENTREGADORES.map((x)=><option key={x} value={x}>{x}</option>)}</select></Field>}
            {editDraft.lojaId === 'luna' && <Field label="Pagamento recebido por"><select value={editDraft.pagamentoRecebidoPor || 'luna'} onChange={(e)=>setEditDraft((d)=>({ ...d, pagamentoRecebidoPor:e.target.value }))} className="inp">{LUNA_RECEBEDORES.map((x)=><option key={x.id} value={x.id}>{x.nome}</option>)}</select></Field>}
            <Field label="Status"><select value={editDraft.status} onChange={(e) => setEditDraft((d) => ({ ...d, status: e.target.value }))} className="inp">{STATUS_PEDIDO.map((s) => <option key={s.value} value={s.value}>{s.label}</option>)}</select></Field>
            <Field label="Entrega prevista"><input type="date" value={editDraft.dataPrevista} onChange={(e) => setEditDraft((d) => ({ ...d, dataPrevista: e.target.value }))} className="inp" /></Field>
            {editDraft.status === 'entregue' && <Field label="Data da entrega"><input type="date" value={editDraft.dataEntrega} onChange={(e) => setEditDraft((d) => ({ ...d, dataEntrega: e.target.value }))} className="inp" /></Field>}
            <Field label={editDraft.formaPagamento === 'credito' && Number(editDraft.parcelas)>1 ? 'Valor parcelado (com taxa)' : 'Valor da venda'}><input value={editDraft.receita} onChange={(e) => setEditDraft((d) => ({ ...d, receita: e.target.value }))} inputMode="decimal" className="inp" /></Field>
            <Field label="Custo"><input value={editDraft.custo} onChange={(e) => setEditDraft((d) => ({ ...d, custo: e.target.value }))} inputMode="decimal" className="inp" /></Field>
            <Field label={editDraft.lojaId === 'luna' ? 'Frete T2 (lucro/freteiro)' : editDraft.lojaId === 'emporio' ? (ehCamaFgEmporio(editDraft) ? 'Frete T2 (cama FG)' : 'Frete (padrão 130)') : 'Frete'}><input value={editDraft.frete} onChange={(e) => setEditDraft((d) => ({ ...d, frete: e.target.value }))} inputMode="decimal" className="inp" /></Field>
            {['emporio','luna'].includes(editDraft.lojaId) && <Field label={`Comissão ${editDraft.lojaId === 'luna' ? 'Douglas' : 'Natan'}`}>
              <div className="space-y-1">
                <input value={editDraft.comissaoVendedorManualAtiva ? (editDraft.comissaoVendedorManual ?? '') : String(vendedorDevidoVenda({ ...v, ...editDraft, comissaoVendedorManual:null, receita:parseBRL(editDraft.receita), custo:parseBRL(editDraft.custo), frete:parseBRL(editDraft.frete), freteTabela1:parseBRL(editDraft.freteTabela1) }))} onChange={(e) => setEditDraft((d) => ({ ...d, comissaoVendedorManual:e.target.value, comissaoVendedorManualAtiva:true }))} inputMode="decimal" className="inp" placeholder="0,00" />
                <div className="flex items-center justify-between gap-2 text-[11px] text-slate-400">
                  <span>{editDraft.comissaoVendedorManualAtiva ? 'Valor manual — substitui o cálculo automático' : `Automático: ${brl(vendedorDevidoVenda({ ...v, ...editDraft, comissaoVendedorManual:null, receita:parseBRL(editDraft.receita), custo:parseBRL(editDraft.custo), frete:parseBRL(editDraft.frete), freteTabela1:parseBRL(editDraft.freteTabela1) }))}`}</span>
                  {editDraft.comissaoVendedorManualAtiva && <button type="button" onClick={() => { const calc = vendedorDevidoVenda({ ...v, ...editDraft, comissaoVendedorManual:null, receita:parseBRL(editDraft.receita), custo:parseBRL(editDraft.custo), frete:parseBRL(editDraft.frete), freteTabela1:parseBRL(editDraft.freteTabela1) }); setEditDraft((d)=>({ ...d, comissaoVendedorManual:String(calc), comissaoVendedorManualAtiva:false })); }} className="text-sky-600 hover:text-sky-700 whitespace-nowrap">Usar automático</button>}
                </div>
              </div>
            </Field>}
            {['emporio','luna'].includes(editDraft.lojaId) && parseBRL(editDraft.receita) > 0 && (() => {
              const tmpEdit = enriquecerVenda({ ...v, ...editDraft, receita:parseBRL(editDraft.receita), custo:parseBRL(editDraft.custo), frete:parseBRL(editDraft.frete), freteTabela1:parseBRL(editDraft.freteTabela1), comissaoVendedorManual:null, taxaCartaoPct:null, taxaCartaoValor:null }, editDraft.lojaId, editDraft.modeloId || null);
              const detEdit = editDraft.lojaId === 'emporio' ? detalheNatanVenda({ ...tmpEdit, comissaoVendedorManual:null }) : null;
              return <div className="col-span-2 sm:col-span-3 lg:col-span-6 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-xs flex flex-wrap gap-x-5 gap-y-1">
                <span>Valor {tmpEdit.formaPagamento==='credito' && Number(tmpEdit.parcelas)>1 ? `parcelado (${tmpEdit.parcelas}x)` : 'cobrado'}: <strong>{brl(tmpEdit.receita)}</strong></span>
                <span>Taxa da loja ({num(taxaCartaoPctVenda(tmpEdit),2)}%): <strong>-{brl(taxaCartaoValorVenda(tmpEdit))}</strong></span>
                <span>Líquido que cai na conta: <strong className="text-emerald-700">{brl(receitaLiquidaVenda(tmpEdit))}</strong></span>
                {detEdit && !detEdit.camaFg && tmpEdit.formaPagamento==='credito' && Number(tmpEdit.parcelas)>1 && <>
                  <span>Base normal Natan: <strong>{brl(detEdit.valorNormalPagamento)}</strong></span>
                  <span>Líquido p/ Natan após taxa {num(detEdit.taxaAtual,2)}%: <strong>{brl(detEdit.valorLiquidoVendedor || 0)}</strong></span>
                  <span>Extra líquido: <strong>{brl(detEdit.acrescimoParcelamento)}</strong></span>
                  <span>50% do extra: <strong>{brl(detEdit.extraNatan)}</strong></span>
                  <span>Natan automático: <strong className="text-emerald-700">{brl(detEdit.total)}</strong></span>
                </>}
              </div>;
            })()}
            {editDraft.lojaId === 'luna' && <div className="col-span-2 sm:col-span-3 lg:col-span-2 text-xs text-slate-500 bg-emerald-50 border border-emerald-100 rounded-lg px-3 py-2">Douglas usa a conta própria do acerto (taxa do vendedor + fornecedor + frete T1) e recebe 50% do valor cheio. Você pode sobrescrever a comissão neste pedido; nesse caso o acerto cheio vira 2x o valor informado. O Lucro Loja continua separado (taxa geral + frete T2). Se a entrega foi pelo FG e o crédito foi corrigido manualmente, esse valor corrigido passa a valer nas duas contas.</div>}
            {editDraft.lojaId === 'emporio' && ehCamaFgEmporio(editDraft) && <div className="col-span-2 sm:col-span-3 lg:col-span-2 text-xs text-slate-600 bg-amber-50 border border-amber-100 rounded-lg px-3 py-2">Cama FG: comissão automática do Natan R$50,00 e frete pela Tabela 2 da Luna. Você pode alterar a comissão deste pedido no campo acima; sofás continuam com as regras atuais.</div>}
          </div>
          <div className="flex gap-2 mt-2">
            <button onClick={saveEdit} disabled={parseBRL(editDraft.receita) <= 0} className="h-8 px-3 rounded-lg bg-emerald-600 text-white text-sm font-medium hover:bg-emerald-700 disabled:opacity-40 flex items-center gap-1.5"><Check size={14} /> Salvar</button>
            <button onClick={cancelEdit} className="h-8 px-3 rounded-lg bg-slate-100 text-slate-600 text-sm font-medium hover:bg-slate-200 flex items-center gap-1.5"><X size={14} /> Cancelar</button>
          </div>
        </div>
      );
    }
    const st = statusVenda(v); const info = STATUS_INFO[st] || STATUS_INFO.pendente;
    return (
      <div key={v.id} className="flex flex-col sm:flex-row sm:items-center sm:justify-between py-3 text-sm gap-3">
        <div className="min-w-0 flex-1 w-full">
          <div className="break-words sm:truncate leading-snug">
            <span className="font-semibold text-slate-800">{nomeModelo(v.modeloId) || 'Sem modelo'}</span>
            <span className="text-slate-300"> · </span>
            <span className="font-medium text-slate-600">{v.cliente || 'sem nome'}</span>
          </div>
          <div className="flex items-center gap-x-2 gap-y-1 flex-wrap text-xs text-slate-500 mt-1.5 leading-snug">
            <span className="text-slate-400 tabular-nums whitespace-nowrap">Pedido {(v.data || '').slice(8, 10)}/{(v.data || '').slice(5, 7)}</span>
            <span className={`break-words ${v.campanhaId === ADX ? 'text-amber-600 font-medium' : ''}`}>{nomeVenda(v)}</span>
            <span className="whitespace-nowrap text-slate-400">{nomeLoja(lojaDaVenda(v))}</span>
            {taxaCartaoValorVenda(v) > 0 && <span className="whitespace-nowrap">taxa {brl(taxaCartaoValorVenda(v))}</span>}
            {vendedorDevidoVenda(v) !== 0 && <span className="whitespace-nowrap">{vendedorNomeVenda(v)} {brl(vendedorDevidoVenda(v))}</span>}
            {(v.lojaId||LOJA_PADRAO.id)==='luna' && <span className="whitespace-nowrap text-sky-600">entregador {entregadorLunaVenda(v)}</span>}
            {ehCamaFgEmporio(v) && <span className="whitespace-nowrap text-sky-600">entregador {entregadorEmporioCamaVenda(v)}</span>}
            {(v.lojaId||LOJA_PADRAO.id)==='luna' && <span className={`whitespace-nowrap ${pagamentoRecebidoPorLunaVenda(v)==='fg'?'text-violet-600 font-medium':'text-slate-400'}`}>recebido por {pagamentoRecebidoPorLunaVenda(v)==='fg'?'FG':'Luna'}</span>}
            <span className={`inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-medium whitespace-nowrap ${info.cls}`}>{info.label}</span>
            {v.dataPrevista && st !== 'entregue' && <span className="whitespace-nowrap">prev. {brDate(v.dataPrevista)}</span>}
            {v.dataEntrega && st === 'entregue' && <span className="whitespace-nowrap">entregue {brDate(v.dataEntrega)}</span>}
          </div>
        </div>
        <div className="w-full sm:w-auto shrink-0">
          <div className="flex items-center justify-between sm:justify-end gap-2 mb-2 sm:mb-0">
            <span className="tabular-nums text-slate-800 font-semibold sm:font-normal">{brl(v.receita)}</span>
            <span className="tabular-nums text-slate-400 hidden lg:inline">custo {brl(custoTot(v))}{v.frete ? ` (frete ${brl(v.frete)})` : ''}</span>
          </div>
          <div className="grid grid-cols-[repeat(2,minmax(0,1fr))_auto_auto] sm:flex sm:items-center gap-2">
            {vendaPendente(v) && <button onClick={() => confirmarEntrega(v.id)} className="h-9 sm:h-7 px-2 rounded-md bg-emerald-600 text-white text-xs font-medium hover:bg-emerald-700 whitespace-nowrap">Entregue ✓</button>}
            {vendaPendente(v) && <button onClick={() => atualizarStatusVenda(v.id, 'cancelado')} className="h-9 sm:h-7 px-2 rounded-md bg-rose-50 text-rose-600 text-xs font-medium hover:bg-rose-100 whitespace-nowrap">Cancelar</button>}
            <button onClick={() => startEdit(v)} className="h-9 w-9 sm:h-auto sm:w-auto flex items-center justify-center rounded-md bg-slate-50 sm:bg-transparent text-slate-400 hover:text-slate-600 transition" aria-label="Editar pedido"><Pencil size={15} /></button>
            <button onClick={() => delVenda(v.id)} className="h-9 w-9 sm:h-auto sm:w-auto flex items-center justify-center rounded-md bg-slate-50 sm:bg-transparent text-slate-400 hover:text-rose-500 transition" aria-label="Excluir pedido"><Trash2 size={16} /></button>
          </div>
        </div>
      </div>
    );
  };

  const font = { fontFamily: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' };
  const presetBtn = (tipo, txt) => (
    <button onClick={() => setPeriodo((p) => ({ ...p, tipo }))} className={`px-4 py-2 rounded-lg text-sm font-medium border transition-all shadow-sm ${periodo.tipo === tipo ? 'bg-[#0f1b31] text-white border-[#0f1b31] shadow-md' : 'bg-white text-slate-700 border-slate-200 hover:border-slate-300 hover:bg-slate-50'}`}>{txt}</button>
  );

  const navegarPainel = (destino, abaDestino = null) => {
    setMobileNavOpen(false);
    setPaginaAtiva('painel');
    if (abaDestino) setAba(abaDestino);
    window.setTimeout(() => {
      if (destino === 'topo') {
        window.scrollTo({ top: 0, behavior: 'smooth' });
        return;
      }
      document.getElementById(destino)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }, abaDestino ? 80 : 0);
  };

  const abrirAjustes = () => {
    setMobileNavOpen(false);
    setPaginaAtiva('ajustes');
    window.setTimeout(() => window.scrollTo({ top: 0, behavior: 'smooth' }), 0);
  };
  const atualizarConfigComissao = (lojaId, patch) => {
    setConfig((c) => {
      const atual = c?.comissoes?.[lojaId] || {};
      return { ...c, comissoes: { ...(c.comissoes || {}), [lojaId]: { ...atual, ...patch } } };
    });
  };
  const atualizarComissaoModelo = (lojaId, modeloId, raw) => {
    setConfig((c) => {
      const atual = c?.comissoes?.[lojaId] || {};
      const porModelo = { ...(atual.porModelo || {}) };
      if (raw === '') delete porModelo[modeloId];
      else porModelo[modeloId] = Math.max(0, parseBRL(raw));
      return { ...c, comissoes: { ...(c.comissoes || {}), [lojaId]: { ...atual, porModelo } } };
    });
  };

  const syncUi = {
    carregando: { label: 'Carregando banco', tone: 'text-slate-300', icon: <Loader2 size={14} className="animate-spin" /> },
    salvando: { label: 'Salvando', tone: 'text-amber-300', icon: <Cloud size={14} /> },
    salvo: { label: 'Banco sincronizado', tone: 'text-emerald-300', icon: <Cloud size={14} /> },
    erro: { label: 'Cópia local ativa', tone: 'text-rose-300', icon: <CloudOff size={14} /> },
    conflito: { label: 'Conflito de dados', tone: 'text-rose-300', icon: <CloudOff size={14} /> },
  }[syncStatus] || { label: 'Sincronização', tone: 'text-slate-300', icon: <Database size={14} /> };

  if (!authChecked) {
    return <div className="min-h-screen bg-slate-950 text-white flex items-center justify-center p-6" style={font}><div className="flex items-center gap-3 text-slate-300"><Loader2 className="animate-spin" size={22} /> Carregando painel…</div></div>;
  }

  if (!authenticated) {
    return (
      <div className="min-h-screen bg-slate-950 flex items-center justify-center p-5" style={font}>
        <form onSubmit={doLogin} className="w-full max-w-sm bg-white rounded-2xl shadow-2xl p-6">
          <div className="w-11 h-11 rounded-xl bg-slate-900 text-white flex items-center justify-center mb-4"><LockKeyhole size={22} /></div>
          <h1 className="text-xl font-semibold text-slate-900">Entrar no painel</h1>
          <p className="text-sm text-slate-500 mt-1 mb-5">Os dados financeiros agora ficam protegidos por senha e salvos no banco.</p>
          <label className="text-xs text-slate-500">Senha do painel</label>
          <input type="password" autoFocus value={loginPassword} onChange={(e) => setLoginPassword(e.target.value)} className="inp mt-1" placeholder="Digite sua senha" />
          <button type="submit" disabled={!loginPassword} className="w-full mt-3 h-10 rounded-lg bg-slate-900 text-white text-sm font-medium hover:bg-slate-800 disabled:opacity-40">Entrar</button>
          {loginError && <div className="mt-3 text-sm text-rose-700 bg-rose-50 border border-rose-100 rounded-lg px-3 py-2">{loginError}</div>}
        </form>
        <style>{`.inp { width:100%; border:1px solid rgb(203 213 225); border-radius:0.5rem; padding:0.5rem 0.625rem; font-size:0.875rem; background:#fff; outline:none; } .inp:focus { border-color:rgb(100 116 139); box-shadow:0 0 0 3px rgb(148 163 184 / 0.15); }`}</style>
      </div>
    );
  }

  if (!loaded) {
    return <div className="min-h-screen bg-slate-950 text-white flex items-center justify-center p-6" style={font}><div className="flex items-center gap-3 text-slate-300"><Loader2 className="animate-spin" size={22} /> Carregando dados…</div></div>;
  }

  return (
    <div className="min-h-screen bg-[#f6f8fb] text-slate-800" style={font}>
      <aside className={`${mobileNavOpen ? 'flex' : 'hidden'} lg:flex fixed inset-y-0 left-0 w-[196px] bg-gradient-to-b from-[#0e1b30] to-[#12243d] text-white z-50 flex-col border-r border-white/5 shadow-2xl overflow-y-auto`}>
        <div className="h-[64px] px-5 flex items-center gap-3 border-b border-white/10">
          <div className="w-9 h-9 rounded-xl bg-emerald-400/15 border border-emerald-300/20 flex items-center justify-center text-emerald-300"><BarChart3 size={19} /></div>
          <div className="min-w-0"><div className="font-semibold text-sm leading-tight">Métricas</div><div className="text-[10px] text-slate-400">Painel operacional</div></div>
        </div>
        <nav className="p-3 space-y-1.5 text-sm">
          <button onClick={() => navegarPainel('topo')} className={`sidebar-nav ${paginaAtiva==='painel' && !['financeiro','anuncio','modelos','pagar','marketplaces','zpl'].includes(aba) ? 'sidebar-nav-active' : ''}`}><BarChart3 size={16}/> <span>Painel</span></button>
          <button onClick={() => navegarPainel('registrar-pedido')} className="sidebar-nav"><Receipt size={16}/> <span>Pedidos</span></button>
          <button onClick={() => navegarPainel('entregas-pendentes')} className="sidebar-nav"><Truck size={16}/> <span>Entregas</span></button>
          <button onClick={() => navegarPainel('painel-tabs','financeiro')} className={`sidebar-nav ${paginaAtiva==='painel' && aba==='financeiro'?'sidebar-nav-active':''}`}><Wallet size={16}/> <span>Financeiro</span></button>
          <button onClick={() => navegarPainel('painel-tabs','anuncio')} className={`sidebar-nav ${paginaAtiva==='painel' && aba==='anuncio'?'sidebar-nav-active':''}`}><Megaphone size={16}/> <span>Anúncios</span></button>
          <button onClick={() => navegarPainel('painel-tabs','modelos')} className={`sidebar-nav ${paginaAtiva==='painel' && aba==='modelos'?'sidebar-nav-active':''}`}><Package size={16}/> <span>Produtos</span></button>
          <button onClick={() => navegarPainel('topo','marketplaces')} className={`sidebar-nav ${paginaAtiva==='painel' && aba==='marketplaces'?'sidebar-nav-active':''}`}><Store size={16}/> <span>Marketplaces</span></button>
          <button onClick={() => navegarPainel('topo','zpl')} className={`sidebar-nav ${paginaAtiva==='painel' && aba==='zpl'?'sidebar-nav-active':''}`}><Printer size={16}/> <span>ZPL → PDF</span></button>
          <button onClick={() => navegarPainel('painel-tabs','pagar')} className={`sidebar-nav ${paginaAtiva==='painel' && aba==='pagar'?'sidebar-nav-active':''}`}><ClipboardList size={16}/> <span>A pagar</span></button>
          <button onClick={abrirAjustes} className={`sidebar-nav ${paginaAtiva==='ajustes'?'sidebar-nav-active':''}`}><Percent size={16}/> <span>Ajustes</span></button>
        </nav>
        <div className="mt-auto p-3 space-y-3">
          <div className="rounded-xl border border-white/10 bg-white/[0.04] p-3">
            <div className="flex items-center gap-2 text-xs font-medium text-emerald-300"><Cloud size={14}/> Sistema sincronizado</div>
            <div className="text-[10px] text-slate-400 mt-1">Dados salvos automaticamente</div>
          </div>
          <button onClick={doLogout} className="sidebar-nav text-slate-300 hover:text-white"><LogOut size={16}/><span>Sair</span></button>
        </div>
      </aside>
      {mobileNavOpen && <button aria-label="Fechar menu" onClick={() => setMobileNavOpen(false)} className="lg:hidden fixed inset-0 bg-slate-950/45 backdrop-blur-[1px] z-40" />}

      <div className="lg:pl-[196px] min-h-screen">
        <header id="topo" className="sticky top-0 z-30 h-[64px] bg-[#0b1628] text-white border-b border-white/10 shadow-sm">
          <div className="h-full max-w-[1640px] mx-auto px-4 sm:px-6 flex items-center justify-between gap-4">
            <div className="flex items-center gap-3 min-w-0">
              <button onClick={() => setMobileNavOpen(true)} className="lg:hidden p-2 -ml-2 rounded-lg hover:bg-white/10" aria-label="Abrir menu"><BarChart3 size={19}/></button>
              <div className="min-w-0">
                <div className="flex items-center gap-2 min-w-0"><h1 className="text-base sm:text-lg font-semibold truncate">{paginaAtiva === 'ajustes' ? 'Ajustes da conta' : aba === 'marketplaces' ? 'Marketplaces · Magalu e Shopee' : aba === 'zpl' ? 'Converter etiquetas ZPL em PDF' : 'Métricas de Campanhas · WhatsApp'}</h1>{paginaAtiva === 'painel' && !['marketplaces','zpl'].includes(aba) && <span className="hidden sm:inline text-[9px] uppercase tracking-wide bg-violet-500/20 text-violet-200 border border-violet-400/25 rounded-full px-2 py-0.5">Pedidos + Entregas</span>}</div>
                <div className="text-[11px] text-slate-400 mt-0.5 hidden sm:block">{paginaAtiva === 'ajustes' ? 'Configurações, comissões e conta' : aba === 'zpl' ? 'Etiquetas 10 × 15 cm ou folha A4' : per.label}</div>
              </div>
            </div>
            <div className="flex items-center gap-2 shrink-0">
              <div title={syncError || syncUi.label} className={`hidden md:flex items-center gap-1.5 text-xs ${syncUi.tone}`}>{syncUi.icon}<span>{syncUi.label}</span></div>
              {aba !== 'zpl' && <><button onClick={() => shiftPeriodo(-1)} className="p-2 rounded-lg bg-white/[0.06] hover:bg-white/[0.12] transition" aria-label="Mês anterior"><ChevronLeft size={17} /></button>
              <div className="px-3 py-2 rounded-lg bg-white/[0.07] border border-white/10 min-w-[126px] text-center text-xs sm:text-sm font-medium flex items-center justify-center gap-2"><Calendar size={14}/><span>{monthLabel(mesRefAtual)}</span></div>
              <button onClick={() => shiftPeriodo(1)} className="p-2 rounded-lg bg-white/[0.06] hover:bg-white/[0.12] transition" aria-label="Próximo mês"><ChevronRight size={17} /></button></>}
              <button onClick={() => window.location.reload()} className="hidden sm:inline-flex p-2 rounded-lg bg-white/[0.06] hover:bg-white/[0.12] transition" aria-label="Atualizar" title="Atualizar"><RefreshCw size={16}/></button>
              <div className="hidden xl:flex items-center gap-2 ml-2 pl-3 border-l border-white/10">
                <div className="w-8 h-8 rounded-full bg-slate-700 border border-white/10 flex items-center justify-center text-xs font-semibold">GA</div>
                <div className="leading-tight"><div className="text-xs font-medium">Administrador</div><div className="text-[10px] text-slate-400">Painel</div></div>
              </div>
            </div>
          </div>
        </header>

        <main className="max-w-[1640px] mx-auto px-4 sm:px-6 py-5 space-y-5">
        {paginaAtiva === 'ajustes' ? (
          <div className="space-y-5">
            {(syncError || bootError) && <div className={`text-sm rounded-lg px-3 py-2 border ${syncStatus === 'conflito' ? 'text-rose-700 bg-rose-50 border-rose-100' : 'text-amber-700 bg-amber-50 border-amber-100'}`}>{syncError || bootError}</div>}
            <div className="flex items-start justify-between gap-4 flex-wrap">
              <div><h2 className="text-xl font-semibold text-slate-900">Configurações da conta</h2><p className="text-sm text-slate-500 mt-1">Gerencie lojas, comissões dos vendedores e preferências administrativas. As alterações são salvas automaticamente no banco.</p></div>
              <button onClick={() => navegarPainel('topo')} className="h-10 px-4 rounded-lg border border-slate-200 bg-white text-sm font-medium text-slate-700 hover:bg-slate-50">Voltar ao painel</button>
            </div>

            <section className="bg-white border border-[#e4e9f0] rounded-xl shadow-sm overflow-hidden">
              <div className="px-5 py-4 border-b border-slate-100"><h3 className="font-semibold text-slate-900">Comissões dos vendedores</h3><p className="text-xs text-slate-500 mt-1">A comissão manual definida diretamente em um pedido continua tendo prioridade. Depois dela, vale o valor específico do modelo e, por último, a regra geral abaixo.</p></div>
              <div className="p-5 grid xl:grid-cols-2 gap-5">
                {['emporio','luna'].map((lojaId) => {
                  const cfg = comissaoConfigLoja(lojaId);
                  const vendedor = PAGAMENTO_PESSOA[lojaId]?.vendedor || 'Vendedor';
                  const mods = modelos.filter((m) => (m.lojaId || LOJA_PADRAO.id) === lojaId);
                  return <div key={lojaId} className="rounded-xl border border-slate-200 overflow-hidden">
                    <div className="px-4 py-3.5 bg-slate-50 flex items-center justify-between gap-3"><div><div className="font-semibold text-slate-800">{nomeLoja(lojaId)} · {vendedor}</div><div className="text-xs text-slate-400 mt-0.5">Regra padrão para novos cálculos e pedidos ainda não pagos</div></div><span className="text-[11px] rounded-full bg-white border border-slate-200 px-2 py-1 text-slate-500">Salvo automaticamente</span></div>
                    <div className="p-4 space-y-4">
                      <Field label="Tipo de comissão">
                        <select value={cfg.tipo} onChange={(e) => atualizarConfigComissao(lojaId,{ tipo:e.target.value })} className="inp">
                          <option value="atual">Regras atuais do painel</option>
                          <option value="fixo">Valor fixo por pedido</option>
                          <option value="metade_lucro">50% do lucro do pedido</option>
                        </select>
                      </Field>
                      {cfg.tipo === 'fixo' && <Field label={`Valor fixo de ${vendedor}`}><div className="relative"><span className="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-slate-400">R$</span><input value={cfg.valorFixo || ''} onChange={(e)=>atualizarConfigComissao(lojaId,{valorFixo:parseBRL(e.target.value)})} inputMode="decimal" className="inp !pl-9" placeholder="0,00" /></div></Field>}
                      {cfg.tipo === 'metade_lucro' && <div className="rounded-lg bg-emerald-50 border border-emerald-100 px-3 py-2.5 text-xs text-emerald-800">O vendedor recebe 50% do lucro do pedido antes da comissão: valor líquido que cai na conta − fornecedor − frete. Ads e custos gerais do período não entram na base de um pedido individual.</div>}
                      {cfg.tipo === 'atual' && <div className="rounded-lg bg-slate-50 border border-slate-100 px-3 py-2.5 text-xs text-slate-500">{lojaId==='emporio' ? 'Mantém as regras atuais do Natan, incluindo comissão por modelo e ajuste de parcelamento; camas FG continuam com a regra atual.' : 'Mantém a regra atual do Douglas, calculada separadamente com taxa do vendedor, fornecedor e frete T1, com divisão 50/50.'}</div>}

                      <details className="group border-t border-slate-100 pt-3">
                        <summary className="cursor-pointer list-none flex items-center justify-between gap-3 text-sm font-medium text-slate-700"><span>Valores específicos por modelo</span><span className="text-xs text-slate-400 group-open:hidden">opcional</span></summary>
                        <p className="text-xs text-slate-400 mt-2">Se preencher um valor, ele substitui a regra geral somente para aquele modelo. Deixe vazio para usar a regra selecionada acima.</p>
                        <div className="mt-3 max-h-[330px] overflow-y-auto divide-y divide-slate-100 border border-slate-100 rounded-lg">
                          {mods.length === 0 ? <div className="p-3 text-xs text-slate-400">Nenhum modelo específico desta loja cadastrado.</div> : mods.map((m) => <div key={m.id} className="px-3 py-2.5 flex items-center gap-3"><div className="flex-1 min-w-0"><div className="text-sm text-slate-700 truncate">{m.nome}</div><div className="text-[10px] text-slate-400">{m.fornecedor || 'Sem fornecedor'}</div></div><div className="w-[132px]"><input value={cfg.porModelo?.[m.id] ?? ''} onChange={(e)=>atualizarComissaoModelo(lojaId,m.id,e.target.value)} inputMode="decimal" className="inp text-right" placeholder="Automático" /></div></div>)}
                        </div>
                      </details>
                    </div>
                  </div>;
                })}
              </div>
            </section>

            <section className="bg-white border border-[#e4e9f0] rounded-xl shadow-sm overflow-hidden">
              <div className="px-5 py-4 border-b border-slate-100"><h3 className="font-semibold text-slate-900">Conta e lojas</h3><p className="text-xs text-slate-500 mt-1">Preferências administrativas gerais do painel.</p></div>
              <div className="p-5 grid lg:grid-cols-2 gap-6">
                <div>
                  <div className="text-sm font-medium text-slate-700 mb-2">Lojas</div>
                  <div className="flex flex-col divide-y divide-slate-100 border border-slate-100 rounded-lg px-3 mb-3">
                    {lojas.map((l) => <div key={l.id} className="py-2.5 flex items-center gap-2"><input value={l.nome} onChange={(e)=>renameLoja(l.id,e.target.value)} className="inp !w-auto flex-1 text-sm" />{l.id===LOJA_PADRAO.id ? <span className="text-[10px] text-slate-400">principal</span> : <button onClick={()=>delLoja(l.id)} className="text-slate-300 hover:text-rose-500"><Trash2 size={15}/></button>}</div>)}
                  </div>
                  <div className="flex gap-2"><input value={novaLoja} onChange={(e)=>setNovaLoja(e.target.value)} placeholder="Nova loja…" className="inp"/><button onClick={addLoja} disabled={!novaLoja.trim()} className="h-10 px-3 rounded-lg bg-slate-900 text-white text-sm disabled:opacity-40"><Plus size={15}/></button></div>
                  {lojaMsg && <p className="text-xs text-rose-600 mt-2">{lojaMsg}</p>}
                </div>
                <div className="space-y-5">
                  <Field label="Imposto sobre o gasto de mídia (%)"><input value={config.impostoAdPct} onChange={(e)=>setConfig((c)=>({...c,impostoAdPct:parseBRL(e.target.value)}))} inputMode="decimal" className="inp" /></Field>
                  <div className="pt-4 border-t border-slate-100"><div className="text-sm font-medium text-slate-700 mb-1">Backup dos dados</div><p className="text-xs text-slate-400 mb-3">O banco salva automaticamente; o backup manual serve como cópia adicional.</p><div className="flex gap-2 flex-wrap"><button onClick={exportBackup} className="h-9 px-3 rounded-lg bg-slate-900 text-white text-sm flex items-center gap-1.5"><Download size={15}/> Baixar backup</button><label className="h-9 px-3 rounded-lg border border-slate-300 bg-white text-sm flex items-center gap-1.5 cursor-pointer"><Upload size={15}/> Restaurar<input type="file" accept="application/json,.json" onChange={importBackup} className="hidden"/></label></div>{backupMsg && <div className="mt-3 text-sm text-emerald-700 bg-emerald-50 border border-emerald-100 rounded-lg px-3 py-2">{backupMsg}</div>}</div>
                </div>
              </div>
            </section>
          </div>
        ) : (<>
        {(syncError || bootError) && <div className={`text-sm rounded-lg px-3 py-2 border ${syncStatus === 'conflito' ? 'text-rose-700 bg-rose-50 border-rose-100' : 'text-amber-700 bg-amber-50 border-amber-100'}`}>{syncError || bootError}{syncStatus === 'conflito' && <button onClick={() => window.location.reload()} className="ml-2 underline font-medium">Atualizar agora</button>}</div>}
        {aba !== 'zpl' && <div className="grid xl:grid-cols-[minmax(0,1fr)_auto] gap-x-8 gap-y-1 items-start">
        {/* Filtro de data */}
        <div className="dashboard-toolbar flex items-center gap-2 flex-wrap">
          <span className="toolbar-label"><Calendar size={13} /> Período</span>
          {presetBtn('hoje', 'Hoje')}
          {presetBtn('ontem', 'Ontem')}
          {presetBtn('amanha', 'Amanhã')}
          {presetBtn('mes', 'Este mês')}
          {presetBtn('mes_passado', 'Mês passado')}
          {presetBtn('ano', 'Este ano')}
          {presetBtn('custom', 'Personalizado')}
          {periodo.tipo === 'custom' && (
            <div className="flex items-center gap-2">
              <input type="date" value={periodo.from} onChange={(e) => setPeriodo((p) => ({ ...p, from: e.target.value }))} className="inp !w-auto text-sm" />
              <span className="text-slate-400 text-sm">até</span>
              <input type="date" value={periodo.to} onChange={(e) => setPeriodo((p) => ({ ...p, to: e.target.value }))} className="inp !w-auto text-sm" />
            </div>
          )}
        </div>

        {/* Seletor global de loja */}
        {!['marketplaces','zpl'].includes(aba) && (
        <div className="dashboard-toolbar flex items-center gap-2 flex-wrap xl:justify-end">
          <span className="toolbar-label"><Package size={13} /> Loja</span>
          <select value={lojaFiltro} onChange={(e) => setLojaFiltro(e.target.value)} className="inp !w-auto text-sm font-medium">
            <option value="todas">Todas as lojas</option>
            {lojas.map((l) => <option key={l.id} value={l.id}>{l.nome}</option>)}
          </select>
          {lojaFiltro !== 'todas' && <span className="text-xs text-slate-400">Mostrando apenas {nomeLoja(lojaFiltro)}</span>}
        </div>
        )}
        </div>}

        {!['marketplaces','zpl'].includes(aba) && <>
        {/* Resumo do período */}
        {periodoFuturo ? (
          <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-3">
            <Kpi icon={<Receipt size={16} />} label="Faturamento previsto" value={brl(previsaoPeriodo.faturamento)} tone="emerald" />
            <Kpi icon={<TrendingUp size={16} />} label="Lucro previsto*" value={brl(previsaoPeriodo.lucroPrevisto)} tone={previsaoPeriodo.lucroPrevisto >= 0 ? 'emerald' : 'rose'} />
            <Kpi icon={<Truck size={16} />} label="Entregas previstas" value={num(previsaoPeriodo.pedidos, 0)} hint="Pedidos ainda não entregues com entrega prevista no período. Entregas FG continuam na contagem; na Luna e nas camas FG da Empório elas ficam fora do faturamento financeiro." />
            <Kpi icon={<Package size={16} />} label="Fornecedor previsto" value={brl(previsaoPeriodo.fornecedor)} />
            <Kpi icon={<Truck size={16} />} label="Frete previsto" value={brl(previsaoPeriodo.frete)} />
            <Kpi icon={<Percent size={16} />} label="Margem prevista" value={`${num(previsaoPeriodo.margem * 100, 2)}%`} />
            <Kpi icon={<Truck size={16} />} label="Pedidos a entregar" value={num(previsaoPeriodo.pedidos, 0)} onClick={abrirPendentesPrevistosPeriodo} hint="Pedidos ainda não entregues com entrega prevista dentro do período selecionado. Clique para ver somente esses pedidos." />
          </div>
        ) : (
          <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-3">
            <Kpi icon={<Receipt size={16} />} label="Faturamento financeiro líquido" value={brl(resumoOperacional.comercial.faturamento)} />
            <Kpi icon={<Check size={16} />} label="Recebido pela loja" value={brl(resumoOperacional.realizado.faturamento)} tone="emerald" />
            {['emporio','luna'].includes(lojaFiltro) ? (<>
              <Kpi icon={resumoOperacional.comercial.lucro >= 0 ? <TrendingUp size={16} /> : <TrendingDown size={16} />} label={`Lucro antes do ${PAGAMENTO_PESSOA[lojaFiltro]?.vendedor} (pedidos)`} value={brl(resumoOperacional.comercial.lucro)} tone={resumoOperacional.comercial.lucro > 0 ? 'emerald' : resumoOperacional.comercial.lucro < 0 ? 'rose' : 'slate'} />
              <Kpi icon={resumoOperacional.comercial.resultadoAposVendedor >= 0 ? <TrendingUp size={16} /> : <TrendingDown size={16} />} label="Lucro Loja (pedidos)" value={brl(resumoOperacional.comercial.resultadoAposVendedor)} tone={resumoOperacional.comercial.resultadoAposVendedor > 0 ? 'emerald' : resumoOperacional.comercial.resultadoAposVendedor < 0 ? 'rose' : 'slate'} />
              <Kpi icon={resumoOperacional.realizado.lucro >= 0 ? <TrendingUp size={16} /> : <TrendingDown size={16} />} label={`Lucro antes do ${PAGAMENTO_PESSOA[lojaFiltro]?.vendedor} (entregas)`} value={brl(resumoOperacional.realizado.lucro)} tone={resumoOperacional.realizado.lucro > 0 ? 'emerald' : resumoOperacional.realizado.lucro < 0 ? 'rose' : 'slate'} />
              <Kpi icon={resumoOperacional.realizado.resultadoAposVendedor >= 0 ? <TrendingUp size={16} /> : <TrendingDown size={16} />} label="Lucro Loja (entregas)" value={brl(resumoOperacional.realizado.resultadoAposVendedor)} tone={resumoOperacional.realizado.resultadoAposVendedor > 0 ? 'emerald' : resumoOperacional.realizado.resultadoAposVendedor < 0 ? 'rose' : 'slate'} />
            </>) : (<>
              <Kpi icon={resumoOperacional.comercial.lucro >= 0 ? <TrendingUp size={16} /> : <TrendingDown size={16} />} label="Lucro loja (pedidos)" value={brl(resumoOperacional.comercial.lucro)} tone={resumoOperacional.comercial.lucro > 0 ? 'emerald' : resumoOperacional.comercial.lucro < 0 ? 'rose' : 'slate'} />
              <Kpi icon={resumoOperacional.realizado.lucro >= 0 ? <TrendingUp size={16} /> : <TrendingDown size={16} />} label="Lucro loja (entregas)" value={brl(resumoOperacional.realizado.lucro)} tone={resumoOperacional.realizado.lucro > 0 ? 'emerald' : resumoOperacional.realizado.lucro < 0 ? 'rose' : 'slate'} />
            </>)}
            <Kpi
              icon={<Receipt size={16} />}
              label={per.from === per.to ? 'Faturamento previsto do dia' : 'Faturamento previsto no período'}
              value={brl(previsaoPeriodo.faturamento)}
              tone={previsaoPeriodo.faturamento > 0 ? 'emerald' : 'slate'}
              hint="Soma apenas dos pedidos previstos que entram no faturamento financeiro. Na Luna, entregas pelo FG ficam fora deste faturamento; nas camas FG da Empório, vale a mesma regra. Esses pedidos continuam no Lucro Loja e nas obrigações do vendedor."
            />
            <Kpi
              icon={previsaoPeriodo.lucroPrevisto >= 0 ? <TrendingUp size={16} /> : <TrendingDown size={16} />}
              label={per.from === per.to ? 'Lucro previsto do dia' : 'Lucro previsto no período'}
              value={brl(previsaoPeriodo.lucroPrevisto)}
              tone={previsaoPeriodo.lucroPrevisto > 0 ? 'emerald' : previsaoPeriodo.lucroPrevisto < 0 ? 'rose' : 'slate'}
              hint="Lucro previsto sobre o faturamento líquido que cai na conta. A taxa da maquininha já foi retirada antes; depois entram fornecedor, frete e custos operacionais. Comissão de vendedor só é descontada quando o pagamento for marcado como pago. Ads futuros não são projetados."
            />
            <Kpi icon={<Truck size={16} />} label="Pedidos a entregar" value={num(previsaoPeriodo.pedidos, 0)} onClick={abrirPendentesPrevistosPeriodo} hint="Pedidos ainda não entregues com entrega prevista dentro do período selecionado. Clique para ver somente esses pedidos." />
            <Kpi icon={<Truck size={16} />} label="Pendentes no período" value={num(geral.pendentes, 0)} onClick={abrirPendentesDoPeriodo} hint="Pedidos ainda não entregues com entrega prevista dentro do período selecionado. Clique para ver." />
            <Kpi icon={<Receipt size={16} />} label="Total de pedidos" value={num(geral.totalPedidos, 0)} />
          </div>
        )}

        {/* Resultado financeiro separado: pedidos em cima, entregas embaixo */}
        <Card icon={<Wallet size={16} className="text-emerald-600" />} title={`Resultado financeiro · ${per.label}`} defaultOpen={false}>
          <div className="p-4 sm:p-5 space-y-5">
            {['emporio','luna'].includes(lojaFiltro) && (() => {
              const vendedor = PAGAMENTO_PESSOA[lojaFiltro]?.vendedor || 'Vendedor';
              const temAjusteAds = !!ajusteAdsPeriodoRegistro(lojaFiltro, per.from, per.to);
              const temAjusteVend = !!ajusteVendedorPeriodoRegistro(lojaFiltro, per.from, per.to);
              return <div className="rounded-xl border border-indigo-200 bg-indigo-50/40 overflow-hidden">
                <div className="px-4 py-3 border-b border-indigo-100 flex items-center justify-between gap-3 flex-wrap">
                  <div><div className="font-semibold text-slate-800">Valores manuais do período · {nomeLoja(lojaFiltro)}</div><div className="text-xs text-slate-500 mt-0.5">Edite o total gasto em anúncios e quanto foi efetivamente pago ao {vendedor}. Esses números passam a ser a referência deste período.</div></div>
                  {(temAjusteAds || temAjusteVend) && <span className="text-[11px] font-medium rounded-full bg-indigo-100 text-indigo-700 px-2.5 py-1">Ajuste manual ativo</span>}
                </div>
                <div className="p-4 grid md:grid-cols-[1fr_1fr_auto] gap-3 items-end">
                  <Field label="Gasto em anúncios no período"><input value={ajustePeriodoAdsInput} onChange={(e)=>setAjustePeriodoAdsInput(e.target.value)} inputMode="decimal" placeholder="Ex.: 1.250,00" className="inp" /></Field>
                  <Field label={`${vendedor} pago no período`}><input value={ajustePeriodoVendedorInput} onChange={(e)=>setAjustePeriodoVendedorInput(e.target.value)} inputMode="decimal" placeholder="Ex.: 500,00" className="inp" /></Field>
                  <div className="flex gap-2 flex-wrap"><button onClick={salvarAjustePeriodoFinanceiro} className="h-[38px] px-4 rounded-lg bg-slate-900 text-white text-sm font-medium hover:bg-slate-800 flex items-center gap-1.5"><Save size={15}/> Salvar período</button><button onClick={limparAjustePeriodoFinanceiro} className="h-[38px] px-3 rounded-lg border border-slate-300 bg-white text-slate-600 text-sm hover:bg-slate-50">Usar lançamentos</button></div>
                </div>
                <div className="px-4 pb-4 grid sm:grid-cols-2 lg:grid-cols-5 gap-3">
                  <MiniStat label={`Lucro antes do ${vendedor}`} value={brl(resumoOperacional.realizado.lucro)} />
                  <MiniStat label={`${vendedor} pago`} value={brl(resumoOperacional.realizado.vendedorPago || 0)} />
                  <MiniStat label="Lucro Loja" value={brl(resumoOperacional.realizado.resultadoAposVendedor)} />
                  <MiniStat
                    label="CPA por pedido"
                    value={adReal.cpaPedido != null ? brl(adReal.cpaPedido) : '—'}
                    sub={adReal.nPedidos > 0 ? `${brl(adReal.gastoTotal)} ÷ ${adReal.nPedidos} pedido(s) de anúncio` : 'Sem pedidos de anúncio no período'}
                  />
                  <MiniStat
                    label="ROAS realizado"
                    value={adReal.roas != null ? `${num(adReal.roas, 2)}x` : '—'}
                    sub={adReal.gastoTotal > 0 ? `${brl(adReal.receita)} em receita entregue ÷ ${brl(adReal.gastoTotal)} em Ads` : 'Sem gasto em anúncios no período'}
                    tone={adReal.roas != null ? (adReal.roas >= 1 ? 'emerald' : 'rose') : 'slate'}
                  />
                </div>
                {ajustePeriodoMsg && <div className="mx-4 mb-4 text-xs text-emerald-700 bg-emerald-50 border border-emerald-100 rounded-lg px-3 py-2">{ajustePeriodoMsg}</div>}
              </div>;
            })()}
            {[
              ['PEDIDOS REALIZADOS NO PERÍODO', 'Considera a data em que o pedido foi feito.', resumoOperacional.comercial, 'Pedidos'],
              ['PEDIDOS ENTREGUES NO PERÍODO', 'Considera a data real em que a entrega foi confirmada.', resumoOperacional.realizado, 'Entregues'],
            ].map(([titulo, subtitulo, r, qtdLabel]) => (
              <div key={titulo} className="rounded-xl border border-slate-200 bg-white overflow-hidden">
                <div className="px-4 py-3 border-b border-slate-100">
                  <div className="font-semibold text-slate-800">{titulo}</div>
                  <div className="text-xs text-slate-400 mt-0.5">{subtitulo}</div>
                </div>
                <div className="p-4 grid sm:grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-3 text-sm">
                  <div><div className="text-slate-400 text-xs">{qtdLabel}</div><div className="font-semibold text-lg">{num(r.pedidos, 0)}</div></div>
                  <div><div className="text-slate-400 text-xs">Faturamento</div><div className="font-semibold text-lg">{brl(r.faturamento)}</div></div>
                  {Math.abs((r.receitaBaseLucro || 0) - (r.faturamento || 0)) > 0.005 && <div><div className="text-slate-400 text-xs">Receita base do lucro (inclui FG)</div><div className="font-medium text-violet-700">{brl(r.receitaBaseLucro || 0)}</div></div>}
                  <div><div className="text-slate-400 text-xs">Fornecedor</div><div className="font-medium">{brl(r.fornecedor)}</div></div>
                  <div><div className="text-slate-400 text-xs">Frete</div><div className="font-medium">{brl(r.frete)}</div></div>
                  <div><div className="text-slate-400 text-xs">Taxas maquininha (já descontadas)</div><div className="font-medium">{brl(r.taxasCartao || 0)}</div></div>
                  <div><div className="text-slate-400 text-xs">Margem antes de Ads/vendedor</div><div className="font-semibold">{brl(r.margemAntesAds)}</div></div>
                  {Math.abs(r.ajusteFgManual || 0) > 0.005 && <div><div className="text-slate-400 text-xs">Ajuste manual FG</div><div className={`font-medium ${(r.ajusteFgManual||0)>=0?'text-emerald-600':'text-rose-600'}`}>{(r.ajusteFgManual||0)>=0?'+ ':''}{brl(r.ajusteFgManual||0)}</div></div>}
                  <div><div className="text-slate-400 text-xs">Ads</div><div className="font-medium">{brl(r.ads)}</div></div>
                  <div><div className="text-slate-400 text-xs">Custos operacionais</div><div className="font-medium">{brl(r.custosOp)}</div></div>
                  <div><div className="text-slate-400 text-xs">{lojaFiltro==='luna' ? 'Douglas devido (não descontado)' : (titulo.startsWith('PEDIDOS REALIZADOS') ? 'Vendedor previsto (não descontado)' : 'Vendedor devido (não descontado)')}</div><div className="font-medium">{brl(r.vendedorDevido || 0)}</div></div>
                  <div><div className="text-slate-400 text-xs">{['emporio','luna'].includes(lojaFiltro) ? `Lucro antes do ${PAGAMENTO_PESSOA[lojaFiltro]?.vendedor}` : 'Lucro da loja'}</div><div className={`font-semibold text-lg ${r.lucro >= 0 ? 'text-emerald-600' : 'text-rose-600'}`}>{brl(r.lucro)} <span className="text-xs font-normal text-slate-400">({num(r.margem * 100, 2)}%)</span></div></div>
                  {(r.creditoFg || 0) !== 0 && <div><div className="text-slate-400 text-xs">Crédito com FG (fora do faturamento)</div><div className="font-semibold text-violet-700">{brl(r.creditoFg)}</div><div className="text-[11px] text-slate-400">{r.pedidosFg || 0} pedido(s) fora do caixa da loja</div></div>}
                  {['emporio','luna'].includes(lojaFiltro) && <div><div className="text-slate-400 text-xs">{PAGAMENTO_PESSOA[lojaFiltro]?.vendedor} pago no período</div><div className="font-medium text-rose-600">− {brl(r.vendedorPago || 0)}</div></div>}
                  {['emporio','luna'].includes(lojaFiltro) && <div><div className="text-slate-400 text-xs">Lucro Loja (após pagamento)</div><div className={`font-semibold ${r.resultadoAposVendedor >= 0 ? 'text-emerald-600' : 'text-rose-600'}`}>{brl(r.resultadoAposVendedor)} <span className="text-xs font-normal text-slate-400">({num(r.margemAposVendedor * 100, 2)}%)</span></div></div>}
                </div>
              </div>
            ))}

            {(previsaoPeriodo.pedidos > 0 || periodoFuturo) && (
              <div className="rounded-xl border border-emerald-200 bg-emerald-50/30 overflow-hidden">
                <div className="px-4 py-3 border-b border-emerald-100">
                  <div className="font-semibold text-emerald-900">PREVISÃO DE ENTREGAS NO PERÍODO</div>
                  <div className="text-xs text-emerald-700/70 mt-0.5">Usa a data prevista de entrega dos pedidos ainda pendentes.</div>
                </div>
                <div className="p-4 grid sm:grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-3 text-sm">
                  <div><div className="text-slate-500 text-xs">Entregas previstas</div><div className="font-semibold text-lg">{num(previsaoPeriodo.pedidos, 0)}</div></div>
                  <div><div className="text-slate-500 text-xs">Faturamento previsto</div><div className="font-semibold text-lg text-emerald-700">{brl(previsaoPeriodo.faturamento)}</div></div>
                  {Math.abs((previsaoPeriodo.receitaBaseLucro || 0) - (previsaoPeriodo.faturamento || 0)) > 0.005 && <div><div className="text-slate-500 text-xs">Receita base do lucro (inclui FG)</div><div className="font-medium text-violet-700">{brl(previsaoPeriodo.receitaBaseLucro || 0)}</div></div>}
                  <div><div className="text-slate-500 text-xs">Fornecedor previsto</div><div className="font-medium">{brl(previsaoPeriodo.fornecedor)}</div></div>
                  <div><div className="text-slate-500 text-xs">Frete previsto</div><div className="font-medium">{brl(previsaoPeriodo.frete)}</div></div>
                  <div><div className="text-slate-500 text-xs">Taxas maquininha previstas (já descontadas)</div><div className="font-medium">{brl(previsaoPeriodo.taxasCartao || 0)}</div></div>
                  <div><div className="text-slate-500 text-xs">Margem antes Ads/vendedor</div><div className="font-semibold">{brl(previsaoPeriodo.margemAntesAds)}</div></div>
                  <div><div className="text-slate-500 text-xs">{lojaFiltro==='luna'?'Douglas previsto (não descontado)':'Vendedor previsto (não descontado)'}</div><div className="font-medium">{brl(previsaoPeriodo.vendedorPrevisto || 0)}</div></div>
                  <div><div className="text-slate-500 text-xs">Custos operacionais previstos</div><div className="font-medium">{brl(previsaoPeriodo.custosOp)}</div></div>
                  <div><div className="text-slate-500 text-xs">Lucro da loja previsto*</div><div className={`font-semibold text-xl ${previsaoPeriodo.lucroPrevisto >= 0 ? 'text-emerald-700' : 'text-rose-600'}`}>{brl(previsaoPeriodo.lucroPrevisto)} <span className="text-xs font-normal text-slate-400">({num(previsaoPeriodo.margem * 100, 2)}%)</span></div></div>
                  {(previsaoPeriodo.creditoFgPrevisto || 0) !== 0 && <div><div className="text-slate-500 text-xs">Crédito FG previsto (fora do faturamento)</div><div className="font-semibold text-violet-700">{brl(previsaoPeriodo.creditoFgPrevisto)}</div></div>}
                </div>
                <div className="px-4 pb-4 text-xs text-slate-500">* Não projeta gasto futuro de Ads. O faturamento previsto já é líquido da taxa da maquininha; o lucro desconta fornecedor, frete e custos operacionais. Vendedor aparece separado como obrigação e só é descontado quando o pagamento for marcado como pago.</div>
              </div>
            )}
          </div>
          <div className="px-4 sm:px-5 pb-4 text-xs text-slate-400">Nos resultados de pedidos e entregas, Ads já são descontados uma única vez. Não subtraia novamente o valor exibido em Ads.</div>
        </Card>

        {/* Registrar pedido */}
        <Card id="registrar-pedido" icon={<Plus size={16} className="text-emerald-600" />} title="Registrar pedido">
          <div className="p-4 sm:p-5">
            <details className="mb-4 rounded-lg border border-slate-200 bg-slate-50/60 p-3" open={['emporio','luna'].includes(lojaFormulario)}>
              <summary className="text-sm font-medium text-slate-700 cursor-pointer">Colar ficha de pedido e preencher automaticamente</summary>
              <div className="mt-3 grid lg:grid-cols-[1fr_auto] gap-3 items-end">
                <textarea value={pedidoPaste} onChange={(e)=>setPedidoPaste(e.target.value)} rows={5} placeholder="Cole aqui a ficha completa do WhatsApp..." className="inp font-mono text-xs" />
                <button onClick={interpretarFicha} disabled={!pedidoPaste.trim()} className="h-[38px] px-4 rounded-lg bg-slate-900 text-white text-sm font-medium disabled:opacity-40">Interpretar ficha</button>
              </div>
              {pedidoParseMsg && <div className="mt-2 text-xs text-emerald-700">{pedidoParseMsg}</div>}
            </details>
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 items-end">
              <Field label="Data do pedido"><input type="date" value={vData} onChange={(e) => setVData(e.target.value)} className="inp" /></Field>
              <Field label="De onde veio" className="col-span-2 lg:col-span-1">
                <select value={vCampanha} onChange={(e) => setVCampanha(e.target.value)} className="inp">
                  <option value="">Selecione…</option>
                  <optgroup label="Não sei qual anúncio"><option value={ADX}>Anúncio não rastreado (viu o ad → IG/site → Whats)</option><option value={ORG}>Orgânico de verdade (indicação)</option></optgroup>
                  {campanhasFormulario.length > 0 && <optgroup label="Anúncios rastreados">{campanhasFormulario.map((c) => <option key={c.id} value={c.id}>{c.nome}{c.lojaId ? ` · ${nomeLoja(c.lojaId)}` : ''}</option>)}</optgroup>}
                </select>
              </Field>
              {isOrg && <Field label="Origem"><select value={vOrigem} onChange={(e) => setVOrigem(e.target.value)} className="inp">{ORIGENS.map((o) => <option key={o} value={o}>{o}</option>)}</select></Field>}
              {(vCampanha === ORG || vCampanha === ADX) && <Field label="Loja"><select value={vLojaId} onChange={(e) => setVLojaId(e.target.value)} className="inp">{lojas.map((l) => <option key={l.id} value={l.id}>{l.nome}</option>)}</select></Field>}
              <Field label="Modelo (preenche sozinho)"><select value={vModelo} onChange={(e) => onModelo(e.target.value)} className="inp">{modeloOptions}</select></Field>
              <Field label="Cliente (opcional)"><input value={vCliente} onChange={(e) => setVCliente(e.target.value)} placeholder="Nome" className="inp" /></Field>
              {['emporio','luna'].includes(lojaFormulario) && <Field label="CEP"><input value={vCep} onChange={(e) => {
                const cep=e.target.value.replace(/\D/g,'').slice(0,8); setVCep(cep);
                if (lojaFormulario==='luna') { const f2=freteLuna(cep,FRETE_LUNA_T2,vQtdItens), f1=freteLuna(cep,FRETE_LUNA_T1,vQtdItens); if (f2!==null) setVFrete(String(f2)); if (f1!==null) setVFreteTabela1(String(f1)); }
                if (lojaFormulario==='emporio' && modeloEhCamaFgEmporio(modelos.find((x)=>x.id===vModelo))) { const f2=freteLuna(cep,FRETE_LUNA_T2,vQtdItens); if (f2!==null) setVFrete(String(f2)); }
              }} placeholder="00000000" className="inp" /></Field>}
              {(lojaFormulario === 'luna' || (lojaFormulario==='emporio' && modeloEhCamaFgEmporio(modelos.find((x)=>x.id===vModelo)))) && <Field label="Qtd. itens"><input type="number" min="1" value={vQtdItens} onChange={(e) => {
                const q=Math.max(1,Number(e.target.value)||1); setVQtdItens(q);
                const f2=freteLuna(vCep,FRETE_LUNA_T2,q); if (f2!==null) setVFrete(String(f2));
                if (lojaFormulario==='luna') { const f1=freteLuna(vCep,FRETE_LUNA_T1,q); if (f1!==null) setVFreteTabela1(String(f1)); }
              }} className="inp" /></Field>}
              {lojaFormulario === 'luna' && <Field label="Entregador"><select value={vEntregadorLuna} onChange={(e)=>{ const entregador=e.target.value; setVEntregadorLuna(entregador); if (entregador==='FG') setVPagamentoRecebidoPorLuna('fg'); }} className="inp">{LUNA_ENTREGADORES.map((x)=><option key={x} value={x}>{x}</option>)}</select></Field>}
              {lojaFormulario === 'emporio' && modeloEhCamaFgEmporio(modelos.find((x)=>x.id===vModelo)) && <Field label="Entregador da cama"><select value={vEntregadorEmporioCama} onChange={(e)=>setVEntregadorEmporioCama(e.target.value)} className="inp">{LUNA_ENTREGADORES.map((x)=><option key={x} value={x}>{x}</option>)}</select></Field>}
              {lojaFormulario === 'luna' && <Field label="Pagamento recebido por"><select value={vPagamentoRecebidoPorLuna} onChange={(e)=>setVPagamentoRecebidoPorLuna(e.target.value)} className="inp">{LUNA_RECEBEDORES.map((x)=><option key={x.id} value={x.id}>{x.nome}</option>)}</select></Field>}
              <Field label="Pagamento"><select value={vFormaPagamento} onChange={(e) => setVFormaPagamento(e.target.value)} className="inp"><option value="nao_informado">Não informado</option><option value="pix">Pix</option><option value="dinheiro">Dinheiro</option><option value="debito">Débito</option><option value="credito">Crédito</option></select></Field>
              {vFormaPagamento === 'credito' && <Field label="Parcelas"><select value={vParcelas} onChange={(e)=>setVParcelas(Number(e.target.value))} className="inp">{Array.from({length:12},(_,i)=>i+1).map((n)=><option key={n} value={n}>{n}x</option>)}</select></Field>}
              <Field label="Status do pedido">
                <select value={vStatus} onChange={(e) => { const status = e.target.value; setVStatus(status); if (!['entregue', 'devolvido'].includes(status)) setVDataEntrega(''); }} className="inp">
                  {STATUS_PEDIDO.map((s) => <option key={s.value} value={s.value}>{s.label}</option>)}
                </select>
              </Field>
              <Field label="Entrega prevista"><input type="date" value={vDataPrevista} onChange={(e) => setVDataPrevista(e.target.value)} className="inp" /></Field>
              {['entregue', 'devolvido'].includes(vStatus) && <Field label="Data da entrega"><input type="date" value={vDataEntrega} onChange={(e) => setVDataEntrega(e.target.value)} className="inp" /></Field>}
              <Field label={vFormaPagamento === 'credito' && Number(vParcelas)>1 ? 'Valor parcelado (com taxa)' : 'Valor da venda'}><input value={vReceita} onChange={(e) => setVReceita(e.target.value)} placeholder="0,00" inputMode="decimal" className="inp" /></Field>
              <Field label="Custo do produto"><input value={vCusto} onChange={(e) => setVCusto(e.target.value)} placeholder="0,00" inputMode="decimal" className="inp" /></Field>
              <Field label={lojaFormulario === 'luna' ? 'Frete T2 (lucro/freteiro)' : lojaFormulario === 'emporio' ? (modeloEhCamaFgEmporio(modelos.find((x)=>x.id===vModelo)) ? 'Frete T2 (cama FG)' : 'Frete (padrão 130)') : 'Frete'}><input value={vFrete} onChange={(e) => setVFrete(e.target.value)} placeholder="0,00" inputMode="decimal" className="inp" /></Field>
              {lojaFormulario === 'luna' && <div className="col-span-2 sm:col-span-3 lg:col-span-2 text-xs text-slate-500 bg-emerald-50 border border-emerald-100 rounded-lg px-3 py-2">Douglas = 50% do resultado positivo do acerto, calculado com a taxa da tabela dos vendedores, fornecedor e frete da planilha T1. O lucro geral da Luna continua usando a tabela oficial da loja. Se o entregador for FG, a venda não entra no faturamento financeiro da Luna e vai para o Acerto FG.</div>}
              {lojaFormulario === 'emporio' && modeloEhCamaFgEmporio(modelos.find((x)=>x.id===vModelo)) && <div className="col-span-2 sm:col-span-3 lg:col-span-2 text-xs text-slate-600 bg-amber-50 border border-amber-100 rounded-lg px-3 py-2">Cama FG na Empório: Natan recebe comissão fixa de R$50,00. O frete e as taxas seguem as mesmas regras das camas da Luna. Se o entregador for FG, a venda não entra no faturamento financeiro da Empório, mas continua no Lucro Loja, no Natan devido e no Acerto FG. As regras dos sofás não mudam.</div>}
              <button onClick={addVenda} disabled={!vCampanha || parseBRL(vReceita) <= 0} className="h-[38px] rounded-lg bg-emerald-600 text-white text-sm font-medium hover:bg-emerald-700 disabled:opacity-40 disabled:cursor-not-allowed transition flex items-center justify-center gap-1.5"><Plus size={16} /> Registrar</button>
            </div>
            {['emporio','luna'].includes(lojaFormulario) && parseBRL(vReceita) > 0 && (() => {
              const tmp=enriquecerVenda({receita:parseBRL(vReceita),custo:parseBRL(vCusto),frete:parseBRL(vFrete),formaPagamento:vFormaPagamento,parcelas:vParcelas,cep:vCep,qtdItens:vQtdItens,freteTabela1:parseBRL(vFreteTabela1),tipoProduto:lojaFormulario==='emporio'&&modeloEhCamaFgEmporio(modelos.find((x)=>x.id===vModelo))?'cama_fg':'',entregadorLuna:vEntregadorLuna,entregadorEmporioCama:vEntregadorEmporioCama,pagamentoRecebidoPor:vPagamentoRecebidoPorLuna},lojaFormulario,vModelo||null);
              const detNatan = lojaFormulario === 'emporio' ? detalheNatanVenda(tmp) : null;
              return <div className="mt-3 rounded-lg bg-slate-50 border border-slate-200 px-3 py-2 text-xs flex flex-wrap gap-x-5 gap-y-1">
                <span>Valor {tmp.formaPagamento==='credito' && Number(tmp.parcelas)>1 ? `parcelado (${tmp.parcelas}x)` : 'cobrado'}: <strong>{brl(tmp.receita)}</strong></span>
                <span>Taxa da loja ({num(taxaCartaoPctVenda(tmp),2)}%): <strong>-{brl(taxaCartaoValorVenda(tmp))}</strong></span>
                <span>Líquido que cai na conta: <strong className="text-emerald-700">{brl(receitaLiquidaVenda(tmp))}</strong></span>
                {lojaFormulario==='luna' && <span>Taxa vendedor ({num(taxaVendedorPctVenda(tmp),2)}%): <strong>{brl(taxaVendedorValorVenda(tmp))}</strong></span>}
                <span>Frete lucro: <strong>{brl(tmp.frete)}</strong></span>
                <span>Lucro da loja: <strong className={lucroBaseVenda(tmp)>=0?'text-emerald-700':'text-rose-600'}>{brl(lucroBaseVenda(tmp))}</strong></span>
                {detNatan && !detNatan.camaFg && tmp.formaPagamento==='credito' && Number(tmp.parcelas)>1 && <span title={`Cálculo do Natan usa a tabela específica do vendedor, separada da taxa geral da loja.`}>Natan: líquido após taxa vendedor <strong>{brl(detNatan.valorLiquidoVendedor || 0)}</strong> · Base normal <strong>{brl(detNatan.valorNormalPagamento)}</strong> · Extra líquido <strong>{brl(detNatan.acrescimoParcelamento)}</strong> · 50% <strong>{brl(detNatan.extraNatan)}</strong></span>}
                {detNatan?.camaFg && <span className="text-amber-700">Cama FG: comissão fixa do Natan <strong>R$ 50,00</strong>.</span>}
                {lojaFormulario==='emporio' && !detNatan?.camaFg && tmp.formaPagamento==='credito' && Number(tmp.parcelas)>1 && !(Number(detNatan?.valorNormalPagamento)>0) && <span className="text-amber-700">Sem preço-base automático para este modelo; comissão-base mantida.</span>}
                <span>{lojaFormulario==='luna'?'Douglas — 50%':`${tmp.vendedorNome} devido`}: <strong>{brl(tmp.vendedorDevido)}</strong></span>
                <span>{lojaFormulario==='luna'?'Lucro final Luna':'Após vendedor'}: <strong className={(lucroBaseVenda(tmp)-tmp.vendedorDevido)>=0?'text-emerald-700':'text-rose-600'}>{brl(lucroBaseVenda(tmp)-tmp.vendedorDevido)}</strong></span>
                {lojaFormulario==='luna' && <span>Recebimento: <strong>{tmp.pagamentoRecebidoPor==='fg'?'FG':'Luna Comfort'}</strong> · Entregador: <strong>{tmp.entregadorLuna}</strong></span>}
                {lojaFormulario==='emporio' && tmp.tipoProduto==='cama_fg' && <span>Entregador da cama: <strong>{tmp.entregadorEmporioCama || 'Rogério'}</strong>{tmp.entregadorEmporioCama==='FG' ? ' · fora do faturamento financeiro' : ''}</span>}
              </div>;
            })()}
            <p className="text-xs text-slate-400 mt-2">O status padrão é “Confirmado com cliente”, mas você pode registrar o pedido como recebido, entregue, cancelado ou devolvido. Receita e lucro realizados consideram somente os pedidos entregues.</p>
          </div>
        </Card>

        {/* Entregas pendentes */}
        <div ref={entregasPendentesRef} className="scroll-mt-4">
        <Card id="entregas-pendentes" icon={<Truck size={16} className="text-violet-600" />} title={`Entregas pendentes · ${entregasPendentes.length}`} defaultOpen={false}>
          <div className="p-4 sm:p-5 border-b border-slate-100">
            <div className="text-xs text-slate-500 bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 inline-flex items-center gap-2">
              <Calendar size={14}/> Período do topo: <strong>{brDate(per.from)} até {brDate(per.to)}</strong> · usa a data prevista de entrega.
            </div>
          </div>
          {entregasPendentes.length === 0 ? (
            <div className="p-6 text-center text-slate-500 text-sm">Nenhuma entrega pendente neste filtro.</div>
          ) : (
            <div className="p-4 sm:p-5 flex flex-col divide-y divide-slate-100">
              {entregasPendentes.map((v) => {
                const st = statusVenda(v); const info = STATUS_INFO[st] || STATUS_INFO.pendente;
                const atrasada = v.dataPrevista && v.dataPrevista < todayISO();
                if (editId === v.id && editDraft) {
                  return <div key={v.id} className="py-1">{renderVenda(v)}</div>;
                }
                return (
                  <div key={v.id} className="py-3 flex items-center justify-between gap-3 flex-wrap">
                    <div className="min-w-0">
                      <div className="font-semibold text-slate-800 truncate">{nomeModelo(v.modeloId) || 'Sem modelo'} · <span className="font-medium text-slate-600">{v.cliente || 'sem nome'}</span></div>
                      <div className="text-xs text-slate-500 mt-1 flex items-center gap-2 flex-wrap">
                        <span>Pedido {brDate(v.data)}</span><span>{nomeVenda(v)}</span>
                        <span className={`inline-flex rounded-full border px-2 py-0.5 text-[11px] font-medium ${info.cls}`}>{info.label}</span>
                        <span className={atrasada ? 'text-rose-600 font-medium' : ''}>{v.dataPrevista ? `Entrega ${brDate(v.dataPrevista)}` : 'Sem data prevista'}</span>
                      </div>
                    </div>
                    <div className="flex items-center gap-2 flex-wrap justify-end">
                      <span className="font-medium tabular-nums">{brl(v.receita)}</span>
                      <button onClick={() => confirmarEntrega(v.id)} className="h-8 px-3 rounded-lg bg-emerald-600 text-white text-xs font-medium hover:bg-emerald-700">Entregue ✓</button>
                      <button onClick={() => atualizarStatusVenda(v.id, 'cancelado')} className="h-8 px-3 rounded-lg bg-rose-50 text-rose-600 text-xs font-medium hover:bg-rose-100">Cancelar</button>
                      <button onClick={() => startEdit(v)} className="text-slate-300 hover:text-slate-600" aria-label="Editar"><Pencil size={14} /></button>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </Card>
        </div>

        {/* Abas */}
        <div id="painel-tabs" className="flex gap-1 border-b border-slate-200 flex-wrap scroll-mt-24">
          <TabBtn active={aba === 'anuncio'} onClick={() => setAba('anuncio')}>Anúncios</TabBtn>
          <TabBtn active={aba === 'modelos'} onClick={() => setAba('modelos')}>Modelos {modelos.length > 0 && <span className="ml-1 text-xs bg-slate-200 text-slate-600 rounded-full px-1.5 py-0.5 tabular-nums">{modelos.length}</span>}</TabBtn>
          <TabBtn active={aba === 'financeiro'} onClick={() => setAba('financeiro')}>Financeiro</TabBtn>
          <TabBtn active={aba === 'pagar'} onClick={() => setAba('pagar')}>A pagar</TabBtn>
          <TabBtn active={aba === 'acertos'} onClick={() => setAba('acertos')}>Acertos {acertoResumo.qtdAcumulado > 0 && <span className="ml-1 text-xs bg-amber-100 text-amber-700 rounded-full px-1.5 py-0.5 tabular-nums">{acertoResumo.qtdAcumulado}</span>}</TabBtn>
          {hasOrg && <TabBtn active={aba === 'organico'} onClick={() => setAba('organico')}>Orgânicas {orgResumo.nPedidos > 0 && <span className="ml-1 text-xs bg-slate-200 text-slate-600 rounded-full px-1.5 py-0.5 tabular-nums">{orgResumo.nPedidos}</span>}</TabBtn>}
        </div>

        {(aba === 'anuncio' || aba === 'ajustes') && (
          <div className="space-y-6">
            {aba === 'ajustes' ? (
              <p className="text-xs text-slate-500 bg-slate-50 border border-slate-200 rounded-lg px-3 py-2">Configurações administrativas e cadastro de anúncios ficam concentrados aqui.</p>
            ) : lojaFiltro === 'todas' ? (
              <p className="text-xs text-slate-500 bg-slate-50 border border-slate-200 rounded-lg px-3 py-2">Selecione uma loja para ver desempenho, CPA, ROAS, lucro e comparativo dos anúncios. Na visão consolidada essas métricas não são somadas entre lojas.</p>
            ) : (
              <p className="text-xs text-slate-400 flex items-center gap-1"><ChevronUp size={12} /> Use as setas ao lado de cada título para reordenar os blocos. Clique num anúncio no comparativo para ver detalhes.</p>
            )}

            <div className="flex flex-col gap-6">
              {/* desempenho — métricas de anúncios só fazem sentido por loja */}
              {lojaFiltro !== 'todas' && (
              <div style={{ order: secOrder.indexOf('desempenho'), display: aba === 'anuncio' ? 'block' : 'none' }}>
                <Card onMoveUp={secUp('desempenho')} onMoveDown={secDown('desempenho')} icon={<Sparkles size={16} className="text-emerald-600" />} title={`Desempenho realizado dos anúncios · ${per.label}`}
                  right={lojaFiltro === LOJA_PADRAO.id ? <button onClick={fetchMeta} disabled={fetchingMeta} className="h-9 px-3 rounded-lg bg-slate-900 text-white text-sm font-medium hover:bg-slate-800 disabled:opacity-50 transition flex items-center gap-1.5">{fetchingMeta ? <Loader2 size={15} className="animate-spin" /> : <RefreshCw size={15} />}{fetchingMeta ? 'Puxando…' : 'Puxar do Meta'}</button> : null}>
                  <div className="p-4 sm:p-5">
                    <div className="grid grid-cols-2 lg:grid-cols-4 xl:grid-cols-7 gap-3">
                      <MiniStat label="Gasto (mídia + imposto)" value={brl(adReal.gastoTotal)} sub={impPct > 0 ? `${brl(adReal.gastoMidia)} + ${brl(adReal.imposto)} imp.` : 'sem imposto'} />
                      <MiniStat label="Pedidos" value={num(adReal.nPedidos, 0)} sub={`${adReal.nPendentes} pend. · ${adReal.nCancelados} canc.`} />
                      <MiniStat label="Entregues" value={num(adReal.nEntregues, 0)} sub={`${adReal.nTracked} rastr. + ${adReal.nUntracked} não rastr.`} />
                      <MiniStat label="CPA por pedido" value={adReal.cpaPedido != null ? brl(adReal.cpaPedido) : '—'} />
                      <MiniStat label="CPA por entrega" value={adReal.cpaEntrega != null ? brl(adReal.cpaEntrega) : '—'} />
                      <MiniStat label="ROAS realizado" value={adReal.roas != null ? `${num(adReal.roas, 2)}x` : '—'} tone={adReal.roas != null ? (adReal.roas >= 1 ? 'emerald' : 'rose') : 'slate'} />
                      <MiniStat label="Lucro realizado" value={brl(adReal.lucro)} tone={adReal.lucro > 0 ? 'emerald' : adReal.lucro < 0 ? 'rose' : 'slate'} />
                    </div>
                    <p className="text-xs text-slate-400 mt-3">Pedidos são atribuídos à data em que foram feitos. Receita, ROAS e lucro realizados consideram somente os pedidos com status “Entregue”.</p>
                    {lojaFiltro === LOJA_PADRAO.id && (metaError || metaMsg || metaRows.length > 0) && (
                      <div className="mt-4 pt-4 border-t border-slate-100">
                        {metaError && <div className="text-sm text-rose-700 bg-rose-50 border border-rose-100 rounded-lg px-3 py-2">{metaError}</div>}
                        {metaMsg && <div className="text-sm text-emerald-700 bg-emerald-50 border border-emerald-100 rounded-lg px-3 py-2">{metaMsg}</div>}
                        {metaRows.length > 0 && (
                          <div className="mt-3">
                            <p className="text-xs text-slate-500 uppercase tracking-wide mb-1">Encontrado no Meta — confirme o anúncio de cada campanha</p>
                            <div className="flex flex-col divide-y divide-slate-100">
                              {metaRows.map((row, i) => (
                                <div key={i} className="flex items-center justify-between gap-3 py-2.5 flex-wrap">
                                  <div className="min-w-0"><div className="text-sm font-medium text-slate-800 truncate">{row.campanha}</div><div className="text-xs text-slate-400 tabular-nums">{brl(row.gastoTotal)} no período</div></div>
                                  <div className="flex items-center gap-2"><span className="text-xs text-slate-300">→</span>
                                    <select value={row.mapId} onChange={(e) => setMetaRows((p) => p.map((r, j) => (j === i ? { ...r, mapId: e.target.value } : r)))} className="inp !w-auto text-sm">
                                      <option value="">Ignorar</option>
                                      <option value="__new__">➕ Criar “{row.campanha.slice(0, 22)}”</option>
                                      {campanhas.filter((c) => (c.lojaId || LOJA_PADRAO.id) === LOJA_PADRAO.id).map((c) => <option key={c.id} value={c.id}>{c.nome}</option>)}
                                    </select>
                                  </div>
                                </div>
                              ))}
                            </div>
                            <button onClick={applyMeta} className="mt-3 h-9 px-4 rounded-lg bg-emerald-600 text-white text-sm font-medium hover:bg-emerald-700 transition flex items-center gap-1.5"><Check size={15} /> Aplicar gasto</button>
                          </div>
                        )}
                      </div>
                    )}
                    {lojaFiltro === LOJA_PADRAO.id && (
                      <details className="mt-3 text-xs">
                        <summary className="text-slate-400 cursor-pointer hover:text-slate-600">Meta não puxou? Inserir dados manualmente</summary>
                        <div className="mt-2">
                          <textarea value={metaPaste} onChange={(e) => setMetaPaste(e.target.value)} placeholder='[{"campanha":"...","data":"2026-08-01","gasto":56.37}, ...]' rows={3} className="w-full border border-slate-300 rounded-lg p-2 text-xs font-mono outline-none focus:border-slate-400" />
                          <button onClick={carregarColado} disabled={!metaPaste.trim()} className="mt-2 h-8 px-3 rounded-lg border border-slate-300 bg-white text-slate-700 text-xs font-medium hover:bg-slate-50 disabled:opacity-40 transition">Carregar dados</button>
                        </div>
                      </details>
                    )}
                  </div>
                </Card>
              </div>
              )}

              {/* ajustes */}
              <div style={{ order: secOrder.indexOf('ajustes'), display: aba === 'ajustes' ? 'block' : 'none' }}>
                <Card id="ajustes-card" onMoveUp={secUp('ajustes')} onMoveDown={secDown('ajustes')} icon={<Percent size={16} className="text-slate-600" />} title="Configurações do painel" defaultOpen={false}>
                  <div className="p-4 sm:p-5">
                    <div className="mb-5 pb-5 border-b border-slate-100">
                      <div className="flex items-center gap-2 mb-2"><Package size={15} className="text-slate-500" /><span className="text-sm font-medium text-slate-700">Lojas</span></div>
                      <div className="flex flex-col divide-y divide-slate-100 mb-3">
                        {lojas.map((l) => (
                          <div key={l.id} className="py-2 flex items-center gap-2">
                            <input value={l.nome} onChange={(e) => renameLoja(l.id, e.target.value)} className="inp !w-auto flex-1 text-sm" />
                            {l.id === LOJA_PADRAO.id
                              ? <span className="text-xs text-slate-400 px-2">principal</span>
                              : <button onClick={() => delLoja(l.id)} className="text-slate-300 hover:text-rose-500" title="Excluir loja"><Trash2 size={15} /></button>}
                          </div>
                        ))}
                      </div>
                      <div className="flex items-center gap-2">
                        <input value={novaLoja} onChange={(e) => setNovaLoja(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') addLoja(); }} placeholder="Nova loja…" className="inp !w-auto flex-1 text-sm" />
                        <button onClick={addLoja} disabled={!novaLoja.trim()} className="h-9 px-3 rounded-lg bg-slate-900 text-white text-sm font-medium hover:bg-slate-800 disabled:opacity-40 flex items-center gap-1.5"><Plus size={15} /> Adicionar</button>
                      </div>
                      {lojaMsg && <p className="text-xs text-rose-600 mt-2">{lojaMsg}</p>}
                      <p className="text-xs text-slate-400 mt-2">Renomeie direto no campo. A loja principal não pode ser excluída, e lojas com pedidos/campanhas/custos vinculados também não.</p>
                    </div>
                    <Field label="Imposto sobre o gasto de mídia (%)" className="max-w-xs">
                      <input value={config.impostoAdPct} onChange={(e) => setConfig((c) => ({ ...c, impostoAdPct: parseBRL(e.target.value) }))} inputMode="decimal" placeholder="0" className="inp" />
                    </Field>
                    <p className="text-xs text-slate-400 mt-2">Aplicado somente aos gastos automáticos da Essential Estofados (Windsor/Meta). Ads manuais de Empório e Luna entram exatamente no valor informado.</p>
                    <div className="mt-5 pt-4 border-t border-slate-100">
                      <div className="flex items-center gap-2 mb-1"><Save size={15} className="text-slate-500" /><span className="text-sm font-medium text-slate-700">Backup dos dados</span></div>
                      <p className="text-xs text-slate-400 mb-3">Seus dados ficam sincronizados no banco e o navegador mantém uma cópia de segurança local. O backup manual continua recomendado para uma proteção extra e para exportar tudo quando precisar.</p>
                      <div className="flex items-center gap-2 flex-wrap">
                        <button onClick={exportBackup} className="h-9 px-3 rounded-lg bg-slate-900 text-white text-sm font-medium hover:bg-slate-800 transition flex items-center gap-1.5"><Download size={15} /> Baixar backup</button>
                        <label className="h-9 px-3 rounded-lg bg-white border border-slate-300 text-slate-700 text-sm font-medium hover:border-slate-400 transition flex items-center gap-1.5 cursor-pointer"><Upload size={15} /> Restaurar backup<input type="file" accept="application/json,.json" onChange={importBackup} className="hidden" /></label>
                        <span className="text-xs text-slate-500">{campanhas.length} anúncios · {vendas.length} vendas · {modelos.length} modelos guardados</span>
                      </div>
                      {backupMsg && <div className="mt-3 text-sm text-emerald-700 bg-emerald-50 border border-emerald-100 rounded-lg px-3 py-2">{backupMsg}</div>}
                    </div>
                  </div>
                </Card>
              </div>

              {/* windsor */}
              <div style={{ order: secOrder.indexOf('windsor'), display: 'none' }}>
                <Card onMoveUp={secUp('windsor')} onMoveDown={secDown('windsor')} icon={<Zap size={16} className="text-amber-500" />} title="Gasto do Meta · automático"
                  right={(lojaFiltro === 'todas' || lojaFiltro === LOJA_PADRAO.id) ? <button onClick={fetchMeta} disabled={fetchingMeta} className="h-9 px-3 rounded-lg bg-slate-900 text-white text-sm font-medium hover:bg-slate-800 disabled:opacity-50 transition flex items-center gap-1.5">{fetchingMeta ? <Loader2 size={15} className="animate-spin" /> : <RefreshCw size={15} />}{fetchingMeta ? 'Puxando…' : 'Puxar do Meta'}</button> : <span className="text-xs text-slate-400">Somente Essential</span>}>
                  <div className="p-4 sm:p-5">
                    {lojaFiltro !== 'todas' && lojaFiltro !== LOJA_PADRAO.id ? <div className="text-sm text-amber-700 bg-amber-50 border border-amber-100 rounded-lg px-3 py-2">Empório Sofás e Luna Comfort usam Ads manual por enquanto. O Windsor continua exclusivo da Essential Estofados.</div> : <p className="text-sm text-slate-500">Puxa o gasto diário das campanhas da Essential Estofados via Windsor.ai no período selecionado.</p>}
                    <details className="mt-3">
                      <summary className="text-sm text-slate-600 cursor-pointer hover:text-slate-800">ou colar o gasto (quando o botão falha)</summary>
                      <div className="mt-2">
                        <p className="text-xs text-slate-400 mb-1">Peça no chat “puxa o gasto diário” e cole aqui o texto (JSON) que eu te mandar. Depois é só mapear e aplicar.</p>
                        <textarea value={metaPaste} onChange={(e) => setMetaPaste(e.target.value)} placeholder='[{"campanha":"...","data":"2026-08-01","gasto":56.37}, ...]' rows={4} className="w-full border border-slate-300 rounded-lg p-2 text-xs font-mono outline-none focus:border-slate-400" />
                        <button onClick={carregarColado} disabled={!metaPaste.trim()} className="mt-2 h-9 px-3 rounded-lg bg-slate-900 text-white text-sm font-medium hover:bg-slate-800 disabled:opacity-40 transition">Carregar dados colados</button>
                      </div>
                    </details>
                    {metaError && <div className="mt-3 text-sm text-rose-700 bg-rose-50 border border-rose-100 rounded-lg px-3 py-2">{metaError}</div>}
                    {metaMsg && <div className="mt-3 text-sm text-emerald-700 bg-emerald-50 border border-emerald-100 rounded-lg px-3 py-2">{metaMsg}</div>}
                    {metaRows.length > 0 && (
                      <div className="mt-4">
                        <p className="text-xs text-slate-500 uppercase tracking-wide mb-1">Encontrado no Meta — confirme o anúncio de cada campanha</p>
                        <div className="flex flex-col divide-y divide-slate-100">
                          {metaRows.map((row, i) => (
                            <div key={i} className="flex items-center justify-between gap-3 py-2.5 flex-wrap">
                              <div className="min-w-0"><div className="text-sm font-medium text-slate-800 truncate">{row.campanha}</div><div className="text-xs text-slate-400 tabular-nums">{brl(row.gastoTotal)} no período</div></div>
                              <div className="flex items-center gap-2"><span className="text-xs text-slate-300">→</span>
                                <select value={row.mapId} onChange={(e) => setMetaRows((p) => p.map((r, j) => (j === i ? { ...r, mapId: e.target.value } : r)))} className="inp !w-auto text-sm">
                                  <option value="">Ignorar</option>
                                  <option value="__new__">➕ Criar “{row.campanha.slice(0, 22)}”</option>
                                  {campanhas.filter((c) => (c.lojaId || LOJA_PADRAO.id) === LOJA_PADRAO.id).map((c) => <option key={c.id} value={c.id}>{c.nome}</option>)}
                                </select>
                              </div>
                            </div>
                          ))}
                        </div>
                        <button onClick={applyMeta} className="mt-3 h-9 px-4 rounded-lg bg-emerald-600 text-white text-sm font-medium hover:bg-emerald-700 transition flex items-center gap-1.5"><Check size={15} /> Aplicar gasto</button>
                      </div>
                    )}
                  </div>
                </Card>
              </div>

              {/* comparativo — métricas de anúncios só fazem sentido por loja */}
              {lojaFiltro !== 'todas' && (
              <div style={{ order: secOrder.indexOf('comparativo'), display: aba === 'anuncio' ? 'block' : 'none' }}>
                <Card onMoveUp={secUp('comparativo')} onMoveDown={secDown('comparativo')} icon={<BarChart3 size={16} className="text-slate-600" />} title="Anuncios"
                  right={<div className="flex rounded-lg border border-slate-200 overflow-hidden"><button onClick={() => setOrdenacao('lucro')} className={`px-2.5 py-1 text-xs ${ordenacao === 'lucro' ? 'bg-slate-900 text-white' : 'bg-white text-slate-500 hover:text-slate-700'}`}>Lucro</button><button onClick={() => setOrdenacao('manual')} className={`px-2.5 py-1 text-xs ${ordenacao === 'manual' ? 'bg-slate-900 text-white' : 'bg-white text-slate-500 hover:text-slate-700'}`}>Manual</button></div>}>
                  {rows.length === 0 && adComparativo.pedidosUntracked === 0 ? (
                    <div className="p-8 text-center text-slate-500 text-sm">Nenhum anúncio teve gasto ou pedido não rastreado no período selecionado.</div>
                  ) : (
                    <div className="overflow-x-auto">
                      <table className="w-full text-sm min-w-[820px]">
                        <thead><tr className="text-left text-xs text-slate-500 uppercase tracking-wide border-b border-slate-100">
                          <th className="px-4 sm:px-5 py-2.5 font-medium">Anúncio</th>
                          <th className="px-3 py-2.5 font-medium text-right">Gasto mídia</th>
                          <th className="px-3 py-2.5 font-medium text-right">Vendas</th>
                          <th className="px-3 py-2.5 font-medium text-right">CPA</th>
                          <th className="px-3 py-2.5 font-medium text-right">Ticket</th>
                          <th className="px-3 py-2.5 font-medium text-right">Receita</th>
                          <th className="px-3 py-2.5 font-medium text-right">ROAS</th>
                          <th className="px-4 sm:px-5 py-2.5 font-medium text-right">Lucro</th>
                        </tr></thead>
                        <tbody className="divide-y divide-slate-100">
                          {rows.map((r) => {
                            const det = expandedCamp === r.c.id ? campDetalhe(r.c.id) : null;
                            return (
                              <Fragment key={r.c.id}>
                                <tr className="hover:bg-slate-50/60">
                                  <td className="px-4 sm:px-5 py-3">
                                    <button onClick={() => setExpandedCamp(expandedCamp === r.c.id ? null : r.c.id)} className="text-left flex items-start gap-1.5 group">
                                      <ChevronRight size={14} className={`mt-0.5 text-slate-300 group-hover:text-slate-500 transition-transform ${expandedCamp === r.c.id ? 'rotate-90' : ''}`} />
                                      <span><span className="font-medium text-slate-800 group-hover:text-slate-900">{r.c.nome}</span><span className="block text-xs text-slate-400">{[nomeLoja(r.c.lojaId), r.c.plataforma].filter(Boolean).join(' · ')}</span></span>
                                    </button>
                                  </td>
                                  <td className="px-3 py-3 text-right">
                                    {mesUnico ? (
                                      <div className="inline-flex items-center rounded-lg border border-slate-200 focus-within:border-slate-400 bg-white"><span className="pl-2 text-slate-400 text-xs">R$</span><input key={`${r.c.id}-${mesUnico}-${Number(r.gastoMidia || 0).toFixed(2)}`} defaultValue={r.gastoMidia ? num(r.gastoMidia, 2) : ''} onBlur={(e) => upsertGasto(r.c.id, mesUnico, parseBRL(e.target.value))} placeholder="0,00" inputMode="decimal" className="w-20 px-1.5 py-1 text-right tabular-nums bg-transparent outline-none text-slate-800" /></div>
                                    ) : <span className="tabular-nums text-slate-700">{brl(r.gastoMidia)}</span>}
                                  </td>
                                  <td className="px-3 py-3 text-right tabular-nums">{r.nPedidos}</td>
                                  <td className="px-3 py-3 text-right tabular-nums text-slate-700">{r.cpaPedido != null ? brl(r.cpaPedido) : '—'}</td>
                                  <td className="px-3 py-3 text-right tabular-nums text-slate-500">{r.ticket != null ? brl(r.ticket) : '—'}</td>
                                  <td className="px-3 py-3 text-right tabular-nums">{brl(r.receita)}</td>
                                  <td className="px-3 py-3 text-right tabular-nums">{r.roas != null ? <span className={r.roas >= 1 ? 'text-emerald-600 font-medium' : 'text-rose-600 font-medium'}>{num(r.roas, 2)}x</span> : '—'}</td>
                                  <td className="px-4 sm:px-5 py-3 text-right tabular-nums font-semibold"><span className={r.lucro > 0 ? 'text-emerald-600' : r.lucro < 0 ? 'text-rose-600' : 'text-slate-500'}>{brl(r.lucro)}</span></td>
                                </tr>
                                {det && (
                                  <tr className="bg-slate-50/60">
                                    <td colSpan={8} className="px-4 sm:px-5 py-4">
                                      <div className="text-xs text-slate-500 uppercase tracking-wide mb-2">Modelos vendidos por este anúncio</div>
                                      {det.modelosList.length === 0 ? <div className="text-sm text-slate-400">Nenhum pedido ativo deste anúncio no período.</div> : (
                                        <div className="flex flex-col gap-1 mb-3">{det.modelosList.map((m) => <div key={m.id} className="flex items-center justify-between text-sm gap-3"><span className="text-slate-700"><span className="font-semibold tabular-nums">{m.n}×</span> {m.nome}</span><span className="tabular-nums text-slate-500 shrink-0">receita {brl(m.receita)} · lucro <span className={m.lucro >= 0 ? 'text-emerald-600' : 'text-rose-600'}>{brl(m.lucro)}</span></span></div>)}</div>
                                      )}
                                      {det.vs.length > 0 && <><div className="text-xs text-slate-500 uppercase tracking-wide mb-1">Pedidos</div><div className="flex flex-col gap-1">{det.vs.map((v) => { const i = STATUS_INFO[statusVenda(v)] || STATUS_INFO.pendente; return <div key={v.id} className="flex items-center justify-between text-sm gap-3"><span className="text-slate-600 truncate"><span className="tabular-nums text-slate-400 mr-2">{(v.data || '').slice(8, 10)}/{(v.data || '').slice(5, 7)}</span>{v.cliente || 'sem nome'}{v.modeloId && <span className="text-slate-400"> · {nomeModelo(v.modeloId)}</span>} <span className={`ml-1 inline-flex rounded-full border px-1.5 py-0.5 text-[10px] ${i.cls}`}>{i.label}</span></span><span className="tabular-nums text-slate-500 shrink-0" title={`Valor cobrado ${brl(v.receita)} · líquido ${brl(receitaFinanceiraVenda(v))}`}>{brl(receitaFinanceiraVenda(v))}</span></div>; })}</div></>}
                                    </td>
                                  </tr>
                                )}
                              </Fragment>
                            );
                          })}
                          {lojaFiltro !== 'todas' && adComparativo.pedidosUntracked > 0 && (
                            <Fragment>
                              <tr className="bg-amber-50/50 hover:bg-amber-50/80">
                                <td className="px-4 sm:px-5 py-3">
                                  <button onClick={() => setExpandedCamp(expandedCamp === ADX ? null : ADX)} className="text-left flex items-start gap-1.5 group">
                                    <ChevronRight size={14} className={`mt-0.5 text-amber-400 group-hover:text-amber-600 transition-transform ${expandedCamp === ADX ? 'rotate-90' : ''}`} />
                                    <span><span className="font-medium text-amber-700">Anúncio · não rastreado</span><span className="block text-xs text-slate-400">viu o ad → IG/site → Whats · clique para ver modelos e pedidos</span></span>
                                  </button>
                                </td>
                                <td className="px-3 py-3 text-right text-slate-300">—</td>
                                <td className="px-3 py-3 text-right tabular-nums">{adComparativo.pedidosUntracked}</td>
                                <td className="px-3 py-3 text-right text-slate-300">—</td>
                                <td className="px-3 py-3 text-right tabular-nums text-slate-500">{adComparativo.pedidosUntracked > 0 ? brl(adComparativo.recUntracked / adComparativo.pedidosUntracked) : '—'}</td>
                                <td className="px-3 py-3 text-right tabular-nums">{brl(adComparativo.recUntracked)}</td>
                                <td className="px-3 py-3 text-right text-slate-300">—</td>
                                <td className="px-4 sm:px-5 py-3 text-right tabular-nums font-semibold"><span className={(adComparativo.recUntracked - adComparativo.custoUntracked) >= 0 ? 'text-emerald-600' : 'text-rose-600'}>{brl(adComparativo.recUntracked - adComparativo.custoUntracked)}</span></td>
                              </tr>
                              {detalheNaoRastreado && (
                                <tr className="bg-amber-50/30">
                                  <td colSpan={8} className="px-4 sm:px-5 py-4">
                                    <div className="text-xs text-amber-700 uppercase tracking-wide mb-2">Modelos dos anúncios não rastreados</div>
                                    {detalheNaoRastreado.modelosList.length === 0 ? <div className="text-sm text-slate-400">Nenhum pedido ativo no período.</div> : (
                                      <div className="flex flex-col gap-1 mb-4">{detalheNaoRastreado.modelosList.map((m) => <div key={m.id} className="flex items-center justify-between text-sm gap-3"><span className="text-slate-700"><span className="font-semibold tabular-nums">{m.n}×</span> {m.nome}</span><span className="tabular-nums text-slate-500 shrink-0">receita {brl(m.receita)} · lucro <span className={m.lucro >= 0 ? 'text-emerald-600' : 'text-rose-600'}>{brl(m.lucro)}</span></span></div>)}</div>
                                    )}
                                    {detalheNaoRastreado.vs.length > 0 && <><div className="text-xs text-amber-700 uppercase tracking-wide mb-1">Pedidos que formam este total</div><div className="flex flex-col gap-1">{detalheNaoRastreado.vs.map((v) => { const i = STATUS_INFO[statusVenda(v)] || STATUS_INFO.pendente; return <div key={v.id} className="flex items-center justify-between text-sm gap-3"><span className="text-slate-600 truncate"><span className="tabular-nums text-slate-400 mr-2">{(v.data || '').slice(8, 10)}/{(v.data || '').slice(5, 7)}</span>{v.cliente || 'sem nome'}{v.modeloId && <span className="text-slate-400"> · {nomeModelo(v.modeloId)}</span>} <span className={`ml-1 inline-flex rounded-full border px-1.5 py-0.5 text-[10px] ${i.cls}`}>{i.label}</span></span><span className="tabular-nums text-slate-500 shrink-0" title={`Valor cobrado ${brl(v.receita)} · líquido ${brl(receitaFinanceiraVenda(v))}`}>{brl(receitaFinanceiraVenda(v))}</span></div>; })}</div></>}
                                  </td>
                                </tr>
                              )}
                            </Fragment>
                          )}
                        </tbody>
                        <tfoot>
                          <tr className="border-t-2 border-slate-200 bg-slate-50 font-semibold">
                            <td className="px-4 sm:px-5 py-3">Total anúncios <span className="block text-[10px] font-normal text-slate-400">inclui não rastreados</span></td>
                            <td className="px-3 py-3 text-right tabular-nums">{brl(adComparativo.gastoTotal)}</td>
                            <td className="px-3 py-3 text-right tabular-nums">{adComparativo.nPedidos}</td>
                            <td className="px-3 py-3 text-right tabular-nums">{adComparativo.cpa != null ? brl(adComparativo.cpa) : '—'}</td>
                            <td className="px-3 py-3 text-right tabular-nums">{adComparativo.ticket != null ? brl(adComparativo.ticket) : '—'}</td>
                            <td className="px-3 py-3 text-right tabular-nums">{brl(adComparativo.receita)}</td>
                            <td className="px-3 py-3 text-right tabular-nums">{adComparativo.roas != null ? `${num(adComparativo.roas, 2)}x` : '—'}</td>
                            <td className="px-4 sm:px-5 py-3 text-right tabular-nums"><span className={adComparativo.lucro > 0 ? 'text-emerald-600' : adComparativo.lucro < 0 ? 'text-rose-600' : 'text-slate-500'}>{brl(adComparativo.lucro)}</span></td>
                          </tr>
                        </tfoot>
                      </table>
                    </div>
                  )}
                </Card>
              </div>
              )}

              {/* vendas */}
              <div style={{ order: secOrder.indexOf('vendas'), display: aba === 'anuncio' ? 'block' : 'none' }}>
                <Card onMoveUp={secUp('vendas')} onMoveDown={secDown('vendas')} icon={<Receipt size={16} className="text-slate-600" />} title="Pedidos" defaultOpen={false}>
                  <div className="p-4 sm:p-5 border-b border-slate-100">
                    <div className="flex items-center gap-2 flex-wrap mb-3">
                      {[
                        ['pedido', 'Pedidos na data'],
                        ['entregue', 'Entregues na data'],
                        ['confirmado', 'Confirmados na data'],
                      ].map(([key, label]) => (
                        <button key={key} onClick={() => setPedidosModoData(key)} className={`px-3 py-1.5 rounded-full text-sm border transition ${pedidosModoData === key ? 'bg-slate-900 text-white border-slate-900' : 'bg-white border-slate-300 hover:border-slate-400'}`}>{label}</button>
                      ))}
                    </div>
                    <div className="flex flex-col gap-3">
                      <div className="text-xs text-slate-500 bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 inline-flex items-center gap-2 self-start">
                        <Calendar size={14}/> Período do topo: <strong>{brDate(per.from)} até {brDate(per.to)}</strong>.
                      </div>
                      <div className="flex flex-col sm:flex-row gap-3 sm:items-end">
                        <div className="relative flex-1 max-w-md">
                          <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
                          <input value={vendasBusca} onChange={(e) => setVendasBusca(e.target.value)} placeholder="Pesquisar por nome, modelo ou anúncio" className="inp pl-9" />
                        </div>
                        {(vendasBusca.trim() || pedidosModoData !== 'pedido') && (
                          <button onClick={() => { setVendasBusca(''); setPedidosModoData('pedido'); }} className="h-[38px] px-3 rounded-lg border border-slate-200 bg-white text-slate-500 text-sm hover:border-slate-300 hover:text-slate-700 transition">Limpar</button>
                        )}
                      </div>
                    </div>
                    <p className="text-xs text-slate-400 mt-2">{recentesFiltradas.length} {pedidosModoData === 'entregue' ? 'entrega(s)' : 'pedido(s)'} encontrado(s). {pedidosModoData === 'confirmado' ? 'Mostrando pedidos com status Confirmado, filtrados pela data do pedido.' : ''}</p>
                  </div>
                  {pedidosAnuncioBase.length > 0 ? (
                    recentesFiltradas.length > 0 ? (
                      <div className="p-4 sm:p-5 flex flex-col divide-y divide-slate-100">{recentesFiltradas.map(renderVenda)}</div>
                    ) : (
                      <div className="p-6 text-center text-slate-500 text-sm">Nenhum pedido encontrado com os filtros selecionados.</div>
                    )
                  ) : (
                    <div className="p-6 text-center text-slate-500 text-sm">Nenhum pedido de anúncio registrado neste período.</div>
                  )}
                </Card>
              </div>

              {/* campanhas */}
              <div style={{ order: secOrder.indexOf('campanhas'), display: aba === 'ajustes' ? 'block' : 'none' }}>
                <Card onMoveUp={secUp('campanhas')} onMoveDown={secDown('campanhas')} icon={<Megaphone size={16} className="text-slate-600" />} title="Anúncios cadastrados" defaultOpen={false}>
                  <div className="p-4 sm:p-5">
                    <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 items-end">
                      <Field label="Nome do anúncio" className="col-span-2 sm:col-span-1"><input value={cNome} onChange={(e) => setCNome(e.target.value)} placeholder="Ex.: 2 - Carrossel 4 - Tráfego" className="inp" /></Field>
                      <Field label="Loja"><select value={cLojaId} onChange={(e) => setCLojaId(e.target.value)} className="inp">{lojas.map((l) => <option key={l.id} value={l.id}>{l.nome}</option>)}</select></Field>
                      <Field label="Plataforma"><select value={cPlataforma} onChange={(e) => setCPlataforma(e.target.value)} className="inp">{PLATAFORMAS.map((p) => <option key={p} value={p}>{p}</option>)}</select></Field>
                      <button onClick={addCampanha} disabled={!cNome.trim()} className="h-[38px] rounded-lg bg-slate-900 text-white text-sm font-medium hover:bg-slate-800 disabled:opacity-40 transition flex items-center justify-center gap-1.5"><Plus size={16} /> Cadastrar</button>
                    </div>
                    {campanhas.length > 0 && (
                      <>
                        <p className="text-xs text-slate-400 mt-4 mb-1 flex items-center gap-1"><ChevronUp size={12} /> Use as setas para definir a ordem (usada no comparativo quando ordenado por “Manual”).</p>
                        <div className="flex flex-col divide-y divide-slate-100">
                          {campanhas.map((c, i) => (
                            <div key={c.id} className="flex items-center justify-between py-2.5 group">
                              <div className="flex items-center gap-2 min-w-0">
                                <span className="flex flex-col shrink-0 -my-1">
                                  <button onClick={() => moveCamp(i, -1)} disabled={i === 0} className="text-slate-300 hover:text-slate-600 disabled:opacity-25 leading-none" aria-label="Subir anúncio"><ChevronUp size={14} /></button>
                                  <button onClick={() => moveCamp(i, 1)} disabled={i === campanhas.length - 1} className="text-slate-300 hover:text-slate-600 disabled:opacity-25 leading-none" aria-label="Descer anúncio"><ChevronDown size={14} /></button>
                                </span>
                                <div className="text-sm truncate"><span className="font-medium text-slate-800">{c.nome}</span><span className="text-slate-400"> · {[nomeLoja(c.lojaId), c.plataforma].filter(Boolean).join(' · ')}</span></div>
                              </div>
                              {mergePending && mergePending.from === c.id ? (
                                <div className="flex items-center gap-1.5 text-xs shrink-0"><span className="text-slate-500">Mesclar em “{(campanhas.find((x) => x.id === mergePending.to) || {}).nome}”? (junta gasto e vendas)</span><button onClick={() => mergeCampanha(mergePending.from, mergePending.to)} className="p-1.5 rounded bg-emerald-50 text-emerald-600 hover:bg-emerald-100"><Check size={14} /></button><button onClick={() => setMergePending(null)} className="p-1.5 rounded bg-slate-100 text-slate-500 hover:bg-slate-200"><X size={14} /></button></div>
                              ) : confirmDel && confirmDel.tipo === 'campanha' && confirmDel.id === c.id ? (
                                <div className="flex items-center gap-1.5 text-xs shrink-0"><span className="text-slate-500">Remover e apagar vendas?</span><button onClick={() => { delCampanha(c.id); setConfirmDel(null); }} className="p-1.5 rounded bg-rose-50 text-rose-600 hover:bg-rose-100"><Check size={14} /></button><button onClick={() => setConfirmDel(null)} className="p-1.5 rounded bg-slate-100 text-slate-500 hover:bg-slate-200"><X size={14} /></button></div>
                              ) : (
                                <div className="flex items-center gap-2 shrink-0">
                                  {campanhas.length > 1 && (
                                    <select value="" onChange={(e) => e.target.value && setMergePending({ from: c.id, to: e.target.value })} className="inp !w-auto text-xs !py-1 text-slate-500" title="Mesclar duplicado em outro anúncio">
                                      <option value="">Mesclar em…</option>
                                      {campanhas.filter((x) => x.id !== c.id && (x.lojaId || LOJA_PADRAO.id) === (c.lojaId || LOJA_PADRAO.id)).map((x) => <option key={x.id} value={x.id}>{x.nome}</option>)}
                                    </select>
                                  )}
                                  <button onClick={() => setConfirmDel({ tipo: 'campanha', id: c.id })} className="text-slate-300 hover:text-rose-500 transition" aria-label="Remover"><Trash2 size={15} /></button>
                                </div>
                              )}
                            </div>
                          ))}
                        </div>
                      </>
                    )}
                  </div>
                </Card>
              </div>
            </div>
          </div>
        )}

        {aba === 'financeiro' && (
          <div className="space-y-6">
            <div className="flex items-center gap-2 flex-wrap">
              <button onClick={() => setFinanceiroView('comercial')} className={`px-3 py-2 rounded-lg text-sm border transition ${financeiroView === 'comercial' ? 'bg-slate-900 text-white border-slate-900' : 'bg-white border-slate-300'}`}>Pedidos realizados</button>
              <button onClick={() => setFinanceiroView('realizado')} className={`px-3 py-2 rounded-lg text-sm border transition ${financeiroView === 'realizado' ? 'bg-slate-900 text-white border-slate-900' : 'bg-white border-slate-300'}`}>Pedidos entregues</button>
              <span className="text-xs text-slate-400">{financeiroView === 'comercial' ? 'Faturamento líquido, fornecedor e frete pela data do pedido.' : 'Faturamento líquido, fornecedor e frete pela data real da entrega.'} Ads e custos operacionais permanecem na data em que ocorreram.</span>
            </div>

            <div className="grid grid-cols-2 lg:grid-cols-5 xl:grid-cols-11 gap-3">
              <Kpi icon={<Receipt size={16} />} label={lojaFiltro==='luna'?'Faturamento líquido na Luna':'Faturamento líquido'} value={brl(financeiro.total.faturamento)} />
              <Kpi icon={<CircleDollarSign size={16} />} label="Taxas maquininha (já descontadas)" value={brl(financeiro.total.taxasCartao || 0)} />
              <Kpi icon={<Package size={16} />} label="Fornecedor" value={brl(financeiro.total.fornecedor)} />
              <Kpi icon={<Truck size={16} />} label="Frete" value={brl(financeiro.total.frete)} />
              <Kpi icon={<TrendingUp size={16} />} label="Margem antes Ads/vendedor" value={brl(financeiro.total.lucro + financeiro.total.ads + financeiro.total.custosOp)} />
              <Kpi icon={<Megaphone size={16} />} label="Ads" value={brl(financeiro.total.ads)} />
              <Kpi icon={<Wallet size={16} />} label={lojaFiltro === 'todas' ? 'Custos operacionais' : 'Custos da loja'} value={brl(financeiro.total.custosOp)} />
              <Kpi icon={<Users size={16} />} label={lojaFiltro==='luna'?'Douglas devido':lojaFiltro==='emporio'?'Natan devido':'Vendedor devido'} value={brl(financeiro.total.vendedorDevido || 0)} />
              <Kpi icon={<Wallet size={16} />} label={lojaFiltro==='luna'?'Douglas pago':lojaFiltro==='emporio'?'Natan pago':'Vendedor pago'} value={brl(financeiro.total.vendedorPago || 0)} />
              <Kpi icon={<TrendingUp size={16} />} label={['emporio','luna'].includes(lojaFiltro)?`Lucro antes do ${PAGAMENTO_PESSOA[lojaFiltro]?.vendedor}`:'Lucro da loja'} value={brl(financeiro.total.lucro)} tone={financeiro.total.lucro >= 0 ? 'emerald' : 'rose'} />
              <Kpi icon={<TrendingUp size={16} />} label={['emporio','luna'].includes(lojaFiltro)?'Lucro Loja':'Lucro após vendedor pago'} value={brl(financeiro.total.resultadoAposVendedor)} tone={financeiro.total.resultadoAposVendedor >= 0 ? 'emerald' : 'rose'} />
              <Kpi icon={<Wallet size={16} />} label="Crédito com FG" value={brl(financeiro.total.creditoFg || 0)} tone={(financeiro.total.creditoFg||0)>0?'emerald':'slate'} />
              {Math.abs(financeiro.total.ajusteFgManual || 0) > 0.005 && <Kpi icon={<Pencil size={16} />} label="Ajuste manual FG" value={brl(financeiro.total.ajusteFgManual || 0)} tone={(financeiro.total.ajusteFgManual||0)>=0?'emerald':'rose'} />}
            </div>
            {lojaFiltro !== 'todas' && financeiro.custosGerais > 0 && (
              <div className="mt-3 text-sm bg-amber-50 border border-amber-200 text-amber-800 rounded-lg px-3 py-2">
                Custos gerais não alocados no período: <strong>{brl(financeiro.custosGerais)}</strong> — não descontados do lucro de {nomeLoja(lojaFiltro)}. Aparecem no consolidado (Todas as lojas).
              </div>
            )}
            <div className="grid grid-cols-2 lg:grid-cols-6 gap-3">
              <Kpi icon={<Percent size={16} />} label="Margem da loja" value={`${num(margemFinanceira * 100, 2)}%`} tone={margemFinanceira >= 0 ? 'emerald' : 'rose'} />
              <Kpi icon={<Percent size={16} />} label="Margem após vendedor pago" value={`${num(margemAposVendedor * 100, 2)}%`} tone={margemAposVendedor >= 0 ? 'emerald' : 'rose'} />
              <Kpi icon={<Receipt size={16} />} label="Pedidos" value={num(financeiro.total.pedidos, 0)} />
              <Kpi icon={<CircleDollarSign size={16} />} label="Ticket médio" value={brl(ticketFinanceiro)} />
              <Kpi icon={<Megaphone size={16} />} label="Ads / faturamento" value={`${num(pctAds * 100, 2)}%`} />
              <Kpi icon={<Package size={16} />} label="Fornecedor / faturamento" value={`${num(pctFornecedor * 100, 2)}%`} />
            </div>

            <Card icon={<BarChart3 size={16} className="text-emerald-600" />} title={`Resultado diário · ${per.label}`} defaultOpen={false}>
              <div className="overflow-x-auto">
                <table className="w-full text-sm min-w-[1050px]">
                  <thead><tr className="border-b border-slate-200 text-xs uppercase tracking-wide text-slate-500"><th className="px-4 py-3 text-left">Dia</th><th className="px-3 py-3 text-right">Faturamento líquido</th><th className="px-3 py-3 text-right">Taxa cartão (info)</th><th className="px-3 py-3 text-right">Fornecedor</th><th className="px-3 py-3 text-right">Frete</th><th className="px-3 py-3 text-right">Ads</th><th className="px-3 py-3 text-right">Custos Op.</th><th className="px-3 py-3 text-right">Vend. devido</th><th className="px-3 py-3 text-right">Vend. pago</th><th className="px-3 py-3 text-right">Crédito FG</th><th className="px-3 py-3 text-right">Lucro loja</th><th className="px-3 py-3 text-right">Após vend. pago</th><th className="px-4 py-3 text-right">Dinheiro</th></tr></thead>
                  <tbody>{financeiro.rows.filter((r) => r.faturamento || r.fornecedor || r.frete || r.ads || r.custosOp || r.vendedorDevido || r.creditoFg).map((r) => <tr key={r.dia} className="border-b border-slate-100"><td className="px-4 py-3 font-medium">{brDate(r.dia)}</td><td className="px-3 py-3 text-right tabular-nums">{brl(r.faturamento)}</td><td className="px-3 py-3 text-right tabular-nums">{brl(r.taxasCartao)}</td><td className="px-3 py-3 text-right tabular-nums">{brl(r.fornecedor)}</td><td className="px-3 py-3 text-right tabular-nums">{brl(r.frete)}</td><td className="px-3 py-3 text-right tabular-nums">{brl(r.ads)}</td><td className="px-3 py-3 text-right tabular-nums">{brl(r.custosOp)}</td><td className="px-3 py-3 text-right tabular-nums">{brl(r.vendedorDevido)}</td><td className="px-3 py-3 text-right tabular-nums">{brl(r.vendedorPago||0)}</td><td className="px-3 py-3 text-right tabular-nums text-violet-700">{brl(r.creditoFg||0)}</td><td className={`px-3 py-3 text-right tabular-nums font-semibold ${r.lucro >= 0 ? 'text-emerald-600' : 'text-rose-600'}`}>{brl(r.lucro)}</td><td className={`px-3 py-3 text-right tabular-nums font-semibold ${r.resultadoAposVendedor >= 0 ? 'text-emerald-600' : 'text-rose-600'}`}>{brl(r.resultadoAposVendedor)}</td><td className="px-4 py-3 text-right tabular-nums">{brl(r.dinheiro)}</td></tr>)}</tbody>
                  <tfoot><tr className="bg-slate-50 border-t-2 border-slate-200 font-semibold"><td className="px-4 py-3">TOTAL</td><td className="px-3 py-3 text-right">{brl(financeiro.total.faturamento)}</td><td className="px-3 py-3 text-right">{brl(financeiro.total.taxasCartao)}</td><td className="px-3 py-3 text-right">{brl(financeiro.total.fornecedor)}</td><td className="px-3 py-3 text-right">{brl(financeiro.total.frete)}</td><td className="px-3 py-3 text-right">{brl(financeiro.total.ads)}</td><td className="px-3 py-3 text-right">{brl(financeiro.total.custosOp)}</td><td className="px-3 py-3 text-right">{brl(financeiro.total.vendedorDevido)}</td><td className="px-3 py-3 text-right">{brl(financeiro.total.vendedorPago||0)}</td><td className="px-3 py-3 text-right text-violet-700">{brl(financeiro.total.creditoFg||0)}</td><td className={`px-3 py-3 text-right ${financeiro.total.lucro >= 0 ? 'text-emerald-600' : 'text-rose-600'}`}>{brl(financeiro.total.lucro)}</td><td className={`px-3 py-3 text-right ${financeiro.total.resultadoAposVendedor >= 0 ? 'text-emerald-600' : 'text-rose-600'}`}>{brl(financeiro.total.resultadoAposVendedor)}</td><td className="px-4 py-3 text-right">{brl(financeiro.total.dinheiro)}</td></tr></tfoot>
                </table>
              </div>
              <p className="px-4 sm:px-5 py-3 text-xs text-slate-400">Faturamento = valor líquido que cai na conta depois da taxa da maquininha. A coluna de taxa é informativa e já está descontada do faturamento. Lucro da loja = faturamento líquido − fornecedor − frete − Ads − custos operacionais. Na Luna, pedidos com Entregador = FG ficam fora do faturamento financeiro. Nas camas FG da Empório, vale a mesma regra quando o entregador é FG. Todos continuam entrando normalmente no Lucro Loja e nas obrigações do vendedor. O fornecedor sozinho não define a exclusão. Comissão de vendedor é exibida como obrigação, mas só reduz o resultado quando o pagamento é marcado como pago/registrado. Douglas recebe 50% do resultado positivo do acerto calculado com a tabela dos vendedores, fornecedor e frete da planilha T1; o lucro oficial da Luna continua usando taxa da loja e frete T2. Empório: Natan recebe a comissão-base + 50% do excedente líquido que sobra acima do preço normal depois de retirar a taxa da tabela do vendedor. Essential continua sem vendedor. Cancelados e devolvidos ficam fora.</p>
            </Card>

            <div className="grid lg:grid-cols-3 gap-6">
              <Card icon={<CircleDollarSign size={16} className="text-slate-600" />} title="Recebimentos por forma de pagamento" defaultOpen={false}>
                <div className="p-4 sm:p-5 space-y-2">
                  {Object.entries(financeiro.formas).sort((a,b) => b[1]-a[1]).map(([k,v]) => <div key={k} className="flex justify-between items-center border-b border-slate-100 py-2"><span className="text-slate-600">{formasLabel[k] || k}</span><span className="font-semibold tabular-nums">{brl(v)}</span></div>)}
                  {Object.keys(financeiro.formas).length === 0 && <div className="text-sm text-slate-400">Nenhum recebimento neste período.</div>}
                  <div className="pt-2 flex justify-between font-semibold"><span>Recebido em dinheiro</span><span>{brl(financeiro.total.dinheiro)}</span></div>
                </div>
              </Card>

              <Card icon={<Wallet size={16} className="text-slate-600" />} title="Registrar custo operacional" defaultOpen={false}>
                <div className="p-4 sm:p-5 space-y-4">
                  <div className="grid sm:grid-cols-2 gap-3">
                    <Field label="Data"><input type="date" value={finData} onChange={(e) => setFinData(e.target.value)} className="inp" /></Field>
                    <Field label="Valor"><input value={finValor} onChange={(e) => setFinValor(e.target.value)} inputMode="decimal" placeholder="0,00" className="inp" /></Field>
                    <Field label="Descrição"><input value={finDescricao} onChange={(e) => setFinDescricao(e.target.value)} placeholder="Ex.: Hostinger" className="inp" /></Field>
                    <Field label="Categoria"><select value={finCategoria} onChange={(e) => setFinCategoria(e.target.value)} className="inp"><option>Software / assinaturas</option><option>Contador</option><option>Veículos</option><option>Combustível</option><option>Manutenção</option><option>Telefonia</option><option>Funcionários</option><option>Material</option><option>Tarifas bancárias</option><option>Outros</option></select></Field>
                    <Field label="Recorrência"><select value={finRecorrencia} onChange={(e) => setFinRecorrencia(e.target.value)} className="inp"><option value="nao">Somente esta vez</option><option value="mensal">Mensal</option></select></Field>
                    <Field label="Loja"><select value={finLojaId} onChange={(e) => setFinLojaId(e.target.value)} className="inp"><option value="geral">Geral da empresa</option>{lojas.map((l) => <option key={l.id} value={l.id}>{l.nome}</option>)}</select></Field>
                    <button onClick={addDespesa} disabled={!finDescricao.trim() || parseBRL(finValor) <= 0} className="h-[38px] self-end rounded-lg bg-slate-900 text-white text-sm font-medium hover:bg-slate-800 disabled:opacity-40 flex items-center justify-center gap-1.5"><Plus size={16}/> Adicionar</button>
                  </div>
                </div>
              </Card>

              <Card icon={<Megaphone size={16} className="text-violet-600" />} title="Ads manual · Empório / Luna" defaultOpen={false}>
                <div className="p-4 sm:p-5 space-y-3">
                  <div className="grid sm:grid-cols-2 gap-3">
                    <Field label="Data"><input type="date" value={adManualData} onChange={(e)=>setAdManualData(e.target.value)} className="inp" /></Field>
                    <Field label="Loja"><select value={adManualLoja} onChange={(e)=>setAdManualLoja(e.target.value)} className="inp"><option value="emporio">Empório Sofás</option><option value="luna">Luna Comfort</option></select></Field>
                    <Field label="Valor"><input value={adManualValor} onChange={(e)=>setAdManualValor(e.target.value)} inputMode="decimal" placeholder="0,00" className="inp" /></Field>
                    <Field label="Observação"><input value={adManualObs} onChange={(e)=>setAdManualObs(e.target.value)} placeholder="Ex.: Meta Ads" className="inp" /></Field>
                  </div>
                  <button onClick={addAdManual} disabled={parseBRL(adManualValor)<=0} className="h-9 px-4 rounded-lg bg-violet-600 text-white text-sm font-medium disabled:opacity-40"><Plus size={15}/> Lançar Ads</button>
                  <p className="text-xs text-slate-400">Essential continua automática via Windsor. Empório e Luna usam o valor manual exatamente como informado, sem aplicar o imposto configurado da Essential.</p>
                </div>
              </Card>
            </div>

            <Card icon={<Megaphone size={16} className="text-violet-600" />} title="Ads manuais cadastrados" defaultOpen={false}>
              <div className="p-4 sm:p-5 flex flex-col divide-y divide-slate-100">
                {adsManuais.filter((a)=>a.origem!=='ajuste_periodo'&&(lojaFiltro==='todas'||a.lojaId===lojaFiltro)).length===0 ? <div className="text-sm text-slate-400">Nenhum Ads manual detalhado neste filtro.</div> : adsManuais.filter((a)=>a.origem!=='ajuste_periodo'&&(lojaFiltro==='todas'||a.lojaId===lojaFiltro)).slice().sort((a,b)=>String(b.data).localeCompare(String(a.data))).map((a)=><div key={a.id} className="py-2 flex items-center justify-between gap-3"><div><div className="font-medium text-slate-700">{nomeLoja(a.lojaId)}</div><div className="text-xs text-slate-400">{brDate(a.data)}{a.observacao?` · ${a.observacao}`:''}</div></div><div className="flex items-center gap-3"><strong>{brl(a.valor)}</strong><button onClick={()=>delAdManual(a.id)} className="text-slate-300 hover:text-rose-500"><Trash2 size={15}/></button></div></div>)}
              </div>
            </Card>

            <Card icon={<Receipt size={16} className="text-slate-600" />} title="Custos operacionais cadastrados" defaultOpen={false}>
              <div className="p-4 sm:p-5 flex flex-col divide-y divide-slate-100">
                {(() => { const lista = despesas.filter((d) => lojaFiltro === 'todas' || (d.lojaId || 'geral') === lojaFiltro || (d.lojaId || 'geral') === 'geral'); return lista.length === 0 ? <div className="text-sm text-slate-400">Nenhum custo operacional cadastrado neste filtro.</div> : lista.slice().sort((a,b) => String(b.data).localeCompare(String(a.data))).map((d) => <div key={d.id} className="py-2 flex items-center justify-between gap-3"><div><div className="font-medium text-slate-700">{d.descricao}</div><div className="text-xs text-slate-400">{brDate(d.data)} · {d.categoria}{d.recorrencia === 'mensal' ? ' · mensal' : ''} · {(d.lojaId && d.lojaId !== 'geral') ? nomeLoja(d.lojaId) : 'Geral da empresa'}</div></div><div className="flex items-center gap-3"><span className="font-medium tabular-nums">{brl(d.valor)}</span><button onClick={() => delDespesa(d.id)} className="text-slate-300 hover:text-rose-500"><Trash2 size={15}/></button></div></div>); })()}
              </div>
            </Card>
          </div>
        )}

        {aba === 'pagar' && (
          <div className="space-y-6">
            <div className="grid md:grid-cols-2 gap-6">
              {['emporio','luna'].filter((id)=>lojaFiltro==='todas'||lojaFiltro===id).map((id)=>{ const d=contasAPagar.due[id], p=contasAPagar.paid[id], nomes=PAGAMENTO_PESSOA[id]; return <Card key={id} icon={<Wallet size={16} className="text-amber-600" />} title={`${nomeLoja(id)} · contas a pagar`} defaultOpen={false}><div className="p-4 sm:p-5 space-y-3"><div className="grid grid-cols-2 gap-3"><MiniStat label={`${nomes.vendedor} devido`} value={brl(d.vendedor)} /><MiniStat label={`${nomes.vendedor} pago`} value={brl(p.vendedor)} /><MiniStat label={`${nomes.vendedor} saldo`} value={brl(d.vendedor-p.vendedor)} /><MiniStat label={`${nomes.freteiro} fretes`} value={brl(d.freteiro)} /><MiniStat label={`${nomes.freteiro} pago`} value={brl(p.freteiro)} /><MiniStat label={`${nomes.freteiro} saldo`} value={brl(d.freteiro-p.freteiro)} /></div><p className="text-xs text-slate-400">O valor devido nasce somente depois que o pedido é marcado como entregue. Pagamentos são registrados separadamente para não confundir obrigação com saída de caixa.</p></div></Card>; })}
            </div>

            <Card icon={<CircleDollarSign size={16} className="text-emerald-600" />} title="Registrar pagamento" defaultOpen={false}>
              <div className="p-4 sm:p-5 grid sm:grid-cols-2 lg:grid-cols-5 gap-3 items-end">
                <Field label="Data"><input type="date" value={pagData} onChange={(e)=>setPagData(e.target.value)} className="inp" /></Field>
                <Field label="Loja"><select value={pagLoja} onChange={(e)=>setPagLoja(e.target.value)} className="inp"><option value="emporio">Empório Sofás</option><option value="luna">Luna Comfort</option></select></Field>
                <Field label="Tipo"><select value={pagTipo} onChange={(e)=>setPagTipo(e.target.value)} className="inp"><option value="vendedor">Vendedor</option><option value="freteiro">Freteiro</option></select></Field>
                <Field label="Valor"><input value={pagValor} onChange={(e)=>setPagValor(e.target.value)} inputMode="decimal" placeholder="0,00" className="inp" /></Field>
                <Field label="Observação"><input value={pagObs} onChange={(e)=>setPagObs(e.target.value)} placeholder="Opcional" className="inp" /></Field>
                <button onClick={addPagamento} disabled={parseBRL(pagValor)<=0} className="h-[38px] rounded-lg bg-emerald-600 text-white text-sm font-medium disabled:opacity-40 flex items-center justify-center gap-1.5"><Plus size={15}/> Registrar pagamento</button>
              </div>
            </Card>

            <Card icon={<Receipt size={16} className="text-slate-600" />} title="Pagamentos registrados" defaultOpen={false}>
              <div className="p-4 sm:p-5 flex flex-col divide-y divide-slate-100">
                {pagamentos.filter((x)=>x.origem!=='ajuste_periodo'&&(lojaFiltro==='todas'||x.lojaId===lojaFiltro)).length===0 ? <div className="text-sm text-slate-400">Nenhum pagamento detalhado registrado.</div> : pagamentos.filter((x)=>x.origem!=='ajuste_periodo'&&(lojaFiltro==='todas'||x.lojaId===lojaFiltro)).slice().sort((a,b)=>String(b.data).localeCompare(String(a.data))).map((x)=><div key={x.id} className="py-2 flex items-center justify-between gap-3"><div><div className="font-medium text-slate-700">{x.pessoa} · {nomeLoja(x.lojaId)}</div><div className="text-xs text-slate-400">{brDate(x.data)} · {x.tipo==='vendedor'?'Vendedor':'Freteiro'}{x.observacao?` · ${x.observacao}`:''}</div></div><div className="flex items-center gap-3"><strong>{brl(x.valor)}</strong><button onClick={()=>delPagamento(x.id)} className="text-slate-300 hover:text-rose-500"><Trash2 size={15}/></button></div></div>)}
              </div>
            </Card>
          </div>
        )}

        {aba === 'acertos' && (
          <div className="space-y-6">
            <Card icon={<ClipboardList size={16} className="text-amber-600" />} title="Acertos do período" defaultOpen={false}>
              <div className="p-4 sm:p-5 space-y-4">
                <div className="flex items-center justify-between gap-3 flex-wrap">
                  <div>
                    <div className="font-semibold text-slate-800">{brDate(semanaAcerto.from)} até {brDate(semanaAcerto.to)}</div>
                    <div className="text-xs text-slate-400 mt-0.5">Período controlado pelo filtro principal do topo · usa a data real de entrega do pedido.</div>
                  </div>
                </div>
                <div className="grid grid-cols-2 lg:grid-cols-5 gap-3">
                  <MiniStat label="Marcados no período" value={num(acertoResumo.selecionados,0)} />
                  <MiniStat label="Total do período" value={brl(acertoResumo.total)} />
                  <MiniStat label="A pagar no período" value={brl(acertoResumo.pendentes)} />
                  <MiniStat label="Pago no período" value={brl(acertoResumo.pagos)} />
                  <MiniStat label="Pendentes acumulados" value={brl(acertoResumo.acumulado)} sub={`${acertoResumo.qtdAcumulado} pedido(s)`} />
                </div>
                <p className="text-xs text-slate-400">Marcar um pedido aqui não altera o lucro. Ao marcar como pago, o valor é registrado automaticamente em “A pagar” para baixar o saldo da pessoa sem descontar o custo duas vezes.</p>
                {acertoMsg && <div className="text-sm text-emerald-700 bg-emerald-50 border border-emerald-100 rounded-lg px-3 py-2">{acertoMsg}</div>}
              </div>
            </Card>

            {(lojaFiltro === 'todas' || lojaFiltro === 'luna' || lojaFiltro === 'emporio') && <Card icon={<Truck size={16} className="text-sky-600" />} title="Luna Comfort · fechamento do período" defaultOpen={false}>
              <div className="p-4 sm:p-5 space-y-4">
                <div className="flex items-end justify-between gap-3 flex-wrap">
                  <div><div className="text-sm font-medium text-slate-700">{brDate(per.from)} até {brDate(per.to)}</div><div className="text-xs text-slate-400 mt-0.5">Período controlado pelo filtro principal do topo e baseado na data real da entrega.</div></div>
                </div>
                <div className="grid grid-cols-2 lg:grid-cols-5 gap-3">
                  <MiniStat label="Pedidos entregues" value={num(lunaFechamentoResumo.pedidos,0)} />
                  <MiniStat label="Fretes do filtro" value={brl(lunaFechamentoResumo.fretes)} sub="Inclui camas Empório do Tarcísio" />
                  <MiniStat label="Lucro Loja" value={brl(lunaFechamentoResumo.lucroLoja)} sub="antes de Ads/custos operacionais" />
                  <MiniStat label="Crédito com FG" value={brl(lunaFechamentoResumo.creditoFg)} sub={`${lunaFechamentoResumo.pedidosFg} pedido(s)`} />
                  <MiniStat label="Pedidos sem CEP" value={num(lunaFechamentoResumo.semCep,0)} />
                </div>
                {lunaFechamentoVendas.length === 0 && lunaFretesVendas.length === 0 ? <div className="rounded-xl border border-slate-200 p-6 text-center text-sm text-slate-400">Nenhum pedido da Luna Comfort ou cama da Empório para Tarcísio foi marcado como entregue entre {brDate(per.from)} e {brDate(per.to)}.</div> : <div className="grid lg:grid-cols-3 gap-4">
                  <div className="rounded-xl border border-slate-200 overflow-hidden">
                    <div className="px-4 py-3 bg-slate-50 space-y-2"><div className="flex items-center justify-between gap-2 flex-wrap"><div><div className="font-medium text-sm text-slate-800">Fretes para o entregador</div><div className="text-xs text-slate-400">Rogério, Tarcísio e Goldstar. Camas da Empório com Tarcísio também entram na conta dele. FG fica no acerto próprio.</div></div><div className="flex gap-2"><button disabled={!textoFretesLuna()} onClick={()=>copiarAcerto(textoFretesLuna(),'Fretes copiados ✓')} className="h-8 px-2.5 rounded-lg bg-slate-900 text-white text-xs flex items-center gap-1 hover:bg-slate-800 disabled:opacity-30"><Copy size={12}/> Copiar</button><button disabled={!textoFretesLuna()} onClick={()=>baixarTexto(`fretes-entregadores-${per.from}-a-${per.to}.txt`,textoFretesLuna())} className="h-8 px-2.5 rounded-lg border border-slate-200 bg-white text-xs flex items-center gap-1 hover:bg-slate-50 disabled:opacity-30"><Download size={12}/> TXT</button></div></div><select value={lunaFreteEntregadorFiltro} onChange={(e)=>setLunaFreteEntregadorFiltro(e.target.value)} className="inp text-xs"><option value="todos">Todos os entregadores</option>{LUNA_ENTREGADORES_FRETE.map((x)=><option key={x} value={x}>{x}</option>)}</select></div>
                    <pre className="p-4 text-sm leading-6 whitespace-pre-wrap font-mono text-slate-700 bg-white min-h-[84px]">{textoFretesLuna() || 'Nenhum frete para este entregador no período.'}</pre>
                  </div>
                  <div className="rounded-xl border border-slate-200 overflow-hidden">
                    <div className="px-4 py-3 bg-slate-50 flex items-center justify-between gap-2 flex-wrap"><div><div className="font-medium text-sm text-slate-800">Lucro Loja</div><div className="text-xs text-slate-400">Venda líquida − fornecedor − frete Tabela 2, por CEP.</div></div><div className="flex gap-2"><button onClick={()=>copiarAcerto(textoLucroLojaLuna(),'Lucro Loja da Luna copiado ✓')} className="h-8 px-2.5 rounded-lg bg-slate-900 text-white text-xs flex items-center gap-1 hover:bg-slate-800"><Copy size={12}/> Copiar</button><button onClick={()=>baixarTexto(`lucro-loja-luna-${per.from}-a-${per.to}.txt`,textoLucroLojaLuna())} className="h-8 px-2.5 rounded-lg border border-slate-200 bg-white text-xs flex items-center gap-1 hover:bg-slate-50"><Download size={12}/> TXT</button></div></div>
                    <pre className="p-4 text-sm leading-6 whitespace-pre-wrap font-mono text-slate-700 bg-white">{textoLucroLojaLuna()}</pre>
                  </div>
                  <div className="rounded-xl border border-slate-200 overflow-hidden">
                    <div className="px-4 py-3 bg-slate-50 flex items-center justify-between gap-2 flex-wrap"><div><div className="font-medium text-sm text-slate-800">Acerto Douglas</div><div className="text-xs text-slate-400">Valores cheios dos pedidos entregues no período, prontos para enviar ao Douglas. O pagamento efetivo é 50%.</div></div><div className="flex gap-2"><button onClick={()=>copiarAcerto(textoAcertoDouglasLuna(),'Acerto do Douglas copiado ✓')} className="h-8 px-2.5 rounded-lg bg-slate-900 text-white text-xs flex items-center gap-1 hover:bg-slate-800"><Copy size={12}/> Copiar</button><button onClick={()=>baixarTexto(`acerto-douglas-${per.from}-a-${per.to}.txt`,textoAcertoDouglasLuna())} className="h-8 px-2.5 rounded-lg border border-slate-200 bg-white text-xs flex items-center gap-1 hover:bg-slate-50"><Download size={12}/> TXT</button></div></div>
                    <pre className="p-4 text-sm leading-6 whitespace-pre-wrap font-mono text-slate-700 bg-white">{textoAcertoDouglasLuna()}</pre>
                  </div>
                </div>}
                {lunaFechamentoResumo.semCep > 0 && <div className="text-xs text-amber-700 bg-amber-50 border border-amber-100 rounded-lg px-3 py-2">Há {lunaFechamentoResumo.semCep} pedido(s) sem CEP. Eles aparecem como “SEM CEP” para você corrigir antes de enviar.</div>}
              </div>
            </Card>}

            {(lojaFiltro === 'todas' || lojaFiltro === 'luna' || lojaFiltro === 'emporio') && <Card icon={<Wallet size={16} className="text-violet-600" />} title={`Acerto FG · Luna + camas Empório · ${brDateShort(semanaAcerto.from)} a ${brDateShort(semanaAcerto.to)}`} defaultOpen={false}>
              <div className="p-4 sm:p-5 space-y-4">
                <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
                  <MiniStat label="Saldo anterior com FG" value={brl(fgSaldoAnterior)} />
                  <MiniStat label="Mercadoria retirada" value={brl(fgTotalRetirado)} sub={`${fgRetiradasAutomaticasSemana.length} automática(s) · ${fgRetiradasSemana.length} manual(is)`} />
                  <MiniStat label="Crédito de entregas FG" value={brl(fgTotalEntregue)} sub={`${fgVendasSemana.length} pedido(s)`} />
                  <MiniStat label={fgSaldoFinal>=0?'A pagar ao FG':'Com FG'} value={brl(Math.abs(fgSaldoFinal))} tone={fgSaldoFinal<=0?'emerald':'rose'} />
                </div>
                <div className="grid lg:grid-cols-[1fr_1.5fr] gap-4">
                  <div className="space-y-4">
                    <div className="rounded-xl border border-slate-200 p-3 space-y-2">
                      <div className="text-sm font-medium text-slate-700">Saldo que veio do período anterior</div>
                      <div className="flex gap-2"><input value={fgSaldoAnteriorInput} onChange={(e)=>setFgSaldoAnteriorInput(e.target.value)} placeholder="0,00" inputMode="decimal" className="inp" /><button onClick={salvarSaldoAnteriorFg} className="h-[38px] px-3 rounded-lg bg-slate-900 text-white text-sm whitespace-nowrap">Salvar</button></div>
                      <div className="text-xs text-slate-400">Informe o valor que estava “com FG” antes do período selecionado. Se não houver, deixe zerado.</div>
                    </div>
                    <div className="rounded-xl border border-slate-200 p-3 space-y-2">
                      <div className="text-sm font-medium text-slate-700">Registrar mercadoria retirada no FG</div>
                      <div className="grid sm:grid-cols-3 gap-2"><input type="date" value={fgRetiradaData} onChange={(e)=>setFgRetiradaData(e.target.value)} className="inp" /><input value={fgRetiradaDescricao} onChange={(e)=>setFgRetiradaDescricao(e.target.value)} placeholder="Ex.: 2 Casal 7cm" className="inp" /><input value={fgRetiradaValor} onChange={(e)=>setFgRetiradaValor(e.target.value)} placeholder="Valor" inputMode="decimal" className="inp" /></div>
                      <button onClick={addRetiradaFg} disabled={!fgRetiradaDescricao.trim() || parseBRL(fgRetiradaValor)<=0} className="h-9 px-3 rounded-lg bg-violet-600 text-white text-sm font-medium disabled:opacity-40 flex items-center gap-1.5"><Plus size={14}/> Adicionar retirada</button>
                      {fgRetiradasSemana.length>0 && <div className="space-y-2 pt-1">{fgRetiradasSemana.map((x)=><div key={x.id} className="rounded-lg border border-slate-100 p-2 grid sm:grid-cols-[120px_1fr_130px_auto] gap-2 items-center"><input type="date" value={x.data || ''} onChange={(e)=>updateMovimentoFg(x.id,{data:e.target.value})} className="inp text-xs" /><input value={x.descricao || ''} onChange={(e)=>updateMovimentoFg(x.id,{descricao:e.target.value})} className="inp text-xs" /><input key={`${x.id}-${x.valor}`} defaultValue={String(x.valor ?? '').replace('.',',')} onBlur={(e)=>updateMovimentoFg(x.id,{valor:parseBRL(e.target.value)})} inputMode="decimal" className="inp text-xs" /><button title="Remover retirada" onClick={()=>delMovimentoFg(x.id)} className="h-9 w-9 rounded-lg border border-slate-200 flex items-center justify-center text-slate-400 hover:text-rose-500"><Trash2 size={14}/></button></div>)}</div>}
                      {fgRetiradasAutomaticasSemana.length>0 && <div className="pt-2 space-y-2">
                        <div className="flex items-center justify-between gap-2"><div className="text-xs font-semibold text-slate-600">Retiradas automáticas por pedidos</div><span className="text-[11px] text-slate-400">Não registre o mesmo pedido manualmente.</span></div>
                        {fgRetiradasAutomaticasSemana.map((x)=><div key={x.id} className="rounded-lg border border-emerald-100 bg-emerald-50/40 p-2 grid sm:grid-cols-[90px_1fr_110px] gap-2 items-center"><div className="text-xs text-slate-500">{brDate(x.data)}</div><div><div className="text-sm font-medium text-slate-700">{x.descricao}</div><div className="text-[11px] text-slate-400">{x.cliente} · {nomeLoja(x.lojaId)} · entregue por {x.entregador}</div></div><div className="text-sm font-semibold tabular-nums text-slate-700 sm:text-right">{brl(x.valor)}</div></div>)}
                      </div>}
                    </div>
                  </div>
                  <div className="space-y-4">
                    <div className="rounded-xl border border-slate-200 overflow-hidden">
                      <div className="px-4 py-3 bg-slate-50"><div className="font-medium text-sm text-slate-800">Créditos das entregas pelo FG</div><div className="text-xs text-slate-400">O valor sugerido vem do cálculo original do pedido. Ao editar, o novo valor passa a valer em todas as contas desse pedido: Crédito FG, Lucro Loja e, na Luna, Acerto Douglas.</div></div>
                      {fgVendasSemana.length===0 ? <div className="p-4 text-sm text-slate-400">Nenhuma entrega pelo FG neste período.</div> : <div className="divide-y divide-slate-100">{fgVendasSemana.map((v)=>{ const over=fgCreditoOverride(v.id); return <div key={v.id} className="p-3 grid sm:grid-cols-[1fr_150px_auto] gap-2 items-center"><div><div className="text-sm font-medium text-slate-700">{v.cliente || 'Sem nome'} <span className="font-normal text-slate-400">· {nomeLoja(v.lojaId)}</span></div><div className="text-xs text-slate-400">{brDate(v.dataEntrega)} · CEP {prefixoCep(v.cep)===null?'—':String(prefixoCep(v.cep)).padStart(3,'0')} · sugerido {brl(Math.max(0,lucroBaseVendaCalculado(v)))}</div></div><input key={`${v.id}-${over?.id || 'sugerido'}-${over?.valor ?? ''}`} defaultValue={over ? String(over.valor ?? '').replace('.',',') : String(Math.max(0,lucroBaseVendaCalculado(v)).toFixed(2)).replace('.',',')} onBlur={(e)=>setCreditoFgVenda(v,e.target.value)} inputMode="decimal" className="inp text-sm" /><button onClick={()=>setCreditoFgVenda(v,'')} disabled={!over} className="h-9 px-2.5 rounded-lg border border-slate-200 text-xs disabled:opacity-30">Usar sugerido</button></div>})}</div>}
                    </div>
                    <div className="rounded-xl border border-slate-200 overflow-hidden">
                    <div className="px-4 py-3 bg-slate-50 flex items-center justify-between gap-2 flex-wrap"><div><div className="font-medium text-sm text-slate-800">Fechamento para enviar ao FG</div><div className="text-xs text-slate-400">Entregador FG = crédito. Pedidos da Luna e camas FG da Empório entregues por Rogério, Tarcísio ou Goldstar entram automaticamente como mercadoria retirada do FG.</div></div><div className="flex gap-2"><button onClick={()=>copiarAcerto(textoAcertoFg(),'Acerto FG copiado ✓')} className="h-8 px-2.5 rounded-lg bg-slate-900 text-white text-xs flex items-center gap-1"><Copy size={12}/> Copiar</button><button onClick={()=>baixarTexto(`acerto-fg-${semanaAcerto.from}-a-${semanaAcerto.to}.txt`,textoAcertoFg())} className="h-8 px-2.5 rounded-lg border border-slate-200 bg-white text-xs flex items-center gap-1"><Download size={12}/> TXT</button></div></div>
                    <pre className="p-4 text-sm leading-6 whitespace-pre-wrap font-mono text-slate-700 bg-white max-h-[480px] overflow-auto">{textoAcertoFg()}</pre>
                    </div>
                  </div>
                </div>
                <div className="text-xs text-slate-500 bg-slate-50 border border-slate-200 rounded-lg px-3 py-2">Fórmula: retiradas manuais + retiradas automáticas dos pedidos não entregues pelo FG − crédito dos pedidos entregues pelo FG − saldo anterior. Se o resultado for negativo, o valor continua “com FG”.</div>
              </div>
            </Card>}

            <Card icon={<Check size={16} className="text-emerald-600" />} title={`Marcar pedidos para o acerto · ${candidatosAcerto.length}`} defaultOpen={false}>
              <div className="p-4 sm:p-5">
                {candidatosAcerto.length === 0 ? <div className="text-sm text-slate-400 py-4 text-center">Nenhum pedido entregue no período selecionado para o filtro de loja atual.</div> : (
                  <div className="divide-y divide-slate-100">
                    {candidatosAcerto.map((v) => {
                      const ativo=!!v.acertoAtivo, pago=acertoPagoVenda(v), valor=acertoValorVenda(v);
                      return <div key={v.id} className={`py-3 flex items-center justify-between gap-3 flex-wrap ${ativo?'bg-amber-50/40 -mx-2 px-2 rounded-lg':''}`}>
                        <div className="flex items-start gap-3 min-w-0">
                          <button onClick={()=>toggleAcertoVenda(v)} className={`mt-0.5 h-5 w-5 rounded border flex items-center justify-center shrink-0 ${ativo?'bg-slate-900 border-slate-900 text-white':'bg-white border-slate-300 text-transparent'}`} aria-label={ativo?'Remover do acerto':'Incluir no acerto'}><Check size={13}/></button>
                          <div className="min-w-0">
                            <div className="font-medium text-slate-800 truncate">{v.cliente || 'Sem nome'} <span className="text-slate-400 font-normal">· {nomeLoja(v.lojaId || LOJA_PADRAO.id)}</span></div>
                            <div className="text-xs text-slate-500 mt-0.5 flex gap-2 flex-wrap"><span>Entrega {brDate(v.dataEntrega)}</span><span>CEP {prefixoCep(v.cep) !== null ? String(prefixoCep(v.cep)).padStart(3,'0') : '—'}</span><span>{ativo?acertoRecebedorVenda(v):vendedorNomeVenda(v)||'Sem recebedor'}</span>{pago&&<span className="text-emerald-600 font-medium">Pago {brDate(v.acertoDataPagamento)}</span>}</div>
                          </div>
                        </div>
                        <div className="flex items-center gap-3"><span className="text-xs text-slate-400">{ativo ? ((v.lojaId||LOJA_PADRAO.id)==='luna'?'Valor cheio do acerto':'Valor do acerto') : ((v.lojaId||LOJA_PADRAO.id)==='luna'?'Valor cheio sugerido':'Valor sugerido')}</span><strong className="tabular-nums">{brl(valor)}</strong><button onClick={()=>toggleAcertoVenda(v)} className={`h-8 px-3 rounded-lg text-xs font-medium ${ativo?'bg-slate-100 text-slate-600':'bg-amber-100 text-amber-800 hover:bg-amber-200'}`}>{ativo?'Marcado ✓':'Incluir'}</button></div>
                      </div>;
                    })}
                  </div>
                )}
              </div>
            </Card>

            <div className="flex items-center justify-between gap-3 flex-wrap">
              <div><h3 className="font-semibold text-slate-800">Atualização do período para enviar</h3><p className="text-xs text-slate-400">Edite valor/recebedor se necessário, copie por dia ou copie o período inteiro.</p></div>
              <label className="flex items-center gap-2 text-sm text-slate-600 cursor-pointer"><input type="checkbox" checked={acertoSomentePendentes} onChange={(e)=>setAcertoSomentePendentes(e.target.checked)} /> Mostrar somente pendentes</label>
            </div>

            {gruposAcerto.length === 0 ? <Card title="Atualização do período" defaultOpen={false}><div className="p-8 text-center text-sm text-slate-400">{acertosSemana.length > 0 && acertoSomentePendentes ? 'Nenhum acerto pendente para exibir neste período.' : 'Marque os pedidos acima para montar a atualização do período.'}</div></Card> : gruposAcerto.map((g) => {
              const dias=[...new Set(g.vendas.map((v)=>v.dataEntrega))].sort();
              const totalGrupo=g.vendas.reduce((a,v)=>a+acertoValorVenda(v),0);
              return <Card key={g.key} icon={<Wallet size={16} className="text-amber-600" />} title={`${nomeLoja(g.lojaId)} · ${g.pessoa}`} defaultOpen={false}>
                <div className="p-4 sm:p-5 space-y-4">
                  <div className="flex items-center justify-between gap-3 flex-wrap"><div className="text-sm text-slate-500">{g.tipo==='freteiro'?'Freteiro':'Vendedor/recebedor'} · {g.vendas.length} pedido(s)</div><button onClick={()=>copiarAcerto(textoGrupoAcerto(g), `Atualização de ${g.pessoa} copiada ✓`)} className="h-9 px-3 rounded-lg bg-slate-900 text-white text-sm font-medium flex items-center gap-1.5 hover:bg-slate-800"><Copy size={14}/> Copiar período</button></div>
                  {dias.map((dia) => { const vs=g.vendas.filter((v)=>v.dataEntrega===dia); const totalDia=vs.reduce((a,v)=>a+acertoValorVenda(v),0); return <div key={dia} className="rounded-xl border border-slate-200 overflow-hidden">
                    <div className="px-3 sm:px-4 py-2.5 bg-slate-50 flex items-center justify-between gap-3"><div className="font-medium text-sm">{diaSemanaPt(dia)}, {brDateShort(dia)}</div><div className="flex items-center gap-2"><span className="text-xs text-slate-500">{brl(totalDia)}</span><button onClick={()=>copiarAcerto(textoGrupoAcerto(g,dia), `Dia ${brDateShort(dia)} copiado ✓`)} className="h-7 px-2.5 rounded-md border border-slate-200 bg-white text-xs flex items-center gap-1 hover:bg-slate-50"><Copy size={12}/> Copiar dia</button></div></div>
                    <div className="divide-y divide-slate-100">{vs.map((v)=>{ const pago=acertoPagoVenda(v); return <div key={v.id} className="p-3 sm:p-4 grid lg:grid-cols-[minmax(180px,1fr)_150px_150px_125px_145px_auto] gap-3 items-end">
                      <div><div className="font-medium text-slate-800">{v.cliente || 'Sem nome'}</div><div className="text-xs text-slate-400">CEP {prefixoCep(v.cep)!==null?String(prefixoCep(v.cep)).padStart(3,'0'):'—'} · Pedido {brDate(v.data)}</div></div>
                      <Field label="Recebedor"><input value={v.acertoRecebedor || acertoRecebedorVenda(v)} onChange={(e)=>atualizarAcertoVenda(v,{acertoRecebedor:e.target.value})} className="inp" /></Field>
                      <Field label="Valor"><input type="number" min="0" step="0.01" value={acertoValorVenda(v)} onChange={(e)=>atualizarAcertoVenda(v,{acertoValor:Number(e.target.value)||0})} className="inp" /></Field>
                      <Field label="Status"><button onClick={()=>marcarAcertoPago(v,!pago)} className={`h-[38px] w-full rounded-lg border text-sm font-medium ${pago?'bg-emerald-50 text-emerald-700 border-emerald-200':'bg-amber-50 text-amber-700 border-amber-200'}`}>{pago?'Pago ✓':'A pagar'}</button></Field>
                      <Field label="Data pagamento"><input type="date" disabled={!pago} value={v.acertoDataPagamento || ''} onChange={(e)=>atualizarAcertoVenda(v,{acertoDataPagamento:e.target.value})} className="inp disabled:bg-slate-50 disabled:text-slate-300" /></Field>
                      <button onClick={()=>toggleAcertoVenda(v)} disabled={pago} className="h-[38px] px-3 rounded-lg border border-slate-200 text-xs text-slate-500 hover:text-rose-600 disabled:opacity-30">Remover</button>
                    </div>;})}</div>
                  </div>;})}
                  <div className="pt-1 flex items-center justify-end gap-2 text-sm"><span className="text-slate-500">Total exibido:</span><strong className="text-lg">{brl(totalGrupo)}</strong></div>
                </div>
              </Card>;
            })}
          </div>
        )}

        {aba === 'modelos' && (
          <div className="space-y-6">
            {/* Rankings de modelos e fornecedores */}
            <Card icon={<Award size={16} className="text-amber-500" />} title={`Rankings · ${per.label}`}>
              <div className="px-4 sm:px-5 pt-4 flex items-center gap-2 border-b border-slate-100">
                <button onClick={() => setModelosView('modelos')} className={`px-3 py-2 text-sm font-medium border-b-2 transition ${modelosView === 'modelos' ? 'border-slate-900 text-slate-900' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Mais vendidos</button>
                <button onClick={() => setModelosView('fornecedores')} className={`px-3 py-2 text-sm font-medium border-b-2 transition ${modelosView === 'fornecedores' ? 'border-slate-900 text-slate-900' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Fornecedores</button>
              </div>

              {modelosView === 'modelos' ? (
                modelosRank.list.every((x) => x.n === 0) ? (
                  <div className="p-8 text-center text-slate-500 text-sm">Nenhum pedido com modelo neste período.{modelosRank.semModelo > 0 && <><br />{modelosRank.semModelo} pedido(s) sem modelo definido.</>}</div>
                ) : (
                  <div className="overflow-x-auto">
                    <table className="w-full text-sm min-w-[620px]">
                      <thead><tr className="text-left text-xs text-slate-500 uppercase tracking-wide border-b border-slate-100">
                        <th className="px-4 sm:px-5 py-2.5 font-medium">#</th>
                        <th className="px-3 py-2.5 font-medium">Modelo</th>
                        <th className="px-3 py-2.5 font-medium">Fornecedor</th>
                        <th className="px-3 py-2.5 font-medium text-right">Vendas</th>
                        <th className="px-3 py-2.5 font-medium text-right">Receita</th>
                        <th className="px-4 sm:px-5 py-2.5 font-medium text-right">Lucro produto</th>
                      </tr></thead>
                      <tbody className="divide-y divide-slate-100">
                        {modelosRank.list.map((x, i) => (
                          <tr key={x.m.id} className="hover:bg-slate-50/60">
                            <td className="px-4 sm:px-5 py-3 tabular-nums text-slate-400">{i + 1}</td>
                            <td className="px-3 py-3 font-medium text-slate-800">{x.m.nome}</td>
                            <td className="px-3 py-3 text-slate-500">{x.m.fornecedor || '—'}</td>
                            <td className="px-3 py-3 text-right tabular-nums font-semibold">{x.n}</td>
                            <td className="px-3 py-3 text-right tabular-nums">{brl(x.receita)}</td>
                            <td className="px-4 sm:px-5 py-3 text-right tabular-nums"><span className={x.lucro > 0 ? 'text-emerald-600' : x.lucro < 0 ? 'text-rose-600' : 'text-slate-500'}>{brl(x.lucro)}</span></td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                    {modelosRank.semModelo > 0 && <p className="px-4 sm:px-5 py-3 text-xs text-slate-400">+ {modelosRank.semModelo} pedido(s) sem modelo definido no período.</p>}
                  </div>
                )
              ) : (
                fornecedoresRank.length === 0 ? (
                  <div className="p-8 text-center text-slate-500 text-sm">Nenhum pedido com fornecedor definido neste período.</div>
                ) : (
                  <div className="overflow-x-auto">
                    <table className="w-full text-sm min-w-[860px]">
                      <thead><tr className="text-left text-xs text-slate-500 uppercase tracking-wide border-b border-slate-100">
                        <th className="px-4 sm:px-5 py-2.5 font-medium">#</th>
                        <th className="px-3 py-2.5 font-medium">Fornecedor</th>
                        <th className="px-3 py-2.5 font-medium text-right">Pedidos</th>
                        <th className="px-3 py-2.5 font-medium text-right">Faturamento</th>
                        <th className="px-3 py-2.5 font-medium text-right">Gasto com produtos</th>
                        <th className="px-3 py-2.5 font-medium text-right">Lucro</th>
                        <th className="px-4 sm:px-5 py-2.5 font-medium">Modelos mais vendidos</th>
                      </tr></thead>
                      <tbody className="divide-y divide-slate-100">
                        {fornecedoresRank.map((x, i) => (
                          <tr key={x.fornecedor} className="hover:bg-slate-50/60 align-top">
                            <td className="px-4 sm:px-5 py-3 tabular-nums text-slate-400">{i + 1}</td>
                            <td className="px-3 py-3 font-semibold text-slate-800">{x.fornecedor}</td>
                            <td className="px-3 py-3 text-right tabular-nums font-semibold">{x.pedidos}</td>
                            <td className="px-3 py-3 text-right tabular-nums">{brl(x.faturamento)}</td>
                            <td className="px-3 py-3 text-right tabular-nums text-slate-600">{brl(x.gasto)}</td>
                            <td className="px-3 py-3 text-right tabular-nums font-medium"><span className={x.lucro > 0 ? 'text-emerald-600' : x.lucro < 0 ? 'text-rose-600' : 'text-slate-500'}>{brl(x.lucro)}</span></td>
                            <td className="px-4 sm:px-5 py-3">
                              <div className="flex flex-wrap gap-1.5">
                                {x.modelosRank.slice(0, 4).map((m, idx) => <span key={m.nome} className="inline-flex items-center rounded-full bg-slate-100 px-2 py-1 text-xs text-slate-600"><strong className="mr-1">{idx + 1}º</strong>{m.nome} · {m.n}</span>)}
                              </div>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                    <p className="px-4 sm:px-5 py-3 text-xs text-slate-400">Gasto com produtos e lucro deste ranking não incluem frete. Pedidos cancelados ou devolvidos ficam fora.</p>
                  </div>
                )
              )}
            </Card>

            {/* Cadastro de modelos */}
            <Card icon={<Package size={16} className="text-slate-600" />} title="Cadastro de modelos">
              <div className="p-4 sm:p-5">
                <div className="grid grid-cols-2 sm:grid-cols-7 gap-3 items-end">
                  <Field label="Nome do modelo" className="col-span-2 sm:col-span-1"><input value={mNome} onChange={(e) => setMNome(e.target.value)} placeholder="Ex.: Sofá Roma 2,20m" className="inp" /></Field>
                  <Field label="Preço de venda"><input value={mPreco} onChange={(e) => setMPreco(e.target.value)} placeholder="0,00" inputMode="decimal" className="inp" /></Field>
                  <Field label="Custo"><input value={mCusto} onChange={(e) => setMCusto(e.target.value)} placeholder="0,00" inputMode="decimal" className="inp" /></Field>
                  <Field label="Frete"><input value={mFrete} onChange={(e) => setMFrete(e.target.value)} placeholder="0,00" inputMode="decimal" className="inp" /></Field>
                  <Field label="Fornecedor"><input value={mFornecedor} onChange={(e) => setMFornecedor(e.target.value)} placeholder="Ex.: Benini" className="inp" /></Field>
                  <Field label="Loja"><select value={mLojaId} onChange={(e) => setMLojaId(e.target.value)} className="inp"><option value="">Compartilhado</option>{lojas.map((l) => <option key={l.id} value={l.id}>{l.nome}</option>)}</select></Field>
                  <button onClick={salvarModelo} disabled={!mNome.trim()} className="h-[38px] rounded-lg bg-slate-900 text-white text-sm font-medium hover:bg-slate-800 disabled:opacity-40 transition flex items-center justify-center gap-1.5">{editModelo ? <><Check size={16} /> Salvar</> : <><Plus size={16} /> Cadastrar</>}</button>
                </div>
                {editModelo && <button onClick={() => { setEditModelo(null); setMNome(''); setMPreco(''); setMCusto(''); setMFrete(''); setMFornecedor(''); setMLojaId(''); }} className="text-xs text-slate-400 hover:text-slate-600 mt-2">cancelar edição</button>}
                {modelos.length > 0 && (
                  <div className="mt-4 overflow-x-auto">
                    <table className="w-full text-sm min-w-[560px]">
                      <thead><tr className="text-left text-xs text-slate-500 uppercase tracking-wide border-b border-slate-100">
                        <th className="py-2 font-medium">Modelo</th>
                        <th className="py-2 font-medium">Fornecedor</th>
                        <th className="py-2 font-medium text-right">Preço</th>
                        <th className="py-2 font-medium text-right">Custo</th>
                        <th className="py-2 font-medium text-right">Frete</th>
                        <th className="py-2 font-medium text-right">Margem real</th>
                        <th className="py-2 font-medium text-right"></th>
                      </tr></thead>
                      <tbody className="divide-y divide-slate-100">
                        {modelos.map((m) => (
                          <tr key={m.id}>
                            <td className="py-2.5 font-medium text-slate-800">{m.nome}</td>
                            <td className="py-2.5 text-slate-500 flex items-center gap-1"><Truck size={12} className="text-slate-300" />{m.fornecedor || '—'}</td>
                            <td className="py-2.5 text-right tabular-nums">{brl(m.preco)}</td>
                            <td className="py-2.5 text-right tabular-nums text-slate-500">{brl(m.custo)}</td>
                            <td className="py-2.5 text-right tabular-nums text-slate-500">{brl(m.frete || 0)}</td>
                            <td className="py-2.5 text-right tabular-nums font-medium"><span className={(m.preco - m.custo - (m.frete || 0)) >= 0 ? 'text-emerald-600' : 'text-rose-600'}>{brl(m.preco - m.custo - (m.frete || 0))}</span></td>
                            <td className="py-2.5 text-right"><div className="flex items-center justify-end gap-2"><button onClick={() => startEditModelo(m)} className="text-slate-300 hover:text-slate-600" aria-label="Editar"><Pencil size={14} /></button><button onClick={() => delModelo(m.id)} className="text-slate-300 hover:text-rose-500" aria-label="Excluir"><Trash2 size={15} /></button></div></td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                )}
              </div>
            </Card>
          </div>
        )}

        {aba === 'organico' && (
          <div className="space-y-6">
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
              <Kpi icon={<Users size={16} />} label="Pedidos orgânicos" value={num(orgResumo.nPedidos, 0)} />
              <Kpi icon={<Check size={16} />} label="Entregues" value={num(orgResumo.nEntregues, 0)} tone="emerald" />
              <Kpi icon={<Receipt size={16} />} label="Receita realizada" value={brl(orgResumo.receita)} />
              <Kpi icon={orgResumo.lucro >= 0 ? <TrendingUp size={16} /> : <TrendingDown size={16} />} label="Lucro realizado" value={brl(orgResumo.lucro)} tone={orgResumo.lucro > 0 ? 'emerald' : orgResumo.lucro < 0 ? 'rose' : 'slate'} />
            </div>
            <Card icon={<PieChart size={16} className="text-slate-600" />} title={`Por origem · ${per.label}`}>
              {orgPorOrigem.length === 0 ? (
                <div className="p-8 text-center text-slate-500 text-sm">Nenhum pedido orgânico no período.</div>
              ) : (
                <div className="overflow-x-auto">
                  <table className="w-full text-sm min-w-[620px]">
                    <thead><tr className="text-left text-xs text-slate-500 uppercase tracking-wide border-b border-slate-100"><th className="px-4 sm:px-5 py-2.5 font-medium">Origem</th><th className="px-3 py-2.5 font-medium text-right">Pedidos</th><th className="px-3 py-2.5 font-medium text-right">Entregues</th><th className="px-3 py-2.5 font-medium text-right">Receita real</th><th className="px-3 py-2.5 font-medium text-right">Custo</th><th className="px-4 sm:px-5 py-2.5 font-medium text-right">Lucro real</th></tr></thead>
                    <tbody className="divide-y divide-slate-100">{orgPorOrigem.map((o) => <tr key={o.origem} className="hover:bg-slate-50/60"><td className="px-4 sm:px-5 py-3 font-medium text-slate-800">{o.origem}</td><td className="px-3 py-3 text-right tabular-nums">{o.pedidos}</td><td className="px-3 py-3 text-right tabular-nums">{o.entregues}</td><td className="px-3 py-3 text-right tabular-nums">{brl(o.receita)}</td><td className="px-3 py-3 text-right tabular-nums text-slate-500">{brl(o.custo)}</td><td className="px-4 sm:px-5 py-3 text-right tabular-nums font-semibold"><span className={o.lucro > 0 ? 'text-emerald-600' : o.lucro < 0 ? 'text-rose-600' : 'text-slate-500'}>{brl(o.lucro)}</span></td></tr>)}</tbody>
                  </table>
                </div>
              )}
            </Card>
            {recentesAba.length > 0 && (
              <Card icon={<Receipt size={16} className="text-slate-600" />} title={`Pedidos orgânicos · ${per.label}`} defaultOpen={false}>
                <div className="p-4 sm:p-5 flex flex-col divide-y divide-slate-100">{recentesAba.map(renderVenda)}</div>
              </Card>
            )}
          </div>
        )}

        <p className="text-center text-xs text-slate-400 pb-4">CPA por pedido = gasto ÷ pedidos &nbsp;·&nbsp; CPA por entrega = gasto ÷ entregues &nbsp;·&nbsp; Receita e lucro realizados consideram somente pedidos entregues. Dados sincronizados automaticamente no banco.</p>
        </>}

        {aba === 'marketplaces' && (
          <MarketplacePage
            per={per}
            products={marketplaceProdutos}
            setProducts={setMarketplaceProdutos}
            orders={marketplacePedidos}
            setOrders={setMarketplacePedidos}
            ads={marketplaceAds}
            setAds={setMarketplaceAds}
          />
        )}
        {aba === 'zpl' && <ZplConverterPage />}
        </>)}
        </main>
      </div>

      <style>{`
        html { scroll-behavior:smooth; }
        body { background:#f6f8fb; }
        .inp { width:100%; border:1px solid #dce3ec; border-radius:0.65rem; padding:0.56rem 0.7rem; font-size:0.875rem; background:#fff; outline:none; transition:all .18s ease; color:#1e293b; }
        .inp:hover { border-color:#cbd5e1; }
        .inp:focus { border-color:#8292a8; box-shadow:0 0 0 3px rgb(100 116 139 / 0.12); }
        .dashboard-toolbar { min-height:46px; }
        .toolbar-label { display:inline-flex; align-items:center; gap:.35rem; color:#64748b; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.045em; margin-right:.2rem; }
        .sidebar-nav { width:100%; display:flex; align-items:center; gap:.7rem; padding:.7rem .8rem; border-radius:.7rem; color:#cbd5e1; transition:all .16s ease; text-align:left; }
        .sidebar-nav:hover { background:rgba(255,255,255,.065); color:#fff; transform:translateX(1px); }
        .sidebar-nav-active { background:rgba(52,211,153,.10); color:#6ee7b7; box-shadow:inset 2px 0 0 #34d399; }
        table thead { background:#f8fafc; }
        table tbody tr { transition:background .14s ease; }
        table tbody tr:hover { background:#fbfdff; }
        @media (max-width:640px) {
          .dashboard-toolbar { align-items:flex-start; }
        }
      `}</style>
    </div>
  );
}

function ZplConverterPage() {
  const inputRef = useRef(null);
  const [files, setFiles] = useState([]);
  const [layout, setLayout] = useState('10x15');
  const [busy, setBusy] = useState(false);
  const [dragging, setDragging] = useState(false);
  const [error, setError] = useState('');
  const [result, setResult] = useState(null);

  useEffect(() => () => {
    if (result?.url) URL.revokeObjectURL(result.url);
  }, [result?.url]);

  const readableSize = (bytes) => bytes >= 1048576
    ? `${num(bytes / 1048576, 2)} MB`
    : `${num(bytes / 1024, 0)} KB`;

  const selectFiles = (incoming) => {
    const allowed = Array.from(incoming || []).filter((file) => /\.(zpl|txt|zip)$/i.test(file.name));
    const total = allowed.reduce((sum, file) => sum + (Number(file.size) || 0), 0);
    setError('');
    if (allowed.length === 0) {
      setFiles([]);
      setError('Selecione arquivos ZPL, TXT ou ZIP.');
      return;
    }
    if (allowed.length > 20) {
      setError('Envie no máximo 20 arquivos por conversão.');
      return;
    }
    if (total > 10 * 1024 * 1024) {
      setError('O total dos arquivos não pode ultrapassar 10 MB.');
      return;
    }
    if (result?.url) URL.revokeObjectURL(result.url);
    setResult(null);
    setFiles(allowed);
  };

  const removeFile = (index) => {
    setFiles((current) => current.filter((_, i) => i !== index));
    if (result?.url) URL.revokeObjectURL(result.url);
    setResult(null);
  };

  const convert = async () => {
    if (files.length === 0 || busy) return;
    setBusy(true);
    setError('');
    try {
      const body = new FormData();
      files.forEach((file) => body.append('files[]', file, file.name));
      body.append('layout', layout);
      const response = await fetch('/api/zpl-to-pdf.php', {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        body,
      });
      if (!response.ok) {
        let message = `Não foi possível converter (HTTP ${response.status}).`;
        try { const data = await response.json(); if (data?.error) message = data.error; } catch { /* resposta não JSON */ }
        throw new Error(message);
      }
      const type = response.headers.get('content-type') || '';
      if (!type.includes('application/pdf')) throw new Error('O servidor não retornou um PDF válido.');
      const blob = await response.blob();
      const disposition = response.headers.get('content-disposition') || '';
      const match = disposition.match(/filename="?([^";]+)"?/i);
      const filename = match?.[1] || `etiquetas-${todayISO()}.pdf`;
      if (result?.url) URL.revokeObjectURL(result.url);
      setResult({ url: URL.createObjectURL(blob), filename, size: blob.size });
    } catch (err) {
      setError(err?.message || 'Falha ao converter as etiquetas.');
    } finally {
      setBusy(false);
    }
  };

  const totalSize = files.reduce((sum, file) => sum + (Number(file.size) || 0), 0);
  return (
    <div className="space-y-5">
      <div className="flex items-start justify-between gap-4 flex-wrap">
        <div><h2 className="text-xl font-semibold text-slate-900">ZPL → PDF</h2><p className="text-sm text-slate-500 mt-1">Converta etiquetas da Shopee e de outros marketplaces para impressão comum.</p></div>
        <span className="inline-flex items-center gap-1.5 rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1.5 text-xs font-medium text-emerald-700"><ShieldCheck size={14}/> Não salva no banco</span>
      </div>

      <section className="bg-white border border-[#e4e9f0] rounded-xl shadow-sm overflow-hidden">
        <div className="p-5 sm:p-7 grid xl:grid-cols-[minmax(0,1fr)_320px] gap-6">
          <div>
            <button type="button" onClick={() => inputRef.current?.click()} onDragEnter={(e) => { e.preventDefault(); setDragging(true); }} onDragOver={(e) => e.preventDefault()} onDragLeave={() => setDragging(false)} onDrop={(e) => { e.preventDefault(); setDragging(false); selectFiles(e.dataTransfer.files); }} className={`w-full min-h-[250px] rounded-2xl border-2 border-dashed flex flex-col items-center justify-center text-center p-8 transition ${dragging ? 'border-emerald-400 bg-emerald-50/70' : 'border-slate-200 bg-slate-50/60 hover:border-slate-300 hover:bg-slate-50'}`}>
              <span className="w-14 h-14 rounded-2xl bg-white border border-slate-200 shadow-sm flex items-center justify-center text-emerald-600 mb-4"><Upload size={25}/></span>
              <span className="font-semibold text-slate-800">Arraste as etiquetas aqui</span>
              <span className="text-sm text-slate-500 mt-1">ou clique para selecionar</span>
              <span className="text-xs text-slate-400 mt-4">ZPL, TXT ou ZIP · até 20 arquivos · máximo de 10 MB</span>
            </button>
            <input ref={inputRef} type="file" multiple accept=".zpl,.txt,.zip,application/zip,text/plain" onChange={(e) => { selectFiles(e.target.files); e.target.value = ''; }} className="hidden" />

            {files.length > 0 && <div className="mt-4 rounded-xl border border-slate-200 divide-y divide-slate-100 overflow-hidden">
              {files.map((file, index) => <div key={`${file.name}-${file.size}-${index}`} className="px-4 py-3 flex items-center gap-3 bg-white"><FileText size={17} className="text-slate-400 shrink-0"/><div className="flex-1 min-w-0"><div className="text-sm font-medium text-slate-700 truncate">{file.name}</div><div className="text-xs text-slate-400">{readableSize(file.size)}</div></div><button type="button" onClick={() => removeFile(index)} className="p-1.5 rounded-lg text-slate-400 hover:text-rose-600 hover:bg-rose-50" aria-label={`Remover ${file.name}`}><X size={16}/></button></div>)}
              <div className="px-4 py-2.5 bg-slate-50 text-xs text-slate-500 flex justify-between"><span>{files.length} arquivo(s)</span><span>{readableSize(totalSize)}</span></div>
            </div>}
          </div>

          <div className="space-y-5">
            <div className="rounded-xl border border-slate-200 p-4">
              <div className="text-sm font-semibold text-slate-800 mb-3">Formato do PDF</div>
              <div className="space-y-2">
                {[['10x15','10 × 15 cm','Uma etiqueta por página, tamanho real'],['a4-2','A4 · 2 etiquetas','Duas etiquetas por folha'],['a4-4','A4 · 4 etiquetas','Quatro etiquetas por folha']].map(([value,title,sub]) => <label key={value} className={`flex items-start gap-3 rounded-lg border p-3 cursor-pointer transition ${layout===value?'border-emerald-300 bg-emerald-50/70':'border-slate-200 hover:bg-slate-50'}`}><input type="radio" name="zpl-layout" value={value} checked={layout===value} onChange={(e)=>setLayout(e.target.value)} className="mt-0.5 accent-emerald-600"/><span><span className="block text-sm font-medium text-slate-800">{title}</span><span className="block text-xs text-slate-500 mt-0.5">{sub}</span></span></label>)}
              </div>
            </div>
            <button type="button" onClick={convert} disabled={files.length===0 || busy} className="w-full h-11 rounded-xl bg-slate-900 text-white text-sm font-semibold hover:bg-slate-800 disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center gap-2">{busy ? <Loader2 size={17} className="animate-spin"/> : <Printer size={17}/>} {busy ? 'Convertendo…' : 'Converter em PDF'}</button>
            <div className="rounded-xl bg-blue-50 border border-blue-100 px-4 py-3 text-xs leading-relaxed text-blue-800">Os arquivos são usados somente durante a conversão e não entram no histórico nem no banco do painel. A etiqueta é processada por um serviço externo de renderização ZPL.</div>
            {error && <div className="rounded-xl bg-rose-50 border border-rose-100 px-4 py-3 text-sm text-rose-700">{error}</div>}
          </div>
        </div>
      </section>

      {result && <section className="bg-white border border-[#e4e9f0] rounded-xl shadow-sm overflow-hidden">
        <div className="px-5 py-4 border-b border-slate-100 flex items-center justify-between gap-3 flex-wrap"><div><h3 className="font-semibold text-slate-900">PDF pronto</h3><p className="text-xs text-slate-500 mt-0.5">{result.filename} · {readableSize(result.size)}</p></div><a href={result.url} download={result.filename} className="h-9 px-4 rounded-lg bg-emerald-600 text-white text-sm font-medium hover:bg-emerald-700 flex items-center gap-2"><Download size={15}/> Baixar PDF</a></div>
        <div className="p-4 bg-slate-100"><iframe title="Pré-visualização das etiquetas" src={result.url} className="w-full h-[680px] rounded-lg border border-slate-200 bg-white" /></div>
      </section>}
    </div>
  );
}

function buildMarketplaceProductGroups(products, marketplace) {
  const grouped = new Map();
  const relevantProducts = products.filter((p) => {
    const isShopee = !!(p.shopeeItemId || p.skuShopee);
    const isMagalu = !!p.skuMagalu;
    return marketplace === 'Shopee' ? isShopee : marketplace === 'Magalu' ? isMagalu : true;
  });
  const shopeeBaseName = (p) => p.shopeeBaseName || String(p.name || '').split(' · ')[0] || `Produto Shopee ${p.shopeeItemId || p.skuShopee || ''}`.trim();
  const magaluBaseName = (p) => p.magaluBaseName || String(p.name || '').split(' · ')[0] || `Produto Magalu ${p.skuMagalu || ''}`.trim();
  const shopeeItemGroupByName = new Map();
  if (marketplace !== 'Magalu') relevantProducts.forEach((p) => {
    if (p.shopeeItemId) shopeeItemGroupByName.set(norm(shopeeBaseName(p)), `shopee-item:${p.shopeeItemId}`);
  });
  relevantProducts.forEach((p) => {
    const isShopee = !!(p.shopeeItemId || p.skuShopee);
    const isMagalu = !!p.skuMagalu;
    const groupShopee = marketplace !== 'Magalu' && isShopee;
    const groupMagalu = !groupShopee && marketplace !== 'Shopee' && isMagalu;
    const baseName = groupShopee ? shopeeBaseName(p) : groupMagalu ? magaluBaseName(p) : p.name;
    const key = groupShopee
      ? (p.shopeeItemId ? `shopee-item:${p.shopeeItemId}` : (shopeeItemGroupByName.get(norm(baseName)) || `shopee-name:${norm(baseName) || p.id}`))
      : groupMagalu ? `magalu-name:${norm(baseName) || p.id}` : `product:${p.id}`;
    if (!grouped.has(key)) {
      grouped.set(key, { key, name:baseName, platform:groupShopee ? 'Shopee' : (groupMagalu ? 'Magalu' : ''), itemId:groupShopee ? String(p.shopeeItemId) : '', products:[] });
    }
    const group = grouped.get(key);
    if (!group.itemId && p.shopeeItemId) group.itemId = String(p.shopeeItemId);
    group.products.push(p);
  });
  return [...grouped.values()].sort((a, b) => String(a.name || '').localeCompare(String(b.name || ''), 'pt-BR'));
}

function MarketplacePage({ per, products, setProducts, orders, setOrders, ads, setAds }) {
  const blankProduct = { nome: '', fornecedor: '', custo: '', custoDesde: todayISO(), skuMagalu: '', skuShopee: '', lucroAlvo: '100', margemAlvo: '20' };
  const blankOrder = { data: todayISO(), marketplace: 'Magalu', productId: '', status: 'pago', quantidade: '1', bruto: '', taxas: '', frete: '', descontos: '', estornos: '', subsidios: '', custoFornecedor: '' };
  const blankAd = { data: todayISO(), marketplace: 'Magalu', productId: '', productGroupKey: '', productGroupName: '', appliesToGroup: false, gasto: '', pedidos: '', vendas: '', impressoes: '', cliques: '' };
  const [tab, setTab] = useState('visao');
  const [marketplace, setMarketplace] = useState('todos');
  const [productFilter, setProductFilter] = useState('todos');
  const [expandedProductGroup, setExpandedProductGroup] = useState(null);
  const [search, setSearch] = useState('');
  const [productDraft, setProductDraft] = useState(blankProduct);
  const [editProductId, setEditProductId] = useState(null);
  const [orderDraft, setOrderDraft] = useState(blankOrder);
  const [editOrderId, setEditOrderId] = useState(null);
  const [adDraft, setAdDraft] = useState(blankAd);
  const [editAdId, setEditAdId] = useState(null);
  const [quickAdEdit, setQuickAdEdit] = useState(null);
  const [connections, setConnections] = useState(null);
  const [connectionDraft, setConnectionDraft] = useState({ magaluClientId: '', magaluClientSecret: '', shopeePartnerId: '', shopeePartnerKey: '' });
  const [connectionBusy, setConnectionBusy] = useState('');
  const [connectionMsg, setConnectionMsg] = useState('');

  const loadConnections = async () => {
    try {
      const data = await apiRequest('/api/marketplace-connections.php');
      setConnections(data);
      setConnectionDraft((d) => ({
        ...d,
        magaluClientId: data.magalu?.client_id || d.magaluClientId,
        shopeePartnerId: data.shopee?.partner_id || d.shopeePartnerId,
      }));
    } catch (error) {
      setConnectionMsg(error.message || 'Não foi possível consultar as conexões.');
    }
  };

  useEffect(() => {
    loadConnections();
    const params = new URLSearchParams(window.location.search);
    const result = params.get('conexao');
    const platform = params.get('marketplace');
    if (result) {
      const nome = platform === 'magalu' ? 'Magalu' : platform === 'shopee' ? 'Shopee' : 'Marketplace';
      setConnectionMsg(result === 'sucesso' ? `${nome} conectado com sucesso.` : (params.get('mensagem') || `Não foi possível conectar ${nome}.`));
      setTab('conexoes');
      window.history.replaceState({}, '', window.location.pathname);
    }
  }, []);

  const saveConnection = async (platform) => {
    setConnectionBusy(platform); setConnectionMsg('');
    try {
      const body = platform === 'magalu'
        ? { platform, action:'save', client_id:connectionDraft.magaluClientId, client_secret:connectionDraft.magaluClientSecret }
        : { platform, action:'save', partner_id:connectionDraft.shopeePartnerId, partner_key:connectionDraft.shopeePartnerKey };
      await apiRequest('/api/marketplace-connections.php', { method:'POST', body:JSON.stringify(body) });
      setConnectionDraft((d) => ({ ...d, magaluClientSecret:'', shopeePartnerKey:'' }));
      await loadConnections();
      setConnectionMsg(`Credenciais da ${platform === 'magalu' ? 'Magalu' : 'Shopee'} salvas com segurança. Agora clique em Autorizar loja.`);
    } catch (error) {
      setConnectionMsg(error.message || 'Não foi possível salvar as credenciais.');
    } finally { setConnectionBusy(''); }
  };

  const disconnectMarketplace = async (platform) => {
    if (!window.confirm(`Desconectar a loja ${platform === 'magalu' ? 'Magalu' : 'Shopee'}?`)) return;
    setConnectionBusy(platform); setConnectionMsg('');
    try {
      await apiRequest('/api/marketplace-connections.php', { method:'POST', body:JSON.stringify({ platform, action:'disconnect' }) });
      await loadConnections();
      setConnectionMsg('Loja desconectada. As credenciais da aplicação foram mantidas para uma nova autorização.');
    } catch (error) { setConnectionMsg(error.message || 'Não foi possível desconectar.'); }
    finally { setConnectionBusy(''); }
  };

  const syncMarketplace = async (platform) => {
    setConnectionBusy(`sync-${platform}`); setConnectionMsg('');
    try {
      let data = { platform, raw_order_count:0, financial_count:0, products:[], orders:[], warnings:[] };
      let orderSyncError = '';
      const today = todayISO();
      let syncFrom = per.from;
      let syncTo = per.to;
      if (platform === 'shopee' && per.from.slice(0, 7) === per.to.slice(0, 7)) {
        const month = per.from.slice(0, 7);
        syncFrom = `${month}-01`;
        syncTo = `${month}-${lastDay(month)}`;
        if (syncTo > today) syncTo = today;
      } else if (platform === 'shopee' && syncTo > today) {
        syncTo = today;
      }
      if (platform === 'shopee') {
        let offset = 0;
        let totalOrders = 0;
        let financialCount = 0;
        let orderSnapshot = null;
        let completed = false;
        const productMap = new Map();
        const orderMap = new Map();
        const reconciliationMap = new Map();
        const warnings = [];
        try {
          if (syncFrom > syncTo) throw new Error('Ainda não existem pedidos para sincronizar nesse período futuro.');
          for (let batch = 0; batch < 250; batch += 1) {
            const page = await apiRequest('/api/marketplace-sync.php', {
              method:'POST',
              body:JSON.stringify({ platform, from:syncFrom, to:syncTo, offset, ...(orderSnapshot ? { order_sns:orderSnapshot } : {}) }),
            });
            if (!orderSnapshot && Array.isArray(page.order_sns)) orderSnapshot = page.order_sns;
            totalOrders = Math.max(totalOrders, Number(page.raw_order_count) || 0);
            financialCount += Number(page.financial_count) || 0;
            (page.products || []).forEach((p) => productMap.set(p.externalKey, p));
            (page.orders || []).forEach((o) => orderMap.set(o.id, o));
            (page.reconciliations || []).forEach((entry) => {
              if (entry?.externalOrderId) reconciliationMap.set(String(entry.externalOrderId), entry);
            });
            warnings.push(...(page.warnings || []));
            const processed = Math.min(totalOrders, offset + (Number(page.processed_order_count) || 0));
            setConnectionMsg(`Shopee: processando ${processed} de ${totalOrders} pedido(s) de ${per.label}…`);
            if (page.next_offset === null || page.next_offset === undefined) { completed = true; break; }
            const nextOffset = Number(page.next_offset);
            if (!Number.isFinite(nextOffset) || nextOffset <= offset) throw new Error('A Shopee não avançou para o próximo lote de pedidos.');
            offset = nextOffset;
          }
          if (!completed) throw new Error('A Shopee retornou pedidos demais para concluir a revisão em uma única sincronização.');
        } catch (error) {
          orderSyncError = error.message || 'A consulta de pedidos foi interrompida.';
        }
        data = {
          platform:'shopee', raw_order_count:totalOrders, financial_count:financialCount,
          products:[...productMap.values()], orders:[...orderMap.values()], reconciliations:[...reconciliationMap.values()], warnings,
          sync_from:syncFrom, sync_to:syncTo,
        };
      } else {
        data = await apiRequest('/api/marketplace-sync.php', {
          method:'POST',
          body:JSON.stringify({ platform, from:syncFrom, to:syncTo }),
        });
      }
      let adsData = null;
      let adsSyncError = '';
      if (platform === 'shopee') {
        try {
          const adsFrom = per.from;
          const adsTo = per.to > todayISO() ? todayISO() : per.to;
          let offset = 0;
          let campaignCount = 0;
          const adsProductMap = new Map();
          const dailyAdsMap = new Map();
          if (adsFrom <= adsTo) {
            for (let batch = 0; batch < 250; batch += 1) {
              setConnectionMsg(`Shopee Ads: processando campanhas de ${adsFrom} até ${adsTo}…`);
              const page = await apiRequest('/api/marketplace-ads-sync.php', {
                method:'POST',
                body:JSON.stringify({ platform, from:adsFrom, to:adsTo, offset }),
              });
              campaignCount += Number(page.processed_campaign_count ?? page.campaign_count) || 0;
              (page.products || []).forEach((p) => adsProductMap.set(p.externalKey, p));
              (page.ads || []).forEach((entry) => dailyAdsMap.set(entry.id, entry));
              setConnectionMsg(`Shopee Ads: ${campaignCount} campanha(s) processada(s)…`);
              if (page.next_offset === null || page.next_offset === undefined) break;
              const nextOffset = Number(page.next_offset);
              if (!Number.isFinite(nextOffset) || nextOffset <= offset) throw new Error('A Shopee Ads não avançou para o próximo lote de campanhas.');
              offset = nextOffset;
            }
          }
          adsData = {
            platform:'shopee', campaign_count:campaignCount,
            products:[...adsProductMap.values()], ads:[...dailyAdsMap.values()], from:adsFrom, to:adsTo,
          };
        } catch (error) {
          adsSyncError = error.message || 'Não foi possível consultar a Shopee Ads.';
        }
      }
      const nextProducts = products.map((p) => ({ ...p }));
      const existingOrderById = new Map(orders.map((order) => [order.id, order]));
      const productIdByExternal = new Map();
      const skuField = platform === 'shopee' ? 'skuShopee' : 'skuMagalu';
      const platformName = platform === 'shopee' ? 'Shopee' : 'Magalu';
      (data.products || []).forEach((incoming) => {
        let product = nextProducts.find((p) => p.externalKey === incoming.externalKey ||
          (incoming.sku && norm(p[skuField]) === norm(incoming.sku)));
        if (!product) {
          product = {
            id:uid(), name:incoming.name || `Produto ${platformName} ${incoming.sku || ''}`.trim(), supplier:'', currentCost:0,
            skuMagalu:platform === 'magalu' ? (incoming.sku || '') : '', skuShopee:platform === 'shopee' ? (incoming.sku || '') : '', targetProfit:100, targetMargin:20,
            magaluBaseName:platform === 'magalu' ? (incoming.baseName || incoming.name || '') : '',
            magaluVariationName:platform === 'magalu' ? (incoming.variationName || incoming.sku || '') : '',
            shopeeItemId:platform === 'shopee' ? (incoming.itemId || '') : '',
            shopeeBaseName:platform === 'shopee' ? (incoming.baseName || '') : '',
            shopeeVariationName:platform === 'shopee' ? (incoming.variationName || '') : '',
            externalKey:incoming.externalKey, costHistory:[],
          };
          nextProducts.push(product);
        } else if (!product.externalKey) {
          product.externalKey = incoming.externalKey;
        }
        if (!product[skuField] && incoming.sku) product[skuField] = incoming.sku;
        if (platform === 'magalu') {
          if (incoming.baseName || incoming.name) product.magaluBaseName = incoming.baseName || incoming.name;
          if (incoming.variationName || incoming.sku) product.magaluVariationName = incoming.variationName || incoming.sku;
        }
        if (platform === 'shopee' && !product.shopeeItemId && incoming.itemId) product.shopeeItemId = String(incoming.itemId);
        if (platform === 'shopee') {
          if (incoming.baseName) product.shopeeBaseName = incoming.baseName;
          if (incoming.variationName) product.shopeeVariationName = incoming.variationName;
        }
        productIdByExternal.set(incoming.externalKey, product.id);
      });
      let repairedSupplierCosts = 0;
      let updatedSupplierCosts = 0;
      let preservedSupplierCosts = 0;
      let missingSupplierCosts = 0;
      const importedOrders = (data.orders || []).map((incoming) => {
        const existing = existingOrderById.get(incoming.id);
        const productId = productIdByExternal.get(incoming.externalProductKey) || nextProducts.find((p) =>
          platform === 'shopee' && incoming.variationSku && norm(p.skuShopee) === norm(incoming.variationSku)
        )?.id || existing?.productId;
        const product = nextProducts.find((p) => p.id === productId);
        const quantity = Math.max(1, Number(incoming.quantity) || 1);
        const automaticSupplierCost = product
          ? marketplaceUnitCost(product, incoming.date, platformName, nextProducts) * quantity
          : 0;
        const previousSupplierCost = Number(existing?.supplierCost) || 0;
        const supplierCostManual = existing?.supplierCostManual === true;
        let supplierCost = 0;
        let supplierCostSource = 'missing';

        if (supplierCostManual) {
          supplierCost = previousSupplierCost;
          supplierCostSource = 'manual';
          preservedSupplierCosts += 1;
        } else if (automaticSupplierCost > 0) {
          supplierCost = automaticSupplierCost;
          supplierCostSource = 'product';
          if (previousSupplierCost <= 0) repairedSupplierCosts += 1;
          else if (Math.abs(previousSupplierCost - automaticSupplierCost) > 0.009) updatedSupplierCosts += 1;
        } else if (previousSupplierCost > 0) {
          // A API não fornece custo de compra. Uma sincronização jamais deve apagar
          // um custo válido já salvo no pedido.
          supplierCost = previousSupplierCost;
          supplierCostSource = existing?.supplierCostSource || 'preserved';
          preservedSupplierCosts += 1;
        } else {
          missingSupplierCosts += 1;
        }
        return {
          ...(existing || {}),
          ...incoming,
          productId,
          supplierCost,
          supplierCostManual,
          supplierCostSource,
        };
      }).filter((o) => o.productId);
      const reconciliationByOrder = new Map((data.reconciliations || []).map((entry) => [String(entry.externalOrderId || ''), entry]));
      const reconciledOrders = platform === 'shopee'
        ? orders.map((order) => {
            if (order.source !== 'shopee_api') return order;
            const correction = reconciliationByOrder.get(String(order.externalOrderId || ''));
            return correction ? { ...order, date:correction.date || order.date, paymentDate:correction.paymentDate ?? order.paymentDate, status:correction.status || order.status } : order;
          })
        : orders;
      const replaceImportedPeriod = platform === 'magalu' || (platform === 'shopee' && !orderSyncError);
      const importedSource = `${platform}_api`;
      const ordersToMerge = replaceImportedPeriod
        ? reconciledOrders.filter((o) => !(o.source === importedSource && (o.date || '') >= syncFrom && (o.date || '') <= syncTo))
        : reconciledOrders;
      const orderMap = new Map(ordersToMerge.map((o) => [o.id, o]));
      importedOrders.forEach((o) => orderMap.set(o.id, { ...(orderMap.get(o.id) || {}), ...o }));
      const adsProductIdByExternal = new Map();
      (adsData?.products || []).forEach((incoming) => {
        let product = nextProducts.find((p) => p.externalKey === incoming.externalKey ||
          (incoming.itemId && String(p.shopeeItemId || '') === String(incoming.itemId)) ||
          (incoming.sku && norm(p.skuShopee) === norm(incoming.sku)));
        if (!product) {
          product = {
            id:uid(), name:incoming.name || `Campanha Shopee ${incoming.campaignId || ''}`.trim(), supplier:'', currentCost:0,
            skuMagalu:'', skuShopee:incoming.sku || '', shopeeItemId:incoming.itemId || '', targetProfit:100, targetMargin:20,
            externalKey:incoming.externalKey, costHistory:[],
          };
          nextProducts.push(product);
        }
        if (!product.skuShopee && incoming.sku) product.skuShopee = incoming.sku;
        if (!product.shopeeItemId && incoming.itemId) product.shopeeItemId = String(incoming.itemId);
        adsProductIdByExternal.set(incoming.externalKey, product.id);
      });
      const importedAds = (adsData?.ads || []).map((incoming) => ({
        ...incoming,
        productId:adsProductIdByExternal.get(incoming.externalProductKey),
      })).filter((entry) => entry.productId);
      const adsMap = new Map(ads.map((entry) => [entry.id, entry]));
      importedAds.forEach((entry) => adsMap.set(entry.id, { ...(adsMap.get(entry.id) || {}), ...entry }));
      setProducts(nextProducts);
      setOrders([...orderMap.values()]);
      if (adsData) setAds([...adsMap.values()]);
      await loadConnections();
      const synchronizedOrderCount = new Set(importedOrders.map((order) => order.externalOrderId || order.id)).size;
      const financialText = platform === 'shopee' ? `, ${data.financial_count || 0} com dados financeiros` : '';
      const warningText = (data.warnings || []).length ? ` Atenção: ${(data.warnings || []).length} pedido(s) ainda sem detalhe financeiro; tente sincronizar novamente mais tarde.` : '';
      const catalogText = platform === 'magalu' && Number(data.catalog_count) >= 0
        ? ` ${Number(data.catalog_count) || 0} produto(s) do catálogo disponível(is) para Pedidos e Ads.`
        : '';
      const orderText = orderSyncError
        ? `A sincronização dos pedidos ficou incompleta: ${orderSyncError} ${importedOrders.length} item(ns) foram preservado(s).`
        : `${platform === 'shopee' ? synchronizedOrderCount : (data.raw_order_count || 0)} pedido(s) da ${platformName} conciliado(s)${financialText} e ${importedOrders.length} item(ns) atualizado(s) de ${brDate(syncFrom)} até ${brDate(syncTo)}.${catalogText}`;
      const adsText = platform !== 'shopee' ? '' : adsData
        ? ` Shopee Ads: ${adsData.campaign_count || 0} campanha(s) consultada(s) e ${importedAds.length} resultado(s) diário(s) atualizado(s) até ${brDate(adsData.to)}.`
        : ` Shopee Ads não sincronizou: ${adsSyncError}`;
      const supplierCostText = [
        repairedSupplierCosts ? `${repairedSupplierCosts} preenchido(s)` : '',
        updatedSupplierCosts ? `${updatedSupplierCosts} atualizado(s)` : '',
        preservedSupplierCosts ? `${preservedSupplierCosts} preservado(s)` : '',
        missingSupplierCosts ? `${missingSupplierCosts} ainda sem cadastro` : '',
      ].filter(Boolean).join(', ');
      setConnectionMsg(`${orderText}${adsText}${supplierCostText ? ` Custos de fornecedor: ${supplierCostText}.` : ''}${missingSupplierCosts ? ' Confira somente os itens indicados como sem cadastro em Produtos e custos.' : ''}${warningText}`);
      setTab(orderSyncError && adsSyncError ? 'conexoes' : 'visao');
    } catch (error) {
      setConnectionMsg(error.message || `Não foi possível sincronizar a ${platform === 'shopee' ? 'Shopee' : 'Magalu'}.`);
      setTab('conexoes');
    } finally { setConnectionBusy(''); }
  };

  const costAt = (product, date) => {
    if (!product) return 0;
    const history = Array.isArray(product.costHistory) ? product.costHistory.slice().sort((a, b) => (b.from || '').localeCompare(a.from || '')) : [];
    const found = history.find((h) => !h.from || h.from <= date);
    return found ? Number(found.cost) || 0 : Number(product.currentCost) || 0;
  };
  const marketplaceUnitCost = (product, date, marketplaceName, allProducts = products) => {
    const directCost = costAt(product, date);
    if (directCost > 0 || !product) return directCost;

    // Cada variação continua separada para o ranking, mas pode herdar o custo do
    // cadastro principal do mesmo produto. Isso evita obrigar o preenchimento do
    // mesmo custo em todos os SKUs do Magalu/Shopee.
    const baseName = marketplaceName === 'Magalu'
      ? (product.magaluBaseName || '')
      : marketplaceName === 'Shopee'
        ? (product.shopeeBaseName || '')
        : '';
    if (!baseName) return 0;
    const sibling = allProducts.find((candidate) => {
      if (candidate.id === product.id) return false;
      const candidateBaseName = marketplaceName === 'Magalu'
        ? (candidate.magaluBaseName || '')
        : (candidate.shopeeBaseName || '');
      return norm(candidateBaseName) === norm(baseName) && costAt(candidate, date) > 0;
    });
    return sibling ? costAt(sibling, date) : 0;
  };
  const resultOf = (o) => {
    const valid = MARKETPLACE_STATUS_VALIDOS.has(o.status);
    if (!valid) return { gross:0, net:0, supplier:0, contribution:0 };
    const gross = Number(o.gross) || 0;
    const calculatedNet = gross + (Number(o.subsidies) || 0) - (Number(o.fees) || 0) - (Number(o.shipping) || 0) - (Number(o.discounts) || 0) - (Number(o.refunds) || 0);
    const hasMarketplaceNet = o.financialNet !== null && o.financialNet !== undefined && o.financialNet !== '' && Number.isFinite(Number(o.financialNet));
    const net = hasMarketplaceNet ? Number(o.financialNet) : calculatedNet;
    const supplier = Number(o.supplierCost) || 0;
    return { gross, net, supplier, contribution: net - supplier };
  };
  const inPeriod = (date) => (date || '') >= per.from && (date || '') <= per.to;
  const productGroups = useMemo(() => buildMarketplaceProductGroups(products, marketplace), [products, marketplace]);
  const adProductGroups = useMemo(() => buildMarketplaceProductGroups(products, adDraft.marketplace), [products, adDraft.marketplace]);
  const selectedProductIds = useMemo(() => {
    if (productFilter === 'todos') return null;
    const group = productGroups.find((g) => g.key === productFilter);
    return new Set(group ? group.products.map((p) => p.id) : [productFilter]);
  }, [productFilter, productGroups]);
  const selectedProductGroup = useMemo(() => productGroups.find((g) => g.key === productFilter) || null, [productFilter, productGroups]);
  const selectedShopeeSkus = useMemo(() => new Set((selectedProductGroup?.products || []).map((p) => norm(p.skuShopee)).filter(Boolean)), [selectedProductGroup]);
  useEffect(() => {
    if (productFilter !== 'todos' && !productGroups.some((g) => g.key === productFilter)) setProductFilter('todos');
  }, [productFilter, productGroups]);
  const productGroupKeyByProductId = useMemo(() => {
    const map = new Map();
    productGroups.forEach((group) => group.products.forEach((p) => map.set(p.id, group.key)));
    return map;
  }, [productGroups]);
  const effectiveAds = useMemo(() => {
    const periodOverrides = ads.filter((a) => a.source === 'manual_period_override' && a.periodFrom === per.from && a.periodTo === per.to);
    if (!periodOverrides.length) return ads;
    const overriddenGroups = new Set(periodOverrides.map((a) => a.productGroupKey || productGroupKeyByProductId.get(a.productId)).filter(Boolean));
    return ads.filter((a) => {
      if (a.source === 'manual_period_override') return a.periodFrom === per.from && a.periodTo === per.to;
      if ((a.date || '') < per.from || (a.date || '') > per.to) return true;
      const groupKey = a.productGroupKey || productGroupKeyByProductId.get(a.productId);
      return !groupKey || !overriddenGroups.has(groupKey);
    });
  }, [ads, per, productGroupKeyByProductId]);
  const matchScope = (x) => {
    if (marketplace !== 'todos' && x.marketplace !== marketplace) return false;
    if (!selectedProductIds) return true;
    if (selectedProductGroup && x.productGroupKey === selectedProductGroup.key) return true;
    if (selectedProductIds.has(x.productId)) return true;
    return x.marketplace === 'Shopee' && (
      (selectedProductGroup?.itemId && String(x.itemId || '') === selectedProductGroup.itemId) ||
      (x.variationSku && selectedShopeeSkus.has(norm(x.variationSku)))
    );
  };
  const filteredOrders = useMemo(() => orders.filter((o) => inPeriod(o.date) && matchScope(o)), [orders, per, marketplace, productFilter, selectedProductIds, selectedProductGroup, selectedShopeeSkus]);
  const filteredAds = useMemo(() => effectiveAds.filter((a) => inPeriod(a.date) && matchScope(a)), [effectiveAds, per, marketplace, productFilter, selectedProductIds, selectedProductGroup, selectedShopeeSkus]);
  const validOrders = filteredOrders.filter((o) => MARKETPLACE_STATUS_VALIDOS.has(o.status));
  const summary = useMemo(() => {
    const gross = validOrders.reduce((s, o) => s + (Number(o.gross) || 0), 0);
    const fees = validOrders.reduce((s, o) => s + (Number(o.fees) || 0), 0);
    const shipping = validOrders.reduce((s, o) => s + (Number(o.shipping) || 0), 0);
    const discounts = validOrders.reduce((s, o) => s + (Number(o.discounts) || 0), 0);
    const refunds = validOrders.reduce((s, o) => s + (Number(o.refunds) || 0), 0);
    const subsidies = validOrders.reduce((s, o) => s + (Number(o.subsidies) || 0), 0);
    const net = validOrders.reduce((s, o) => s + resultOf(o).net, 0);
    const supplier = validOrders.reduce((s, o) => s + resultOf(o).supplier, 0);
    const deductions = gross - net;
    const adSpend = filteredAds.reduce((s, a) => s + (Number(a.spend) || 0), 0);
    const attributedOrders = filteredAds.reduce((s, a) => s + (Number(a.attributedOrders) || 0), 0);
    const attributedSales = filteredAds.reduce((s, a) => s + (Number(a.attributedSales) || 0), 0);
    const profit = net - supplier - adSpend;
    return {
      gross, fees, shipping, discounts, refunds, subsidies, deductions, net, supplier, adSpend, profit,
      margin: gross > 0 ? profit / gross : null,
      cpa: attributedOrders > 0 ? adSpend / attributedOrders : null,
      roas: adSpend > 0 ? attributedSales / adSpend : null,
      mer: adSpend > 0 ? gross / adSpend : null,
      attributedOrders, attributedSales,
    };
  }, [filteredOrders, filteredAds]);

  const statusCount = (status) => new Set(filteredOrders
    .filter((o) => status === 'todos' ? true : status === 'validos' ? MARKETPLACE_STATUS_VALIDOS.has(o.status) : o.status === status)
    .map((o) => o.externalOrderId || o.id)).size;
  const productRows = useMemo(() => productGroups.map((group) => {
    const ids = new Set(group.products.map((p) => p.id));
    const groupShopeeSkus = new Set(group.products.map((p) => norm(p.skuShopee)).filter(Boolean));
    const orderBelongsToGroup = (o) => ids.has(o.productId) || (o.marketplace === 'Shopee' && (
      (group.itemId && String(o.itemId || '') === group.itemId) ||
      (o.variationSku && groupShopeeSkus.has(norm(o.variationSku)))
    ));
    const os = orders.filter((o) => inPeriod(o.date) && orderBelongsToGroup(o) && (marketplace === 'todos' || o.marketplace === marketplace));
    const as = effectiveAds.filter((a) => inPeriod(a.date) && (a.productGroupKey === group.key || ids.has(a.productId)) && (marketplace === 'todos' || a.marketplace === marketplace));
    const valid = os.filter((o) => MARKETPLACE_STATUS_VALIDOS.has(o.status));
    const gross = valid.reduce((s, o) => s + (Number(o.gross) || 0), 0);
    const net = valid.reduce((s, o) => s + resultOf(o).net, 0);
    const supplier = valid.reduce((s, o) => s + resultOf(o).supplier, 0);
    const spend = as.reduce((s, a) => s + (Number(a.spend) || 0), 0);
    const attrOrders = as.reduce((s, a) => s + (Number(a.attributedOrders) || 0), 0);
    const attrSales = as.reduce((s, a) => s + (Number(a.attributedSales) || 0), 0);
    const profit = net - supplier - spend;
    const deductions = gross - net;
    const feeRate = gross > 0 ? Math.max(0, Math.min(0.85, deductions / gross)) : null;
    const uniqueOrders = new Set(valid.map((o) => o.externalOrderId || o.id)).size;
    const units = valid.reduce((s, o) => s + (Number(o.quantity) || 1), 0);
    const cpa = attrOrders > 0 ? spend / attrOrders : uniqueOrders > 0 ? spend / uniqueOrders : 0;
    const representative = group.products[0] || {};
    const cost = units > 0 ? supplier / units : group.products.reduce((s, p) => s + (Number(p.currentCost) || 0), 0) / Math.max(1, group.products.length);
    const targetProfit = Number(representative.targetProfit) || 0;
    const targetMargin = (Number(representative.targetMargin) || 0) / 100;
    const byProfit = feeRate == null ? null : (cost + cpa + targetProfit) / Math.max(0.05, 1 - feeRate);
    const byMargin = feeRate == null ? null : (cost + cpa) / Math.max(0.05, 1 - feeRate - targetMargin);
    const variations = group.products.map((p) => {
      const variationOrders = valid.filter((o) => o.marketplace === 'Shopee' && o.variationSku && p.skuShopee
        ? norm(o.variationSku) === norm(p.skuShopee)
        : o.productId === p.id);
      const variationUnits = variationOrders.reduce((s, o) => s + (Number(o.quantity) || 1), 0);
      const variationGross = variationOrders.reduce((s, o) => s + resultOf(o).gross, 0);
      const variationNet = variationOrders.reduce((s, o) => s + resultOf(o).net, 0);
      const variationSupplier = variationOrders.reduce((s, o) => s + resultOf(o).supplier, 0);
      const fallbackVariation = String(p.name || '').includes(' · ') ? String(p.name).split(' · ').slice(1).join(' · ') : (p.skuShopee || p.skuMagalu || 'Padrão');
      return {
        p, name:p.shopeeVariationName || p.magaluVariationName || fallbackVariation, sku:p.skuShopee || p.skuMagalu || '—',
        orders:new Set(variationOrders.map((o) => o.externalOrderId || o.id)).size,
        units:variationUnits, share:units > 0 ? variationUnits / units : 0,
        gross:variationGross, net:variationNet, supplier:variationSupplier,
        profitBeforeAds:variationNet - variationSupplier,
      };
    }).sort((a, b) => b.units - a.units || b.gross - a.gross || String(a.name).localeCompare(String(b.name), 'pt-BR'));
    return {
      groupKey:group.key, group, p:{ ...representative, name:group.name }, units, orders:uniqueOrders,
      gross, net, supplier, spend, profit, margin:gross > 0 ? profit / gross : null,
      cpa:cpa || null, roas:spend > 0 ? attrSales / spend : null,
      minPrice:byProfit == null ? null : Math.max(byProfit, byMargin), feeRate, variations,
      attributedOrders:attrOrders, attributedSales:attrSales,
    };
  }).filter((r) => r.units > 0 || Math.abs(r.gross) > 0.005 || Math.abs(r.net) > 0.005 || Math.abs(r.supplier) > 0.005 || Math.abs(r.spend) > 0.005)
  .filter((r) => {
    if (!search.trim()) return true;
    const needle = norm(search);
    return norm(r.p.name).includes(needle) || r.variations.some((v) => norm(v.name).includes(needle) || norm(v.sku).includes(needle));
  }).sort((a, b) => b.profit - a.profit), [productGroups, orders, effectiveAds, per, marketplace, search]);

  const productName = (id) => products.find((p) => p.id === id)?.name || 'Produto removido';
  const adVariantProducts = adProductGroups.flatMap((group) => group.products);
  const adTargetValue = adDraft.productGroupKey ? `group::${adDraft.productGroupKey}` : adDraft.productId ? `product::${adDraft.productId}` : '';
  const selectAdTarget = (value) => {
    if (value.startsWith('group::')) {
      const key = value.slice(7);
      const group = adProductGroups.find((g) => g.key === key);
      const representative = group?.products?.[0];
      setAdDraft((d) => ({ ...d, productId: representative?.id || '', productGroupKey:group?.key || '', productGroupName:group?.name || '', appliesToGroup:true }));
      return;
    }
    const productId = value.startsWith('product::') ? value.slice(9) : '';
    setAdDraft((d) => ({ ...d, productId, productGroupKey:'', productGroupName:'', appliesToGroup:false }));
  };
  const adProductName = (ad) => ad.productGroupName || productGroups.find((g) => g.key === ad.productGroupKey)?.name || productName(ad.productId);
  const statusLabel = (value) => MARKETPLACE_STATUS.find((s) => s.value === value)?.label || value;
  const tone = (n) => n > 0 ? 'emerald' : n < 0 ? 'rose' : 'slate';

  const selectOrderProduct = (id, date = orderDraft.data, quantity = orderDraft.quantidade) => {
    const p = products.find((x) => x.id === id);
    setOrderDraft((d) => ({ ...d, productId: id, custoFornecedor: p ? String(marketplaceUnitCost(p, date, d.marketplace, products) * (parseInt(quantity, 10) || 1)) : '' }));
  };
  const saveProduct = () => {
    if (!productDraft.nome.trim()) return;
    const currentCost = parseBRL(productDraft.custo);
    const rec = { name: productDraft.nome.trim(), supplier: productDraft.fornecedor.trim(), currentCost, skuMagalu: productDraft.skuMagalu.trim(), skuShopee: productDraft.skuShopee.trim(), targetProfit: parseBRL(productDraft.lucroAlvo), targetMargin: parseBRL(productDraft.margemAlvo) };
    if (editProductId) {
      setProducts((prev) => prev.map((p) => {
        if (p.id !== editProductId) return p;
        let history = Array.isArray(p.costHistory) ? p.costHistory.slice() : [];
        if ((Number(p.currentCost) || 0) !== currentCost) history.push({ id: uid(), from: productDraft.custoDesde || todayISO(), cost: currentCost });
        return { ...p, ...rec, costHistory: history };
      }));
    } else setProducts((prev) => [...prev, { id: uid(), ...rec, costHistory: [{ id: uid(), from: productDraft.custoDesde || todayISO(), cost: currentCost }] }]);
    setProductDraft(blankProduct); setEditProductId(null);
  };
  const editProduct = (p) => {
    setEditProductId(p.id);
    setProductDraft({ nome: p.name || '', fornecedor: p.supplier || '', custo: String(p.currentCost || ''), custoDesde: todayISO(), skuMagalu: p.skuMagalu || '', skuShopee: p.skuShopee || '', lucroAlvo: String(p.targetProfit ?? 100), margemAlvo: String(p.targetMargin ?? 20) });
    setTab('produtos');
  };
  const deleteProduct = (id) => {
    if (orders.some((o) => o.productId === id) || ads.some((a) => a.productId === id)) return;
    setProducts((prev) => prev.filter((p) => p.id !== id));
  };
  const saveOrder = () => {
    if (!orderDraft.productId || (parseBRL(orderDraft.bruto) <= 0 && orderDraft.status !== 'cancelado')) return;
    const quantity = Math.max(1, parseInt(orderDraft.quantidade, 10) || 1);
    const supplierCost = parseBRL(orderDraft.custoFornecedor);
    const product = products.find((p) => p.id === orderDraft.productId);
    const automaticSupplierCost = product
      ? marketplaceUnitCost(product, orderDraft.data, orderDraft.marketplace, products) * quantity
      : 0;
    const supplierCostManual = Math.abs(supplierCost - automaticSupplierCost) > 0.009;
    const rec = { date: orderDraft.data, marketplace: orderDraft.marketplace, productId: orderDraft.productId, status: orderDraft.status, quantity, gross: parseBRL(orderDraft.bruto), fees: parseBRL(orderDraft.taxas), shipping: parseBRL(orderDraft.frete), discounts: parseBRL(orderDraft.descontos), refunds: parseBRL(orderDraft.estornos), subsidies: parseBRL(orderDraft.subsidios), supplierCost, supplierCostManual, supplierCostSource:supplierCostManual ? 'manual' : 'product' };
    if (editOrderId) setOrders((prev) => prev.map((o) => o.id === editOrderId ? { ...o, ...rec } : o));
    else setOrders((prev) => [...prev, { id: uid(), ...rec }]);
    setOrderDraft(blankOrder); setEditOrderId(null);
  };
  const editOrder = (o) => {
    setEditOrderId(o.id); setTab('pedidos');
    setOrderDraft({ data: o.date, marketplace: o.marketplace, productId: o.productId, status: o.status, quantidade: String(o.quantity || 1), bruto: String(o.gross || ''), taxas: String(o.fees || ''), frete: String(o.shipping || ''), descontos: String(o.discounts || ''), estornos: String(o.refunds || ''), subsidios: String(o.subsidies || ''), custoFornecedor: String(o.supplierCost || '') });
  };
  const saveAd = () => {
    const selectedGroup = adDraft.productGroupKey ? adProductGroups.find((g) => g.key === adDraft.productGroupKey) : null;
    const productId = selectedGroup?.products?.[0]?.id || adDraft.productId;
    if (!productId || parseBRL(adDraft.gasto) <= 0) return;
    const rec = {
      date:adDraft.data, marketplace:adDraft.marketplace, productId,
      productGroupKey:selectedGroup?.key || adDraft.productGroupKey || '',
      productGroupName:selectedGroup?.name || adDraft.productGroupName || '',
      appliesToGroup:!!(selectedGroup || adDraft.productGroupKey),
      spend:parseBRL(adDraft.gasto), attributedOrders:parseBRL(adDraft.pedidos), attributedSales:parseBRL(adDraft.vendas),
      impressions:parseBRL(adDraft.impressoes), clicks:parseBRL(adDraft.cliques),
    };
    if (editAdId) setAds((prev) => prev.map((a) => a.id === editAdId ? { ...a, ...rec } : a));
    else setAds((prev) => [...prev, { id: uid(), ...rec }]);
    setAdDraft(blankAd); setEditAdId(null);
  };
  const editAd = (a) => {
    setEditAdId(a.id); setTab('ads');
    setAdDraft({ data:a.date, marketplace:a.marketplace, productId:a.productId, productGroupKey:a.productGroupKey || '', productGroupName:a.productGroupName || '', appliesToGroup:!!a.productGroupKey, gasto:String(a.spend || ''), pedidos:String(a.attributedOrders || ''), vendas:String(a.attributedSales || ''), impressoes:String(a.impressions || ''), cliques:String(a.clicks || '') });
  };
  const saveQuickAd = (row) => {
    if (!quickAdEdit || quickAdEdit.groupKey !== row.groupKey) return;
    const spend = Math.max(0, parseBRL(quickAdEdit.value));
    const product = row.group.products[0];
    if (!product) return;
    const channel = row.group.platform || (marketplace === 'Shopee' ? 'Shopee' : 'Magalu');
    const id = `marketplace-ads-override:${row.groupKey}:${per.from}:${per.to}`;
    const override = {
      id, date:per.to, marketplace:channel, productId:product.id, spend,
      attributedOrders:row.attributedOrders || 0, attributedSales:row.attributedSales || 0,
      impressions:0, clicks:0, source:'manual_period_override',
      periodFrom:per.from, periodTo:per.to, productGroupKey:row.groupKey,
      productGroupName:row.group.name, appliesToGroup:true,
    };
    setAds((prev) => [...prev.filter((a) => {
      if (a.id === id) return false;
      if (a.source !== 'manual_period_override' || a.periodFrom !== per.from || a.periodTo !== per.to) return true;
      const existingGroupKey = a.productGroupKey || productGroupKeyByProductId.get(a.productId);
      return existingGroupKey !== row.groupKey;
    }), override]);
    setQuickAdEdit(null);
  };

  return (
    <div className="space-y-5">
      <div className="flex items-center justify-between gap-3 flex-wrap">
        <div className="flex items-center gap-2 flex-wrap">
          <span className="toolbar-label"><Store size={13} /> Canal</span>
          {['todos', ...MARKETPLACES].map((m) => <button key={m} onClick={() => setMarketplace(m)} className={`px-4 py-2 rounded-lg text-sm font-medium border transition-all shadow-sm ${marketplace === m ? 'bg-[#0f1b31] text-white border-[#0f1b31] shadow-md' : 'bg-white text-slate-700 border-slate-200 hover:border-slate-300 hover:bg-slate-50'}`}>{m === 'todos' ? 'Todos' : m}</button>)}
        </div>
        <select value={productFilter} onChange={(e) => setProductFilter(e.target.value)} className="inp !w-auto min-w-[210px]">
          <option value="todos">Todos os produtos</option>{productGroups.map((g) => <option key={g.key} value={g.key}>{g.name}</option>)}
        </select>
      </div>

      <div className="flex items-center gap-2 flex-wrap">
        {['magalu','shopee'].map((key) => { const c = connections?.[key]; const connected = !!c?.connected; const configured = !!c?.configured; return <button key={key} onClick={() => setTab('conexoes')} className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full border text-xs font-medium ${connected ? 'bg-emerald-50 text-emerald-700 border-emerald-200' : configured ? 'bg-amber-50 text-amber-700 border-amber-200' : 'bg-slate-50 text-slate-600 border-slate-200'}`}><span className={`w-2 h-2 rounded-full ${connected ? 'bg-emerald-500' : configured ? 'bg-amber-500' : 'bg-slate-400'}`} />{key === 'magalu' ? 'Magalu' : 'Shopee'} · {connected ? 'conectada' : configured ? 'aguardando autorização' : 'configurar'}</button>; })}
      </div>

      {connectionMsg && <div className={`rounded-xl border px-4 py-3 text-sm ${/sucesso|salvas|desconectada|consultado|atualizado/i.test(connectionMsg) ? 'bg-emerald-50 border-emerald-200 text-emerald-800' : 'bg-amber-50 border-amber-200 text-amber-800'}`}>{connectionMsg}</div>}

      {marketplace === 'Shopee' && <div className="rounded-xl border border-blue-100 bg-blue-50/70 px-4 py-3 text-xs text-blue-800">
        Para conferir com “Tendência de Métrica” da Shopee, use o mesmo último dia exibido no gráfico. Essa tela pode fechar no dia anterior, enquanto o painel recebe pedidos pagos em tempo real. Pedidos atribuídos aos Ads também podem diferir de pedidos pagos por causa da janela de atribuição da Shopee.
      </div>}

      {selectedProductGroup && <div className="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 flex items-center justify-between gap-3">
        <div><div className="text-xs font-medium text-emerald-700">Métricas do produto selecionado</div><div className="text-sm font-semibold text-emerald-950 mt-0.5">{selectedProductGroup.name}</div></div>
        <button onClick={() => setProductFilter('todos')} className="shrink-0 h-8 px-3 rounded-lg border border-emerald-300 bg-white text-emerald-700 text-xs font-medium hover:bg-emerald-100">Ver todos</button>
      </div>}

      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
        <Kpi icon={<Receipt size={16} />} label="Faturamento bruto" value={brl(summary.gross)} />
        <Kpi icon={<CircleDollarSign size={16} />} label="Receita líquida" value={brl(summary.net)} />
        <Kpi icon={<Package size={16} />} label="Custo fornecedor" value={brl(summary.supplier)} />
        <Kpi icon={<Megaphone size={16} />} label="Investimento Ads" value={brl(summary.adSpend)} />
        <Kpi icon={<Wallet size={16} />} label="Taxas, frete e ajustes" value={brl(summary.deductions)} />
        <Kpi icon={summary.profit >= 0 ? <TrendingUp size={16} /> : <TrendingDown size={16} />} label="Lucro real após Ads" value={brl(summary.profit)} tone={tone(summary.profit)} />
        <Kpi icon={<Percent size={16} />} label="Margem real" value={summary.margin != null ? pct(summary.margin) : '—'} tone={summary.margin != null ? tone(summary.margin) : 'slate'} />
        <Kpi icon={<BarChart3 size={16} />} label="MER total" value={summary.mer != null ? `${num(summary.mer, 2)}x` : '—'} />
      </div>

      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2">
        <MiniStat label="Pedidos lançados" value={num(statusCount('todos'), 0)} />
        <MiniStat label="Pedidos pagos/válidos" value={num(statusCount('validos'), 0)} />
        <MiniStat label="Cancelados" value={num(statusCount('cancelado'), 0)} />
        <MiniStat label="Devolvidos" value={num(statusCount('devolvido'), 0)} tone={statusCount('devolvido') ? 'rose' : 'slate'} />
        <MiniStat label="CPA atribuído" value={summary.cpa != null ? brl(summary.cpa) : '—'} />
        <MiniStat label="ROAS atribuído" value={summary.roas != null ? `${num(summary.roas, 2)}x` : '—'} />
      </div>

      <div className="flex gap-1 border-b border-slate-200 flex-wrap">
        <TabBtn active={tab === 'visao'} onClick={() => setTab('visao')}>Visão geral</TabBtn>
        <TabBtn active={tab === 'conexoes'} onClick={() => setTab('conexoes')}>Conexões</TabBtn>
        <TabBtn active={tab === 'produtos'} onClick={() => setTab('produtos')}>Produtos e custos</TabBtn>
        <TabBtn active={tab === 'pedidos'} onClick={() => setTab('pedidos')}>Pedidos</TabBtn>
        <TabBtn active={tab === 'ads'} onClick={() => setTab('ads')}>Ads</TabBtn>
      </div>

      {tab === 'conexoes' && <div className="space-y-5">
        <div className="grid lg:grid-cols-2 gap-5">
          <ConnectionCard
            name="Magalu"
            status={connections?.magalu}
            icon={<Store size={18} />}
            docsUrl="https://developers.magalu.com/docs/first-steps/create-an-application/create-application/"
            callback={connections?.magalu?.callback_url || 'https://painel.lunacomfort.com.br/api/integracoes/magalu/callback.php'}
            busy={connectionBusy === 'magalu' || connectionBusy === 'sync-magalu'}
            syncing={connectionBusy === 'sync-magalu'}
            onConnect={() => { window.location.href = connections?.magalu?.connect_url || '/api/integracoes/magalu/connect.php'; }}
            onDisconnect={() => disconnectMarketplace('magalu')}
            onSync={() => syncMarketplace('magalu')}
          >
            <Field label="Client ID"><input value={connectionDraft.magaluClientId} onChange={(e) => setConnectionDraft((d) => ({ ...d, magaluClientId:e.target.value }))} placeholder="Gerado pelo ID Magalu" className="inp" autoComplete="off" /></Field>
            <Field label="Client Secret"><input type="password" value={connectionDraft.magaluClientSecret} onChange={(e) => setConnectionDraft((d) => ({ ...d, magaluClientSecret:e.target.value }))} placeholder={connections?.magalu?.configured ? 'Deixe vazio para manter o atual' : 'Cole somente aqui no painel'} className="inp" autoComplete="new-password" /></Field>
            <button onClick={() => saveConnection('magalu')} disabled={connectionBusy === 'magalu' || !connectionDraft.magaluClientId.trim()} className="h-9 px-4 rounded-lg bg-slate-900 text-white text-sm font-medium disabled:opacity-40 flex items-center justify-center gap-2">{connectionBusy === 'magalu' ? <Loader2 size={15} className="animate-spin" /> : <Save size={15} />}Salvar credenciais</button>
          </ConnectionCard>

          <ConnectionCard
            name="Shopee"
            status={connections?.shopee}
            icon={<ShoppingCart size={18} />}
            docsUrl="https://open.shopee.com/developer-guide/12"
            callback={connections?.shopee?.callback_url || 'https://painel.lunacomfort.com.br/api/integracoes/shopee/callback.php'}
            busy={connectionBusy === 'shopee' || connectionBusy === 'sync-shopee'}
            syncing={connectionBusy === 'sync-shopee'}
            onConnect={() => { window.location.href = connections?.shopee?.connect_url || '/api/integracoes/shopee/connect.php'; }}
            onDisconnect={() => disconnectMarketplace('shopee')}
            onSync={() => syncMarketplace('shopee')}
          >
            <Field label="Partner ID"><input value={connectionDraft.shopeePartnerId} onChange={(e) => setConnectionDraft((d) => ({ ...d, shopeePartnerId:e.target.value.replace(/\D/g,'') }))} placeholder="Gerado no Open Platform" inputMode="numeric" className="inp" autoComplete="off" /></Field>
            <Field label="Partner Key"><input type="password" value={connectionDraft.shopeePartnerKey} onChange={(e) => setConnectionDraft((d) => ({ ...d, shopeePartnerKey:e.target.value }))} placeholder={connections?.shopee?.configured ? 'Deixe vazio para manter a atual' : 'Cole somente aqui no painel'} className="inp" autoComplete="new-password" /></Field>
            <button onClick={() => saveConnection('shopee')} disabled={connectionBusy === 'shopee' || !connectionDraft.shopeePartnerId.trim()} className="h-9 px-4 rounded-lg bg-slate-900 text-white text-sm font-medium disabled:opacity-40 flex items-center justify-center gap-2">{connectionBusy === 'shopee' ? <Loader2 size={15} className="animate-spin" /> : <Save size={15} />}Salvar credenciais</button>
          </ConnectionCard>
        </div>

        <Card icon={<ShieldCheck size={16} className="text-emerald-600" />} title="URLs para cadastrar nas plataformas" defaultOpen={true}>
          <div className="p-4 sm:p-5 grid md:grid-cols-2 gap-4 text-sm">
            <div><div className="text-xs font-semibold uppercase tracking-wide text-slate-500 mb-2">Magalu</div><CopyLine label="Callback" value={connections?.magalu?.callback_url || 'https://painel.lunacomfort.com.br/api/integracoes/magalu/callback.php'} /><CopyLine label="Privacidade" value={connections?.privacy_url || 'https://painel.lunacomfort.com.br/privacidade.html'} /><CopyLine label="Termos" value={connections?.terms_url || 'https://painel.lunacomfort.com.br/termos.html'} /></div>
            <div><div className="text-xs font-semibold uppercase tracking-wide text-slate-500 mb-2">Shopee</div><CopyLine label="Redirect URL" value={connections?.shopee?.callback_url || 'https://painel.lunacomfort.com.br/api/integracoes/shopee/callback.php'} /><p className="text-xs text-slate-500 mt-3">Cadastre a aplicação como integração de loja e solicite os módulos de pedidos, produtos e pagamentos.</p></div>
          </div>
        </Card>
        <p className="text-xs text-slate-500 text-center">As chaves e tokens ficam criptografados no servidor e nunca são incluídos no arquivo de dados do painel.</p>
      </div>}

      {tab === 'visao' && <Card icon={<BarChart3 size={16} className="text-emerald-600" />} title={`Resultado por produto · ${per.label}`} defaultOpen={true}>
        <div className="p-4 sm:p-5 border-b border-slate-100"><div className="relative max-w-sm"><Search size={15} className="absolute left-3 top-2.5 text-slate-400" /><input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Buscar produto ou SKU" className="inp !pl-9" /></div></div>
        {productRows.length === 0 ? <EmptyMarket text="Nenhum produto com vendas ou investimento em Ads neste período." /> : <div className="overflow-x-auto"><table className="w-full text-sm min-w-[1120px]">
          <thead><tr className="text-left text-xs text-slate-500 uppercase tracking-wide border-b border-slate-100"><th className="px-4 sm:px-5 py-2.5 font-medium">Produto</th><th className="px-3 py-2.5 font-medium text-right">Unid.</th><th className="px-3 py-2.5 font-medium text-right">Faturamento</th><th className="px-3 py-2.5 font-medium text-right">Líquido</th><th className="px-3 py-2.5 font-medium text-right">Fornecedor</th><th className="px-3 py-2.5 font-medium text-right">Ads</th><th className="px-3 py-2.5 font-medium text-right">CPA</th><th className="px-3 py-2.5 font-medium text-right">ROAS</th><th className="px-3 py-2.5 font-medium text-right">Lucro</th><th className="px-3 py-2.5 font-medium text-right">Margem</th><th className="px-4 sm:px-5 py-2.5 font-medium text-right">Preço mínimo</th></tr></thead>
          <tbody className="divide-y divide-slate-100">{productRows.map((r) => <Fragment key={r.groupKey}>
            <tr className={`cursor-pointer ${productFilter === r.groupKey ? 'bg-emerald-50/70 hover:bg-emerald-50' : 'hover:bg-slate-50/60'}`} onClick={() => { setProductFilter(r.groupKey); setExpandedProductGroup((current) => current === r.groupKey ? null : r.groupKey); }}>
              <td className="px-4 sm:px-5 py-3"><div className="flex items-start gap-2"><span className="mt-0.5 text-slate-400">{expandedProductGroup === r.groupKey ? <ChevronDown size={16} /> : <ChevronRight size={16} />}</span><div><div className="font-medium text-slate-800">{r.p.name}</div><div className="text-xs text-slate-400">{r.group.platform || 'Produto'}{r.group.itemId ? ` · item ${r.group.itemId}` : ''} · {r.variations.length} {r.variations.length === 1 ? 'variação' : 'variações'} · clique para detalhar</div></div></div></td>
              <td className="px-3 py-3 text-right tabular-nums">{r.units}</td><td className="px-3 py-3 text-right tabular-nums">{brl(r.gross)}</td><td className="px-3 py-3 text-right tabular-nums">{brl(r.net)}</td><td className="px-3 py-3 text-right tabular-nums text-slate-500">{brl(r.supplier)}</td>
              <td className="px-2 py-2 text-right tabular-nums" onClick={(e) => e.stopPropagation()}>
                {quickAdEdit?.groupKey === r.groupKey ? <div className="flex items-center justify-end gap-1">
                  <input autoFocus value={quickAdEdit.value} onChange={(e) => setQuickAdEdit({ groupKey:r.groupKey, value:e.target.value })} onKeyDown={(e) => { if (e.key === 'Enter') saveQuickAd(r); if (e.key === 'Escape') setQuickAdEdit(null); }} inputMode="decimal" className="w-20 h-8 px-2 rounded-lg border border-emerald-300 bg-white text-right text-xs outline-none focus:ring-2 focus:ring-emerald-100" aria-label={`Editar Ads de ${r.p.name}`} />
                  <button onClick={() => saveQuickAd(r)} className="w-8 h-8 rounded-lg bg-emerald-600 text-white inline-flex items-center justify-center" title="Salvar Ads"><Check size={14} /></button>
                  <button onClick={() => setQuickAdEdit(null)} className="w-8 h-8 rounded-lg border border-slate-200 bg-white text-slate-500 inline-flex items-center justify-center" title="Cancelar"><X size={14} /></button>
                </div> : <button onClick={() => setQuickAdEdit({ groupKey:r.groupKey, value:num(r.spend, 2) })} className="group/ads inline-flex items-center justify-end gap-1.5 rounded-lg px-2 py-1.5 hover:bg-emerald-50 hover:text-emerald-700" title="Editar Ads neste período"><span>{brl(r.spend)}</span><Pencil size={12} className="text-slate-300 group-hover/ads:text-emerald-600" /></button>}
              </td>
              <td className="px-3 py-3 text-right tabular-nums">{r.cpa != null ? brl(r.cpa) : '—'}</td><td className="px-3 py-3 text-right tabular-nums">{r.roas != null ? `${num(r.roas, 2)}x` : '—'}</td><td className={`px-3 py-3 text-right tabular-nums font-semibold ${r.profit > 0 ? 'text-emerald-600' : r.profit < 0 ? 'text-rose-600' : ''}`}>{brl(r.profit)}</td><td className="px-3 py-3 text-right tabular-nums">{r.margin != null ? pct(r.margin) : '—'}</td><td className="px-4 sm:px-5 py-3 text-right tabular-nums font-medium">{r.minPrice != null ? brl(r.minPrice) : '—'}</td>
            </tr>
            {expandedProductGroup === r.groupKey && <tr className="bg-slate-50/80"><td colSpan={11} className="px-5 py-4"><div className="rounded-xl border border-slate-200 bg-white overflow-hidden"><div className="px-4 py-3 border-b border-slate-100"><div className="font-semibold text-slate-800">Ranking das variações</div><div className="text-xs text-slate-500 mt-0.5">Ordenado por unidades vendidas. Ads permanece no produto principal porque {r.group.platform === 'Magalu' ? 'a Magalu' : 'a Shopee'} não informa um rateio confiável por variação.</div></div><div className="overflow-x-auto"><table className="w-full text-xs min-w-[920px]"><thead><tr className="text-left uppercase tracking-wide text-slate-500 border-b border-slate-100"><th className="px-4 py-2.5">#</th><th className="px-3 py-2.5">Variação</th><th className="px-3 py-2.5">SKU</th><th className="px-3 py-2.5 text-right">Pedidos</th><th className="px-3 py-2.5 text-right">Unid.</th><th className="px-3 py-2.5 text-right">Participação</th><th className="px-3 py-2.5 text-right">Faturamento</th><th className="px-3 py-2.5 text-right">Líquido</th><th className="px-3 py-2.5 text-right">Fornecedor</th><th className="px-4 py-2.5 text-right">Lucro antes Ads</th></tr></thead><tbody className="divide-y divide-slate-100">{r.variations.map((v, index) => <tr key={v.p.id} className={index === 0 && v.units > 0 ? 'bg-emerald-50/40' : ''}><td className="px-4 py-2.5"><span className={`inline-flex w-6 h-6 items-center justify-center rounded-full font-semibold ${index === 0 && v.units > 0 ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-500'}`}>{index + 1}</span></td><td className="px-3 py-2.5 font-medium text-slate-800">{v.name}</td><td className="px-3 py-2.5 font-mono text-slate-500">{v.sku}</td><td className="px-3 py-2.5 text-right tabular-nums">{v.orders}</td><td className="px-3 py-2.5 text-right tabular-nums font-semibold">{v.units}</td><td className="px-3 py-2.5 text-right tabular-nums">{pct(v.share)}</td><td className="px-3 py-2.5 text-right tabular-nums">{brl(v.gross)}</td><td className="px-3 py-2.5 text-right tabular-nums">{brl(v.net)}</td><td className="px-3 py-2.5 text-right tabular-nums text-slate-500">{brl(v.supplier)}</td><td className={`px-4 py-2.5 text-right tabular-nums font-semibold ${v.profitBeforeAds > 0 ? 'text-emerald-600' : v.profitBeforeAds < 0 ? 'text-rose-600' : ''}`}>{brl(v.profitBeforeAds)}</td></tr>)}</tbody></table></div></div></td></tr>}
          </Fragment>)}</tbody>
        </table></div>}
      </Card>}

      {tab === 'produtos' && <div className="space-y-5"><Card icon={<Package size={16} className="text-slate-600" />} title={editProductId ? 'Editar produto' : 'Cadastrar produto mestre'} defaultOpen={true}>
        <div className="p-4 sm:p-5"><div className="grid grid-cols-2 lg:grid-cols-4 gap-3 items-end">
          <Field label="Produto" className="col-span-2"><input value={productDraft.nome} onChange={(e) => setProductDraft((d) => ({ ...d, nome: e.target.value }))} placeholder="Ex.: Cabeceira Casal Capitonê" className="inp" /></Field>
          <Field label="Fornecedor"><input value={productDraft.fornecedor} onChange={(e) => setProductDraft((d) => ({ ...d, fornecedor: e.target.value }))} placeholder="Nome do fornecedor" className="inp" /></Field>
          <Field label="Custo atual"><input value={productDraft.custo} onChange={(e) => setProductDraft((d) => ({ ...d, custo: e.target.value }))} placeholder="0,00" inputMode="decimal" className="inp" /></Field>
          <Field label="Custo válido desde"><input type="date" value={productDraft.custoDesde} onChange={(e) => setProductDraft((d) => ({ ...d, custoDesde: e.target.value }))} className="inp" /></Field>
          <Field label="SKU Magalu"><input value={productDraft.skuMagalu} onChange={(e) => setProductDraft((d) => ({ ...d, skuMagalu: e.target.value }))} placeholder="Opcional" className="inp" /></Field>
          <Field label="SKU Shopee"><input value={productDraft.skuShopee} onChange={(e) => setProductDraft((d) => ({ ...d, skuShopee: e.target.value }))} placeholder="Opcional" className="inp" /></Field>
          <div className="grid grid-cols-2 gap-2"><Field label="Lucro alvo"><input value={productDraft.lucroAlvo} onChange={(e) => setProductDraft((d) => ({ ...d, lucroAlvo: e.target.value }))} inputMode="decimal" className="inp" /></Field><Field label="Margem alvo %"><input value={productDraft.margemAlvo} onChange={(e) => setProductDraft((d) => ({ ...d, margemAlvo: e.target.value }))} inputMode="decimal" className="inp" /></Field></div>
        </div><div className="flex gap-2 mt-4"><button onClick={saveProduct} disabled={!productDraft.nome.trim()} className="h-9 px-4 rounded-lg bg-slate-900 text-white text-sm font-medium disabled:opacity-40 flex items-center gap-1.5">{editProductId ? <Check size={15} /> : <Plus size={15} />}{editProductId ? 'Salvar alterações' : 'Cadastrar produto'}</button>{editProductId && <button onClick={() => { setEditProductId(null); setProductDraft(blankProduct); }} className="h-9 px-3 rounded-lg border border-slate-300 bg-white text-slate-600 text-sm">Cancelar</button>}</div></div>
      </Card>
      <Card icon={<FileText size={16} className="text-slate-600" />} title="Produtos cadastrados" defaultOpen={true}>{products.length === 0 ? <EmptyMarket text="Nenhum produto cadastrado." /> : <div className="overflow-x-auto"><table className="w-full text-sm min-w-[780px]"><thead><tr className="text-left text-xs text-slate-500 uppercase tracking-wide border-b border-slate-100"><th className="px-4 sm:px-5 py-2.5 font-medium">Produto</th><th className="px-3 py-2.5 font-medium">Fornecedor</th><th className="px-3 py-2.5 font-medium">SKUs</th><th className="px-3 py-2.5 font-medium text-right">Custo atual</th><th className="px-3 py-2.5 font-medium">Histórico</th><th className="px-4 sm:px-5 py-2.5"></th></tr></thead><tbody className="divide-y divide-slate-100">{products.map((p) => <tr key={p.id}><td className="px-4 sm:px-5 py-3 font-medium">{p.name}</td><td className="px-3 py-3 text-slate-500">{p.supplier || '—'}</td><td className="px-3 py-3 text-xs text-slate-500">M: {p.skuMagalu || '—'} · S: {p.skuShopee || '—'}</td><td className="px-3 py-3 text-right tabular-nums">{brl(p.currentCost)}</td><td className="px-3 py-3 text-xs text-slate-500">{(p.costHistory || []).slice().sort((a, b) => (b.from || '').localeCompare(a.from || '')).slice(0, 3).map((h) => `${brDate(h.from)}: ${brl(h.cost)}`).join(' · ') || '—'}</td><td className="px-4 sm:px-5 py-3 text-right"><div className="flex justify-end gap-2"><button onClick={() => editProduct(p)} className="text-slate-400 hover:text-slate-700" aria-label="Editar produto"><Pencil size={15} /></button><button onClick={() => deleteProduct(p.id)} disabled={orders.some((o) => o.productId === p.id) || ads.some((a) => a.productId === p.id)} className="text-slate-300 hover:text-rose-500 disabled:opacity-30" title="Produtos com lançamentos não podem ser excluídos" aria-label="Excluir produto"><Trash2 size={15} /></button></div></td></tr>)}</tbody></table></div>}</Card></div>}

      {tab === 'pedidos' && <div className="space-y-5"><Card icon={<ShoppingCart size={16} className="text-emerald-600" />} title={editOrderId ? 'Editar pedido' : 'Lançar pedido'} defaultOpen={true}>
        <div className="p-4 sm:p-5"><div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 items-end">
          <Field label="Data"><input type="date" value={orderDraft.data} onChange={(e) => { const date = e.target.value; setOrderDraft((d) => ({ ...d, data: date })); if (orderDraft.productId) selectOrderProduct(orderDraft.productId, date); }} className="inp" /></Field><Field label="Marketplace"><select value={orderDraft.marketplace} onChange={(e) => setOrderDraft((d) => ({ ...d, marketplace: e.target.value }))} className="inp">{MARKETPLACES.map((m) => <option key={m}>{m}</option>)}</select></Field>
          <Field label="Produto" className="col-span-2"><select value={orderDraft.productId} onChange={(e) => selectOrderProduct(e.target.value)} className="inp"><option value="">Selecione…</option>{products.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}</select></Field><Field label="Status"><select value={orderDraft.status} onChange={(e) => setOrderDraft((d) => ({ ...d, status: e.target.value }))} className="inp">{MARKETPLACE_STATUS.map((s) => <option key={s.value} value={s.value}>{s.label}</option>)}</select></Field><Field label="Quantidade"><input value={orderDraft.quantidade} onChange={(e) => { const quantity = e.target.value; setOrderDraft((d) => ({ ...d, quantidade: quantity })); if (orderDraft.productId && !editOrderId) selectOrderProduct(orderDraft.productId, orderDraft.data, quantity); }} inputMode="numeric" className="inp" /></Field>
          <Field label="Venda bruta"><input value={orderDraft.bruto} onChange={(e) => setOrderDraft((d) => ({ ...d, bruto: e.target.value }))} inputMode="decimal" placeholder="0,00" className="inp" /></Field><Field label="Comissão + taxas"><input value={orderDraft.taxas} onChange={(e) => setOrderDraft((d) => ({ ...d, taxas: e.target.value }))} inputMode="decimal" placeholder="0,00" className="inp" /></Field><Field label="Frete / coparticipação"><input value={orderDraft.frete} onChange={(e) => setOrderDraft((d) => ({ ...d, frete: e.target.value }))} inputMode="decimal" placeholder="0,00" className="inp" /></Field><Field label="Descontos seus"><input value={orderDraft.descontos} onChange={(e) => setOrderDraft((d) => ({ ...d, descontos: e.target.value }))} inputMode="decimal" placeholder="0,00" className="inp" /></Field><Field label="Estorno / reembolso"><input value={orderDraft.estornos} onChange={(e) => setOrderDraft((d) => ({ ...d, estornos: e.target.value }))} inputMode="decimal" placeholder="0,00" className="inp" /></Field><Field label="Subsídios recebidos"><input value={orderDraft.subsidios} onChange={(e) => setOrderDraft((d) => ({ ...d, subsidios: e.target.value }))} inputMode="decimal" placeholder="0,00" className="inp" /></Field><Field label="Custo fornecedor (total)"><input value={orderDraft.custoFornecedor} onChange={(e) => setOrderDraft((d) => ({ ...d, custoFornecedor: e.target.value }))} inputMode="decimal" placeholder="0,00" className="inp" /></Field>
          <button onClick={saveOrder} disabled={!orderDraft.productId || (parseBRL(orderDraft.bruto) <= 0 && orderDraft.status !== 'cancelado')} className="h-[38px] rounded-lg bg-emerald-600 text-white text-sm font-medium disabled:opacity-40 flex items-center justify-center gap-1.5">{editOrderId ? <Check size={15} /> : <Plus size={15} />}{editOrderId ? 'Salvar' : 'Adicionar'}</button>
        </div>{editOrderId && <button onClick={() => { setEditOrderId(null); setOrderDraft(blankOrder); }} className="text-xs text-slate-500 mt-3">Cancelar edição</button>}<p className="text-xs text-slate-400 mt-3">Use os valores efetivamente cobrados no pedido. O custo do fornecedor é preenchido pelo histórico do produto e pode ser corrigido.</p></div>
      </Card><Card icon={<Receipt size={16} className="text-slate-600" />} title={`Pedidos · ${per.label}`} defaultOpen={true}>{filteredOrders.length === 0 ? <EmptyMarket text="Nenhum pedido neste período e filtro." /> : <div className="overflow-x-auto"><table className="w-full text-sm min-w-[980px]"><thead><tr className="text-left text-xs text-slate-500 uppercase tracking-wide border-b border-slate-100"><th className="px-4 sm:px-5 py-2.5">Data</th><th className="px-3 py-2.5">Canal</th><th className="px-3 py-2.5">Produto</th><th className="px-3 py-2.5">Status</th><th className="px-3 py-2.5 text-right">Bruto</th><th className="px-3 py-2.5 text-right">Deduções</th><th className="px-3 py-2.5 text-right">Líquido</th><th className="px-3 py-2.5 text-right">Fornecedor</th><th className="px-4 sm:px-5 py-2.5 text-right"></th></tr></thead><tbody className="divide-y divide-slate-100">{filteredOrders.slice().sort((a, b) => (b.date || '').localeCompare(a.date || '')).map((o) => { const r = resultOf(o); const ded = (Number(o.fees) || 0) + (Number(o.shipping) || 0) + (Number(o.discounts) || 0) + (Number(o.refunds) || 0) - (Number(o.subsidies) || 0); return <tr key={o.id}><td className="px-4 sm:px-5 py-3 tabular-nums">{brDate(o.date)}</td><td className="px-3 py-3">{o.marketplace}</td><td className="px-3 py-3 font-medium">{productName(o.productId)}{o.quantity > 1 && <span className="text-slate-400"> × {o.quantity}</span>}</td><td className="px-3 py-3"><span className={`px-2 py-1 rounded-full text-xs ${o.status === 'cancelado' || o.status === 'devolvido' ? 'bg-rose-50 text-rose-700' : 'bg-emerald-50 text-emerald-700'}`}>{statusLabel(o.status)}</span></td><td className="px-3 py-3 text-right tabular-nums">{brl(r.gross)}</td><td className="px-3 py-3 text-right tabular-nums text-slate-500">{brl(ded)}</td><td className={`px-3 py-3 text-right tabular-nums ${r.net < 0 ? 'text-rose-600' : ''}`}>{brl(r.net)}</td><td className="px-3 py-3 text-right tabular-nums">{brl(r.supplier)}</td><td className="px-4 sm:px-5 py-3"><div className="flex justify-end gap-2"><button onClick={() => editOrder(o)} className="text-slate-400 hover:text-slate-700" aria-label="Editar pedido"><Pencil size={15} /></button><button onClick={() => setOrders((prev) => prev.filter((x) => x.id !== o.id))} className="text-slate-300 hover:text-rose-500" aria-label="Excluir pedido"><Trash2 size={15} /></button></div></td></tr>; })}</tbody></table></div>}</Card></div>}

      {tab === 'ads' && <div className="space-y-5"><Card icon={<Megaphone size={16} className="text-amber-500" />} title={editAdId ? 'Editar gasto de Ads' : 'Lançar Ads por produto'} defaultOpen={true}>
        <div className="p-4 sm:p-5">
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 items-end">
            <Field label="Data"><input type="date" value={adDraft.data} onChange={(e) => setAdDraft((d) => ({ ...d, data:e.target.value }))} className="inp" /></Field>
            <Field label="Marketplace"><select value={adDraft.marketplace} onChange={(e) => setAdDraft((d) => ({ ...d, marketplace:e.target.value, productId:'', productGroupKey:'', productGroupName:'', appliesToGroup:false }))} className="inp">{MARKETPLACES.map((m) => <option key={m}>{m}</option>)}</select></Field>
            <Field label="Produto anunciado" className="col-span-2">
              <select value={adTargetValue} onChange={(e) => selectAdTarget(e.target.value)} className="inp">
                <option value="">Selecione…</option>
                <optgroup label="Produto completo — todas as variações">{adProductGroups.map((group) => <option key={`group-${group.key}`} value={`group::${group.key}`}>{group.name} · {group.products.length} {group.products.length === 1 ? 'variação' : 'variações'}</option>)}</optgroup>
                <optgroup label="Variação específica">{adVariantProducts.map((p) => <option key={`product-${p.id}`} value={`product::${p.id}`}>{p.name}</option>)}</optgroup>
              </select>
            </Field>
            <Field label="Investimento"><input value={adDraft.gasto} onChange={(e) => setAdDraft((d) => ({ ...d, gasto:e.target.value }))} inputMode="decimal" placeholder="0,00" className="inp" /></Field>
            <Field label="Pedidos atribuídos"><input value={adDraft.pedidos} onChange={(e) => setAdDraft((d) => ({ ...d, pedidos:e.target.value }))} inputMode="numeric" placeholder="0" className="inp" /></Field>
            <Field label="Vendas atribuídas"><input value={adDraft.vendas} onChange={(e) => setAdDraft((d) => ({ ...d, vendas:e.target.value }))} inputMode="decimal" placeholder="0,00" className="inp" /></Field>
            <Field label="Impressões"><input value={adDraft.impressoes} onChange={(e) => setAdDraft((d) => ({ ...d, impressoes:e.target.value }))} inputMode="numeric" placeholder="Opcional" className="inp" /></Field>
            <Field label="Cliques"><input value={adDraft.cliques} onChange={(e) => setAdDraft((d) => ({ ...d, cliques:e.target.value }))} inputMode="numeric" placeholder="Opcional" className="inp" /></Field>
            <button onClick={saveAd} disabled={!adTargetValue || parseBRL(adDraft.gasto) <= 0} className="h-[38px] rounded-lg bg-slate-900 text-white text-sm font-medium disabled:opacity-40 flex items-center justify-center gap-1.5">{editAdId ? <Check size={15} /> : <Plus size={15} />}{editAdId ? 'Salvar' : 'Adicionar'}</button>
          </div>
          {editAdId && <button onClick={() => { setEditAdId(null); setAdDraft(blankAd); }} className="text-xs text-slate-500 mt-3">Cancelar edição</button>}
          <p className="text-xs text-slate-400 mt-3">Escolha “Produto completo” para lançar uma única campanha com todas as cores e variações, como no Magalu Ads. O gasto entra apenas uma vez no produto principal. Use “Variação específica” somente quando o relatório separar o investimento por SKU. Se um produto novo não aparecer, vá em Conexões e clique em “Sincronizar agora” para atualizar o catálogo completo.</p>
        </div>
      </Card>
      <Card icon={<BarChart3 size={16} className="text-slate-600" />} title={`Ads · ${per.label}`} defaultOpen={true}>
        {filteredAds.length === 0 ? <EmptyMarket text="Nenhum investimento em Ads neste período e filtro." /> : <div className="overflow-x-auto">
          <table className="w-full text-sm min-w-[860px]">
            <thead><tr className="text-left text-xs text-slate-500 uppercase tracking-wide border-b border-slate-100"><th className="px-4 sm:px-5 py-2.5">Data</th><th className="px-3 py-2.5">Canal</th><th className="px-3 py-2.5">Produto</th><th className="px-3 py-2.5 text-right">Gasto</th><th className="px-3 py-2.5 text-right">Pedidos</th><th className="px-3 py-2.5 text-right">CPA</th><th className="px-3 py-2.5 text-right">Vendas</th><th className="px-3 py-2.5 text-right">ROAS</th><th className="px-4 sm:px-5 py-2.5"></th></tr></thead>
            <tbody className="divide-y divide-slate-100">{filteredAds.slice().sort((a, b) => (b.date || '').localeCompare(a.date || '')).map((a) => <tr key={a.id}>
              <td className="px-4 sm:px-5 py-3">{brDate(a.date)}</td><td className="px-3 py-3">{a.marketplace}</td>
              <td className="px-3 py-3 font-medium"><span>{adProductName(a)}</span>{a.productGroupKey && <span className="ml-2 inline-flex rounded-full bg-emerald-50 border border-emerald-100 px-2 py-0.5 text-[10px] font-medium text-emerald-700">Todas as variações</span>}</td>
              <td className="px-3 py-3 text-right tabular-nums">{brl(a.spend)}</td><td className="px-3 py-3 text-right tabular-nums">{num(a.attributedOrders, 0)}</td><td className="px-3 py-3 text-right tabular-nums">{a.attributedOrders > 0 ? brl(a.spend / a.attributedOrders) : '—'}</td><td className="px-3 py-3 text-right tabular-nums">{brl(a.attributedSales)}</td><td className="px-3 py-3 text-right tabular-nums">{a.spend > 0 ? `${num(a.attributedSales / a.spend, 2)}x` : '—'}</td>
              <td className="px-4 sm:px-5 py-3"><div className="flex justify-end gap-2"><button onClick={() => editAd(a)} className="text-slate-400 hover:text-slate-700" aria-label="Editar Ads"><Pencil size={15} /></button><button onClick={() => setAds((prev) => prev.filter((x) => x.id !== a.id))} className="text-slate-300 hover:text-rose-500" aria-label="Excluir Ads"><Trash2 size={15} /></button></div></td>
            </tr>)}</tbody>
          </table>
        </div>}
      </Card></div>}

      <p className="text-center text-xs text-slate-400 pb-4">Receita líquida = venda + subsídios − taxas − frete − descontos − estornos · Lucro real = receita líquida − fornecedor − Ads · Margem = lucro ÷ faturamento bruto. Os lançamentos são salvos automaticamente no banco.</p>
    </div>
  );
}

function ConnectionCard({ name, status, icon, docsUrl, callback, busy, syncing, onConnect, onDisconnect, onSync, children }) {
  const connected = !!status?.connected;
  const configured = !!status?.configured;
  const label = connected ? 'Conectada' : configured ? 'Credenciais salvas' : 'Não configurada';
  return <section className="bg-white border border-[#e4e9f0] rounded-xl shadow-sm overflow-hidden">
    <div className="p-4 sm:p-5 border-b border-slate-100 flex items-start justify-between gap-3">
      <div className="flex items-center gap-3"><div className={`w-10 h-10 rounded-xl flex items-center justify-center ${connected ? 'bg-emerald-50 text-emerald-600' : 'bg-slate-100 text-slate-600'}`}>{icon}</div><div><h3 className="font-semibold text-slate-900">{name}</h3><div className={`text-xs mt-0.5 ${connected ? 'text-emerald-600' : configured ? 'text-amber-600' : 'text-slate-500'}`}>{label}{status?.account_id ? ` · ID ${status.account_id}` : ''}</div></div></div>
      <a href={docsUrl} target="_blank" rel="noreferrer" className="text-xs text-slate-500 hover:text-slate-800 inline-flex items-center gap-1">Criar aplicação <ExternalLink size={12} /></a>
    </div>
    <div className="p-4 sm:p-5 space-y-3">
      {children}
      <div className="pt-2 border-t border-slate-100"><div className="text-[11px] text-slate-500 mb-1">URL de retorno</div><div className="font-mono text-[11px] leading-relaxed text-slate-600 break-all bg-slate-50 rounded-lg p-2">{callback}</div></div>
      {status?.last_error && <div className="text-xs text-rose-700 bg-rose-50 border border-rose-100 rounded-lg p-2.5">{status.last_error}</div>}
      <div className="flex gap-2 pt-1">
        {!connected ? <button onClick={onConnect} disabled={!configured || busy} className="h-9 px-4 rounded-lg bg-emerald-600 text-white text-sm font-medium disabled:opacity-40 inline-flex items-center gap-2"><Link2 size={15} />Autorizar loja</button> : <button onClick={onDisconnect} disabled={busy} className="h-9 px-4 rounded-lg border border-rose-200 bg-white text-rose-600 text-sm font-medium disabled:opacity-40">Desconectar</button>}
        {connected && onSync && <button onClick={onSync} disabled={busy || syncing} className="h-9 px-4 rounded-lg bg-slate-900 text-white text-sm font-medium disabled:opacity-40 inline-flex items-center gap-2">{syncing ? <Loader2 size={15} className="animate-spin" /> : <RefreshCw size={15} />}Sincronizar agora</button>}
        {connected && <span className="h-9 px-3 rounded-lg bg-emerald-50 text-emerald-700 text-xs font-medium inline-flex items-center gap-1.5"><Check size={14} />Autorização ativa</span>}
      </div>
    </div>
  </section>;
}

function CopyLine({ label, value }) {
  const [copied, setCopied] = useState(false);
  const copy = async () => { try { await navigator.clipboard.writeText(value); setCopied(true); window.setTimeout(() => setCopied(false), 1400); } catch { /* navegador bloqueou */ } };
  return <div className="mb-2"><div className="text-[11px] text-slate-500 mb-1">{label}</div><div className="flex items-center gap-2"><code className="flex-1 text-[11px] break-all bg-slate-50 border border-slate-100 rounded-lg p-2 text-slate-600">{value}</code><button onClick={copy} className="w-8 h-8 shrink-0 rounded-lg border border-slate-200 text-slate-500 hover:text-slate-900 flex items-center justify-center" aria-label={`Copiar ${label}`}>{copied ? <Check size={14} className="text-emerald-600" /> : <Copy size={14} />}</button></div></div>;
}

function EmptyMarket({ text }) {
  return <div className="p-8 text-center text-slate-500 text-sm">{text}</div>;
}

function Card({ id, icon, title, right, children, defaultOpen = false, onMoveUp, onMoveDown }) {
  const [open, setOpen] = useState(defaultOpen);
  const showMove = onMoveUp !== undefined || onMoveDown !== undefined;
  return (
    <section id={id} className="bg-white border border-[#e4e9f0] rounded-xl shadow-[0_1px_2px_rgba(15,23,42,.03),0_5px_18px_rgba(15,23,42,.025)] overflow-hidden scroll-mt-24">
      <div className={`px-4 sm:px-5 ${open ? 'py-3.5 border-b border-slate-100' : 'py-3'} flex items-center justify-between gap-3 hover:bg-slate-50/55 transition-colors`}>
        <div className="flex items-center gap-2 min-w-0">
          {showMove && (
            <span className="flex flex-col shrink-0 -my-1">
              <button onClick={onMoveUp || undefined} disabled={!onMoveUp} className="text-slate-300 hover:text-slate-600 disabled:opacity-25 disabled:hover:text-slate-300 leading-none" aria-label="Mover bloco para cima"><ChevronUp size={14} /></button>
              <button onClick={onMoveDown || undefined} disabled={!onMoveDown} className="text-slate-300 hover:text-slate-600 disabled:opacity-25 disabled:hover:text-slate-300 leading-none" aria-label="Mover bloco para baixo"><ChevronDown size={14} /></button>
            </span>
          )}
          <button onClick={() => setOpen((o) => !o)} className="flex items-center gap-2.5 min-w-0 text-left group">
            <ChevronDown size={15} className={`text-slate-400 transition-transform ${open ? '' : '-rotate-90'}`} />
            <span className="shrink-0">{icon}</span><h2 className="font-semibold text-[14px] text-slate-800 truncate group-hover:text-slate-950">{title}</h2>
          </button>
        </div>
        {right && <div className="shrink-0">{right}</div>}
      </div>
      {open && <div className="bg-white">{children}</div>}
    </section>
  );
}
function TabBtn({ active, onClick, children }) {
  return <button onClick={onClick} className={`px-4 py-3 text-sm font-medium -mb-px border-b-2 transition-all flex items-center ${active ? 'border-emerald-500 text-emerald-700' : 'border-transparent text-slate-500 hover:text-slate-800 hover:border-slate-200'}`}>{children}</button>;
}
function Kpi({ icon, label, value, tone, onClick, hint }) {
  const tones = { slate: 'text-slate-900', emerald: 'text-emerald-600', rose: 'text-rose-600' };
  const accent = label.includes('Faturamento financeiro') ? 'bg-blue-50 text-blue-600 ring-blue-100'
    : label.includes('Recebido') ? 'bg-emerald-50 text-emerald-600 ring-emerald-100'
    : label.includes('Lucro loja') ? 'bg-emerald-50 text-emerald-600 ring-emerald-100'
    : label.includes('Faturamento previsto') ? 'bg-violet-50 text-violet-600 ring-violet-100'
    : label.includes('Lucro previsto') ? 'bg-amber-50 text-amber-600 ring-amber-100'
    : label.includes('Pendentes') ? 'bg-amber-50 text-amber-600 ring-amber-100'
    : label.includes('Total') ? 'bg-violet-50 text-violet-600 ring-violet-100'
    : 'bg-blue-50 text-blue-600 ring-blue-100';
  const cls = `bg-white border border-[#e1e7ef] rounded-xl shadow-[0_1px_2px_rgba(15,23,42,.025),0_6px_20px_rgba(15,23,42,.035)] p-4 text-left w-full min-h-[142px] ${onClick ? 'cursor-pointer hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-md transition-all focus:outline-none focus:ring-2 focus:ring-slate-300' : ''}`;
  const content = (
    <>
      <div className="flex items-center gap-2.5 mb-4">
        <div className={`w-9 h-9 rounded-xl ring-1 flex items-center justify-center shrink-0 ${accent}`}>{icon}</div>
        <div className="text-[12px] sm:text-[13px] leading-tight font-medium text-slate-700">{label}</div>
      </div>
      <div className={`text-[22px] sm:text-[24px] leading-none font-semibold tracking-tight tabular-nums ${tones[tone] || tones.slate}`}>{value}</div>
      {hint && <div className="text-[10px] sm:text-[11px] leading-relaxed text-slate-400 mt-3 max-w-[260px]">{hint}</div>}
    </>
  );
  return onClick ? <button type="button" onClick={onClick} className={cls}>{content}</button> : <div className={cls}>{content}</div>;
}
function MiniStat({ label, value, sub, tone }) {
  const tones = { slate: 'text-slate-900', emerald: 'text-emerald-600', rose: 'text-rose-600' };
  return (
    <div className="rounded-xl bg-[#f8fafc] border border-slate-100 p-3.5">
      <div className="text-[11px] font-medium text-slate-500 mb-1.5">{label}</div>
      <div className={`text-lg font-semibold tracking-tight tabular-nums ${tones[tone] || tones.slate}`}>{value}</div>
      {sub && <div className="text-[10px] text-slate-400 mt-1 tabular-nums">{sub}</div>}
    </div>
  );
}
function Field({ label, children, className = '' }) {
  return <label className={`flex flex-col gap-1 ${className}`}><span className="text-xs text-slate-500">{label}</span>{children}</label>;
}


createRoot(document.getElementById('root')).render(<App />);