vendaweb-api/src/app/DRE/teste.tsx

"use client";

import { LoaderPinwheel, ChevronDown, ChevronRight, Filter, Maximize2, Minimize2, Download } from "lucide-react";
import React, { useEffect, useState, useCallback, startTransition, memo } from "react";
import AnaliticoComponent from "./analitico";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import * as XLSX from "xlsx";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

interface DREItem {
  codfilial: string;
  data_competencia: string;
  data_cai: string;
  grupo: string;
  subgrupo: string;
  centro_custo: string;
  codigo_centro_custo: string;
  codigo_conta: number;
  conta: string;
  valor: string;
  codgrupo?: string;
  isCalculado?: boolean;
}

interface HierarchicalRow {
  type: "grupo" | "subgrupo" | "centro_custo" | "conta";
  level: number;
  grupo?: string;
  subgrupo?: string;
  centro_custo?: string;
  codigo_centro_custo?: string;
  conta?: string;
  codigo_conta?: number;
  total?: number;
  isExpanded?: boolean;
  valoresPorMes?: Record<string, number>;
  percentuaisPorMes?: Record<string, number>;
  isCalculado?: boolean;
}

// Componente memoizado para linhas da tabela
const TableRow = memo(({ 
  row, 
  index, 
  toggleGroup, 
  toggleCentro, 
  handleRowClick, 
  getRowStyle, 
  getIndentStyle, 
  renderCellContent,
  mesesDisponiveis,
  formatCurrency,
  formatCurrencyWithColor
}: {
  row: HierarchicalRow;
  index: number;
  toggleGroup: (grupo: string) => void;
  toggleCentro: (centro: string) => void;
  handleRowClick: (row: HierarchicalRow, mes?: string) => void;
  getRowStyle: (row: HierarchicalRow) => string;
  getIndentStyle: (level: number) => React.CSSProperties;
  renderCellContent: (row: HierarchicalRow) => React.ReactNode;
  mesesDisponiveis: string[];
  formatCurrency: (value: number) => string;
  formatCurrencyWithColor: (value: number) => { formatted: string; isNegative: boolean };
}) => {
  return (
    <tr
      className={`text-sm border-b border-gray-100 hover:bg-gray-50 transition-all duration-200 ease-in-out ${getRowStyle(
        row
      )}`}
    >
      <td className="px-4 py-1 w-[300px] min-w-[300px] whitespace-nowrap overflow-hidden">
        <div style={getIndentStyle(row.level)}>
          {renderCellContent(row)}
        </div>
      </td>
      
      {/* Colunas de valores por mês */}
      {mesesDisponiveis.map((mes) => (
        <React.Fragment key={mes}>
          <td
            className="px-2 py-1 text-right font-semibold cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden w-[120px] min-w-[120px]"
            onClick={() => handleRowClick(row, mes)}
            title={
              row.valoresPorMes && row.valoresPorMes[mes]
                ? formatCurrency(row.valoresPorMes[mes])
                : "-"
            }
          >
            {row.valoresPorMes && row.valoresPorMes[mes]
              ? (() => {
                  const { formatted, isNegative } =
                    formatCurrencyWithColor(row.valoresPorMes[mes]);
                  return (
                    <span
                      className={
                        isNegative
                          ? "text-red-600 font-bold"
                          : "text-gray-900"
                      }
                    >
                      {formatted}
                    </span>
                  );
                })()
              : "-"}
          </td>
          <td
            className="px-2 py-1 text-center font-medium cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden w-[100px] min-w-[100px]"
            onClick={() => handleRowClick(row, mes)}
            title={
              row.percentuaisPorMes &&
              row.percentuaisPorMes[mes] !== undefined
                ? `${row.percentuaisPorMes[mes].toFixed(1)}%`
                : "-"
            }
          >
            {row.percentuaisPorMes &&
            row.percentuaisPorMes[mes] !== undefined
              ? `${row.percentuaisPorMes[mes].toFixed(1)}%`
              : "-"}
          </td>
        </React.Fragment>
      ))}
      
      {/* Coluna Total */}
      <td
        className="px-4 py-1 text-right font-semibold cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden w-[120px] min-w-[120px]"
        onClick={() => handleRowClick(row)}
        title={row.total ? formatCurrency(row.total) : "-"}
      >
        {(() => {
          const { formatted, isNegative } = formatCurrencyWithColor(
            row.total!
          );
          return (
            <span
              className={
                isNegative ? "text-red-600 font-bold" : "text-gray-900"
              }
            >
              {formatted}
            </span>
          );
        })()}
      </td>
    </tr>
  );
});

TableRow.displayName = 'TableRow';

