"use client";

import { LoaderPinwheel, ChevronDown, ChevronRight, Filter, Maximize2, Minimize2, Download } from "lucide-react";
import React, { useEffect, useState, useCallback, 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;
  codigo_grupo: string;
  codigo_conta: number;
  conta: string;
  valor: string;
  codgrupo?: string;
  tipo?: string;
  filial?: string;
}

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

// Componente memoizado para linhas da tabela
const TableRow = memo(({ 
  row, 
  index, 
  handleRowClick, 
  getRowStyle, 
  getIndentStyle, 
  renderCellContent,
  mesesDisponiveis,
  formatCurrency,
  formatCurrencyWithColor,
  getFixedCellBackground
}: {
  row: HierarchicalRow;
  index: number;
  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 };
  getFixedCellBackground: (row: HierarchicalRow) => string;
}) => {
  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 sticky left-0 z-10 ${getFixedCellBackground(row)} shadow-[2px_0_4px_rgba(0,0,0,0.05)] cursor-pointer`}
        onClick={() => handleRowClick(row)}
      >
        <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 [expandedGrupos, setExpandedGrupos] = useState<Set<string>>(new Set());
  const [mesesDisponiveis, setMesesDisponiveis] = useState<string[]>([]);

  // Estados para filtros
  const [filtros, setFiltros] = useState({
    periodoDe: "",
    periodoAte: "",
    conta: "Todas",
  });
  
  // Estados para multi-seleção
  const [contasSelecionadas, setContasSelecionadas] = useState<string[]>([]);
  const [codigosContas, setCodigosContas] = useState<Record<string, string>>({});
  const [isFilterOpen, setIsFilterOpen] = useState(false);
  const [dadosFiltrados, setDadosFiltrados] = useState<DREItem[]>([]);
  const [filtrosAplicados, setFiltrosAplicados] = useState(false);
  
  // Estados para opções dos filtros
  const [opcoesGrupos, setOpcoesGrupos] = useState<string[]>([]);
  const [opcoesContas, setOpcoesContas] = useState<string[]>([]);
  
  // Estados para filtros de busca nos campos de seleção
  const [filtroConta, setFiltroConta] = useState<string>("");

  // Estados para analítico
  const [analiticoFiltros, setAnaliticoFiltros] = useState({
    dataInicio: "",
    dataFim: "",
    centroCusto: "",
    codigoGrupo: "",
    codigoSubgrupo: "",
    codigoConta: "",
    linhaSelecionada: "",
    excluirCentroCusto: "",
    excluirCodigoConta: "",
    codigosCentrosCustoSelecionados: "",
    codigosContasSelecionadas: "",
  });
  const [linhaSelecionada, setLinhaSelecionada] = useState<string | null>(null);
  const [isAllExpanded, setIsAllExpanded] = useState(false);

  useEffect(() => {
    // Carregar períodos disponíveis da API
    carregarPeriodosDisponiveis();
  }, []);

  const carregarPeriodosDisponiveis = async () => {
    try {
      const response = await fetch("/api/dre-filial-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 contas únicas
      const contasUnicas = [...new Set(dadosCompletos.map((item: DREItem) => item.conta))].sort() as string[];
      setOpcoesContas(contasUnicas);
      
      // Criar objeto de códigos das contas
      const codigosContasObj: Record<string, string> = {};
      dadosCompletos.forEach((item: DREItem) => {
        if (item.conta && item.codigo_conta) {
          codigosContasObj[item.conta] = item.codigo_conta.toString();
        }
      });
      setCodigosContas(codigosContasObj);
      
      // Inicializar com todas as contas selecionadas
      setContasSelecionadas(contasUnicas);
      
      // Inicializar filtros de período com o ano corrente
      const agora = new Date();
      const anoAtual = agora.getFullYear();
      const mesAtual = String(agora.getMonth() + 1).padStart(2, '0');
      const periodoAtual = `${anoAtual}-${mesAtual}`;
      const primeiroMesAno = `${anoAtual}-01`;
      
      // Verificar se os períodos existem nos dados disponíveis
      const periodoDeValido = periodosUnicos.includes(primeiroMesAno) ? primeiroMesAno : (periodosUnicos[0] || primeiroMesAno);
      const periodoAteValido = periodosUnicos.includes(periodoAtual) ? periodoAtual : (periodosUnicos[periodosUnicos.length - 1] || periodoAtual);
      
      setFiltros(prev => ({
        ...prev,
        periodoDe: periodoDeValido,
        periodoAte: periodoAteValido
      }));
      
      // Inicializar filtros do analítico também
      setAnaliticoFiltros(prev => ({
        ...prev,
        dataInicio: periodoDeValido,
        dataFim: periodoAteValido
      }));
      
    } catch (error) {
      console.error("Erro ao carregar períodos:", error);
    }
  };

  const fetchData = async () => {
    try {
      setLoading(true);
      setError(null);
      const response = await fetch("/api/dre-filial-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) => {
            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 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

    // 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 hierarquia [grupo, conta]
    let codigoGrupoFiltro = "";
    let codigoContaFiltro = "";
    
    if (row.type === "grupo" || row.type === "conta") {
      // Buscar o CODGRUPO dos dados originais que correspondem a esta linha
      const itemsCorrespondentes = data.filter((item: DREItem) => {
        // Filtrar por período se um mês específico foi selecionado
        if (mesSelecionado && item.data_competencia !== mesSelecionado) {
          return false;
        }
        
        if (row.type === "grupo") {
          return item.codigo_grupo === row.codigo_grupo || item.codgrupo === row.codigo_grupo;
        } else if (row.type === "conta") {
          return (item.codigo_grupo === row.codigo_grupo || item.codgrupo === row.codigo_grupo) &&
                 item.codigo_conta === row.codigo_conta;
        }
        return false;
      });
      
      // Pegar o CODGRUPO do primeiro item encontrado
      if (itemsCorrespondentes.length > 0) {
        const primeiroItem = itemsCorrespondentes[0];
        codigoGrupoFiltro = primeiroItem.codgrupo || primeiroItem.codigo_grupo || "";
      }
    }
    
    // Filtrar por conta se for nível conta
    if (row.type === "conta") {
      codigoContaFiltro = row.codigo_conta?.toString() || "";
    }

    // 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)
      .join(',');

    const novosFiltros = {
      dataInicio: dataInicioFiltro,
      dataFim: dataFimFiltro,
      centroCusto: "", // Não aplicável na hierarquia filial
      codigoGrupo: codigoGrupoFiltro,
      codigoSubgrupo: "", // Não aplicável na hierarquia filial
      codigoConta: codigoContaFiltro,
      linhaSelecionada: row.grupo || row.conta || "",
      excluirCentroCusto: "",
      excluirCodigoConta: "",
      codigosCentrosCustoSelecionados: "",
      codigosContasSelecionadas,
    };
    
    console.log('🎯 Novos filtros para analítico:', novosFiltros);
    setAnaliticoFiltros(novosFiltros);
  };

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

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

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

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

  // Função auxiliar para calcular valores por mês
  const calcularValoresPorMes = (items: DREItem[]): Record<string, number> => {
    const valoresPorMes: Record<string, number> = {};

    mesesDisponiveis.forEach(mes => {
      valoresPorMes[mes] = 0;
    });

    items.forEach((item) => {
      const anoMes = item.data_competencia;
      if (anoMes && valoresPorMes[anoMes] !== undefined) {
        valoresPorMes[anoMes] += parseFloat(item.valor);
      }
    });

    return valoresPorMes;
  };

  // Função para calcular percentuais (simplificada - sem faturamento líquido)
  const calcularPercentuaisPorMes = (
    valoresPorMes: Record<string, number>
  ): Record<string, number> => {
    const percentuais: Record<string, number> = {};
    
    // Calcular total geral por mês
    const totaisPorMes: Record<string, number> = {};
    mesesDisponiveis.forEach(mes => {
      totaisPorMes[mes] = data
        .filter(item => item.data_competencia === mes)
        .reduce((sum, item) => sum + parseFloat(item.valor), 0);
    });

    Object.keys(valoresPorMes).forEach((mes) => {
      const valorAtual = valoresPorMes[mes];
      const totalMes = totaisPorMes[mes] || 0;

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

    return percentuais;
  };

  // Função para calcular percentual do total
  const calcularPercentualTotal = (total: number): number => {
    const totalGeral = data.reduce((sum, item) => sum + parseFloat(item.valor), 0);
    
    if (totalGeral !== 0) {
      return (total / totalGeral) * 100;
    } else {
      return 0;
    }
  };

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

    // Hierarquia simplificada: [grupo, conta]
    // Agrupar por CODGRUPO
    const gruposPorCodigo = data.reduce((acc, item) => {
      const codgrupo = item.codgrupo || item.codigo_grupo || "";
      if (!codgrupo) return acc;
      if (!acc[codgrupo]) {
        acc[codgrupo] = [];
      }
      acc[codgrupo].push(item);
      return acc;
    }, {} as Record<string, DREItem[]>);

    // Ordenar por CODGRUPO (numericamente)
    const sortedGrupos = Object.entries(gruposPorCodigo).sort(([codA], [codB]) => {
      const numA = parseInt(codA) || 0;
      const numB = parseInt(codB) || 0;
      if (numA !== numB) {
        return numA - numB;
      }
      return codA.localeCompare(codB);
    });

    sortedGrupos.forEach(([codgrupo, items]) => {
      // Calcular total do grupo
      const totalGrupo = items.reduce(
        (sum, item) => sum + parseFloat(item.valor),
        0
      );
      const valoresGrupoPorMes = calcularValoresPorMes(items);

      // Linha do grupo (Level 0)
      rows.push({
        type: "grupo",
        level: 0,
        grupo: items[0]?.grupo || codgrupo,
        codigo_grupo: codgrupo,
        total: totalGrupo,
        isExpanded: expandedGrupos.has(codgrupo),
        valoresPorMes: valoresGrupoPorMes,
        percentuaisPorMes: calcularPercentuaisPorMes(valoresGrupoPorMes),
        percentualTotal: calcularPercentualTotal(totalGrupo),
      });

      if (expandedGrupos.has(codgrupo)) {
        // Agrupar por conta dentro do grupo
        const contas = items.reduce((acc, item) => {
          const conta = item.conta || "";
          if (!conta) return acc;
          if (!acc[conta]) {
            acc[conta] = [];
          }
          acc[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;
          }
          
          return contaA.localeCompare(contaB);
        });

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

          // Linha da conta (Level 1)
          rows.push({
            type: "conta",
            level: 1,
            grupo: items[0]?.grupo || codgrupo,
            codigo_grupo: codgrupo,
            conta,
            codigo_conta: contaItems[0]?.codigo_conta,
            total: totalConta,
            isExpanded: false,
            valoresPorMes: valoresContaPorMes,
            percentuaisPorMes: calcularPercentuaisPorMes(valoresContaPorMes),
            percentualTotal: calcularPercentualTotal(totalConta),
          });
        });
      }
    });

    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";

    const linhaId = `${row.type}-${row.codigo_grupo || ""}-${row.codigo_conta || ""}`;
    const isSelected = linhaSelecionada === linhaId;

    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":
        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 "conta":
        return `${style} bg-white font-normal text-gray-600`;
      default:
        return style;
    }
  };

  const getFixedCellBackground = (row: HierarchicalRow): string => {
    const linhaId = `${row.type}-${row.codigo_grupo || ""}-${row.codigo_conta || ""}`;
    const isSelected = linhaSelecionada === linhaId;

    if (isSelected) {
      return "bg-gradient-to-r from-green-100 to-emerald-100";
    }

    switch (row.type) {
      case "grupo":
        return "bg-gradient-to-r from-blue-50 to-indigo-50";
      case "conta":
        return "bg-white";
      default:
        return "bg-white";
    }
  };

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

  const renderCellContent = (row: HierarchicalRow) => {
    switch (row.type) {
      case "grupo":
        return (
          <div className="flex items-center gap-2 whitespace-nowrap">
            <button
              onClick={() => toggleGrupo(row.codigo_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>
                {row.codigo_grupo && (
                  <span className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
                    {row.codigo_grupo}
                  </span>
                )}
              </div>
            </button>
          </div>
        );
      case "conta":
        return (
          <div className="flex items-center gap-2 whitespace-nowrap">
            <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>
        );
      default:
        return null;
    }
  };

  const toggleExpandAll = () => {
    if (isAllExpanded) {
      setExpandedGrupos(new Set());
      setIsAllExpanded(false);
    } else {
      const todosGrupos = [...new Set(data.map(item => item.codgrupo || item.codigo_grupo).filter(Boolean))];
      setExpandedGrupos(new Set(todosGrupos));
      setIsAllExpanded(true);
    }
  };

  const aplicarFiltros = async () => {
    setIsFilterOpen(false);
    
    setTimeout(async () => {
      try {
        setLoading(true);
        setError(null);
        
        const response = await fetch("/api/dre-filial-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 conta (multi-seleção)
        if (contasSelecionadas.length > 0) {
          dadosFiltrados = dadosFiltrados.filter((item: DREItem) => {
            return contasSelecionadas.includes(item.conta);
          });
        }
        
        setDadosFiltrados(dadosFiltrados);
        setData(dadosFiltrados);
        setFiltrosAplicados(true);
        
        // Extrair meses únicos dos dados filtrados
        const meses = [
          ...new Set(
            dadosFiltrados.map((item: DREItem) => item.data_competencia)
          ),
        ].sort() as string[];
        setMesesDisponiveis(meses);
        
      } catch (err) {
        setError(err instanceof Error ? err.message : "Erro desconhecido");
      } finally {
        setLoading(false);
      }
    }, 100);
  };

  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,
       conta: "Todas",
     });
    
    setContasSelecionadas([]);
    setData([]);
    setDadosFiltrados([]);
    setFiltrosAplicados(false);
    setMesesDisponiveis([]);
    setIsAllExpanded(false);
    setIsFilterOpen(false);
    
    carregarPeriodosDisponiveis();
  };

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

    const dadosCompletosExpandidos = buildHierarchicalData();
    
    const dadosExportacao = dadosCompletosExpandidos.map((row, index) => {
      const linha: any = {
        'Linha': index + 1,
        'Tipo': row.type,
        'Nível': row.level,
        'Grupo': row.grupo || '',
        'Código Grupo': row.codigo_grupo || '',
        'Conta': row.conta || '',
        'Código Conta': row.codigo_conta || '',
        'Total': row.total || 0,
      };

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

      return linha;
    });

    const wb = XLSX.utils.book_new();
    const ws = XLSX.utils.json_to_sheet(dadosExportacao);
    
    const colWidths = [
      { wch: 8 },   // Linha
      { wch: 15 },  // Tipo
      { wch: 8 },   // Nível
      { wch: 25 },  // Grupo
      { wch: 15 },  // Código Grupo
      { wch: 35 },  // Conta
      { wch: 12 },  // Código Conta
      { wch: 15 },  // Total
    ];
    
    mesesDisponiveis.forEach(() => {
      colWidths.push({ wch: 15 }); // Valor
      colWidths.push({ wch: 10 }); // %
    });
    
    ws['!cols'] = colWidths;
    
    XLSX.utils.book_append_sheet(wb, ws, 'DRE Filial Completo');
    
     const resumoData = [
       { 'Informação': 'Período', 'Valor': `${filtros.periodoDe} a ${filtros.periodoAte}` },
       { 'Informação': 'Conta', 'Valor': filtros.conta },
      { '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');
    
    const dataAtual = new Date().toISOString().split('T')[0];
    const nomeArquivo = `DRE_Filial_Completo_${dataAtual}.xlsx`;
    
    XLSX.writeFile(wb, nomeArquivo);
    
    console.log('✅ Arquivo XLSX completo exportado:', nomeArquivo);
  };

  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">Despesa Filial</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">
            <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>

            <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>

            <Sheet open={isFilterOpen} onOpenChange={setIsFilterOpen}>
              <SheetTrigger asChild>
                <Button
                  variant="outline"
                  size="sm"
                  className="flex items-center gap-2 text-xs h-8 px-3 transition-all duration-150 ease-in-out hover:scale-105"
                >
                  <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) => setFiltros(prev => ({ ...prev, 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) => setFiltros(prev => ({ ...prev, periodoAte: value }))}>
                            <SelectTrigger>
                              <SelectValue placeholder="Selecione" />
                            </SelectTrigger>
                            <SelectContent>
                              {mesesDisponiveis.map(mes => (
                                <SelectItem key={mes} value={mes}>{mes}</SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </div>
                      </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
                      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>
                  </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">
          <div
            className="overflow-x-auto overflow-y-auto max-h-[500px]"
            style={{ scrollbarWidth: 'thin' }}
          >
            <table
              className="w-full border-collapse"
              style={{ minWidth: 'max-content' }}
            >
              {/* 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">
                  <th className="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wide w-[300px] min-w-[300px] bg-gradient-to-r from-blue-50 to-indigo-50 sticky left-0 z-20 shadow-[2px_0_4px_rgba(0,0,0,0.1)]">
                    Descrição
                  </th>
                  {mesesDisponiveis.map((mes) => (
                    <React.Fragment key={mes}>
                      <th className="px-2 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide w-[120px] min-w-[120px] 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) => {
                  const linhaId = `${row.type}-${row.codigo_grupo || ""}-${row.codigo_conta || ""}`;
                  const isSelected = linhaSelecionada === linhaId;
                  return (
                    <TableRow
                      key={index}
                      row={row}
                      index={index}
                      handleRowClick={handleRowClick}
                      getRowStyle={getRowStyle}
                      getIndentStyle={getIndentStyle}
                      renderCellContent={renderCellContent}
                      mesesDisponiveis={mesesDisponiveis}
                      formatCurrency={formatCurrency}
                      formatCurrencyWithColor={formatCurrencyWithColor}
                      getFixedCellBackground={getFixedCellBackground}
                    />
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      )}

       {/* Componente Analítico - Sempre visível */}
       <div className="mt-4">
         <AnaliticoComponent filtros={analiticoFiltros} />
       </div>
    </div>
  );
}