/* global React, Icon, Button, PageHead, DEFAULT_FILTERS,
   RelFilterBar, RelVendasSection, RelDistribuidoresSection, RelClientesSection,
   RelFinanceiroSection, RelInsightsSection, RelProdutosSection, RelCurvaABCSection, RelExecutivoSection */

// ─── Tab configuration ───────────────────────────────────────────────────────
const REL_TABS = [
  { id: 'vendas',          label: 'Vendas Detalhadas',   icon: 'trending-up' },
  { id: 'distribuidores',  label: 'Distribuidores',      icon: 'building-2' },
  { id: 'clientes',        label: 'Clientes',            icon: 'users-2' },
  { id: 'financeiro',      label: 'Financeiro',          icon: 'pie-chart' },
  { id: 'produtos',        label: 'Produtos & Estoque',  icon: 'package' },
  { id: 'curvaabc',        label: 'Curva ABC',           icon: 'bar-chart-3' },
  { id: 'insights',        label: 'Insights IA',         icon: 'sparkles' },
  { id: 'executivo',       label: 'Executivo',           icon: 'layout' },
];

// ─── Tab bar component ───────────────────────────────────────────────────────
function RelTabBar({ active, onNav }) {
  return (
    <div style={{
      display: 'flex', gap: 2, marginBottom: 4,
      borderBottom: '1px solid var(--tm-line-1)', paddingBottom: 0,
      overflowX: 'auto',
    }}>
      {REL_TABS.map(t => {
        const isActive = active === t.id;
        return (
          <button
            key={t.id}
            onClick={() => onNav(`relatorios/${t.id}`)}
            style={{
              display: 'flex', alignItems: 'center', gap: 6,
              padding: '10px 14px', border: 'none', cursor: 'pointer',
              background: 'transparent',
              borderBottom: isActive ? '2px solid var(--tm-brand-champagne)' : '2px solid transparent',
              color: isActive ? 'var(--tm-brand-champagne)' : 'var(--tm-fg-3)',
              fontSize: 12.5, fontWeight: isActive ? 600 : 400,
              fontFamily: 'inherit', whiteSpace: 'nowrap',
              transition: 'color .15s, border-color .15s',
            }}
          >
            <Icon name={t.icon} size={13} />
            {t.label}
          </button>
        );
      })}
    </div>
  );
}

// ─── Section renderer ────────────────────────────────────────────────────────
function RelSectionContent({ tab, filters, setFilters, onNav }) {
  switch (tab) {
    case 'vendas':          return <RelVendasSection filters={filters} setFilters={setFilters} onNav={onNav} />;
    case 'distribuidores':  return <RelDistribuidoresSection filters={filters} setFilters={setFilters} onNav={onNav} />;
    case 'clientes':        return <RelClientesSection filters={filters} onNav={onNav} />;
    case 'financeiro':      return <RelFinanceiroSection filters={filters} onNav={onNav} />;
    case 'produtos':        return <RelProdutosSection filters={filters} onNav={onNav} />;
    case 'curvaabc':        return <RelCurvaABCSection filters={filters} setFilters={setFilters} onNav={onNav} />;
    case 'insights':        return <RelInsightsSection filters={filters} onNav={onNav} />;
    case 'executivo':       return <RelExecutivoSection filters={filters} onNav={onNav} />;
    default:                return <RelVendasSection filters={filters} setFilters={setFilters} onNav={onNav} />;
  }
}

// ─── Main Relatorios orchestrator ────────────────────────────────────────────
function Relatorios({ onNav, tab }) {
  const activeTab = tab || 'vendas';

  // Shared filter state — persists across tab switches
  const [filters, setFilters] = React.useState({ ...DEFAULT_FILTERS });

  const tabMeta = REL_TABS.find(t => t.id === activeTab) || REL_TABS[0];

  return (
    <div className="canvas">
      <PageHead
        title={tabMeta.label}
        sub="Central de relatorios e analises"
      />
      <RelTabBar active={activeTab} onNav={onNav} />
      <RelFilterBar filters={filters} setFilters={setFilters} />
      <RelSectionContent tab={activeTab} filters={filters} setFilters={setFilters} onNav={onNav} />
    </div>
  );
}

// ─── Wrapper components for route compatibility ──────────────────────────────
// These replace the old RelVendas, RelDistribuidores, etc. used in app.jsx routes.

function RelVendas({ onNav }) { return <Relatorios onNav={onNav} tab="vendas" />; }
function RelDistribuidores({ onNav }) { return <Relatorios onNav={onNav} tab="distribuidores" />; }
function RelClientes({ onNav }) { return <Relatorios onNav={onNav} tab="clientes" />; }
function RelFinanceiro({ onNav }) { return <Relatorios onNav={onNav} tab="financeiro" />; }
function RelInsights({ onNav }) { return <Relatorios onNav={onNav} tab="insights" />; }
function RelProdutos({ onNav }) { return <Relatorios onNav={onNav} tab="produtos" />; }
function RelCurvaABC({ onNav }) { return <Relatorios onNav={onNav} tab="curvaabc" />; }
function RelExecutivo({ onNav }) { return <Relatorios onNav={onNav} tab="executivo" />; }

// ─── Export ──────────────────────────────────────────────────────────────────
Object.assign(window, {
  Relatorios, RelVendas, RelDistribuidores, RelClientes,
  RelFinanceiro, RelInsights, RelProdutos, RelCurvaABC, RelExecutivo,
});