"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;
  entidades?: string;
}

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>;
  percentualTotal?: number;
  isCalculado?: boolean;
  entidades?: string;
}

// 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>
      
      {/* Coluna Percentual Total */}
      <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)}
        title={
          row.percentualTotal !== undefined
            ? `${row.percentualTotal.toFixed(1)}%`
            : "-"
        }
      >
        {row.percentualTotal !== undefined
          ? `${row.percentualTotal.toFixed(1)}%`
          : "-"}
      </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 [entidadesSelecionadas, setEntidadesSelecionadas] = useState<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[]>([]);
  const [opcoesEntidades, setOpcoesEntidades] = useState<string[]>([]);
  
  // Estados para filtros de busca nos campos de seleção
  const [filtroCentroCusto, setFiltroCentroCusto] = useState<string>("");
  const [filtroConta, setFiltroConta] = useState<string>("");
  const [filtroEntidade, setFiltroEntidade] = 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
    codigosCentrosCustoSelecionados: "", // Códigos dos centros de custo selecionados no filtro
    codigosContasSelecionadas: "", // Códigos das contas selecionadas no filtro
  });
  const [linhaSelecionada, setLinhaSelecionada] = useState<string | null>(null);
  const [isAllExpanded, setIsAllExpanded] = useState(false);
  
  // Refs para sincronizar scroll vertical entre coluna fixa e valores
  const descricaoScrollRef = React.useRef<HTMLDivElement>(null);
  const valoresScrollRef = React.useRef<HTMLDivElement>(null);
  
  // Função para sincronizar scroll vertical
  const syncScroll = (source: 'descricao' | 'valores') => {
    if (source === 'descricao' && descricaoScrollRef.current && valoresScrollRef.current) {
      valoresScrollRef.current.scrollTop = descricaoScrollRef.current.scrollTop;
    } else if (source === 'valores' && descricaoScrollRef.current && valoresScrollRef.current) {
      descricaoScrollRef.current.scrollTop = valoresScrollRef.current.scrollTop;
    }
  };

  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
      // Usar um Map para garantir que pegamos o código correto mesmo com duplicatas
      const codigos: Record<string, string> = {};
      const codigosPorNome = new Map<string, Set<string>>();
      
      dadosCompletos.forEach((item: DREItem) => {
        if (item.centro_custo && item.codigo_centro_custo) {
          if (!codigosPorNome.has(item.centro_custo)) {
            codigosPorNome.set(item.centro_custo, new Set());
          }
          codigosPorNome.get(item.centro_custo)!.add(item.codigo_centro_custo);
        }
      });
      
      // Para cada centro de custo, usar o código mais comum ou o primeiro encontrado
      codigosPorNome.forEach((codigosSet, nome) => {
        const codigosArray = Array.from(codigosSet);
        // Se houver apenas um código, usar esse
        if (codigosArray.length === 1) {
          codigos[nome] = codigosArray[0];
        } else {
          // Se houver múltiplos códigos, verificar qual é mais frequente nos dados
          const frequencia: Record<string, number> = {};
          dadosCompletos.forEach((item: DREItem) => {
            if (item.centro_custo === nome && item.codigo_centro_custo) {
              frequencia[item.codigo_centro_custo] = (frequencia[item.codigo_centro_custo] || 0) + 1;
            }
          });
          // Pegar o código mais frequente
          const codigoMaisFrequente = Object.entries(frequencia).sort((a, b) => b[1] - a[1])[0];
          codigos[nome] = codigoMaisFrequente ? codigoMaisFrequente[0] : codigosArray[0];
        }
      });
      
      console.log('🗺️ Mapeamento de códigos de centros de custo criado:', codigos);
      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);
      
      // Extrair entidades únicas
      const entidadesUnicas = [...new Set(dadosCompletos.map((item: DREItem) => item.entidades).filter(Boolean))].sort() as string[];
      console.log('🏢 Entidades únicas encontradas:', entidadesUnicas);
      console.log('📊 Total de entidades:', entidadesUnicas.length);
      setOpcoesEntidades(entidadesUnicas);
      
      // 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);
      
      // Inicializar com todas as entidades selecionadas
      setEntidadesSelecionadas(entidadesUnicas);
      
    } 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
    const centroCusto002003017Selecionado = centrosCustoSelecionados.some(centro => {
      // Verificar pelo código no mapeamento primeiro
      const codigoCentro = codigosCentrosCusto[centro];
      if (codigoCentro === "002.003.017") {
        return true;
      }
      // Se não encontrar no mapeamento, buscar nos dados
      const item = data.find((d: DREItem) => d.centro_custo === centro);
      return item?.codigo_centro_custo === "002.003.017";
    });
    
    if (!centroCusto002003017Selecionado) {
      excluirCentroCusto = "002.003.017";
    }
    
    // Se a conta "100050" não está selecionada, excluir da consulta
    const conta100050Selecionada = contasSelecionadas.some(conta => {
      // Verificar pelo código no mapeamento primeiro
      const codigoConta = codigosContas[conta];
      if (codigoConta === "100050") {
        return true;
      }
      // Se não encontrar no mapeamento, buscar nos dados
      const item = data.find((d: DREItem) => d.conta === conta);
      return item?.codigo_conta?.toString() === "100050";
    });
    
    if (!conta100050Selecionada) {
      excluirCodigoConta = "100050";
    }

    // Obter códigos dos centros de custo selecionados no filtro - APENAS CÓDIGOS
    const codigosCentrosCustoSelecionados = centrosCustoSelecionados
      .map(centro => {
        // Primeiro tentar buscar no objeto codigosCentrosCusto (mapeamento)
        const codigoDoMapeamento = codigosCentrosCusto[centro];
        if (codigoDoMapeamento) {
          console.log(`🔍 Código encontrado no mapeamento para "${centro}": ${codigoDoMapeamento}`);
          return codigoDoMapeamento;
        }
        // Se não encontrar no mapeamento, buscar nos dados
        const item = data.find((d: DREItem) => d.centro_custo === centro);
        const codigoEncontrado = item?.codigo_centro_custo;
        if (codigoEncontrado) {
          console.log(`🔍 Código encontrado nos dados para "${centro}": ${codigoEncontrado}`);
        } else {
          console.warn(`⚠️ Código NÃO encontrado para centro de custo "${centro}"`);
        }
        return codigoEncontrado;
      })
      .filter(codigo => codigo && codigo.trim() !== '') // Remover undefined e strings vazias
      .join(',');
    
    console.log('📋 Códigos de centros de custo selecionados:', codigosCentrosCustoSelecionados);

    // Obter códigos das contas selecionadas no filtro
    const codigosContasSelecionadas = contasSelecionadas
      .map(conta => {
        const item = data.find((d: DREItem) => d.conta === conta);
        return item?.codigo_conta?.toString();
      })
      .filter(codigo => codigo) // Remover undefined
      .join(',');

    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,
      codigosCentrosCustoSelecionados,
      codigosContasSelecionadas,
    };

    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,
      codigosCentrosCustoSelecionados: novosFiltros.codigosCentrosCustoSelecionados,
      codigosContasSelecionadas: novosFiltros.codigosContasSelecionadas
    });
    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([]);
  };

  const toggleEntidade = (entidade: string) => {
    setEntidadesSelecionadas(prev => {
      if (prev.includes(entidade)) {
        return prev.filter(e => e !== entidade);
      } else {
        return [...prev, entidade];
      }
    });
  };

  const selecionarTodasEntidades = () => {
    setEntidadesSelecionadas(opcoesEntidades);
  };

  const limparEntidades = () => {
    setEntidadesSelecionadas([]);
  };

  // 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 || '',
        'Entidade': row.entidades || '',
        '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: 20 },  // Entidade
      { 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 "19": // Resultado Não Operacional = Grupo 14 + 15 + 16 + 17 + 18
          mesesDisponiveis.forEach(mes => {
            const valor14 = obterValorGrupo("14", mes);
            const valor15 = obterValorGrupo("15", mes);
            const valor16 = obterValorGrupo("16", mes);
            const valor17 = obterValorGrupo("17", mes);
            const valor18 = obterValorGrupo("18", mes);
            valoresPorMes[mes] = valor14 + valor15 + valor16 + valor17 + valor18;
          });
          break;
          
        case "20": // LAIR = Grupo 10 + 13 + 19
          mesesDisponiveis.forEach(mes => {
            const valor10 = obterValorGrupo("10", mes);
            const valor13 = obterValorGrupo("13", mes);
            const valor19 = obterValorGrupo("19", mes);
            valoresPorMes[mes] = valor10 + valor13 + valor19;
          });
          break;
          
        case "21": // IR = Se LAIR > 0 calcular 20% e resultado negativo (*-1), se não 0
          mesesDisponiveis.forEach(mes => {
            const valor20 = obterValorGrupo("20", mes);
            if (valor20 > 0) {
              valoresPorMes[mes] = (valor20 * 0.20) * -1;
            } else {
              valoresPorMes[mes] = 0;
            }
          });
          break;
          
        case "22": // CSLL = Se LAIR > 0 calcular 9% e resultado negativo (*-1), se não 0
          mesesDisponiveis.forEach(mes => {
            const valor20 = obterValorGrupo("20", mes);
            if (valor20 > 0) {
              valoresPorMes[mes] = (valor20 * 0.09) * -1;
            } else {
              valoresPorMes[mes] = 0;
            }
          });
          break;
          
        case "23": // Lucro Líquido = Grupo 20 + 21 + 22
          mesesDisponiveis.forEach(mes => {
            const valor20 = obterValorGrupo("20", mes);
            const valor21 = obterValorGrupo("21", mes);
            const valor22 = obterValorGrupo("22", mes);
            valoresPorMes[mes] = valor20 + valor21 + valor22;
          });
          break;
          
        case "25": // EBITDA = Grupo 20 - (13 + 19 + 24)
          mesesDisponiveis.forEach(mes => {
            const valor20 = obterValorGrupo("20", mes);
            const valor13 = obterValorGrupo("13", mes);
            const valor19 = obterValorGrupo("19", mes);
            const valor24 = obterValorGrupo("24", mes);
            valoresPorMes[mes] = valor20 - (valor13 + valor19 + valor24);
          });
          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", "19", "20", "21", "22", "23", "25"].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);
      const totalFinal = isCalculado ? totalCalculado : totalGrupo;

      // Linha do grupo (Level 0)
      rows.push({
        type: "grupo",
        level: 0,
        grupo,
        total: totalFinal,
        valoresPorMes: valoresGrupoPorMes,
        percentuaisPorMes: calcularPercentuaisPorMes(valoresGrupoPorMes, grupo),
        percentualTotal: calcularPercentualTotal(totalFinal, 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),
            percentualTotal: calcularPercentualTotal(totalConta, grupo),
            entidades: contaItems[0]?.entidades || "",
          });

          // 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),
              percentualTotal: calcularPercentualTotal(totalCentro, grupo),
              entidades: centroItems[0]?.entidades || "",
            });
          });
        });
      } 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),
            percentualTotal: calcularPercentualTotal(totalCentro, grupo),
            entidades: centroItems[0]?.entidades || "",
          });

          // 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),
              percentualTotal: calcularPercentualTotal(totalConta, grupo),
              entidades: contaItems[0]?.entidades || "",
            });
          });
        });
      }
    });

    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]);

  // Função para recalcular grupos calculados baseado apenas nos dados filtrados
  const recalcularGruposCalculados = (dadosFiltrados: DREItem[]): DREItem[] => {
    const gruposCalculados: DREItem[] = [];
    
    // Agrupar dados por mês para cálculos
    const dadosPorMes = dadosFiltrados.reduce((acc, item) => {
      const mes = item.data_competencia;
      if (!acc[mes]) acc[mes] = [];
      acc[mes].push(item);
      return acc;
    }, {} as Record<string, DREItem[]>);
    
    // Para cada mês, criar os grupos calculados
    Object.keys(dadosPorMes).forEach(mes => {
      const dadosMes = dadosPorMes[mes];
      
      // Calcular valores por grupo usando código numérico
      const valoresPorGrupo = dadosMes.reduce((acc: Record<string, number>, item: DREItem) => {
        const codgrupo = item.codgrupo || "";
        if (!codgrupo) return acc;
        if (!acc[codgrupo]) acc[codgrupo] = 0;
        acc[codgrupo] += parseFloat(item.valor);
        return acc;
      }, {} as Record<string, number>);
      
      // Função auxiliar para obter valor de um grupo (calculado ou não)
      const obterValorGrupo = (codigoGrupo: string): number => {
        // Primeiro, verificar se já foi calculado nos grupos calculados
        const grupoCalculado = gruposCalculados.find(g => g.codgrupo === codigoGrupo && g.data_competencia === mes);
        if (grupoCalculado) {
          return parseFloat(grupoCalculado.valor);
        }
        // Se não, buscar nos valores diretos dos grupos
        return valoresPorGrupo[codigoGrupo] || 0;
      };
      
      // 03 - Faturamento Líquido (01 + 02)
      const faturamentoBruto = valoresPorGrupo['01'] || 0;
      const devolucao = valoresPorGrupo['02'] || 0;
      const faturamentoLiquido = faturamentoBruto + devolucao;
      
      gruposCalculados.push({
        codfilial: "001",
        data_competencia: mes,
        data_cai: mes,
        grupo: "03 - FATURAMENTO LÍQUIDO",
        subgrupo: "CALCULADO",
        centro_custo: "CALCULADO",
        codigo_centro_custo: "",
        codigo_conta: 0,
        conta: "FATURAMENTO LÍQUIDO",
        valor: faturamentoLiquido.toString(),
        codgrupo: "03",
        isCalculado: true
      });
      
      // 05 - Lucro Bruto (03 + 04) - usar grupo 03 calculado
      const cmv = valoresPorGrupo['04'] || 0;
      const valor03 = obterValorGrupo("03");
      const lucroBruto = valor03 + cmv;
      
      gruposCalculados.push({
        codfilial: "001",
        data_competencia: mes,
        data_cai: mes,
        grupo: "05 - LUCRO BRUTO",
        subgrupo: "CALCULADO",
        centro_custo: "CALCULADO",
        codigo_centro_custo: "",
        codigo_conta: 0,
        conta: "LUCRO BRUTO",
        valor: lucroBruto.toString(),
        codgrupo: "05",
        isCalculado: true
      });
      
      // 07 - Margem Loja (05 + 06) - usar grupo 05 calculado
      const receitasGastosDiretos = valoresPorGrupo['06'] || 0;
      const valor05 = obterValorGrupo("05");
      const margemLoja = valor05 + receitasGastosDiretos;
      
      gruposCalculados.push({
        codfilial: "001",
        data_competencia: mes,
        data_cai: mes,
        grupo: "07 - MARGEM LOJA",
        subgrupo: "CALCULADO",
        centro_custo: "CALCULADO",
        codigo_centro_custo: "",
        codigo_conta: 0,
        conta: "MARGEM LOJA",
        valor: margemLoja.toString(),
        codgrupo: "07",
        isCalculado: true
      });
      
      // 10 - Resultado Operacional (07 + 08 + 09) - usar grupo 07 calculado
      const verba = valoresPorGrupo['08'] || 0;
      const receitasGastosIndiretos = valoresPorGrupo['09'] || 0;
      const valor07 = obterValorGrupo("07");
      const resultadoOperacional = valor07 + verba + receitasGastosIndiretos;
      
      gruposCalculados.push({
        codfilial: "001",
        data_competencia: mes,
        data_cai: mes,
        grupo: "10 - RESULTADO OPERACIONAL",
        subgrupo: "CALCULADO",
        centro_custo: "CALCULADO",
        codigo_centro_custo: "",
        codigo_conta: 0,
        conta: "RESULTADO OPERACIONAL",
        valor: resultadoOperacional.toString(),
        codgrupo: "10",
        isCalculado: true
      });
      
      // 13 - Resultado Financeiro (11 + 12)
      const receitaFinanceira = valoresPorGrupo['11'] || 0;
      const despesaFinanceira = valoresPorGrupo['12'] || 0;
      const resultadoFinanceiro = receitaFinanceira + despesaFinanceira;
      
      gruposCalculados.push({
        codfilial: "001",
        data_competencia: mes,
        data_cai: mes,
        grupo: "13 - RESULTADO FINANCEIRO",
        subgrupo: "CALCULADO",
        centro_custo: "CALCULADO",
        codigo_centro_custo: "",
        codigo_conta: 0,
        conta: "RESULTADO FINANCEIRO",
        valor: resultadoFinanceiro.toString(),
        codgrupo: "13",
        isCalculado: true
      });
      
      // 19 - Resultado Não Operacional (14 + 15 + 16 + 17 + 18)
      const prejuizosPerdas = valoresPorGrupo['14'] || 0;
      const inativas = valoresPorGrupo['15'] || 0;
      const diretoria = valoresPorGrupo['16'] || 0;
      const lancamentosSemCC = valoresPorGrupo['17'] || 0;
      const receitasDespesasNaoOperacional = valoresPorGrupo['18'] || 0;
      const resultadoNaoOperacional = prejuizosPerdas + inativas + diretoria + lancamentosSemCC + receitasDespesasNaoOperacional;
      
      gruposCalculados.push({
        codfilial: "001",
        data_competencia: mes,
        data_cai: mes,
        grupo: "19 - RESULTADO NÃO OPERACIONAL",
        subgrupo: "CALCULADO",
        centro_custo: "CALCULADO",
        codigo_centro_custo: "",
        codigo_conta: 0,
        conta: "RESULTADO NÃO OPERACIONAL",
        valor: resultadoNaoOperacional.toString(),
        codgrupo: "19",
        isCalculado: true
      });
      
      // 20 - LAIR (10 + 13 + 19) - usar grupos calculados
      const valor10 = obterValorGrupo("10");
      const valor13 = obterValorGrupo("13");
      const valor19 = obterValorGrupo("19");
      const lair = valor10 + valor13 + valor19;
      
      gruposCalculados.push({
        codfilial: "001",
        data_competencia: mes,
        data_cai: mes,
        grupo: "20 - LAIR",
        subgrupo: "CALCULADO",
        centro_custo: "CALCULADO",
        codigo_centro_custo: "",
        codigo_conta: 0,
        conta: "LUCRO ANTES DO IMPOSTO DE RENDA",
        valor: lair.toString(),
        codgrupo: "20",
        isCalculado: true
      });
      
      // 21 - IR = Se LAIR > 0 calcular 20% e resultado negativo (*-1), se não 0
      const valor20_ir = obterValorGrupo("20");
      const ir = valor20_ir > 0 ? -(valor20_ir * 0.20) : 0;
      
      gruposCalculados.push({
        codfilial: "001",
        data_competencia: mes,
        data_cai: mes,
        grupo: "21 - IR",
        subgrupo: "CALCULADO",
        centro_custo: "CALCULADO",
        codigo_centro_custo: "",
        codigo_conta: 0,
        conta: "IMPOSTO DE RENDA",
        valor: ir.toString(),
        codgrupo: "21",
        isCalculado: true
      });
      
      // 22 - CSLL = Se LAIR > 0 calcular 9% e resultado negativo (*-1), se não 0
      const valor20_csll = obterValorGrupo("20");
      const csll = valor20_csll > 0 ? -(valor20_csll * 0.09) : 0;
      
      gruposCalculados.push({
        codfilial: "001",
        data_competencia: mes,
        data_cai: mes,
        grupo: "22 - CSLL",
        subgrupo: "CALCULADO",
        centro_custo: "CALCULADO",
        codigo_centro_custo: "",
        codigo_conta: 0,
        conta: "CONTRIBUIÇÃO SOCIAL SOBRE LUCRO LÍQUIDO",
        valor: csll.toString(),
        codgrupo: "22",
        isCalculado: true
      });
      
      // 23 - Lucro Líquido (20 + 21 + 22) - usar grupos calculados
      const valor20 = obterValorGrupo("20");
      const valor21 = obterValorGrupo("21");
      const valor22 = obterValorGrupo("22");
      const lucroLiquido = valor20 + valor21 + valor22;
      
      gruposCalculados.push({
        codfilial: "001",
        data_competencia: mes,
        data_cai: mes,
        grupo: "23 - LUCRO LÍQUIDO",
        subgrupo: "CALCULADO",
        centro_custo: "CALCULADO",
        codigo_centro_custo: "",
        codigo_conta: 0,
        conta: "LUCRO LÍQUIDO",
        valor: lucroLiquido.toString(),
        codgrupo: "23",
        isCalculado: true
      });
      
      // 25 - EBITDA (20 - (13 + 19 + 24)) - usar grupos calculados
      const despesaTributaria = valoresPorGrupo['24'] || 0;
      const valor20_ebitda = obterValorGrupo("20");
      const valor13_ebitda = obterValorGrupo("13");
      const valor19_ebitda = obterValorGrupo("19");
      const ebitda = valor20_ebitda - (valor13_ebitda + valor19_ebitda + despesaTributaria);
      
      gruposCalculados.push({
        codfilial: "001",
        data_competencia: mes,
        data_cai: mes,
        grupo: "25 - EBITDA",
        subgrupo: "CALCULADO",
        centro_custo: "CALCULADO",
        codigo_centro_custo: "",
        codigo_conta: 0,
        conta: "EBITDA",
        valor: ebitda.toString(),
        codgrupo: "25",
        isCalculado: true
      });
    });
    
    return gruposCalculados;
  };

  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([]);
    setEntidadesSelecionadas([]);
    
    // Limpar filtros de busca
    setFiltroCentroCusto("");
    setFiltroConta("");
    setFiltroEntidade("");
    
    // Limpar dados da tabela
    setData([]);
    setDadosFiltrados([]);
    setFiltrosAplicados(false);
    setMesesDisponiveis([]);
    setIsAllExpanded(false);
    setOrdemHierarquiaContasPrimeiro(false);
    
    // Fechar o sheet de filtros
    setIsFilterOpen(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) - USAR APENAS CÓDIGO
        // IMPORTANTE: Preservar grupos calculados (isCalculado ou centro_custo === "CALCULADO")
        if (centrosCustoSelecionados.length > 0) {
          // Criar conjunto de códigos esperados dos centros selecionados - APENAS CÓDIGOS
          const codigosEsperados = new Set<string>();
          
          centrosCustoSelecionados.forEach(centro => {
            // Buscar o código no mapeamento primeiro
            const codigoCentro = codigosCentrosCusto[centro];
            if (codigoCentro) {
              codigosEsperados.add(codigoCentro);
            } else {
              // Se não encontrar no mapeamento, tentar buscar nos dados carregados
              const item = dadosCompletos.find((d: DREItem) => d.centro_custo === centro);
              if (item?.codigo_centro_custo) {
                codigosEsperados.add(item.codigo_centro_custo);
              }
            }
          });
          
          // Filtrar APENAS pelo código do centro de custo, ignorando o nome
          // MAS preservar grupos calculados
          dadosFiltrados = dadosFiltrados.filter((item: DREItem) => {
            // Preservar grupos calculados (têm centro_custo === "CALCULADO" ou isCalculado === true)
            if (item.centro_custo === "CALCULADO" || item.isCalculado === true) {
              return true;
            }
            
            // Para outros itens, verificar pelo código
            if (!item.codigo_centro_custo) {
              return false;
            }
            return codigosEsperados.has(item.codigo_centro_custo);
          });
          
          console.log('🏢 Filtro de centros de custo aplicado (APENAS CÓDIGO):', {
            selecionados: centrosCustoSelecionados,
            codigosEsperados: Array.from(codigosEsperados),
            totalFiltrado: dadosFiltrados.length,
            centrosEncontrados: [...new Set(dadosFiltrados.map((d: DREItem) => d.centro_custo))],
            codigosEncontrados: [...new Set(dadosFiltrados.map((d: DREItem) => d.codigo_centro_custo).filter(Boolean))],
            gruposCalculados: dadosFiltrados.filter((d: DREItem) => d.centro_custo === "CALCULADO" || d.isCalculado === true).length
          });
        }
        
        // Filtro por conta (multi-seleção)
        // IMPORTANTE: Preservar grupos calculados (isCalculado ou centro_custo === "CALCULADO")
        if (contasSelecionadas.length > 0) {
          dadosFiltrados = dadosFiltrados.filter((item: DREItem) => {
            // Preservar grupos calculados
            if (item.centro_custo === "CALCULADO" || item.isCalculado === true) {
              return true;
            }
            // Para outros itens, verificar se a conta está selecionada
            return 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)
          );
        }
        
        // Filtro por entidades (multi-seleção)
        // IMPORTANTE: Preservar grupos calculados (isCalculado ou centro_custo === "CALCULADO")
        if (entidadesSelecionadas.length > 0) {
          dadosFiltrados = dadosFiltrados.filter((item: DREItem) => {
            // Preservar grupos calculados
            if (item.centro_custo === "CALCULADO" || item.isCalculado === true) {
              return true;
            }
            // Para outros itens, verificar se a entidade está selecionada
            return item.entidades && entidadesSelecionadas.includes(item.entidades);
          });
          
          console.log('🏢 Filtro de entidades aplicado:', {
            selecionadas: entidadesSelecionadas,
            totalFiltrado: dadosFiltrados.length,
            entidadesEncontradas: [...new Set(dadosFiltrados.map((d: DREItem) => d.entidades).filter(Boolean))],
            gruposCalculados: dadosFiltrados.filter((d: DREItem) => d.centro_custo === "CALCULADO" || d.isCalculado === true).length
          });
        }
        
        // Remover grupos calculados antigos (que foram calculados com todos os dados)
        // Eles serão recalculados com base apenas nos dados filtrados
        dadosFiltrados = dadosFiltrados.filter((item: DREItem) => 
          item.centro_custo !== "CALCULADO" && item.isCalculado !== true
        );
        
        // Recalcular grupos calculados com base apenas nos dados filtrados
        const gruposCalculadosRecalculados = recalcularGruposCalculados(dadosFiltrados);
        
        // Adicionar os grupos calculados recalculados de volta aos dados filtrados
        dadosFiltrados = [...dadosFiltrados, ...gruposCalculadosRecalculados];
        
        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;
  };

  // Função para calcular percentual do total baseado no grupo 03 como referência
  const calcularPercentualTotal = (
    total: number,
    grupo: string
  ): number => {
    // Se for o grupo 03, retorna 100%
    if (grupo.includes("03")) {
      return 100;
    }

    // Calcular o total do grupo 03
    const grupo03Items = data.filter((item) => 
      item.grupo.includes("03")
    );

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

    if (totalGrupo03 !== 0) {
      return (total / totalGrupo03) * 100;
    } else {
      return 0;
    }
  };

  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 "19": // Resultado Não Operacional = Grupo 14 + 15 + 16 + 17 + 18
          mesesDisponiveis.forEach(mes => {
            const valor14 = obterValorGrupo("14", mes);
            const valor15 = obterValorGrupo("15", mes);
            const valor16 = obterValorGrupo("16", mes);
            const valor17 = obterValorGrupo("17", mes);
            const valor18 = obterValorGrupo("18", mes);
            valoresPorMes[mes] = valor14 + valor15 + valor16 + valor17 + valor18;
          });
          break;
          
        case "20": // LAIR = Grupo 10 + 13 + 19
          mesesDisponiveis.forEach(mes => {
            const valor10 = obterValorGrupo("10", mes);
            const valor13 = obterValorGrupo("13", mes);
            const valor19 = obterValorGrupo("19", mes);
            valoresPorMes[mes] = valor10 + valor13 + valor19;
          });
          break;
          
        case "21": // IR = Se LAIR > 0 calcular 20% e resultado negativo (*-1), se não 0
          mesesDisponiveis.forEach(mes => {
            const valor20 = obterValorGrupo("20", mes);
            if (valor20 > 0) {
              valoresPorMes[mes] = (valor20 * 0.20) * -1;
            } else {
              valoresPorMes[mes] = 0;
            }
          });
          break;
          
        case "22": // CSLL = Se LAIR > 0 calcular 9% e resultado negativo (*-1), se não 0
          mesesDisponiveis.forEach(mes => {
            const valor20 = obterValorGrupo("20", mes);
            if (valor20 > 0) {
              valoresPorMes[mes] = (valor20 * 0.09) * -1;
            } else {
              valoresPorMes[mes] = 0;
            }
          });
          break;
          
        case "23": // Lucro Líquido = Grupo 20 + 21 + 22
          mesesDisponiveis.forEach(mes => {
            const valor20 = obterValorGrupo("20", mes);
            const valor21 = obterValorGrupo("21", mes);
            const valor22 = obterValorGrupo("22", mes);
            valoresPorMes[mes] = valor20 + valor21 + valor22;
          });
          break;
          
        case "25": // EBITDA = Grupo 20 - (13 + 19 + 24)
          mesesDisponiveis.forEach(mes => {
            const valor20 = obterValorGrupo("20", mes);
            const valor13 = obterValorGrupo("13", mes);
            const valor19 = obterValorGrupo("19", mes);
            const valor24 = obterValorGrupo("24", mes);
            valoresPorMes[mes] = valor20 - (valor13 + valor19 + valor24);
          });
          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", "19", "20", "21", "22", "23", "25"].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);
      const totalFinal = isCalculado ? totalCalculado : totalGrupo;

      // Linha do grupo
      rows.push({
        type: "grupo",
        level: 0,
        grupo,
        total: totalFinal,
        isExpanded: expandedGroups.has(grupo),
        valoresPorMes,
        percentuaisPorMes: calcularPercentuaisPorMes(valoresPorMes, grupo),
        percentualTotal: calcularPercentualTotal(totalFinal, 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
            ),
            percentualTotal: calcularPercentualTotal(totalConta, 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
                  ),
                  percentualTotal: calcularPercentualTotal(totalCentro, 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
                ),
                percentualTotal: calcularPercentualTotal(totalCentro, 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
                    ),
                    percentualTotal: calcularPercentualTotal(totalConta, 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] flex flex-col">
              <SheetHeader>
                <SheetTitle>Filtros</SheetTitle>
                <SheetDescription>
                  Ajuste os critérios e clique em Pesquisar para atualizar a visão.
                </SheetDescription>
              </SheetHeader>
              
              <div className="flex-1 overflow-y-auto pr-2">
                <div className="grid 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>
                  {/* Input de filtro para Centro de Custo */}
                  <Input
                    placeholder="Filtrar centros de custo..."
                    value={filtroCentroCusto}
                    onChange={(e) => setFiltroCentroCusto(e.target.value)}
                    className="h-8 text-sm"
                  />
                  <div className="max-h-32 overflow-y-auto border rounded-md p-1 space-y-1">
                    {opcoesCentrosCusto
                      .filter(centro => {
                        if (!filtroCentroCusto) return true;
                        const termo = filtroCentroCusto.toLowerCase();
                        const nomeCompleto = `${centro}${codigosCentrosCusto[centro] ? ` - ${codigosCentrosCusto[centro]}` : ''}`;
                        return nomeCompleto.toLowerCase().includes(termo);
                      })
                      .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>
                  {/* Input de filtro para Conta */}
                  <Input
                    placeholder="Filtrar contas..."
                    value={filtroConta}
                    onChange={(e) => setFiltroConta(e.target.value)}
                    className="h-8 text-sm"
                  />
                  <div className="max-h-32 overflow-y-auto border rounded-md p-1 space-y-1">
                    {opcoesContas
                      .filter(conta => {
                        if (!filtroConta) return true;
                        const termo = filtroConta.toLowerCase();
                        const nomeCompleto = `${conta}${codigosContas[conta] ? ` - ${codigosContas[conta]}` : ''}`;
                        return nomeCompleto.toLowerCase().includes(termo);
                      })
                      .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>*/}

                {/* Entidades */}
                <div className="grid gap-2">
                  <div className="flex items-center justify-between">
                    <Label htmlFor="entidades">ENTIDADES</Label>
                    <div className="flex gap-1">
                      <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        onClick={selecionarTodasEntidades}
                        className="text-xs h-5 px-2"
                      >
                        Todas
                      </Button>
                      <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        onClick={limparEntidades}
                        className="text-xs h-5 px-2"
                      >
                        Limpar
                      </Button>
                    </div>
                  </div>
                  {/* Input de filtro para Entidades */}
                  <Input
                    placeholder="Filtrar entidades..."
                    value={filtroEntidade}
                    onChange={(e) => setFiltroEntidade(e.target.value)}
                    className="h-8 text-sm"
                  />
                  <div className="max-h-32 overflow-y-auto border rounded-md p-1 space-y-1">
                    {opcoesEntidades
                      .filter(entidade => {
                        if (!filtroEntidade) return true;
                        const termo = filtroEntidade.toLowerCase();
                        return entidade.toLowerCase().includes(termo);
                      })
                      .map(entidade => (
                        <div key={entidade} className="flex items-center space-x-1">
                          <Checkbox
                            id={`entidade-${entidade}`}
                            checked={entidadesSelecionadas.includes(entidade)}
                            onCheckedChange={() => toggleEntidade(entidade)}
                          />
                          <Label
                            htmlFor={`entidade-${entidade}`}
                            className="text-sm font-normal cursor-pointer flex-1"
                          >
                            {entidade}
                          </Label>
                        </div>
                      ))}
                  </div>
                  {entidadesSelecionadas.length > 0 && (
                    <div className="text-xs text-gray-500">
                      {entidadesSelecionadas.length} entidade(s) selecionada(s)
                    </div>
                  )}
                </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>
              </div>

              <SheetFooter className="flex gap-2 mt-4 border-t pt-4">
                <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 overflow-hidden">
          {/* Container com coluna fixa e scroll horizontal */}
          <div className="flex max-h-[500px] overflow-hidden">
            {/* Coluna fixa - Descrição */}
            <div className="flex-shrink-0 border-r border-gray-200">
              {/* Header fixo da descrição */}
              <div className="sticky top-0 z-20 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200">
                <div className="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wide w-[300px] min-w-[300px]">
                  Descrição
                </div>
              </div>
              {/* Corpo da descrição com scroll vertical */}
              <div 
                ref={descricaoScrollRef}
                className="overflow-y-auto max-h-[500px]" 
                style={{ scrollbarWidth: 'thin' }}
                onScroll={() => syncScroll('descricao')}
              >
                {hierarchicalData.map((row, index) => (
                  <div
                    key={index}
                    className={`text-sm border-b border-gray-100 transition-all duration-200 ease-in-out ${getRowStyle(row)}`}
                    style={{ height: '40px', display: 'flex', alignItems: 'center' }}
                  >
                    <div className="px-4 py-1 w-[300px] min-w-[300px] whitespace-nowrap overflow-hidden flex items-center h-full">
                      <div style={getIndentStyle(row.level)} className="flex items-center h-full">
                        {renderCellContent(row)}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            
            {/* Parte com scroll - Valores */}
            <div className="flex-1 overflow-hidden">
              <div 
                ref={valoresScrollRef}
                className="overflow-x-auto overflow-y-auto max-h-[500px]" 
                style={{ scrollbarWidth: 'thin' }}
                onScroll={() => syncScroll('valores')}
              >
                <table className="w-full border-collapse">
                  {/* Table Header */}
                  <thead className="sticky top-0 z-10 bg-gradient-to-r from-blue-50 to-indigo-50">
                    <tr className="border-b border-gray-200">
                      {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] bg-gradient-to-r from-blue-50 to-indigo-50">
                            {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] bg-gradient-to-r from-blue-50 to-indigo-50">
                            %
                          </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] bg-gradient-to-r from-blue-50 to-indigo-50">
                        Total
                      </th>
                      <th className="px-2 py-2 text-center text-xs font-semibold text-gray-500 uppercase tracking-wide w-[100px] min-w-[100px] bg-gradient-to-r from-blue-50 to-indigo-50">
                        %
                      </th>
                    </tr>
                  </thead>
                  
                  {/* Table Body */}
                  <tbody>
                    {hierarchicalData.map((row, index) => (
                      <tr
                        key={index}
                        className={`text-sm border-b border-gray-100 transition-all duration-200 ease-in-out ${getRowStyle(row)}`}
                        style={{ height: '40px' }}
                      >
                        {/* 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]"
                              style={{ height: '40px', verticalAlign: 'middle' }}
                              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]"
                              style={{ height: '40px', verticalAlign: 'middle' }}
                              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]"
                          style={{ height: '40px', verticalAlign: 'middle' }}
                          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>
                        
                        {/* Coluna Percentual Total */}
                        <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]"
                          style={{ height: '40px', verticalAlign: 'middle' }}
                          onClick={() => handleRowClick(row)}
                          title={
                            row.percentualTotal !== undefined
                              ? `${row.percentualTotal.toFixed(1)}%`
                              : "-"
                          }
                        >
                          {row.percentualTotal !== undefined
                            ? `${row.percentualTotal.toFixed(1)}%`
                            : "-"}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Componente Analítico - Sempre renderizado para evitar violação das Rules of Hooks */}
      <AnaliticoComponent filtros={analiticoFiltros} />
    </div>
  );
}