'use client';

import { Button } from '@/components/ui/button';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { ArrowDown, ArrowUp, ArrowUpDown, BarChart3 } from 'lucide-react';
import { useEffect, useState } from 'react';

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

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

  const fetchData = async () => {
    try {
      setLoading(true);
      const response = await fetch('/api/dre');
      if (!response.ok) {
        throw new Error('Erro ao carregar dados');
      }
      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 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';

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

  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>
            <span className="font-semibold">{row.grupo}</span>
          </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>
            <span className="font-medium">{row.subgrupo}</span>
          </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>
            <span className="font-medium">{row.centro_custo}</span>
          </div>
        );
      case 'conta':
        return (
          <div className="flex items-center gap-2">
            <span className="text-muted-foreground">•</span>
            <span>{row.conta}</span>
          </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();
  const totalGeral = data.reduce(
    (sum, item) => sum + parseFloat(item.valor),
    0
  );

  return (
    <div className="p-6">
      <div className="mb-6">
        <h1 className="text-2xl font-bold mb-2">DRE Gerencial - Hierárquica</h1>
        <div className="p-4 bg-muted rounded-lg">
          <h3 className="text-lg font-semibold">
            Total Geral: {formatCurrency(totalGeral)}
          </h3>
        </div>
      </div>

      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>
              <Button
                variant="ghost"
                onClick={() => handleSort('descricao')}
                className="h-auto p-0 font-semibold"
              >
                Descrição
                {getSortIcon('descricao')}
              </Button>
            </TableHead>
            {mesesDisponiveis.map((mes) => (
              <TableHead key={mes} className="text-right">
                {mes}
              </TableHead>
            ))}
            <TableHead className="text-right">
              <Button
                variant="ghost"
                onClick={() => handleSort('valor')}
                className="h-auto p-0 font-semibold"
              >
                Total
                {getSortIcon('valor')}
              </Button>
            </TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {hierarchicalData.map((row, index) => (
            <TableRow key={index} className={getRowStyle(row)}>
              <TableCell style={getIndentStyle(row.level)}>
                {renderCellContent(row)}
              </TableCell>
              {mesesDisponiveis.map((mes) => (
                <TableCell key={mes} className="text-right font-medium">
                  {row.valoresPorMes && row.valoresPorMes[mes]
                    ? formatCurrency(row.valoresPorMes[mes])
                    : '-'}
                </TableCell>
              ))}
              <TableCell className="text-right font-medium">
                {formatCurrency(row.total!)}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}