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

'use client';

import { Button } from '@/components/ui/button';
// Removed unused table imports
import { ArrowDown, ArrowUp, ArrowUpDown, BarChart3 } from 'lucide-react';
import { useEffect, useState } from 'react';
import AnaliticoComponent from './analitico';

interface DREItem {
  codfilial: string;
  data_competencia: string;
  data_cai: string;
  grupo: string;
  subgrupo: string;
  centro_custo: string;
  codigo_conta: number;
  conta: string;
  valor: string;
}

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

type SortField = 'descricao' | 'valor';
type SortDirection = 'asc' | 'desc';

interface SortConfig {
  field: SortField;
  direction: SortDirection;
}

export default function Teste() {
  const [data, setData] = useState<DREItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
  const [expandedSubgrupos, setExpandedSubgrupos] = useState<Set<string>>(
    new Set()
  );
  const [expandedCentros, setExpandedCentros] = useState<Set<string>>(
    new Set()
  );
  const [sortConfig, setSortConfig] = useState<SortConfig>({
    field: 'descricao',
    direction: 'asc',
  });
  const [mesesDisponiveis, setMesesDisponiveis] = useState<string[]>([]);

  // Estados para analítico
  const [analiticoFiltros, setAnaliticoFiltros] = useState({
    dataInicio: '',
    dataFim: '',
    centroCusto: '',
    codigoGrupo: '',
    codigoSubgrupo: '',
    codigoConta: '',
  });
  const [linhaSelecionada, setLinhaSelecionada] = useState<string | null>(null);

  useEffect(() => {
    fetchData();
  }, []);

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

      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) => {
            const dataCompetencia = new Date(item.data_competencia);
            return `${dataCompetencia.getFullYear()}-${String(
              dataCompetencia.getMonth() + 1
            ).padStart(2, '0')}`;
          })
        ),
      ].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) => {
    if (!data.length) 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

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

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

    setAnaliticoFiltros({
      dataInicio: dataInicioFiltro,
      dataFim: dataFimFiltro,
      centroCusto: row.centro_custo || '',
      codigoGrupo,
      codigoSubgrupo,
      codigoConta: row.codigo_conta?.toString() || '',
    });
  };

  const toggleGroup = (grupo: string) => {
    const newExpanded = new Set(expandedGroups);
    if (newExpanded.has(grupo)) {
      newExpanded.delete(grupo);
    } else {
      newExpanded.add(grupo);
    }
    setExpandedGroups(newExpanded);
  };

  const toggleSubgrupo = (subgrupo: string) => {
    const newExpanded = new Set(expandedSubgrupos);
    if (newExpanded.has(subgrupo)) {
      newExpanded.delete(subgrupo);
    } else {
      newExpanded.add(subgrupo);
    }
    setExpandedSubgrupos(newExpanded);
  };

  const toggleCentro = (centro: string) => {
    const newExpanded = new Set(expandedCentros);
    if (newExpanded.has(centro)) {
      newExpanded.delete(centro);
    } else {
      newExpanded.add(centro);
    }
    setExpandedCentros(newExpanded);
  };

  const handleSort = (field: SortField) => {
    setSortConfig((prev) => ({
      field,
      direction:
        prev.field === field && prev.direction === 'asc' ? 'desc' : 'asc',
    }));
  };

  const getSortIcon = (field: SortField) => {
    if (sortConfig.field !== field) {
      return <ArrowUpDown className="h-4 w-4" />;
    }
    return sortConfig.direction === 'asc' ? (
      <ArrowUp className="h-4 w-4" />
    ) : (
      <ArrowDown className="h-4 w-4" />
    );
  };

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

    items.forEach((item) => {
      const dataCompetencia = new Date(item.data_competencia);
      const anoMes = `${dataCompetencia.getFullYear()}-${String(
        dataCompetencia.getMonth() + 1
      ).padStart(2, '0')}`;

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

    return valoresPorMes;
  };

  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
    const sortedGrupos = Object.entries(grupos).sort(([a], [b]) => {
      if (sortConfig.field === 'descricao') {
        return sortConfig.direction === 'asc'
          ? a.localeCompare(b)
          : b.localeCompare(a);
      } else {
        const totalA = grupos[a].reduce(
          (sum, item) => sum + parseFloat(item.valor),
          0
        );
        const totalB = grupos[b].reduce(
          (sum, item) => sum + parseFloat(item.valor),
          0
        );
        return sortConfig.direction === 'asc'
          ? totalA - totalB
          : totalB - totalA;
      }
    });

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

      // Linha do grupo
      rows.push({
        type: 'grupo',
        level: 0,
        grupo,
        total: totalGrupo,
        isExpanded: expandedGroups.has(grupo),
        valoresPorMes: calcularValoresPorMes(items),
      });

      if (expandedGroups.has(grupo)) {
        // Agrupar por subgrupo dentro do grupo
        const subgrupos = items.reduce((acc, item) => {
          if (!acc[item.subgrupo]) {
            acc[item.subgrupo] = [];
          }
          acc[item.subgrupo].push(item);
          return acc;
        }, {} as Record<string, DREItem[]>);

        // Ordenar subgrupos
        const sortedSubgrupos = Object.entries(subgrupos).sort(([a], [b]) => {
          if (sortConfig.field === 'descricao') {
            return sortConfig.direction === 'asc'
              ? a.localeCompare(b)
              : b.localeCompare(a);
          } else {
            const totalA = subgrupos[a].reduce(
              (sum, item) => sum + parseFloat(item.valor),
              0
            );
            const totalB = subgrupos[b].reduce(
              (sum, item) => sum + parseFloat(item.valor),
              0
            );
            return sortConfig.direction === 'asc'
              ? totalA - totalB
              : totalB - totalA;
          }
        });

        sortedSubgrupos.forEach(([subgrupo, subgrupoItems]) => {
          const totalSubgrupo = subgrupoItems.reduce(
            (sum, item) => sum + parseFloat(item.valor),
            0
          );

          // Linha do subgrupo
          rows.push({
            type: 'subgrupo',
            level: 1,
            grupo,
            subgrupo,
            total: totalSubgrupo,
            isExpanded: expandedSubgrupos.has(`${grupo}-${subgrupo}`),
            valoresPorMes: calcularValoresPorMes(subgrupoItems),
          });

          if (expandedSubgrupos.has(`${grupo}-${subgrupo}`)) {
            // Agrupar por centro de custo dentro do subgrupo
            const centros = subgrupoItems.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
            const sortedCentros = Object.entries(centros).sort(([a], [b]) => {
              if (sortConfig.field === 'descricao') {
                return sortConfig.direction === 'asc'
                  ? a.localeCompare(b)
                  : b.localeCompare(a);
              } else {
                const totalA = centros[a].reduce(
                  (sum, item) => sum + parseFloat(item.valor),
                  0
                );
                const totalB = centros[b].reduce(
                  (sum, item) => sum + parseFloat(item.valor),
                  0
                );
                return sortConfig.direction === 'asc'
                  ? totalA - totalB
                  : totalB - totalA;
              }
            });

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

              // Linha do centro de custo
              rows.push({
                type: 'centro_custo',
                level: 2,
                grupo,
                subgrupo,
                centro_custo: centro,
                total: totalCentro,
                isExpanded: expandedCentros.has(
                  `${grupo}-${subgrupo}-${centro}`
                ),
                valoresPorMes: calcularValoresPorMes(centroItems),
              });

              if (expandedCentros.has(`${grupo}-${subgrupo}-${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
                const sortedContas = Object.entries(contas).sort(([a], [b]) => {
                  if (sortConfig.field === 'descricao') {
                    return sortConfig.direction === 'asc'
                      ? a.localeCompare(b)
                      : b.localeCompare(a);
                  } else {
                    const totalA = contas[a].reduce(
                      (sum, item) => sum + parseFloat(item.valor),
                      0
                    );
                    const totalB = contas[b].reduce(
                      (sum, item) => sum + parseFloat(item.valor),
                      0
                    );
                    return sortConfig.direction === 'asc'
                      ? totalA - totalB
                      : totalB - totalA;
                  }
                });

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

                  // Linha da conta (sem ano/mês no nome)
                  rows.push({
                    type: 'conta',
                    level: 3,
                    grupo,
                    subgrupo,
                    centro_custo: centro,
                    conta,
                    codigo_conta: contaItems[0].codigo_conta,
                    total: totalConta,
                    valoresPorMes: calcularValoresPorMes(contaItems),
                  });
                });
              }
            });
          }
        });
      }
    });

    return rows;
  };

  const getRowStyle = (row: HierarchicalRow) => {
    const baseStyle = 'transition-colors hover:bg-muted/50';

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

    let style = baseStyle;

    if (isSelected) {
      style += ' bg-blue-100 border-l-4 border-blue-500 shadow-md';
    }

    switch (row.type) {
      case 'grupo':
        return `${style} bg-primary/5 font-semibold`;
      case 'subgrupo':
        return `${style} bg-primary/10 font-medium`;
      case 'centro_custo':
        return `${style} bg-secondary/30 font-medium`;
      case 'conta':
        return `${style} bg-muted/20`;
      default:
        return style;
    }
  };

  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">
            <button
              onClick={() => toggleGroup(row.grupo!)}
              className="p-1 hover:bg-muted rounded"
            >
              {row.isExpanded ? '▼' : '▶'}
            </button>
            <button
              onClick={() => handleRowClick(row)}
              className="flex-1 text-left hover:bg-blue-50 p-1 rounded cursor-pointer"
            >
              <span className="font-semibold">{row.grupo}</span>
            </button>
          </div>
        );
      case 'subgrupo':
        return (
          <div className="flex items-center gap-2">
            <button
              onClick={() => toggleSubgrupo(`${row.grupo}-${row.subgrupo}`)}
              className="p-1 hover:bg-muted rounded"
            >
              {row.isExpanded ? '▼' : '▶'}
            </button>
            <button
              onClick={() => handleRowClick(row)}
              className="flex-1 text-left hover:bg-blue-50 p-1 rounded cursor-pointer"
            >
              <span className="font-medium">{row.subgrupo}</span>
            </button>
          </div>
        );
      case 'centro_custo':
        return (
          <div className="flex items-center gap-2">
            <button
              onClick={() =>
                toggleCentro(`${row.grupo}-${row.subgrupo}-${row.centro_custo}`)
              }
              className="p-1 hover:bg-muted rounded"
            >
              {row.isExpanded ? '▼' : '▶'}
            </button>
            <button
              onClick={() => handleRowClick(row)}
              className="flex-1 text-left hover:bg-blue-50 p-1 rounded cursor-pointer"
            >
              <span className="font-medium">{row.centro_custo}</span>
            </button>
          </div>
        );
      case 'conta':
        return (
          <div className="flex items-center gap-2">
            <span className="text-muted-foreground">•</span>
            <button
              onClick={() => handleRowClick(row)}
              className="flex-1 text-left hover:bg-blue-50 p-1 rounded cursor-pointer"
            >
              <span>{row.conta}</span>
            </button>
          </div>
        );
      default:
        return null;
    }
  };

  if (loading) {
    return (
      <div className="p-6">
        <div className="flex items-center justify-center h-64">
          <div className="text-center">
            <BarChart3 className="h-8 w-8 animate-spin mx-auto mb-2" />
            <p>Carregando dados...</p>
          </div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="p-6">
        <h1 className="text-2xl font-bold mb-4 text-destructive">
          Erro ao carregar DRE Gerencial
        </h1>
        <div className="bg-destructive/10 border border-destructive/20 rounded-md p-4">
          <p className="text-destructive">{error}</p>
        </div>
      </div>
    );
  }

  const hierarchicalData = buildHierarchicalData();

  return (
    <div className="w-full flex flex-col items-center gap-2">
      <div className="mb-1">
        <h1 className="text-lg font-bold">DRE Gerencial</h1>
      </div>

      <div className="w-[95%] max-h-[400px] overflow-y-auto border rounded-md relative">
        {/* Header fixo separado */}
        <div
          className="sticky top-0 z-30 border-b shadow-sm"
          style={{ backgroundColor: 'white', opacity: 1 }}
        >
          <div
            className="flex p-3 font-semibold text-xs"
            style={{ backgroundColor: 'white', opacity: 1 }}
          >
            <div className="flex-1 min-w-[200px] max-w-[300px]">
              <Button
                variant="ghost"
                onClick={() => handleSort('descricao')}
                className="h-auto p-0 font-semibold"
              >
                Descrição
                {getSortIcon('descricao')}
              </Button>
            </div>
            {mesesDisponiveis.map((mes) => (
              <div
                key={mes}
                className="flex-1 min-w-[120px] max-w-[150px] text-right px-2"
              >
                {mes}
              </div>
            ))}
            <div className="flex-1 min-w-[120px] max-w-[150px] text-right px-2">
              <Button
                variant="ghost"
                onClick={() => handleSort('valor')}
                className="h-auto p-0 font-semibold"
              >
                Total
                {getSortIcon('valor')}
              </Button>
            </div>
          </div>
        </div>

        <div className="flex flex-col">
          {hierarchicalData.map((row, index) => (
            <div key={index} className={`flex ${getRowStyle(row)}`}>
              <div
                className="flex-1 min-w-[200px] max-w-[300px] p-1 border-b text-xs"
                style={getIndentStyle(row.level)}
              >
                {renderCellContent(row)}
              </div>
              {mesesDisponiveis.map((mes) => (
                <div
                  key={mes}
                  className="flex-1 min-w-[120px] max-w-[150px] text-right font-medium p-1 border-b px-1 text-xs cursor-pointer hover:bg-blue-50"
                  onClick={() => handleRowClick(row, mes)}
                >
                  {row.valoresPorMes && row.valoresPorMes[mes]
                    ? (() => {
                        const { formatted, isNegative } =
                          formatCurrencyWithColor(row.valoresPorMes[mes]);
                        return (
                          <span
                            className={
                              isNegative ? 'text-red-600' : 'text-gray-900'
                            }
                          >
                            {formatted}
                          </span>
                        );
                      })()
                    : '-'}
                </div>
              ))}
              <div
                className="flex-1 min-w-[120px] max-w-[150px] text-right font-medium p-1 border-b px-1 text-xs cursor-pointer hover:bg-blue-50"
                onClick={() => handleRowClick(row)}
              >
                {(() => {
                  const { formatted, isNegative } = formatCurrencyWithColor(
                    row.total!
                  );
                  return (
                    <span
                      className={isNegative ? 'text-red-600' : 'text-gray-900'}
                    >
                      {formatted}
                    </span>
                  );
                })()}
              </div>
            </div>
          ))}
        </div>
      </div>

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