/* global React, Icon, KPI, Card, brl, Button,
   PERIODOS_PRESET, calcPeriod, calcPreviousPeriod, fmtShort, fmtFull, PeriodDropdown,
   QuickActions, ClickableKPI, SectionCard, ChartCanvas,
   SmartAlerts, VendasPorLinha, TopDistribuidores, TopSkus, ActivityFeed,
   FluxoFinanceiro, RankingComercial, MapaVendas, EstoqueInteligente, RecompraDash,
   MetasWidget, MiniCalendario, AIInsights */

// ─── Widget registry ─────────────────────────────────────────────────────────
const WIDGET_REGISTRY = [
  { id: 'acoes_rapidas', label: 'Ações rápidas',       icon: 'zap' },
  { id: 'alertas',       label: 'Alertas inteligentes', icon: 'bell' },
  { id: 'kpis',          label: 'KPIs',                 icon: 'bar-chart-2' },
  { id: 'ai_insights',   label: 'Insights de IA',       icon: 'sparkles' },
  { id: 'vendas_linha',  label: 'Vendas por linha',     icon: 'trending-up' },
  { id: 'fluxo',         label: 'Fluxo financeiro',     icon: 'dollar-sign' },
  { id: 'ranking',       label: 'Ranking comercial',    icon: 'award' },
  { id: 'mapa',          label: 'Mapa de vendas',       icon: 'map' },
  { id: 'estoque',       label: 'Estoque inteligente',  icon: 'package' },
  { id: 'recompra',      label: 'Recompra',             icon: 'refresh-cw' },
  { id: 'metas',         label: 'Metas & progresso',    icon: 'target' },
  { id: 'calendario',    label: 'Calendário',           icon: 'calendar' },
  { id: 'top_dist',      label: 'Top distribuidores',   icon: 'users' },
  { id: 'top_skus',      label: 'Top SKUs',             icon: 'box' },
  { id: 'atividade',     label: 'Atividade recente',    icon: 'activity' },
];

const PRESETS = {
  completo:    { label: 'Admin (completo)',  icon: 'shield',       widgets: WIDGET_REGISTRY.map(w => w.id) },
  comercial:   { label: 'Vendedor',          icon: 'briefcase',    widgets: ['acoes_rapidas', 'alertas', 'kpis', 'ai_insights', 'ranking', 'mapa', 'top_dist', 'recompra', 'metas'] },
  financeiro:  { label: 'Financeiro',        icon: 'dollar-sign',  widgets: ['alertas', 'kpis', 'fluxo', 'calendario', 'atividade', 'ai_insights'] },
  operacional: { label: 'Operacional',       icon: 'settings',     widgets: ['alertas', 'kpis', 'estoque', 'vendas_linha', 'top_skus', 'atividade', 'acoes_rapidas'] },
};

const DEFAULT_WIDGETS = WIDGET_REGISTRY.map(w => w.id);