export default function Teste() {
  const [data, setData] = useState<DREItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
  const [expandedCentros, setExpandedCentros] = useState<Set<string>>(
    new Set()
  );
  const [mesesDisponiveis, setMesesDisponiveis] = useState<string[]>([]);

  // Estados para filtros
  const [filtros, setFiltros] = useState({
    periodoDe: "",
    periodoAte: "",
    grupo: "Todos",
    subgrupo: "Todos", 
    centroCusto: "Todos",
    conta: "Todas",
    valorMin: "",
    valorMax: "",
    buscaTextual: ""
  });
  
  // Estados para multi-seleção
  const [centrosCustoSelecionados, setCentrosCustoSelecionados] = useState<string[]>([]);
  // Estado para armazenar os códigos dos centros de custo
  const [codigosCentrosCusto, setCodigosCentrosCusto] = useState<Record<string, string>>({});
  const [contasSelecionadas, setContasSelecionadas] = useState<string[]>([]);
  // Estado para armazenar os códigos das contas
  const [codigosContas, setCodigosContas] = useState<Record<string, string>>({});
  const [isFilterOpen, setIsFilterOpen] = useState(false);
  const [dadosFiltrados, setDadosFiltrados] = useState<DREItem[]>([]);
  const [filtrosAplicados, setFiltrosAplicados] = useState(false);
  const [ordemHierarquiaContasPrimeiro, setOrdemHierarquiaContasPrimeiro] = useState(true);
  
  // Estados para opções dos filtros
  const [opcoesGrupos, setOpcoesGrupos] = useState<string[]>([]);
  const [opcoesSubgrupos, setOpcoesSubgrupos] = useState<string[]>([]);
  const [opcoesCentrosCusto, setOpcoesCentrosCusto] = useState<string[]>([]);
  const [opcoesContas, setOpcoesContas] = useState<string[]>([]);

  // Estados para analítico
  const [analiticoFiltros, setAnaliticoFiltros] = useState({
    dataInicio: "",
    dataFim: "",
    centroCusto: "",
    codigoGrupo: "",
    codigoSubgrupo: "",
    codigoConta: "",
    linhaSelecionada: "", // Adicionar informação da linha selecionada
    excluirCentroCusto: "", // Para excluir centro de custo específico quando desmarcado
    excluirCodigoConta: "", // Para excluir código de conta específico quando desmarcado
  });
  const [linhaSelecionada, setLinhaSelecionada] = useState<string | null>(null);
  const [isAllExpanded, setIsAllExpanded] = useState(false);

  useEffect(() => {
    // Carregar períodos disponíveis da API
    carregarPeriodosDisponiveis();
    
    // Inicializar filtros com período atual
    const agora = new Date();
    const anoAtual = agora.getFullYear();
    const mesAtual = String(agora.getMonth() + 1).padStart(2, '0');
    const periodoAtual = `${anoAtual}-${mesAtual}`;
    
    setFiltros(prev => ({
      ...prev,
      periodoDe: `${anoAtual}-01`,
      periodoAte: periodoAtual
    }));
  }, []);

  const carregarPeriodosDisponiveis = async () => {
    try {
      const response = await fetch("/api/dre-oracle");
      if (!response.ok) {
        throw new Error(`Erro HTTP: ${response.status}`);
      }
      
      const dadosCompletos = await response.json();
      
      // Extrair períodos únicos dos dados
      const periodosUnicos = [...new Set(dadosCompletos.map((item: DREItem) => item.data_competencia))].sort() as string[];
      setMesesDisponiveis(periodosUnicos);
      
      // Extrair grupos únicos
      const gruposUnicos = [...new Set(dadosCompletos.map((item: DREItem) => item.grupo))].sort() as string[];
      setOpcoesGrupos(gruposUnicos);
      
      // Extrair subgrupos únicos
      const subgruposUnicos = [...new Set(dadosCompletos.map((item: DREItem) => item.subgrupo))].sort() as string[];
      setOpcoesSubgrupos(subgruposUnicos);
      
      // Extrair centros de custo únicos com nome e código
      const centrosCustoUnicos = [...new Set(dadosCompletos.map((item: DREItem) => item.centro_custo))].sort() as string[];
      
      setOpcoesCentrosCusto(centrosCustoUnicos);
      
      // Criar objeto de códigos dos centros de custo
      const codigos: Record<string, string> = {};
      dadosCompletos.forEach((item: DREItem) => {
        if (item.centro_custo && item.codigo_centro_custo) {
          codigos[item.centro_custo] = item.codigo_centro_custo;
        }
      });
      setCodigosCentrosCusto(codigos);
      
      // Extrair contas únicas
      const contasUnicas = [...new Set(dadosCompletos.map((item: DREItem) => item.conta))].sort() as string[];
      setOpcoesContas(contasUnicas);
      
      // Criar objeto de códigos das contas
      const codigosContasObj: Record<string, string> = {};
      dadosCompletos.forEach((item: DREItem) => {
        if (item.conta && item.codigo_conta) {
          codigosContasObj[item.conta] = item.codigo_conta.toString();
        }
      });
      setCodigosContas(codigosContasObj);
      
      // Inicializar com todos os itens selecionados, exceto o centro de custo 002.003.017 e conta 100050
      const centrosCustoIniciaisSelecionados = centrosCustoUnicos.filter(centro => {
        const item = dadosCompletos.find((d: DREItem) => d.centro_custo === centro);
        return item?.codigo_centro_custo !== "002.003.017";
      });
      
      const contasIniciaisSelecionadas = contasUnicas.filter(conta => {
        const item = dadosCompletos.find((d: DREItem) => d.conta === conta);
        return item?.codigo_conta?.toString() !== "100050";
      });
      
      setCentrosCustoSelecionados(centrosCustoIniciaisSelecionados);
      setContasSelecionadas(contasIniciaisSelecionadas);
      
    } catch (error) {
      console.error("Erro ao carregar períodos:", error);
    }
  };

  const fetchData = async () => {
    try {
      setLoading(true);
      setError(null);
      const response = await fetch("/api/dre-oracle");

      if (!response.ok) {
        throw new Error(`Erro ao carregar dados: ${response.status}`);
      }

      const result = await response.json();
      setData(result);

      // Extrair meses únicos dos dados
      const meses = [
        ...new Set(
          result.map((item: DREItem) => {
            // Usar diretamente o valor de data_competencia que já vem no formato YYYY-MM
            return item.data_competencia;
          })
        ),
      ].sort() as string[];

      setMesesDisponiveis(meses);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Erro desconhecido");
    } finally {
      setLoading(false);
    }
  };

  const formatCurrency = (value: string | number) => {
    const numValue = typeof value === "string" ? parseFloat(value) : value;
    return numValue.toLocaleString("pt-BR", {
      style: "currency",
      currency: "BRL",
    });
  };

  const formatCurrencyWithColor = (value: string | number) => {
    const numValue = typeof value === "string" ? parseFloat(value) : value;
    const formatted = formatCurrency(value);
    const isNegative = numValue < 0;
    return { formatted, isNegative };
  };

  // Função para extrair códigos dos grupos e subgrupos
  const extractCodes = (grupo: string, subgrupo?: string) => {
    const grupoMatch = grupo.match(/^(\d+)/);
    const codigoGrupo = grupoMatch ? grupoMatch[1] : "";

    let codigoSubgrupo = "";
    if (subgrupo) {
      // Primeiro tenta extrair código numérico (ex: "001.008 - LOJA 8" -> "001.008")
      const subgrupoMatch = subgrupo.match(/^(\d+(?:\.\d+)+)/);
      if (subgrupoMatch) {
        codigoSubgrupo = subgrupoMatch[1];
      } else {
        // Se não tem código numérico, usa a descrição completa (ex: "DESPESAS ADMINISTRATIVAS")
        codigoSubgrupo = subgrupo;
      }
    }

    return { codigoGrupo, codigoSubgrupo };
  };

  // Função para lidar com clique nas linhas
  const handleRowClick = (row: HierarchicalRow, mesSelecionado?: string) => {
    console.log('🖱️ Clique na linha:', row);
    console.log('📅 Mês selecionado:', mesSelecionado);
    
    if (!data.length) {
      console.log('⚠️ Sem dados disponíveis');
      return;
    }

    // Pegar todas as datas disponíveis para definir o período
    const datas = data.map((item) => item.data_competencia);
    const dataInicio = Math.min(...datas.map((d) => new Date(d).getTime()));
    const dataFim = Math.max(...datas.map((d) => new Date(d).getTime()));

    const dataInicioStr = new Date(dataInicio).toISOString().substring(0, 7); // YYYY-MM
    const dataFimStr = new Date(dataFim).toISOString().substring(0, 7); // YYYY-MM

    console.log('📅 Datas calculadas:', { dataInicioStr, dataFimStr });

    const { codigoGrupo, codigoSubgrupo } = extractCodes(
      row.grupo || "",
      row.subgrupo
    );

    console.log('🔍 Códigos extraídos:', { codigoGrupo, codigoSubgrupo });

    // Criar um identificador único para a linha
    const linhaId = `${row.type}-${row.grupo || ""}-${row.subgrupo || ""}-${
      row.centro_custo || ""
    }-${row.codigo_conta || ""}`;
    setLinhaSelecionada(linhaId);

    // Se um mês específico foi selecionado, usar apenas esse mês
    const dataInicioFiltro = mesSelecionado || dataInicioStr;
    const dataFimFiltro = mesSelecionado || dataFimStr;

    // Determinar filtros baseado na ordem hierárquica e tipo da linha
    let centroCustoFiltro = "";
    let codigoContaFiltro = "";
    
    if (ordemHierarquiaContasPrimeiro) {
      // Ordem: Contas → Centros de Custo
      // SEMPRE filtrar por código da conta, independente do tipo da linha
      codigoContaFiltro = row.codigo_conta?.toString() || "";
      // Se for centro de custo, também filtrar por código do centro de custo
      centroCustoFiltro = row.type === "centro_custo" ? (row.codigo_centro_custo || "") : "";
    } else {
      // Ordem: Centros de Custo → Contas
      // SEMPRE filtrar por código do centro de custo, independente do tipo da linha
      centroCustoFiltro = row.codigo_centro_custo || "";
      // Se for conta, também filtrar por código da conta
      codigoContaFiltro = row.type === "conta" ? (row.codigo_conta?.toString() || "") : "";
    }

    console.log('🎯 Filtros determinados:', { 
      centroCustoFiltro, 
      codigoContaFiltro, 
      ordemHierarquia: ordemHierarquiaContasPrimeiro ? 'Contas→Centros' : 'Centros→Contas',
      tipoLinha: row.type,
      rowData: {
        codigo_conta: row.codigo_conta,
        codigo_centro_custo: row.codigo_centro_custo,
        centro_custo: row.centro_custo,
        conta: row.conta
      }
    });

    // Determinar exclusões baseado nos filtros aplicados
    let excluirCentroCusto = "";
    let excluirCodigoConta = "";
    
    // Se o centro de custo "002.003.017" não está selecionado, excluir da consulta
    if (!centrosCustoSelecionados.some(centro => {
      const item = data.find((d: DREItem) => d.centro_custo === centro);
      return item?.codigo_centro_custo === "002.003.017";
    })) {
      excluirCentroCusto = "002.003.017";
    }
    
    // Se a conta "100050" não está selecionada, excluir da consulta
    if (!contasSelecionadas.some(conta => {
      const item = data.find((d: DREItem) => d.conta === conta);
      return item?.codigo_conta?.toString() === "100050";
    })) {
      excluirCodigoConta = "100050";
    }

    const novosFiltros = {
      dataInicio: dataInicioFiltro,
      dataFim: dataFimFiltro,
      centroCusto: centroCustoFiltro,
      codigoGrupo,
      codigoSubgrupo,
      codigoConta: codigoContaFiltro,
      linhaSelecionada: row.grupo || row.subgrupo || row.centro_custo || row.conta || "", // Incluir informação da linha selecionada
      excluirCentroCusto,
      excluirCodigoConta,
    };

    console.log('🎯 Novos filtros para analítico:', novosFiltros);
    console.log('🔍 Verificação final dos filtros:', {
      centroCusto: novosFiltros.centroCusto,
      codigoConta: novosFiltros.codigoConta,
      codigoContaType: typeof novosFiltros.codigoConta,
      codigoContaLength: novosFiltros.codigoConta?.length
    });
    setAnaliticoFiltros(novosFiltros);
  };

  const toggleGroup = useCallback((grupo: string) => {
    setExpandedGroups(prev => {
      const newExpanded = new Set(prev);
    if (newExpanded.has(grupo)) {
      newExpanded.delete(grupo);
    } else {
      newExpanded.add(grupo);
    }
      return newExpanded;
    });
  }, []);


  const toggleCentro = useCallback((centro: string) => {
    setExpandedCentros(prev => {
      const newExpanded = new Set(prev);
    if (newExpanded.has(centro)) {
      newExpanded.delete(centro);
    } else {
      newExpanded.add(centro);
    }
      return newExpanded;
    });
  }, []);

  const handleFiltroChange = (campo: string, valor: string) => {
    setFiltros(prev => ({
      ...prev,
      [campo]: valor
    }));
  };

  // Funções para multi-seleção
  const toggleCentroCusto = (centro: string) => {
    setCentrosCustoSelecionados(prev => {
      if (prev.includes(centro)) {
        return prev.filter(c => c !== centro);
    } else {
        return [...prev, centro];
      }
    });
  };

  const toggleConta = (conta: string) => {
    setContasSelecionadas(prev => {
      if (prev.includes(conta)) {
        return prev.filter(c => c !== conta);
    } else {
        return [...prev, conta];
      }
    });
  };

  const selecionarTodosCentros = () => {
    setCentrosCustoSelecionados(opcoesCentrosCusto);
  };

  const limparCentros = () => {
    setCentrosCustoSelecionados([]);
  };

  const selecionarTodasContas = () => {
    setContasSelecionadas(opcoesContas);
  };

  const limparContas = () => {
    setContasSelecionadas([]);
  };

  // Função auxiliar para obter o código do centro de custo
  const obterCodigoCentroCusto = React.useCallback((nomeCentro: string): string => {
    if (!data || data.length === 0) {
      return '';
    }
    
    // Buscar o primeiro item que corresponde ao nome do centro de custo
    const item = data.find(item => item.centro_custo === nomeCentro);
    
    if (item && item.codigo_centro_custo) {
      return item.codigo_centro_custo;
    }
    
    return '';
  }, [data]);

  const exportarXLSX = () => {
    if (!data.length) {
      console.log('⚠️ Nenhum dado para exportar');
      return;
    }

    console.log('📊 Exportando TODOS os dados expandidos para XLSX...');
    
    // Criar uma versão completamente expandida dos dados hierárquicos
    const dadosCompletosExpandidos = buildHierarchicalDataCompleta();
    
    // Preparar dados para exportação
    const dadosExportacao = dadosCompletosExpandidos.map((row, index) => {
      const linha: any = {
        'Linha': index + 1,
        'Tipo': row.type,
        'Nível': row.level,
        'Grupo': row.grupo || '',
        'Centro de Custo': row.centro_custo || '',
        'Conta': row.conta || '',
        'Código Centro': row.codigo_centro_custo || '',
        'Código Conta': row.codigo_conta || '',
        'Total': row.total || 0,
      };

      // Adicionar colunas dos meses
      mesesDisponiveis.forEach(mes => {
        const valor = row.valoresPorMes?.[mes] || 0;
        const percentual = row.percentuaisPorMes?.[mes] || 0;
        linha[`Valor ${mes}`] = valor;
        linha[`% ${mes}`] = percentual;
      });

      return linha;
    });

    // Criar workbook
    const wb = XLSX.utils.book_new();
    
    // Criar worksheet principal
    const ws = XLSX.utils.json_to_sheet(dadosExportacao);
    
    // Ajustar largura das colunas
    const colWidths = [
      { wch: 8 },   // Linha
      { wch: 15 },  // Tipo
      { wch: 8 },   // Nível
      { wch: 30 },  // Grupo
      { wch: 25 },  // Centro de Custo
      { wch: 35 },  // Conta
      { wch: 15 },  // Código Centro
      { wch: 12 },  // Código Conta
      { wch: 15 },  // Total
    ];
    
    // Adicionar larguras para colunas dos meses
    mesesDisponiveis.forEach(() => {
      colWidths.push({ wch: 15 }); // Valor
      colWidths.push({ wch: 10 }); // %
    });
    
    ws['!cols'] = colWidths;
    
    // Adicionar worksheet ao workbook
    XLSX.utils.book_append_sheet(wb, ws, 'DRE Gerencial Completo');
    
    // Criar worksheet de resumo
    const resumoData = [
      { 'Informação': 'Período', 'Valor': `${filtros.periodoDe} a ${filtros.periodoAte}` },
      { 'Informação': 'Grupo', 'Valor': filtros.grupo },
      { 'Informação': 'Subgrupo', 'Valor': filtros.subgrupo },
      { 'Informação': 'Centro de Custo', 'Valor': filtros.centroCusto },
      { 'Informação': 'Conta', 'Valor': filtros.conta },
      { 'Informação': 'Valor Mínimo', 'Valor': filtros.valorMin || 'N/A' },
      { 'Informação': 'Valor Máximo', 'Valor': filtros.valorMax || 'N/A' },
      { 'Informação': 'Busca Textual', 'Valor': filtros.buscaTextual || 'N/A' },
      { 'Informação': 'Ordem Hierárquica', 'Valor': ordemHierarquiaContasPrimeiro ? 'Contas → Centros' : 'Centros → Contas' },
      { 'Informação': 'Total de Registros', 'Valor': dadosCompletosExpandidos.length },
      { 'Informação': 'Data de Exportação', 'Valor': new Date().toLocaleString('pt-BR') },
    ];
    
    const wsResumo = XLSX.utils.json_to_sheet(resumoData);
    wsResumo['!cols'] = [{ wch: 20 }, { wch: 30 }];
    XLSX.utils.book_append_sheet(wb, wsResumo, 'Resumo');
    
    // Gerar nome do arquivo
    const dataAtual = new Date().toISOString().split('T')[0];
    const nomeArquivo = `DRE_Gerencial_Completo_${dataAtual}.xlsx`;
    
    // Exportar arquivo
    XLSX.writeFile(wb, nomeArquivo);
    
    console.log('✅ Arquivo XLSX completo exportado:', nomeArquivo);
  };

  // Função para construir dados hierárquicos completamente expandidos
  const buildHierarchicalDataCompleta = (): HierarchicalRow[] => {
    const rows: HierarchicalRow[] = [];

    // Agrupar dados por grupo
    const grupos = data.reduce((acc, item) => {
      if (!acc[item.grupo]) {
        acc[item.grupo] = [];
      }
      acc[item.grupo].push(item);
      return acc;
    }, {} as Record<string, DREItem[]>);

    // Ordenar grupos por código
    const sortedGrupos = Object.entries(grupos).sort(([grupoA, itemsA], [grupoB, itemsB]) => {
      const codigoA = itemsA[0]?.codgrupo || "";
      const codigoB = itemsB[0]?.codgrupo || "";
      return codigoA.localeCompare(codigoB);
    });

    // Função para calcular valores de grupos calculados usando códigos dos grupos (mesma lógica da função principal)
    const calcularGrupoCalculadoCompleta = (codigoGrupo: string, gruposData: Record<string, DREItem[]>): Record<string, number> => {
      const valoresPorMes: Record<string, number> = {};
      
      // Inicializar valores para todos os meses disponíveis
      mesesDisponiveis.forEach(mes => {
        valoresPorMes[mes] = 0;
      });

      // Função auxiliar para obter valor de um grupo por código e mês
      const obterValorGrupo = (codigoGrupo: string, mes: string): number => {
        const grupoEncontrado = Object.values(gruposData).find(items => 
          items.length > 0 && items[0].codgrupo === codigoGrupo
        );
        if (!grupoEncontrado) return 0;
        
        const itemsMes = grupoEncontrado.filter(item => item.data_competencia === mes);
        return itemsMes.reduce((sum, item) => sum + parseFloat(item.valor), 0);
      };

      switch (codigoGrupo) {
        case "03": // Faturamento Líquido = Grupo 01 + 02
          mesesDisponiveis.forEach(mes => {
            const valor01 = obterValorGrupo("01", mes);
            const valor02 = obterValorGrupo("02", mes);
            valoresPorMes[mes] = valor01 + valor02;
          });
          break;
          
        case "05": // Lucro Bruto = Grupo 03 + 04
          mesesDisponiveis.forEach(mes => {
            const valor03 = obterValorGrupo("03", mes);
            const valor04 = obterValorGrupo("04", mes);
            valoresPorMes[mes] = valor03 + valor04;
          });
          break;
          
        case "07": // Margem Loja = Grupo 05 + 06
          mesesDisponiveis.forEach(mes => {
            const valor05 = obterValorGrupo("05", mes);
            const valor06 = obterValorGrupo("06", mes);
            valoresPorMes[mes] = valor05 + valor06;
          });
          break;
          
        case "10": // Resultado Operacional = Grupo 07 + 08 + 09
          mesesDisponiveis.forEach(mes => {
            const valor07 = obterValorGrupo("07", mes);
            const valor08 = obterValorGrupo("08", mes);
            const valor09 = obterValorGrupo("09", mes);
            valoresPorMes[mes] = valor07 + valor08 + valor09;
          });
          break;
          
        case "13": // Resultado Financeiro = Grupo 11 + 12
          mesesDisponiveis.forEach(mes => {
            const valor11 = obterValorGrupo("11", mes);
            const valor12 = obterValorGrupo("12", mes);
            valoresPorMes[mes] = valor11 + valor12;
          });
          break;
          
        case "18": // Outras Receitas/Despesas = Grupo 14 + 15 + 16 + 17
          mesesDisponiveis.forEach(mes => {
            const valor14 = obterValorGrupo("14", mes);
            const valor15 = obterValorGrupo("15", mes);
            const valor16 = obterValorGrupo("16", mes);
            const valor17 = obterValorGrupo("17", mes);
            valoresPorMes[mes] = valor14 + valor15 + valor16 + valor17;
          });
          break;
          
        case "19": // LAIR = Grupo 10 + 13 + 18
          mesesDisponiveis.forEach(mes => {
            const valor10 = obterValorGrupo("10", mes);
            const valor13 = obterValorGrupo("13", mes);
            const valor18 = obterValorGrupo("18", mes);
            valoresPorMes[mes] = valor10 + valor13 + valor18;
          });
          break;
          
        case "20": // IR = Se LAIR > 0 calcular 20% e resultado negativo (*-1), se não 0
          mesesDisponiveis.forEach(mes => {
            const valor19 = obterValorGrupo("19", mes);
            if (valor19 > 0) {
              valoresPorMes[mes] = (valor19 * 0.20) * -1;
            } else {
              valoresPorMes[mes] = 0;
            }
          });
          break;
          
        case "21": // CSLL = Se LAIR > 0 calcular 9% e resultado negativo (*-1), se não 0
          mesesDisponiveis.forEach(mes => {
            const valor19 = obterValorGrupo("19", mes);
            if (valor19 > 0) {
              valoresPorMes[mes] = (valor19 * 0.09) * -1;
            } else {
              valoresPorMes[mes] = 0;
            }
          });
          break;
          
        case "22": // Lucro Líquido = Grupo 19 + 20 + 21
          mesesDisponiveis.forEach(mes => {
            const valor19 = obterValorGrupo("19", mes);
            const valor20 = obterValorGrupo("20", mes);
            const valor21 = obterValorGrupo("21", mes);
            valoresPorMes[mes] = valor19 + valor20 + valor21;
          });
          break;
          
        case "24": // EBITDA = Grupo 19 - (13 + 18 + 23)
          mesesDisponiveis.forEach(mes => {
            const valor19 = obterValorGrupo("19", mes);
            const valor13 = obterValorGrupo("13", mes);
            const valor18 = obterValorGrupo("18", mes);
            const valor23 = obterValorGrupo("23", mes);
            valoresPorMes[mes] = valor19 - (valor13 + valor18 + valor23);
          });
          break;
      }
      
      return valoresPorMes;
    };

    sortedGrupos.forEach(([grupo, items]) => {
      const totalGrupo = items.reduce(
        (sum, item) => sum + parseFloat(item.valor),
        0
      );

      // Verificar se é um grupo calculado
      const codigoGrupo = items[0]?.codgrupo || "";
      const isCalculado = ["03", "05", "07", "10", "13", "18", "19", "20", "21", "22", "24"].includes(codigoGrupo);
      
      let valoresGrupoPorMes;
      if (isCalculado) {
        // Usar cálculo específico para grupos calculados
        valoresGrupoPorMes = calcularGrupoCalculadoCompleta(codigoGrupo, grupos);
      } else {
        // Usar cálculo normal para grupos não calculados
        valoresGrupoPorMes = calcularValoresPorMes(items);
      }

      // Calcular total do grupo
      const totalCalculado = Object.values(valoresGrupoPorMes).reduce((sum, valor) => sum + valor, 0);

      // Linha do grupo (Level 0)
      rows.push({
        type: "grupo",
        level: 0,
        grupo,
        total: isCalculado ? totalCalculado : totalGrupo,
        valoresPorMes: valoresGrupoPorMes,
        percentuaisPorMes: calcularPercentuaisPorMes(valoresGrupoPorMes, grupo),
        isCalculado: isCalculado,
      });

      if (ordemHierarquiaContasPrimeiro) {
        // ORDEM: Grupos → Contas → Centros de Custo
        
        // Agrupar por conta dentro do grupo
        const contas = items.reduce((acc, item) => {
          if (!acc[item.conta]) {
            acc[item.conta] = [];
          }
          acc[item.conta].push(item);
          return acc;
        }, {} as Record<string, DREItem[]>);

        // Ordenar contas por CODCONTA
        const sortedContas = Object.entries(contas).sort(([contaA, itemsA], [contaB, itemsB]) => {
          const codigoA = itemsA[0]?.codigo_conta || 0;
          const codigoB = itemsB[0]?.codigo_conta || 0;
          return codigoA - codigoB;
        });

        sortedContas.forEach(([conta, contaItems]) => {
          const totalConta = contaItems.reduce(
            (sum, item) => sum + parseFloat(item.valor),
            0
          );

          // Linha da conta (Level 1)
          const valoresContaPorMes = calcularValoresPorMes(contaItems);
          rows.push({
            type: "conta",
            level: 1,
            grupo,
            conta,
            codigo_conta: contaItems[0].codigo_conta,
            codigo_centro_custo: contaItems[0].codigo_centro_custo,
            total: totalConta,
            valoresPorMes: valoresContaPorMes,
            percentuaisPorMes: calcularPercentuaisPorMes(valoresContaPorMes, grupo),
          });

          // Agrupar por centro de custo dentro da conta
          const centros = contaItems.reduce((acc, item) => {
            if (!acc[item.centro_custo]) {
              acc[item.centro_custo] = [];
            }
            acc[item.centro_custo].push(item);
            return acc;
          }, {} as Record<string, DREItem[]>);

          // Ordenar centros de custo por CODIGOCENTROCUSTO
          const sortedCentros = Object.entries(centros).sort(([centroA, itemsA], [centroB, itemsB]) => {
            const codigoA = itemsA[0]?.codigo_centro_custo || "";
            const codigoB = itemsB[0]?.codigo_centro_custo || "";
            return codigoA.localeCompare(codigoB);
          });

          sortedCentros.forEach(([centro, centroItems]) => {
            const totalCentro = centroItems.reduce(
              (sum, item) => sum + parseFloat(item.valor),
              0
            );

            // Linha do centro de custo (Level 2)
            const valoresCentroPorMes = calcularValoresPorMes(centroItems);
            rows.push({
              type: "centro_custo",
              level: 2,
              grupo,
              centro_custo: centro,
              conta,
              codigo_conta: contaItems[0].codigo_conta,
              codigo_centro_custo: centroItems[0].codigo_centro_custo,
              total: totalCentro,
              valoresPorMes: valoresCentroPorMes,
              percentuaisPorMes: calcularPercentuaisPorMes(valoresCentroPorMes, grupo),
            });
          });
        });
      } else {
        // ORDEM ORIGINAL: Grupos → Centros de Custo → Contas
        
        // Agrupar por centro de custo dentro do grupo
        const centros = items.reduce((acc, item) => {
          if (!acc[item.centro_custo]) {
            acc[item.centro_custo] = [];
          }
          acc[item.centro_custo].push(item);
          return acc;
        }, {} as Record<string, DREItem[]>);

        // Ordenar centros de custo por CODIGOCENTROCUSTO
        const sortedCentros = Object.entries(centros).sort(([centroA, itemsA], [centroB, itemsB]) => {
          const codigoA = itemsA[0]?.codigo_centro_custo || "";
          const codigoB = itemsB[0]?.codigo_centro_custo || "";
          return codigoA.localeCompare(codigoB);
        });

        sortedCentros.forEach(([centro, centroItems]) => {
          const totalCentro = centroItems.reduce(
            (sum, item) => sum + parseFloat(item.valor),
            0
          );

          // Linha do centro de custo (Level 1)
          const valoresCentroPorMes = calcularValoresPorMes(centroItems);
          rows.push({
            type: "centro_custo",
            level: 1,
            grupo,
            centro_custo: centro,
            codigo_conta: centroItems[0].codigo_conta,
            codigo_centro_custo: centroItems[0].codigo_centro_custo,
            total: totalCentro,
            valoresPorMes: valoresCentroPorMes,
            percentuaisPorMes: calcularPercentuaisPorMes(valoresCentroPorMes, grupo),
          });

          // Agrupar por conta dentro do centro de custo
          const contas = centroItems.reduce((acc, item) => {
            if (!acc[item.conta]) {
              acc[item.conta] = [];
            }
            acc[item.conta].push(item);
            return acc;
          }, {} as Record<string, DREItem[]>);

          // Ordenar contas por CODCONTA
          const sortedContas = Object.entries(contas).sort(([contaA, itemsA], [contaB, itemsB]) => {
            const codigoA = itemsA[0]?.codigo_conta || 0;
            const codigoB = itemsB[0]?.codigo_conta || 0;
            return codigoA - codigoB;
          });

          sortedContas.forEach(([conta, contaItems]) => {
            const totalConta = contaItems.reduce(
              (sum, item) => sum + parseFloat(item.valor),
              0
            );

            // Linha da conta (Level 2)
            const valoresContaPorMes = calcularValoresPorMes(contaItems);
            rows.push({
              type: "conta",
              level: 2,
              grupo,
              centro_custo: centro,
              conta,
              codigo_conta: contaItems[0].codigo_conta,
              codigo_centro_custo: centroItems[0].codigo_centro_custo,
              total: totalConta,
              valoresPorMes: valoresContaPorMes,
              percentuaisPorMes: calcularPercentuaisPorMes(valoresContaPorMes, grupo),
            });
          });
        });
      }
    });

    return rows;
  };

  const toggleExpandAll = useCallback(() => {
    if (isAllExpanded) {
      // Recolher tudo - usar startTransition para atualizações não urgentes
      startTransition(() => {
        setExpandedGroups(new Set());
        setExpandedCentros(new Set());
        setIsAllExpanded(false);
      });
    } else {
      // Expandir todos os grupos e contas usando dados originais - usar startTransition para atualizações não urgentes
      startTransition(() => {
        const todosGrupos = [...new Set(data.map(item => item.grupo))];
        
        if (ordemHierarquiaContasPrimeiro) {
          // Nova ordem: expandir grupos e contas
          const todasContas = [...new Set(data.map(item => `${item.grupo}-${item.conta}`))];
          setExpandedGroups(new Set(todosGrupos));
          setExpandedCentros(new Set(todasContas));
        } else {
          // Ordem original: expandir grupos e centros de custo
          const todosCentros = [...new Set(data.map(item => `${item.grupo}-${item.centro_custo}`))];
          setExpandedGroups(new Set(todosGrupos));
          setExpandedCentros(new Set(todosCentros));
        }
        
        setIsAllExpanded(true);
      });
    }
  }, [isAllExpanded, data, ordemHierarquiaContasPrimeiro]);

  const limparFiltros = () => {
    const agora = new Date();
    const anoAtual = agora.getFullYear();
    const mesAtual = String(agora.getMonth() + 1).padStart(2, '0');
    const periodoAtual = `${anoAtual}-${mesAtual}`;
    
    setFiltros({
      periodoDe: `${anoAtual}-01`,
      periodoAte: periodoAtual,
      grupo: "Todos",
      subgrupo: "Todos",
      centroCusto: "Todos", 
      conta: "Todas",
      valorMin: "",
      valorMax: "",
      buscaTextual: ""
    });
    
    // Limpar multi-seleções
    setCentrosCustoSelecionados([]);
    setContasSelecionadas([]);
    
    // Limpar dados da tabela
    setData([]);
    setDadosFiltrados([]);
    setFiltrosAplicados(false);
    setMesesDisponiveis([]);
    setIsAllExpanded(false);
    setOrdemHierarquiaContasPrimeiro(false);
    
    // Recarregar opções e selecionar todos novamente
    carregarPeriodosDisponiveis();
  };

  const aplicarFiltros = async () => {
    // Fechar o Sheet primeiro
    setIsFilterOpen(false);
    
    // Aguardar um pouco para a animação de fechamento
    setTimeout(async () => {
      try {
        setLoading(true);
        setError(null);
        
        // Carregar dados da API
        const response = await fetch("/api/dre-oracle");
        if (!response.ok) {
          throw new Error(`Erro HTTP: ${response.status}`);
        }
        
        const dadosCompletos = await response.json();
        
        // Aplicar filtros nos dados
        let dadosFiltrados = dadosCompletos;
        
        // Filtro por período
        if (filtros.periodoDe && filtros.periodoAte) {
          dadosFiltrados = dadosFiltrados.filter((item: DREItem) => {
            const dataItem = item.data_competencia;
            return dataItem >= filtros.periodoDe && dataItem <= filtros.periodoAte;
          });
        }
        
        // Filtro por grupo
        if (filtros.grupo !== "Todos") {
          dadosFiltrados = dadosFiltrados.filter((item: DREItem) => 
            item.grupo === filtros.grupo
          );
        }
        
        // Filtro por subgrupo
        if (filtros.subgrupo !== "Todos") {
          dadosFiltrados = dadosFiltrados.filter((item: DREItem) => 
            item.subgrupo === filtros.subgrupo
          );
        }
        
        // Filtro por centro de custo (multi-seleção)
        if (centrosCustoSelecionados.length > 0) {
          dadosFiltrados = dadosFiltrados.filter((item: DREItem) => 
            centrosCustoSelecionados.includes(item.centro_custo)
          );
        }
        
        // Filtro por conta (multi-seleção)
        if (contasSelecionadas.length > 0) {
          dadosFiltrados = dadosFiltrados.filter((item: DREItem) => 
            contasSelecionadas.includes(item.conta)
          );
        }
        
        // Filtro por valor mínimo
        if (filtros.valorMin) {
          const valorMin = parseFloat(filtros.valorMin.replace(',', '.'));
          dadosFiltrados = dadosFiltrados.filter((item: DREItem) => 
            parseFloat(item.valor) >= valorMin
          );
        }
        
        // Filtro por valor máximo
        if (filtros.valorMax) {
          const valorMax = parseFloat(filtros.valorMax.replace(',', '.'));
          dadosFiltrados = dadosFiltrados.filter((item: DREItem) => 
            parseFloat(item.valor) <= valorMax
          );
        }
        
        // Filtro por busca textual
        if (filtros.buscaTextual) {
          const termoBusca = filtros.buscaTextual.toLowerCase();
          dadosFiltrados = dadosFiltrados.filter((item: DREItem) => 
            item.grupo.toLowerCase().includes(termoBusca) ||
            item.subgrupo.toLowerCase().includes(termoBusca) ||
            item.centro_custo.toLowerCase().includes(termoBusca) ||
            item.conta.toLowerCase().includes(termoBusca)
          );
        }
        
        setData(dadosFiltrados);
        setDadosFiltrados(dadosFiltrados);
        setFiltrosAplicados(true);
        
        // Extrair meses únicos dos dados filtrados
        const mesesUnicos = [...new Set(dadosFiltrados.map((item: DREItem) => item.data_competencia))].sort() as string[];
        setMesesDisponiveis(mesesUnicos);
        
      } catch (error) {
        console.error("Erro ao aplicar filtros:", error);
        setError(error instanceof Error ? error.message : "Erro desconhecido");
      } finally {
        setLoading(false);
      }
    }, 300); // Aguardar 300ms para a animação de fechamento
  };

  const calcularValoresPorMes = (items: DREItem[]): Record<string, number> => {
    const valoresPorMes: Record<string, number> = {};

    items.forEach((item) => {
      // Usar diretamente o valor de data_competencia que já vem no formato YYYY-MM
      const anoMes = item.data_competencia;

      if (!valoresPorMes[anoMes]) {
        valoresPorMes[anoMes] = 0;
      }
      valoresPorMes[anoMes] += parseFloat(item.valor);
    });

    return valoresPorMes;
  };

  // Função para calcular percentuais baseado no grupo 03 como referência
  const calcularPercentuaisPorMes = (
    valoresPorMes: Record<string, number>,
    grupo: string
  ): Record<string, number> => {
    const percentuais: Record<string, number> = {};

    // Se for o grupo 03, retorna 100% para todos os meses
    if (grupo.includes("03")) {
      Object.keys(valoresPorMes).forEach((mes) => {
        percentuais[mes] = 100;
      });
      return percentuais;
    }

    // Para outros grupos, calcular percentual baseado no grupo 03
    Object.keys(valoresPorMes).forEach((mes) => {
      const valorAtual = valoresPorMes[mes];

      // Encontrar o valor do grupo 03 para o mesmo mês
      const grupo03Items = data.filter((item) => {
        // Usar diretamente o valor de data_competencia que já vem no formato YYYY-MM
        return item.data_competencia === mes && item.grupo.includes("03");
      });

      const valorGrupo03 = grupo03Items.reduce(
        (sum, item) => sum + parseFloat(item.valor),
        0
      );

      if (valorGrupo03 !== 0) {
        percentuais[mes] = (valorAtual / valorGrupo03) * 100;
      } else {
        percentuais[mes] = 0;
      }
    });

    return percentuais;
  };

  const buildHierarchicalData = (): HierarchicalRow[] => {
    const rows: HierarchicalRow[] = [];

    // Agrupar por grupo
    const grupos = data.reduce((acc, item) => {
        if (!acc[item.grupo]) {
          acc[item.grupo] = [];
        }
        acc[item.grupo].push(item);
      return acc;
    }, {} as Record<string, DREItem[]>);

    // Ordenar grupos pelo CODGRUPO numérico
    const sortedGrupos = Object.entries(grupos).sort(([grupoA, itemsA], [grupoB, itemsB]) => {
      // Pegar o CODGRUPO do primeiro item de cada grupo
      const codgrupoA = itemsA[0]?.codgrupo || "";
      const codgrupoB = itemsB[0]?.codgrupo || "";
      
      // Se ambos têm CODGRUPO, ordenar numericamente
      if (codgrupoA && codgrupoB) {
        return parseInt(codgrupoA) - parseInt(codgrupoB);
      }
      
      // Se apenas um tem CODGRUPO, ele vem primeiro
      if (codgrupoA && !codgrupoB) return -1;
      if (!codgrupoA && codgrupoB) return 1;
      
      // Se nenhum tem CODGRUPO, ordenar alfabeticamente
      return grupoA.localeCompare(grupoB);
    });

    // Função para calcular valores de grupos calculados usando códigos dos grupos
    const calcularGrupoCalculado = (codigoGrupo: string, gruposData: Record<string, DREItem[]>): Record<string, number> => {
      const valoresPorMes: Record<string, number> = {};
      
      // Inicializar valores para todos os meses disponíveis
      mesesDisponiveis.forEach(mes => {
        valoresPorMes[mes] = 0;
      });

      // Função auxiliar para obter valor de um grupo por código e mês
      const obterValorGrupo = (codigoGrupo: string, mes: string): number => {
        const grupoEncontrado = Object.values(gruposData).find(items => 
          items.length > 0 && items[0].codgrupo === codigoGrupo
        );
        if (!grupoEncontrado) return 0;
        
        const itemsMes = grupoEncontrado.filter(item => item.data_competencia === mes);
        return itemsMes.reduce((sum, item) => sum + parseFloat(item.valor), 0);
      };

      switch (codigoGrupo) {
        case "03": // Faturamento Líquido = Grupo 01 + 02
          mesesDisponiveis.forEach(mes => {
            const valor01 = obterValorGrupo("01", mes);
            const valor02 = obterValorGrupo("02", mes);
            valoresPorMes[mes] = valor01 + valor02;
          });
          break;
          
        case "05": // Lucro Bruto = Grupo 03 + 04
          mesesDisponiveis.forEach(mes => {
            const valor03 = obterValorGrupo("03", mes);
            const valor04 = obterValorGrupo("04", mes);
            valoresPorMes[mes] = valor03 + valor04;
          });
          break;
          
        case "07": // Margem Loja = Grupo 05 + 06
          mesesDisponiveis.forEach(mes => {
            const valor05 = obterValorGrupo("05", mes);
            const valor06 = obterValorGrupo("06", mes);
            valoresPorMes[mes] = valor05 + valor06;
          });
          break;
          
        case "10": // Resultado Operacional = Grupo 07 + 08 + 09
          mesesDisponiveis.forEach(mes => {
            const valor07 = obterValorGrupo("07", mes);
            const valor08 = obterValorGrupo("08", mes);
            const valor09 = obterValorGrupo("09", mes);
            valoresPorMes[mes] = valor07 + valor08 + valor09;
          });
          break;
          
        case "13": // Resultado Financeiro = Grupo 11 + 12
          mesesDisponiveis.forEach(mes => {
            const valor11 = obterValorGrupo("11", mes);
            const valor12 = obterValorGrupo("12", mes);
            valoresPorMes[mes] = valor11 + valor12;
          });
          break;
          
        case "18": // Outras Receitas/Despesas = Grupo 14 + 15 + 16 + 17
          mesesDisponiveis.forEach(mes => {
            const valor14 = obterValorGrupo("14", mes);
            const valor15 = obterValorGrupo("15", mes);
            const valor16 = obterValorGrupo("16", mes);
            const valor17 = obterValorGrupo("17", mes);
            valoresPorMes[mes] = valor14 + valor15 + valor16 + valor17;
          });
          break;
          
        case "19": // LAIR = Grupo 10 + 13 + 18
          mesesDisponiveis.forEach(mes => {
            const valor10 = obterValorGrupo("10", mes);
            const valor13 = obterValorGrupo("13", mes);
            const valor18 = obterValorGrupo("18", mes);
            valoresPorMes[mes] = valor10 + valor13 + valor18;
          });
          break;
          
        case "20": // IR = Se LAIR > 0 calcular 20% e resultado negativo (*-1), se não 0
          mesesDisponiveis.forEach(mes => {
            const valor19 = obterValorGrupo("19", mes);
            if (valor19 > 0) {
              valoresPorMes[mes] = (valor19 * 0.20) * -1;
            } else {
              valoresPorMes[mes] = 0;
            }
          });
          break;
          
        case "21": // CSLL = Se LAIR > 0 calcular 9% e resultado negativo (*-1), se não 0
          mesesDisponiveis.forEach(mes => {
            const valor19 = obterValorGrupo("19", mes);
            if (valor19 > 0) {
              valoresPorMes[mes] = (valor19 * 0.09) * -1;
            } else {
              valoresPorMes[mes] = 0;
            }
          });
          break;
          
        case "22": // Lucro Líquido = Grupo 19 + 20 + 21
          mesesDisponiveis.forEach(mes => {
            const valor19 = obterValorGrupo("19", mes);
            const valor20 = obterValorGrupo("20", mes);
            const valor21 = obterValorGrupo("21", mes);
            valoresPorMes[mes] = valor19 + valor20 + valor21;
          });
          break;
          
        case "24": // EBITDA = Grupo 19 - (13 + 18 + 23)
          mesesDisponiveis.forEach(mes => {
            const valor19 = obterValorGrupo("19", mes);
            const valor13 = obterValorGrupo("13", mes);
            const valor18 = obterValorGrupo("18", mes);
            const valor23 = obterValorGrupo("23", mes);
            valoresPorMes[mes] = valor19 - (valor13 + valor18 + valor23);
          });
          break;
      }
      
      return valoresPorMes;
    };

    sortedGrupos.forEach(([grupo, items]) => {
      const totalGrupo = items.reduce(
        (sum, item) => sum + parseFloat(item.valor),
        0
      );

      // Verificar se é um grupo calculado
      const codigoGrupo = items[0]?.codgrupo || "";
      const isCalculado = ["03", "05", "07", "10", "13", "18", "19", "20", "21", "22", "24"].includes(codigoGrupo);
      
      let valoresPorMes;
      if (isCalculado) {
        // Usar cálculo específico para grupos calculados
        valoresPorMes = calcularGrupoCalculado(codigoGrupo, grupos);
      } else {
        // Usar cálculo normal para grupos não calculados
        valoresPorMes = calcularValoresPorMes(items);
      }

      // Calcular total do grupo
      const totalCalculado = Object.values(valoresPorMes).reduce((sum, valor) => sum + valor, 0);

      // Linha do grupo
      rows.push({
        type: "grupo",
        level: 0,
        grupo,
        total: isCalculado ? totalCalculado : totalGrupo,
        isExpanded: expandedGroups.has(grupo),
        valoresPorMes,
        percentuaisPorMes: calcularPercentuaisPorMes(valoresPorMes, grupo),
        isCalculado: isCalculado,
      });

      if (expandedGroups.has(grupo)) {
        if (ordemHierarquiaContasPrimeiro) {
          // ORDEM: Grupos → Contas → Centros de Custo
          
          // Agrupar por conta dentro do grupo
          const contas = items.reduce((acc, item) => {
            if (!acc[item.conta]) {
              acc[item.conta] = [];
            }
            acc[item.conta].push(item);
          return acc;
        }, {} as Record<string, DREItem[]>);

          // Ordenar contas por CODCONTA
          const sortedContas = Object.entries(contas).sort(([contaA, itemsA], [contaB, itemsB]) => {
            const codcontaA = itemsA[0]?.codigo_conta || 0;
            const codcontaB = itemsB[0]?.codigo_conta || 0;
            
            if (codcontaA && codcontaB) {
              return codcontaA - codcontaB;
            }
            
            if (codcontaA && !codcontaB) return -1;
            if (!codcontaA && codcontaB) return 1;
            
            return contaA.localeCompare(contaB);
          });

          sortedContas.forEach(([conta, contaItems]) => {
            const totalConta = contaItems.reduce(
            (sum, item) => sum + parseFloat(item.valor),
            0
          );

            // Linha da conta (Level 1)
            const valoresContaPorMes = calcularValoresPorMes(contaItems);
          rows.push({
              type: "conta",
            level: 1,
            grupo,
              conta,
              codigo_conta: contaItems[0].codigo_conta,
              codigo_centro_custo: contaItems[0].codigo_centro_custo, // ✅ Adicionar código do centro de custo
              total: totalConta,
              isExpanded: expandedCentros.has(`${grupo}-${conta}`),
              valoresPorMes: valoresContaPorMes,
            percentuaisPorMes: calcularPercentuaisPorMes(
                valoresContaPorMes,
              grupo
            ),
          });

            if (expandedCentros.has(`${grupo}-${conta}`)) {
              // Agrupar por centro de custo dentro da conta
              const centros = contaItems.reduce((acc, item) => {
              if (!acc[item.centro_custo]) {
                acc[item.centro_custo] = [];
              }
              acc[item.centro_custo].push(item);
              return acc;
            }, {} as Record<string, DREItem[]>);

              // Ordenar centros de custo por CODIGOCENTROCUSTO
              const sortedCentros = Object.entries(centros).sort(([centroA, itemsA], [centroB, itemsB]) => {
                const codigoA = itemsA[0]?.codigo_centro_custo || "";
                const codigoB = itemsB[0]?.codigo_centro_custo || "";
                
                if (codigoA && codigoB) {
                  return codigoA.localeCompare(codigoB);
                }
                
                if (codigoA && !codigoB) return -1;
                if (!codigoA && codigoB) return 1;
                
                return centroA.localeCompare(centroB);
              });

              sortedCentros.forEach(([centro, centroItems]) => {
                const totalCentro = centroItems.reduce(
                  (sum, item) => sum + parseFloat(item.valor),
                  0
                );

                // Linha do centro de custo (Level 2)
                const valoresCentroPorMes = calcularValoresPorMes(centroItems);
                rows.push({
                  type: "centro_custo",
                  level: 2,
                  grupo,
                  centro_custo: centro,
                  conta,
                  codigo_conta: contaItems[0].codigo_conta, // ✅ Adicionar código da conta
                  codigo_centro_custo: centroItems[0].codigo_centro_custo,
                  total: totalCentro,
                  valoresPorMes: valoresCentroPorMes,
                  percentuaisPorMes: calcularPercentuaisPorMes(
                    valoresCentroPorMes,
                    grupo
                  ),
                });
              });
            }
          });
        } else {
          // ORDEM ORIGINAL: Grupos → Centros de Custo → Contas
          
          // Agrupar por centro de custo dentro do grupo
          const centros = items.reduce((acc, item) => {
            if (!acc[item.centro_custo]) {
              acc[item.centro_custo] = [];
            }
            acc[item.centro_custo].push(item);
            return acc;
          }, {} as Record<string, DREItem[]>);

          // Ordenar centros de custo por CODIGOCENTROCUSTO
          const sortedCentros = Object.entries(centros).sort(([centroA, itemsA], [centroB, itemsB]) => {
            const codigoA = itemsA[0]?.codigo_centro_custo || "";
            const codigoB = itemsB[0]?.codigo_centro_custo || "";
            
            if (codigoA && codigoB) {
              return codigoA.localeCompare(codigoB);
            }
            
            if (codigoA && !codigoB) return -1;
            if (!codigoA && codigoB) return 1;
            
            return centroA.localeCompare(centroB);
          });

            sortedCentros.forEach(([centro, centroItems]) => {
              const totalCentro = centroItems.reduce(
                (sum, item) => sum + parseFloat(item.valor),
                0
              );

            // Linha do centro de custo (Level 1)
              const valoresCentroPorMes = calcularValoresPorMes(centroItems);
              rows.push({
              type: "centro_custo",
              level: 1,
                grupo,
                centro_custo: centro,
              codigo_conta: centroItems[0].codigo_conta, // ✅ Adicionar código da conta
              codigo_centro_custo: centroItems[0].codigo_centro_custo,
                total: totalCentro,
              isExpanded: expandedCentros.has(`${grupo}-${centro}`),
                valoresPorMes: valoresCentroPorMes,
                percentuaisPorMes: calcularPercentuaisPorMes(
                  valoresCentroPorMes,
                  grupo
                ),
              });

            if (expandedCentros.has(`${grupo}-${centro}`)) {
                // Agrupar por conta dentro do centro de custo
                const contas = centroItems.reduce((acc, item) => {
                  if (!acc[item.conta]) {
                    acc[item.conta] = [];
                  }
                  acc[item.conta].push(item);
                  return acc;
                }, {} as Record<string, DREItem[]>);

              // Ordenar contas por CODCONTA
              const sortedContas = Object.entries(contas).sort(([contaA, itemsA], [contaB, itemsB]) => {
                const codcontaA = itemsA[0]?.codigo_conta || 0;
                const codcontaB = itemsB[0]?.codigo_conta || 0;
                
                if (codcontaA && codcontaB) {
                  return codcontaA - codcontaB;
                }
                
                if (codcontaA && !codcontaB) return -1;
                if (!codcontaA && codcontaB) return 1;
                
                return contaA.localeCompare(contaB);
                });

                sortedContas.forEach(([conta, contaItems]) => {
                  const totalConta = contaItems.reduce(
                    (sum, item) => sum + parseFloat(item.valor),
                    0
                  );

                // Linha da conta (Level 2)
                  const valoresContaPorMes = calcularValoresPorMes(contaItems);
                  rows.push({
                  type: "conta",
                  level: 2,
                    grupo,
                    centro_custo: centro,
                    conta,
                    codigo_conta: contaItems[0].codigo_conta,
                    codigo_centro_custo: centroItems[0].codigo_centro_custo, // ✅ Adicionar código do centro de custo
                    total: totalConta,
                    valoresPorMes: valoresContaPorMes,
                    percentuaisPorMes: calcularPercentuaisPorMes(
                      valoresContaPorMes,
                      grupo
                    ),
                  });
                });
              }
            });
          }
      }
    });

    return rows;
  };

  const getRowStyle = (row: HierarchicalRow) => {
    const baseStyle =
      "transition-all duration-200 hover:bg-gradient-to-r hover:from-blue-50/30 hover:to-indigo-50/30";

    // Criar identificador único para a linha
    const linhaId = `${row.type}-${row.grupo || ""}-${row.subgrupo || ""}-${
      row.centro_custo || ""
    }-${row.codigo_conta || ""}`;
    const isSelected = linhaSelecionada === linhaId;

    // Verificar se é um grupo calculado
    const isCalculado = row.isCalculado === true;

    let style = baseStyle;

    if (isSelected) {
      style +=
        " bg-gradient-to-r from-green-100 to-emerald-100 border-l-4 border-green-500 shadow-lg";
    }

    switch (row.type) {
      case "grupo":
        if (isCalculado) {
          // Destacar grupos calculados com cor azul
          return `${style} bg-gradient-to-r from-blue-100/80 to-indigo-100/80 font-bold text-gray-900 border-b-2 border-blue-300 shadow-sm`;
        }
        return `${style} bg-gradient-to-r from-blue-50/20 to-indigo-50/20 font-bold text-gray-900 border-b-2 border-blue-200`;
      case "subgrupo":
        return `${style} bg-gradient-to-r from-gray-50/30 to-blue-50/20 font-semibold text-gray-800`;
      case "centro_custo":
        return `${style} bg-gradient-to-r from-gray-50/20 to-gray-100/10 font-medium text-gray-700`;
      case "conta":
        return `${style} bg-white font-normal text-gray-600`;
      default:
        return style;
    }
  };

  const getIndentStyle = (level: number) => {
    return { paddingLeft: `${level * 20}px` };
  };

  const renderCellContent = (row: HierarchicalRow) => {
    // Verificar se é um grupo calculado usando a propriedade isCalculado
    const isCalculado = row.isCalculado === true;

    switch (row.type) {
      case "grupo":
        return (
          <div className="flex items-center gap-2 whitespace-nowrap">
            <button
              onClick={() => toggleGroup(row.grupo!)}
              className="p-2 hover:bg-blue-100 rounded-lg transition-all duration-150 ease-in-out flex items-center justify-center w-8 h-8 flex-shrink-0 transform hover:scale-105"
            >
              {row.isExpanded ? (
                <ChevronDown className="w-4 h-4 text-blue-600 transition-transform duration-150" />
              ) : (
                <ChevronRight className="w-4 h-4 text-blue-600 transition-transform duration-150" />
              )}
            </button>
            <button
              onClick={() => handleRowClick(row)}
              className="flex-1 text-left hover:bg-blue-50/50 p-2 rounded-lg cursor-pointer transition-all duration-200 truncate"
            >
              <div className="flex items-center gap-2">
                <span className="font-bold text-gray-900">
                  {row.grupo}
                </span>
                {/* {isCalculado && (
                  <span className="text-blue-600 font-bold text-sm">⚡</span>
                )} */}
              </div>
            </button>
          </div>
        );
      case "conta":
        return (
          <div className="flex items-center gap-2 whitespace-nowrap">
            {ordemHierarquiaContasPrimeiro ? (
              // Nova ordem: Conta é level 1 (com botão de toggle)
            <button
                onClick={() => toggleCentro(`${row.grupo}-${row.conta}`)}
                className="p-2 hover:bg-blue-100 rounded-lg transition-all duration-150 ease-in-out flex items-center justify-center w-8 h-8 flex-shrink-0 transform hover:scale-105"
              >
                {row.isExpanded ? (
                  <ChevronDown className="w-4 h-4 text-blue-600 transition-transform duration-150" />
                ) : (
                  <ChevronRight className="w-4 h-4 text-blue-600 transition-transform duration-150" />
                )}
            </button>
            ) : (
              // Ordem original: Conta é level 2 (sem botão de toggle)
              <div className="w-8 h-8 flex items-center justify-center flex-shrink-0">
                <span className="text-gray-400 font-bold text-lg">•</span>
              </div>
            )}
            <button
              onClick={() => handleRowClick(row)}
              className="flex-1 text-left hover:bg-blue-50/50 p-2 rounded-lg cursor-pointer transition-all duration-200 truncate"
            >
              <div className="flex items-center gap-2">
                <span className="font-semibold text-gray-800">
                  {row.conta}
                </span>
                {row.codigo_conta && (
                  <span className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
                    {row.codigo_conta}
                  </span>
                )}
              </div>
            </button>
          </div>
        );
      case "centro_custo":
        return (
          <div className="flex items-center gap-2 whitespace-nowrap">
            {ordemHierarquiaContasPrimeiro ? (
              // Nova ordem: Centro de custo é level 2 (sem botão de toggle)
              <div className="w-8 h-8 flex items-center justify-center flex-shrink-0">
                <span className="text-gray-400 font-bold text-lg">•</span>
              </div>
            ) : (
              // Ordem original: Centro de custo é level 1 (com botão de toggle)
            <button
                onClick={() => toggleCentro(`${row.grupo}-${row.centro_custo}`)}
                className="p-2 hover:bg-blue-100 rounded-lg transition-all duration-150 ease-in-out flex items-center justify-center w-8 h-8 flex-shrink-0 transform hover:scale-105"
              >
                {row.isExpanded ? (
                  <ChevronDown className="w-4 h-4 text-blue-600 transition-transform duration-150" />
                ) : (
                  <ChevronRight className="w-4 h-4 text-blue-600 transition-transform duration-150" />
                )}
            </button>
            )}
            <button
              onClick={() => handleRowClick(row)}
              className="flex-1 text-left hover:bg-blue-50/50 p-2 rounded-lg cursor-pointer transition-all duration-200 truncate"
            >
          <div className="flex items-center gap-2">
                <span className="font-medium text-gray-700">
                  {row.codigo_centro_custo 
                    ? `${row.centro_custo} - ${row.codigo_centro_custo}`
                    : row.centro_custo
                  }
                </span>
              </div>
            </button>
          </div>
        );
      default:
        return null;
    }
  };

  // Loading será tratado dentro do componente principal

  // Error será tratado dentro do componente principal

  const hierarchicalData = buildHierarchicalData();

  return (
    <div className="w-full max-w-none mx-auto p-2">
      {/* Header Section */}
      <div className="mb-2">
        <div className="flex items-center justify-between mb-1">
          <div className="flex items-center gap-2">
            <div>
              <h1 className="text-2xl font-bold text-gray-900">DRE Gerencial</h1>
              <p className="text-sm text-gray-500">
                Demonstração do Resultado do Exercício
              </p>
          </div>
      </div>

          {/* Controles */}
          <div className="flex items-center gap-2">
            {/* Botão de Exportar XLSX */}
            <Button
              variant="outline"
              size="sm"
              onClick={exportarXLSX}
              disabled={!filtrosAplicados || hierarchicalData.length === 0}
              className="flex items-center gap-2 text-xs h-8 px-3 transition-all duration-150 ease-in-out hover:scale-105 disabled:hover:scale-100"
            >
              <Download className="w-4 h-4" />
              Exportar XLSX
            </Button>

            {/* Botão de Expandir/Recolher */}
              <Button
              variant="outline"
              size="sm"
              onClick={toggleExpandAll}
              disabled={!filtrosAplicados || hierarchicalData.length === 0}
              className="flex items-center gap-2 text-xs h-8 px-3 transition-all duration-150 ease-in-out hover:scale-105 disabled:hover:scale-100"
            >
              {isAllExpanded ? (
                <>
                  <Minimize2 className="w-4 h-4" />
                  Recolher Tudo
                </>
              ) : (
                <>
                  <Maximize2 className="w-4 h-4" />
                  Expandir Tudo
                </>
              )}
              </Button>
            
            {/* Botão de Filtro */}
            <Sheet open={isFilterOpen} onOpenChange={setIsFilterOpen}>
            <SheetTrigger asChild>
              <Button variant="outline" className="flex items-center gap-2">
                <Filter className="w-4 h-4" />
                Filtros
              </Button>
            </SheetTrigger>
            <SheetContent className="w-[400px] sm:w-[540px]">
              <SheetHeader>
                <SheetTitle>Filtros</SheetTitle>
                <SheetDescription>
                  Ajuste os critérios e clique em Pesquisar para atualizar a visão.
                </SheetDescription>
              </SheetHeader>
              
              <div className="grid flex-1 auto-rows-min gap-3 py-2">
                {/* Período */}
                <div className="grid gap-2">
                  <Label>Período</Label>
                  <div className="grid grid-cols-2 gap-2">
                    <div>
                      <Label htmlFor="periodo-de" className="text-xs text-gray-500">DE</Label>
                      <Select value={filtros.periodoDe} onValueChange={(value) => handleFiltroChange('periodoDe', value)}>
                        <SelectTrigger>
                          <SelectValue placeholder="Selecione" />
                        </SelectTrigger>
                        <SelectContent>
                          {mesesDisponiveis.map(mes => (
                            <SelectItem key={mes} value={mes}>{mes}</SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
            </div>
                    <div>
                      <Label htmlFor="periodo-ate" className="text-xs text-gray-500">ATÉ</Label>
                      <Select value={filtros.periodoAte} onValueChange={(value) => handleFiltroChange('periodoAte', value)}>
                        <SelectTrigger>
                          <SelectValue placeholder="Selecione" />
                        </SelectTrigger>
                        <SelectContent>
                          {mesesDisponiveis.map(mes => (
                            <SelectItem key={mes} value={mes}>{mes}</SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                </div>
                </div>
              </div>

                {/* Grupo 
                <div className="grid gap-2">
                  <Label htmlFor="grupo">GRUPO</Label>
                  <Select value={filtros.grupo} onValueChange={(value) => handleFiltroChange('grupo', value)}>
                    <SelectTrigger>
                      <SelectValue placeholder="Selecione" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="Todos">Todos</SelectItem>
                      {opcoesGrupos.map(grupo => (
                        <SelectItem key={grupo} value={grupo}>{grupo}</SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>*/}

                {/* Subgrupo 
                <div className="grid gap-2">
                  <Label htmlFor="subgrupo">SUBGRUPO</Label>
                  <Select value={filtros.subgrupo} onValueChange={(value) => handleFiltroChange('subgrupo', value)}>
                    <SelectTrigger>
                      <SelectValue placeholder="Selecione" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="Todos">Todos</SelectItem>
                      {opcoesSubgrupos.map(subgrupo => (
                        <SelectItem key={subgrupo} value={subgrupo}>{subgrupo}</SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>*/}

                {/* Centro de Custo */}
                <div className="grid gap-2">
                  <div className="flex items-center justify-between">
                    <Label htmlFor="centro-custo">CENTRO DE CUSTO</Label>
                    <div className="flex gap-1">
              <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        onClick={selecionarTodosCentros}
                        className="text-xs h-5 px-2"
                      >
                        Todos
                      </Button>
              <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        onClick={limparCentros}
                        className="text-xs h-5 px-2"
                      >
                        Limpar
              </Button>
            </div>
          </div>
                  <div className="max-h-32 overflow-y-auto border rounded-md p-1 space-y-1">
                    {opcoesCentrosCusto.map(centro => (
                      <div key={centro} className="flex items-center space-x-1">
                        <Checkbox
                          id={`centro-${centro}`}
                          checked={centrosCustoSelecionados.includes(centro)}
                          onCheckedChange={() => toggleCentroCusto(centro)}
                        />
                        <Label
                          htmlFor={`centro-${centro}`}
                          className="text-sm font-normal cursor-pointer flex-1"
                        >
                          {centro}{codigosCentrosCusto[centro] ? ` - ${codigosCentrosCusto[centro]}` : ''}
                        </Label>
              </div>
            ))}
                  </div>
                  {centrosCustoSelecionados.length > 0 && (
                    <div className="text-xs text-gray-500">
                      {centrosCustoSelecionados.length} centro(s) selecionado(s)
                    </div>
                  )}
        </div>

                {/* Conta */}
                <div className="grid gap-2">
                  <div className="flex items-center justify-between">
                    <Label htmlFor="conta">CONTA</Label>
                    <div className="flex gap-1">
              <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        onClick={selecionarTodasContas}
                        className="text-xs h-5 px-2"
                      >
                        Todas
                      </Button>
                      <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        onClick={limparContas}
                        className="text-xs h-5 px-2"
                      >
                        Limpar
              </Button>
              </div>
          </div>
                  <div className="max-h-32 overflow-y-auto border rounded-md p-1 space-y-1">
                    {opcoesContas.map(conta => (
                      <div key={conta} className="flex items-center space-x-1">
                        <Checkbox
                          id={`conta-${conta}`}
                          checked={contasSelecionadas.includes(conta)}
                          onCheckedChange={() => toggleConta(conta)}
                        />
                        <Label
                          htmlFor={`conta-${conta}`}
                          className="text-sm font-normal cursor-pointer flex-1"
                        >
                          {conta}{codigosContas[conta] ? ` - ${codigosContas[conta]}` : ''}
                        </Label>
                      </div>
                    ))}
                  </div>
                  {contasSelecionadas.length > 0 && (
                    <div className="text-xs text-gray-500">
                      {contasSelecionadas.length} conta(s) selecionada(s)
                    </div>
                  )}
        </div>

                {/* Valor 
                <div className="grid gap-2">
                  <Label>Valor</Label>
                  <div className="grid grid-cols-2 gap-2">
                    <div>
                      <Label htmlFor="valor-min" className="text-xs text-gray-500">VALOR MÍN.</Label>
                      <div className="relative">
                        <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">R$</span>
                        <Input
                          id="valor-min"
                          value={filtros.valorMin}
                          onChange={(e) => handleFiltroChange('valorMin', e.target.value)}
                          className="pl-8"
                          placeholder="0,00"
                        />
                      </div>
                    </div>
                    <div>
                      <Label htmlFor="valor-max" className="text-xs text-gray-500">VALOR MÁX.</Label>
                      <div className="relative">
                        <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">R$</span>
                        <Input
                          id="valor-max"
                          value={filtros.valorMax}
                          onChange={(e) => handleFiltroChange('valorMax', e.target.value)}
                          className="pl-8"
                          placeholder="0,00"
                        />
                      </div>
                    </div>
                  </div>
                </div>*/}

                {/* Busca Textual 
                <div className="grid gap-2">
                  <Label htmlFor="busca-textual">BUSCA TEXTUAL</Label>
                  <Input
                    id="busca-textual"
                    value={filtros.buscaTextual}
                    onChange={(e) => handleFiltroChange('buscaTextual', e.target.value)}
                    placeholder="Pesquise por grupo, subgrupo, centro ou conta"
                  />
                </div>*/}

                {/* Ordem da Hierarquia */}
                <div className="grid gap-2">
                  <Label>Ordem da Hierarquia</Label>
                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id="ordem-hierarquia"
                      checked={ordemHierarquiaContasPrimeiro}
                      onCheckedChange={(checked: boolean) => setOrdemHierarquiaContasPrimeiro(checked)}
                    />
                    <Label htmlFor="ordem-hierarquia" className="text-sm">
                      Contas antes de Centros de Custo
                    </Label>
                  </div>
                  <div className="text-xs text-gray-500">
                    {ordemHierarquiaContasPrimeiro 
                      ? "📄 Contas → 🏢 Centros de Custo" 
                      : "🏢 Centros de Custo → 📄 Contas"
                    }
                  </div>
                  </div>
                </div>

              <SheetFooter className="flex gap-2">
                {/* <Button variant="outline" onClick={limparFiltros} className="flex-1">
                  Limpar filtros
                </Button> */}
                <Button variant="outline" onClick={() => setIsFilterOpen(false)} className="flex-1">
                  Cancelar
                </Button>
                <Button onClick={aplicarFiltros} className="flex-1">
                  Pesquisar
                </Button>
              </SheetFooter>
            </SheetContent>
          </Sheet>
              </div>
            </div>
      </div>

      {/* Loading quando aplicando filtros */}
      {loading && (
        <div className="bg-white rounded-xl shadow-lg border border-gray-200 p-4 text-center">
          <div className="flex flex-col items-center gap-2">
            <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
              <LoaderPinwheel className="w-8 h-8 text-blue-600 animate-spin" />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-gray-900 mb-1">
                Aplicando filtros...
              </h3>
              <p className="text-gray-500">
                Aguarde enquanto processamos os dados.
              </p>
            </div>
          </div>
        </div>
      )}

      {/* Erro */}
      {error && !loading && (
        <div className="bg-white rounded-xl shadow-lg border border-red-200 p-4 text-center">
          <div className="flex flex-col items-center gap-2">
            <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
              <svg className="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
              </svg>
            </div>
            <div>
              <h3 className="text-lg font-semibold text-red-900 mb-2">
                Erro ao carregar dados
              </h3>
              <p className="text-red-600 mb-4">{error}</p>
              <Button onClick={() => aplicarFiltros()} className="flex items-center gap-1">
                Tentar novamente
              </Button>
            </div>
          </div>
        </div>
      )}

      {/* Mensagem quando não há dados */}
      {!filtrosAplicados && !loading && !error && (
        <div className="bg-white rounded-xl shadow-lg border border-gray-200 p-4 text-center">
          <div className="flex flex-col items-center gap-2">
            <div className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center">
              <Filter className="w-8 h-8 text-gray-400" />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-gray-900 mb-1">
                Nenhum dado exibido
              </h3>
              <p className="text-gray-500 mb-2">
                Clique no botão "Filtros" para definir os critérios de busca e visualizar os dados do DRE.
              </p>
              
            </div>
          </div>
        </div>
      )}

      {/* Table Container */}
      {filtrosAplicados && !loading && !error && (
        <div className="bg-white rounded-xl shadow-lg border border-gray-200">
          {/* Scroll Container */}
          <div className="overflow-x-auto overflow-y-auto max-h-[500px]">
            {/* Table */}
            <table className="w-full border-collapse">
              {/* Table Header */}
              <thead>
                <tr className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200">
                  <th className="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wide w-[300px] min-w-[300px]">
                    Descrição
                  </th>
                  {mesesDisponiveis.map((mes) => (
                    <React.Fragment key={mes}>
                      <th className="px-2 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide w-[120px] min-w-[120px]">
                        {mes}
                      </th>
                      <th className="px-2 py-2 text-center text-xs font-semibold text-gray-500 uppercase tracking-wide w-[100px] min-w-[100px]">
                        %
                      </th>
                    </React.Fragment>
                  ))}
                  <th className="px-4 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide w-[120px] min-w-[120px]">
                    Total
                  </th>
                </tr>
              </thead>
              
              {/* Table Body */}
              <tbody>
                {hierarchicalData.map((row, index) => (
                  <TableRow
                    key={index}
                    row={row}
                    index={index}
                    toggleGroup={toggleGroup}
                    toggleCentro={toggleCentro}
                    handleRowClick={handleRowClick}
                    getRowStyle={getRowStyle}
                    getIndentStyle={getIndentStyle}
                    renderCellContent={renderCellContent}
                    mesesDisponiveis={mesesDisponiveis}
                    formatCurrency={formatCurrency}
                    formatCurrencyWithColor={formatCurrencyWithColor}
                  />
                ))}
              </tbody>
            </table>
        </div>
      </div>
      )}

      {/* Componente Analítico */}
      {!loading && data.length > 0 && (
        <AnaliticoComponent filtros={analiticoFiltros} />
      )}
    </div>
  );
}