// ─── Dashboard Settings Panel ────────────────────────────────────────────────
function DashboardSettings({ prefs, setPrefs, onSave, onClose }) {
  const activeWidgets = prefs.widgets || DEFAULT_WIDGETS;
  const modo = prefs.modo || 'completo';

  const toggleWidget = (id) => {
    const next = activeWidgets.includes(id)
      ? activeWidgets.filter(w => w !== id)
      : [...activeWidgets, id];
    setPrefs({ ...prefs, widgets: next });
  };

  const applyPreset = (key) => {
    setPrefs({ ...prefs, widgets: [...PRESETS[key].widgets], modo: key });
  };

  const toggleCompact = () => {
    setPrefs({ ...prefs, modo: prefs.modo === 'compacto' ? 'completo' : 'compacto' });
  };

  return (
    <>
      <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 900 }} onClick={onClose} />
      <div style={{
        position: 'fixed', top: 0, right: 0, bottom: 0, width: 340,
        background: 'var(--tm-bg-1)', borderLeft: '1px solid var(--tm-line-1)',
        zIndex: 901, display: 'flex', flexDirection: 'column', overflow: 'hidden',
      }}>
        {/* Header */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '16px 20px', borderBottom: '1px solid var(--tm-line-1)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <Icon name="sliders" size={16} style={{ color: 'var(--tm-brand-champagne)' }} />
            <span style={{ fontSize: 14, fontWeight: 600 }}>Personalizar dashboard</span>
          </div>
          <button onClick={onClose} style={{
            background: 'none', border: 'none', color: 'var(--tm-fg-3)', cursor: 'pointer', padding: 4,
          }}>
            <Icon name="x" size={16} />
          </button>
        </div>

        {/* Content */}
        <div style={{ flex: 1, overflowY: 'auto', padding: '16px 20px' }}>
          {/* Presets */}
          <div style={{ marginBottom: 20 }}>
            <div style={{ fontSize: 10.5, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--tm-fg-4)', marginBottom: 10 }}>
              Perfis predefinidos
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              {Object.entries(PRESETS).map(([key, preset]) => (
                <button
                  key={key}
                  onClick={() => applyPreset(key)}
                  style={{
                    display: 'flex', alignItems: 'center', gap: 8,
                    padding: '10px 12px', borderRadius: 8,
                    background: modo === key ? 'rgba(201,163,107,0.12)' : 'var(--tm-bg-2)',
                    border: modo === key ? '1px solid rgba(201,163,107,0.3)' : '1px solid var(--tm-line-1)',
                    color: modo === key ? 'var(--tm-brand-champagne)' : 'var(--tm-fg-2)',
                    cursor: 'pointer', fontSize: 12, fontWeight: 500, fontFamily: 'inherit',
                    transition: 'all 0.15s',
                  }}
                >
                  <Icon name={preset.icon} size={14} />
                  {preset.label}
                </button>
              ))}
            </div>
          </div>

          {/* Compact mode toggle */}
          <div style={{ marginBottom: 20 }}>
            <div style={{ fontSize: 10.5, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--tm-fg-4)', marginBottom: 10 }}>
              Modo de exibição
            </div>
            <div
              onClick={toggleCompact}
              style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                padding: '10px 12px', borderRadius: 8,
                background: 'var(--tm-bg-2)', border: '1px solid var(--tm-line-1)',
                cursor: 'pointer',
              }}
            >
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <Icon name="minimize-2" size={14} style={{ color: 'var(--tm-fg-3)' }} />
                <span style={{ fontSize: 12, color: 'var(--tm-fg-2)' }}>Modo compacto</span>
              </div>
              <div style={{
                width: 36, height: 20, borderRadius: 10, padding: 2,
                background: prefs.modo === 'compacto' ? 'var(--tm-brand-champagne)' : 'var(--tm-bg-3)',
                transition: 'background 0.2s', cursor: 'pointer',
              }}>
                <div style={{
                  width: 16, height: 16, borderRadius: '50%', background: '#fff',
                  transition: 'transform 0.2s',
                  transform: prefs.modo === 'compacto' ? 'translateX(16px)' : 'translateX(0)',
                }} />
              </div>
            </div>
          </div>

          {/* Widget toggles */}
          <div>
            <div style={{ fontSize: 10.5, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--tm-fg-4)', marginBottom: 10 }}>
              Widgets visíveis
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              {WIDGET_REGISTRY.map(w => {
                const on = activeWidgets.includes(w.id);
                return (
                  <div
                    key={w.id}
                    onClick={() => toggleWidget(w.id)}
                    style={{
                      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                      padding: '9px 12px', borderRadius: 6, cursor: 'pointer',
                      background: on ? 'transparent' : 'transparent',
                      transition: 'background 0.12s',
                    }}
                    onMouseEnter={e => { e.currentTarget.style.background = 'var(--tm-bg-2)'; }}
                    onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <Icon name={w.icon} size={14} style={{ color: on ? 'var(--tm-fg-2)' : 'var(--tm-fg-4)' }} />
                      <span style={{ fontSize: 12.5, color: on ? 'var(--tm-fg-1)' : 'var(--tm-fg-4)' }}>{w.label}</span>
                    </div>
                    <div style={{
                      width: 36, height: 20, borderRadius: 10, padding: 2,
                      background: on ? 'var(--tm-brand-champagne)' : 'var(--tm-bg-3)',
                      transition: 'background 0.2s',
                    }}>
                      <div style={{
                        width: 16, height: 16, borderRadius: '50%', background: '#fff',
                        transition: 'transform 0.2s',
                        transform: on ? 'translateX(16px)' : 'translateX(0)',
                      }} />
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* Footer */}
        <div style={{
          padding: '14px 20px', borderTop: '1px solid var(--tm-line-1)',
          display: 'flex', gap: 10, justifyContent: 'flex-end',
        }}>
          <Button variant="secondary" size="sm" onClick={onClose}>Cancelar</Button>
          <Button variant="primary" size="sm" icon="check" onClick={() => { onSave(); onClose(); }}>Salvar</Button>
        </div>
      </div>
    </>
  );
}

// ─── Dashboard ────────────────────────────────────────────────────────────────

function Dashboard({ onNav, profile, empresaAtual }) {
  const [periodId,    setPeriodId]    = React.useState('mes');
  const [periodOpen,  setPeriodOpen]  = React.useState(false);
  const [customStart, setCustomStart] = React.useState('');
  const [customEnd,   setCustomEnd]   = React.useState('');
  const [chartMode,   setChartMode]   = React.useState('volume');
  const [settingsOpen, setSettingsOpen] = React.useState(false);

  // ── Preferences state ──────────────────────────────────────────────────────
  const [prefs, setPrefs] = React.useState({
    widgets: [...DEFAULT_WIDGETS],
    modo: 'completo',
  });
  const [prefsId, setPrefsId] = React.useState(null);

  React.useEffect(() => {
    if (!window.tmSupabase || !window.tmUser) return;
    window.tmSupabase.from('dashboard_preferencias')
      .select('*').eq('user_id', window.tmUser.id).limit(1).maybeSingle()
      .then(({ data }) => {
        if (data) {
          setPrefsId(data.id);
          const w = Array.isArray(data.widgets) ? data.widgets : DEFAULT_WIDGETS;
          setPrefs({ widgets: w, modo: data.modo || 'completo' });
        }
      });
  }, []);

  const savePrefs = async () => {
    if (!window.tmSupabase || !window.tmUser) return;
    const rec = {
      user_id: window.tmUser.id,
      widgets: prefs.widgets,
      modo: prefs.modo,
      updated_at: new Date().toISOString(),
    };
    if (prefsId) {
      await window.tmSupabase.from('dashboard_preferencias').update(rec).eq('id', prefsId);
    } else {
      const { data } = await window.tmSupabase.from('dashboard_preferencias').insert(rec).select().single();
      if (data) setPrefsId(data.id);
    }
  };

  const show = (id) => (prefs.widgets || DEFAULT_WIDGETS).includes(id);
  const isCompact = prefs.modo === 'compacto';
  const gap = isCompact ? 12 : 16;
  const mt = isCompact ? 12 : 16;

  const hora  = new Date().getHours();
  const sauda = hora < 12 ? 'Bom dia' : hora < 18 ? 'Boa tarde' : 'Boa noite';
  const nome  = profile?.nome ? profile.nome.split(' ')[0] : null;
  const titulo = nome ? `${sauda}, ${nome}` : sauda;

  const hoje   = new Date();
  const diaFmt = hoje.toLocaleDateString('pt-BR', { day: 'numeric', month: 'long', year: 'numeric' });

  const { start, end } = calcPeriod(periodId, customStart, customEnd);
  const prev = calcPreviousPeriod(start, end);

  // ── KPIs: current + previous period ────────────────────────────────────────
  const [kpis, setKpis] = React.useState({
    faturamento: null, pedidos: null, ticket: null, aReceber: null,
    recebidoHoje: null, contasVencidas: null, contasVencidasN: null,
    novosClientes: null, pedFaturados: null, ruptura: null, estoqueCritico: null,
    dFaturamento: null, dPedidos: null, dTicket: null,
    dNovosClientes: null, dPedFaturados: null,
    dRecebidoOntem: null,
  });

  React.useEffect(() => {
    if (!window.tmSupabase) return;
    const s0 = start.toISOString();
    const s1 = new Date(end.getTime() + 86400000).toISOString();
    const p0 = prev.start.toISOString();
    const p1 = new Date(prev.end.getTime() + 86400000).toISOString();

    const hojeStart = new Date(hoje.getFullYear(), hoje.getMonth(), hoje.getDate()).toISOString();
    const hojeEnd = new Date(hoje.getFullYear(), hoje.getMonth(), hoje.getDate() + 1).toISOString();
    const ontemStart = new Date(hoje.getFullYear(), hoje.getMonth(), hoje.getDate() - 1).toISOString();

    Promise.all([
      window.tmSupabase.from('pedidos').select('total').eq('status', 'Atendido')
        .gte('created_at', s0).lte('created_at', s1),
      window.tmSupabase.from('pedidos').select('total').eq('status', 'Atendido')
        .gte('created_at', p0).lte('created_at', p1),
      window.tmSupabase.from('contas_receber').select('valor, valor_recebido, status, vencimento'),
      window.tmSupabase.from('contas_receber').select('valor_recebido')
        .eq('status', 'Recebido').gte('updated_at', hojeStart).lt('updated_at', hojeEnd),
      window.tmSupabase.from('contas_receber').select('valor_recebido')
        .eq('status', 'Recebido').gte('updated_at', ontemStart).lt('updated_at', hojeStart),
      window.tmSupabase.from('clientes').select('id').gte('created_at', s0).lte('created_at', s1),
      window.tmSupabase.from('clientes').select('id').gte('created_at', p0).lte('created_at', p1),
      window.tmSupabase.from('produtos').select('estoque, estoque_minimo'),
    ]).then(([curPed, prevPed, crAll, recHoje, recOntem, cliCur, cliPrev, prodEstoque]) => {
      const curPedidos = curPed.data || [];
      const prevPedidos = prevPed.data || [];
      const fat = curPedidos.reduce((a, p) => a + (parseFloat(p.total) || 0), 0);
      const nPed = curPedidos.length;
      const ticket = nPed > 0 ? fat / nPed : 0;
      const prevFat = prevPedidos.reduce((a, p) => a + (parseFloat(p.total) || 0), 0);
      const prevNPed = prevPedidos.length;
      const prevTicket = prevNPed > 0 ? prevFat / prevNPed : 0;

      const crData = crAll.data || [];
      const abertas = crData.filter(r => r.status !== 'Recebido');
      const aReceber = abertas.reduce((a, r) => a + ((parseFloat(r.valor) || 0) - (parseFloat(r.valor_recebido) || 0)), 0);

      const hojeISO = hoje.toISOString().slice(0, 10);
      const vencidas = abertas.filter(r => r.vencimento && r.vencimento < hojeISO);
      const contasVencidasTotal = vencidas.reduce((a, r) => a + ((parseFloat(r.valor) || 0) - (parseFloat(r.valor_recebido) || 0)), 0);

      const recHojeTotal = (recHoje.data || []).reduce((a, r) => a + (parseFloat(r.valor_recebido) || 0), 0);
      const recOntemTotal = (recOntem.data || []).reduce((a, r) => a + (parseFloat(r.valor_recebido) || 0), 0);

      const novosCliAtual = (cliCur.data || []).length;
      const novosCliPrev = (cliPrev.data || []).length;

      const prods = prodEstoque.data || [];
      const ruptura = prods.filter(p => (parseFloat(p.estoque) || 0) <= 0).length;
      const estCritico = prods.filter(p => {
        const est = parseFloat(p.estoque) || 0;
        const min = parseFloat(p.estoque_minimo) || 5;
        return est > 0 && est <= min;
      }).length;

      const calcDelta = (cur, prev) => {
        if (prev === 0 && cur === 0) return null;
        if (prev === 0) return cur > 0 ? 100 : null;
        return ((cur - prev) / prev * 100);
      };

      setKpis({
        faturamento: fat, pedidos: nPed, ticket, aReceber,
        recebidoHoje: recHojeTotal, contasVencidas: contasVencidasTotal, contasVencidasN: vencidas.length,
        novosClientes: novosCliAtual, pedFaturados: nPed, ruptura, estoqueCritico: estCritico,
        dFaturamento: calcDelta(fat, prevFat),
        dPedidos: calcDelta(nPed, prevNPed),
        dTicket: calcDelta(ticket, prevTicket),
        dNovosClientes: calcDelta(novosCliAtual, novosCliPrev),
        dPedFaturados: calcDelta(nPed, prevNPed),
        dRecebidoOntem: recOntemTotal,
      });
    });
  }, [start.getTime(), end.getTime()]);

  const periodoLabel = periodId === 'custom' && customStart && customEnd
    ? `${fmtFull(start)} — ${fmtFull(end)}`
    : PERIODOS_PRESET.find(p => p.id === periodId)?.label || 'Este mês';
  const periodoRange = `${fmtShort(start)} — ${fmtShort(end)}`;

  const exportarCSV = () => {
    const nomeEmp = empresaAtual
      ? (empresaAtual.nome_fantasia || empresaAtual.razao_social)
      : 'Todas as empresas';
    const linhas = [
      ['TopMix ProHub — Relatório Dashboard'],
      [`Empresa:;${nomeEmp}`],
      [`Período:;${periodoLabel} (${periodoRange})`],
      [`Gerado em:;${hoje.toLocaleString('pt-BR')}`],
      [],
      ['=== KPIs ==='],
      ['Métrica', 'Valor', 'Variação'],
      ['Faturamento',     kpis.faturamento !== null ? `R$ ${brl(kpis.faturamento)}` : '—', kpis.dFaturamento !== null ? `${kpis.dFaturamento.toFixed(1)}%` : ''],
      ['Pedidos faturados', kpis.pedidos !== null ? String(kpis.pedidos) : '—', kpis.dPedidos !== null ? `${kpis.dPedidos.toFixed(1)}%` : ''],
      ['Ticket médio',    kpis.ticket !== null ? `R$ ${brl(kpis.ticket)}` : '—', kpis.dTicket !== null ? `${kpis.dTicket.toFixed(1)}%` : ''],
      ['A receber',       kpis.aReceber !== null ? `R$ ${brl(kpis.aReceber)}` : '—', ''],
      ['Recebido hoje',   kpis.recebidoHoje !== null ? `R$ ${brl(kpis.recebidoHoje)}` : '—', ''],
      ['Contas vencidas', kpis.contasVencidas !== null ? `R$ ${brl(kpis.contasVencidas)}` : '—', kpis.contasVencidasN !== null ? `${kpis.contasVencidasN} títulos` : ''],
      ['Novos clientes',  kpis.novosClientes !== null ? String(kpis.novosClientes) : '—', kpis.dNovosClientes !== null ? `${kpis.dNovosClientes.toFixed(1)}%` : ''],
      ['Produtos ruptura', kpis.ruptura !== null ? String(kpis.ruptura) : '—', ''],
      ['Estoque crítico', kpis.estoqueCritico !== null ? String(kpis.estoqueCritico) : '—', ''],
    ];
    const csv = linhas.map(r => r.join(';')).join('\n');
    const blob = new Blob(['' + csv], { type: 'text/csv;charset=utf-8;' });
    const url  = URL.createObjectURL(blob);
    const a    = document.createElement('a');
    a.href     = url;
    a.download = `topmix-dashboard-${hoje.toISOString().slice(0, 10)}.csv`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  const nomeEmpAtual = empresaAtual
    ? (empresaAtual.nome_fantasia || empresaAtual.razao_social)
    : 'Todas as empresas';
  const subtitulo = `${diaFmt} · ${nomeEmpAtual} · ${periodoRange}`;

  const fmtDelta = (d) => {
    if (d === null || d === undefined) return undefined;
    const sign = d >= 0 ? '↑' : '↓';
    return `${sign} ${Math.abs(d).toFixed(1)}%`;
  };
  const deltaTone = (d) => {
    if (d === null || d === undefined) return 'up';
    return d >= 0 ? 'up' : 'down';
  };

  const mesAtual = new Date().toLocaleDateString('pt-BR', { month: 'long' });
  const cPad = isCompact ? 16 : 24;

  return (
    <div className="canvas" style={isCompact ? { padding: 16, fontSize: '12px' } : undefined}>
      {/* ── Header ──────────────────────────────────────────────────── */}
      <div className="page-head">
        <div>
          <div className="page-title" style={isCompact ? { fontSize: 22 } : undefined}>{titulo}</div>
          <div className="page-sub">{subtitulo}</div>
        </div>
        <div style={{ display: "flex", gap: 10, alignItems: 'center' }}>
          <button
            onClick={() => setSettingsOpen(true)}
            title="Personalizar dashboard"
            style={{
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              width: 32, height: 32, borderRadius: 6, border: 'none', cursor: 'pointer',
              background: 'var(--tm-bg-3)', color: 'var(--tm-fg-2)', transition: 'all 0.15s',
            }}
            onMouseEnter={e => { e.currentTarget.style.color = 'var(--tm-brand-champagne)'; }}
            onMouseLeave={e => { e.currentTarget.style.color = 'var(--tm-fg-2)'; }}
          >
            <Icon name="sliders" size={15} />
          </button>
          <div style={{ position: 'relative' }}>
            <Button
              variant={periodId !== 'mes' ? "primary" : "secondary"}
              icon="calendar" size="sm"
              onClick={() => setPeriodOpen(o => !o)}
            >
              {periodoLabel}
            </Button>
            {periodOpen && (
              <PeriodDropdown
                periodId={periodId}    setPeriodId={setPeriodId}
                customStart={customStart} setCustomStart={setCustomStart}
                customEnd={customEnd}     setCustomEnd={setCustomEnd}
                onClose={() => setPeriodOpen(false)}
              />
            )}
          </div>
          <Button variant="secondary" icon="download" size="sm" onClick={exportarCSV}>
            Exportar CSV
          </Button>
          <Button variant="primary" icon="plus" size="sm" onClick={() => onNav("pedidos/criar")}>
            Novo pedido
          </Button>
        </div>
      </div>

      {/* ── Ações Rápidas ───────────────────────────────────────────── */}
      {show('acoes_rapidas') && (
        <div style={{ marginTop: mt }}>
          <QuickActions onNav={onNav} />
        </div>
      )}

      {/* ── Alertas Inteligentes ─────────────────────────────────────── */}
      {show('alertas') && (
        <div style={{ marginTop: mt }}>
          <SmartAlerts onNav={onNav} />
        </div>
      )}

      {/* ── KPIs Row 1: Financeiro ──────────────────────────────────── */}
      {show('kpis') && (
        <>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap, marginTop: mt }}>
            <ClickableKPI onClick={() => onNav("financeiro/entradas")}>
              <KPI label="Faturamento"
                value={kpis.faturamento !== null ? `R$ ${brl(kpis.faturamento)}` : "—"}
                delta={fmtDelta(kpis.dFaturamento)}
                deltaTone={deltaTone(kpis.dFaturamento)}
                deltaLabel="vs período anterior" />
            </ClickableKPI>
            <ClickableKPI onClick={() => onNav("financeiro/contas-receber")}>
              <KPI label="Recebido hoje"
                value={kpis.recebidoHoje !== null ? `R$ ${brl(kpis.recebidoHoje)}` : "—"}
                delta={kpis.dRecebidoOntem !== null && kpis.dRecebidoOntem > 0 ? `ontem: R$ ${brl(kpis.dRecebidoOntem)}` : undefined}
                deltaLabel="recebimentos do dia"
                sparkColor="#5BB17A" />
            </ClickableKPI>
            <ClickableKPI onClick={() => onNav("financeiro/contas-receber")}>
              <KPI label="Contas vencidas"
                value={kpis.contasVencidas !== null ? `R$ ${brl(kpis.contasVencidas)}` : "—"}
                delta={kpis.contasVencidasN !== null ? `${kpis.contasVencidasN} título${kpis.contasVencidasN !== 1 ? 's' : ''}` : undefined}
                deltaTone="down"
                deltaLabel="em atraso"
                sparkColor="#D9655E" />
            </ClickableKPI>
            <ClickableKPI onClick={() => onNav("financeiro/contas-receber")}>
              <KPI label="Ticket médio"
                value={kpis.ticket !== null ? `R$ ${brl(kpis.ticket)}` : "—"}
                delta={fmtDelta(kpis.dTicket)}
                deltaTone={deltaTone(kpis.dTicket)}
                deltaLabel="vs período anterior"
                sparkColor="#D4A04A" />
            </ClickableKPI>
          </div>

          {/* ── KPIs Row 2: Comercial + Estoque ─────────────────────────── */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap, marginTop: isCompact ? 8 : 12 }}>
            <ClickableKPI onClick={() => onNav("crm/clientes-finais")}>
              <KPI label="Novos clientes"
                value={kpis.novosClientes !== null ? String(kpis.novosClientes) : "—"}
                delta={fmtDelta(kpis.dNovosClientes)}
                deltaTone={deltaTone(kpis.dNovosClientes)}
                deltaLabel="vs período anterior"
                sparkColor="#5B9BD5" />
            </ClickableKPI>
            <ClickableKPI onClick={() => onNav("pedidos/faturados")}>
              <KPI label="Pedidos faturados"
                value={kpis.pedFaturados !== null ? String(kpis.pedFaturados) : "—"}
                delta={fmtDelta(kpis.dPedFaturados)}
                deltaTone={deltaTone(kpis.dPedFaturados)}
                deltaLabel="vs período anterior"
                sparkColor="#5BB17A" />
            </ClickableKPI>
            <ClickableKPI onClick={() => onNav("produtos/lista")}>
              <KPI label="Produtos em ruptura"
                value={kpis.ruptura !== null ? String(kpis.ruptura) : "—"}
                delta={kpis.ruptura > 0 ? "ação necessária" : "ok"}
                deltaTone={kpis.ruptura > 0 ? "down" : "up"}
                deltaLabel="estoque zerado"
                sparkColor="#D9655E" />
            </ClickableKPI>
            <ClickableKPI onClick={() => onNav("produtos/lista")}>
              <KPI label="Estoque crítico"
                value={kpis.estoqueCritico !== null ? String(kpis.estoqueCritico) : "—"}
                delta={kpis.estoqueCritico > 0 ? "reabastecer" : "ok"}
                deltaTone={kpis.estoqueCritico > 0 ? "down" : "up"}
                deltaLabel="abaixo do mínimo"
                sparkColor="#D4A04A" />
            </ClickableKPI>
          </div>
        </>
      )}

      {/* ── AI Insights ──────────────────────────────────────────────── */}
      {show('ai_insights') && (
        <div style={{ marginTop: mt }}>
          <AIInsights start={start} end={end} />
        </div>
      )}

      {/* ── Vendas + Fluxo Financeiro ─────────────────────────────────── */}
      {(show('vendas_linha') || show('fluxo')) && (
        <div style={{ display: "grid", gridTemplateColumns: show('vendas_linha') && show('fluxo') ? "1fr 1fr" : "1fr", gap, marginTop: mt }}>
          {show('vendas_linha') && <VendasPorLinha chartMode={chartMode} setChartMode={setChartMode} start={start} end={end} />}
          {show('fluxo') && (
            <Card title="Fluxo financeiro"
                  action={<a className="gold" style={{ fontSize: 12, cursor: "pointer" }} onClick={() => onNav("financeiro/entradas")}>Ver detalhes</a>}>
              <div style={{ padding: gap }}>
                <FluxoFinanceiro start={start} end={end} />
              </div>
            </Card>
          )}
        </div>
      )}

      {/* ── Ranking Comercial + Mapa de Vendas ────────────────────────── */}
      {(show('ranking') || show('mapa')) && (
        <div style={{ display: "grid", gridTemplateColumns: show('ranking') && show('mapa') ? "1fr 1fr" : "1fr", gap, marginTop: mt }}>
          {show('ranking') && (
            <Card title="Ranking comercial"
                  action={<a className="gold" style={{ fontSize: 12, cursor: "pointer" }} onClick={() => onNav("relatorios/distribuidores")}>Ver completo</a>}>
              <div style={{ padding: gap }}>
                <RankingComercial start={start} end={end} />
              </div>
            </Card>
          )}
          {show('mapa') && (
            <Card title="Mapa de vendas"
                  action={<span className="muted" style={{ fontSize: 11 }}>por estado · {periodoLabel}</span>}>
              <div style={{ padding: 0 }}>
                <MapaVendas start={start} end={end} />
              </div>
            </Card>
          )}
        </div>
      )}

      {/* ── Estoque Inteligente + Recompra ─────────────────────────────── */}
      {(show('estoque') || show('recompra')) && (
        <div style={{ display: "grid", gridTemplateColumns: show('estoque') && show('recompra') ? "1fr 1fr" : "1fr", gap, marginTop: mt }}>
          {show('estoque') && (
            <Card title="Estoque inteligente"
                  action={<a className="gold" style={{ fontSize: 12, cursor: "pointer" }} onClick={() => onNav("produtos/lista")}>Ver produtos</a>}>
              <div style={{ padding: gap }}>
                <EstoqueInteligente onNav={onNav} />
              </div>
            </Card>
          )}
          {show('recompra') && (
            <Card title="Recompra"
                  action={<a className="gold" style={{ fontSize: 12, cursor: "pointer" }} onClick={() => onNav("crm/distribuidores")}>Ver clientes</a>}>
              <div style={{ padding: gap }}>
                <RecompraDash onNav={onNav} />
              </div>
            </Card>
          )}
        </div>
      )}

      {/* ── Metas + Calendário ─────────────────────────────────────────── */}
      {(show('metas') || show('calendario')) && (
        <div style={{ display: "grid", gridTemplateColumns: show('metas') && show('calendario') ? "1fr 1fr" : "1fr", gap, marginTop: mt }}>
          {show('metas') && (
            <Card title="Metas & progresso"
                  action={<span className="muted" style={{ fontSize: 11 }}>{new Date().toLocaleDateString('pt-BR', { month: 'long', year: 'numeric' })}</span>}>
              <div style={{ padding: gap }}>
                <MetasWidget start={start} end={end} empresaAtual={empresaAtual} />
              </div>
            </Card>
          )}
          {show('calendario') && (
            <Card title="Calendário operacional"
                  action={<span className="muted" style={{ fontSize: 11 }}>vencimentos e entregas</span>}>
              <div style={{ padding: gap }}>
                <MiniCalendario />
              </div>
            </Card>
          )}
        </div>
      )}

      {/* ── Top Distribuidores + Top SKUs ─────────────────────────────── */}
      {(show('top_dist') || show('top_skus')) && (
        <div style={{ display: "grid", gridTemplateColumns: show('top_dist') && show('top_skus') ? "1fr 1fr" : "1fr", gap, marginTop: mt }}>
          {show('top_dist') && (
            <Card title="Top distribuidores"
                  action={<a className="gold" style={{ fontSize: 12, cursor: "pointer" }} onClick={() => onNav("relatorios/distribuidores")}>Ver ranking</a>}>
              <TopDistribuidores />
            </Card>
          )}
          {show('top_skus') && (
            <Card title="Top SKUs do mês"
                  action={<span className="muted" style={{ fontSize: 11 }}>{mesAtual} · em volume</span>}>
              <TopSkus />
            </Card>
          )}
        </div>
      )}

      {/* ── Atividade Recente ──────────────────────────────────────────── */}
      {show('atividade') && (
        <div style={{ marginTop: mt }}>
          <Card title="Atividade recente"
                action={<span className="muted" style={{ fontSize: 11 }}>tempo real</span>}>
            <ActivityFeed />
          </Card>
        </div>
      )}

      {/* ── Settings Panel ─────────────────────────────────────────────── */}
      {settingsOpen && (
        <DashboardSettings
          prefs={prefs}
          setPrefs={setPrefs}
          onSave={savePrefs}
          onClose={() => setSettingsOpen(false)}
        />
      )}
    </div>
  );
}

Object.assign(window, { Dashboard });