'use client';
import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Header from '@/components/Header';
import { Building2, Plus, Search, RefreshCw } from 'lucide-react';
import EmpresaList from '@/components/EmpresaList';
import StandardButton from '@/components/StandardButton';
import EmpresaModal from '@/components/EmpresaModal';

const GestaoEmpresas = () => {
  const router = useRouter();
  const [empresas, setEmpresas] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [userData, setUserData] = useState<any>(null);
  
  // Estados para paginação
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(0);
  const [totalEmpresas, setTotalEmpresas] = useState(0);
  const [itemsPerPage] = useState(10);
  
  // Estados para o modal e edição
  const [modalVisible, setModalVisible] = useState(false);
  const [empresaEditando, setEmpresaEditando] = useState<any>(null);

  // 📋 Filtrar empresas baseado no termo de busca
  // TODO: Implementar busca no servidor via parâmetro de query
  const empresasFiltradas = empresas.filter(empresa => {
    if (!searchTerm) return true;
    
    const termo = searchTerm.toLowerCase();
    const cnpj = empresa.cnpj?.toLowerCase() || '';
    const razaoSocial = empresa['razao-social']?.toLowerCase() || '';
    const nomeFantasia = empresa['nome-fantasia']?.toLowerCase() || '';
    
    return cnpj.includes(termo) || 
           razaoSocial.includes(termo) || 
           nomeFantasia.includes(termo);
  });

  // 🔐 Verificar autenticação e carregar dados
  useEffect(() => {
    const initializeUser = async () => {
      try {
        // Verificar se há token armazenado
        const storedToken = localStorage.getItem('access_token');
        
        if (!storedToken) {
          console.log("ℹ️ Nenhum token encontrado, redirecionando para login");
          router.push("/login");
          return;
        }

        // Verificar se o token é válido fazendo uma requisição ao BFF
  const response = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/auth/me`, {
          method: "GET",
          headers: {
            "accept": "application/json",
            "Authorization": `Bearer ${storedToken}`,
          },
        });

        if (!response.ok) {
          console.log("ℹ️ Token inválido, redirecionando para login");
          localStorage.removeItem('access_token');
          router.push("/login");
          return;
        }

        // Obter dados do usuário
        const userResponse = await response.json();
        setUserData(userResponse.data || userResponse);

        console.log("✅ Usuário autenticado, carregando empresas");
        // Carregar empresas mockadas imediatamente
        carregarEmpresas();
      } catch (error) {
        console.error('❌ Erro na verificação de autenticação:', error);
        router.push('/login');
      }
    };
    
    initializeUser();
  }, [router]);

  // 📋 Carregar empresas via API
  const carregarEmpresas = async (page: number = 1) => {
    console.log(`📋 Carregando empresas da API - página ${page}...`);
    setLoading(true);
    
    try {
      const token = localStorage.getItem('access_token');
      
      if (!token) {
        console.error('❌ Token de acesso não encontrado');
        router.push('/login');
        return;
      }

  const response = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/empresas?page=${page}`, {
        method: 'GET',
        headers: {
          'accept': 'application/json',
          'Authorization': `Bearer ${token}`,
        },
      });

      if (!response.ok) {
        if (response.status === 401) {
          localStorage.removeItem('access_token');
          router.push('/login');
          return;
        }
        throw new Error(`Erro HTTP ${response.status}: ${response.statusText}`);
      }

      const data = await response.json();
      console.log('📦 Resposta da API:', data);

      // Mapear os dados da API para o formato esperado pelo componente
      const empresasFormatadas = (data.items || []).map((empresa: any) => ({
        $id: empresa.id,
        cnpj: empresa.cnpj,
        'razao-social': empresa['razao-social'],
        'nome-fantasia': empresa['nome-fantasia'],
        'data-abertura': empresa['data-abertura'],
        situacao: empresa.situacao,
        'natureza-juridica': empresa['natureza-juridica'],
        porte: empresa.porte,
        'capital-social': empresa['capital-social'],
        telefone: empresa.telefone,
        email: empresa.email,
        'atividade-principal-codigo': empresa['atividade-principal-codigo'],
        'atividade-principal-desc': empresa['atividade-principal-desc'],
        enderecos: empresa.enderecos,
        $createdAt: empresa['created-at'] || new Date().toISOString(),
        $updatedAt: empresa['updated-at'] || new Date().toISOString()
      }));
      
      setEmpresas(empresasFormatadas);
      
      // Atualizar estados de paginação
      setCurrentPage(data.page || 1);
      setTotalEmpresas(data.total || 0);
      setTotalPages(Math.ceil((data.total || 0) / (data.limit || itemsPerPage)));
      
      console.log(`✅ ${empresasFormatadas.length} empresas carregadas da API`);
      console.log(`📄 Página ${data.page || 1} de ${Math.ceil((data.total || 0) / (data.limit || itemsPerPage))} - Total: ${data.total || 0} empresas`);
      
    } catch (error) {
      console.error('❌ Erro ao carregar empresas:', error);
      // Em caso de erro, manter array vazio
      setEmpresas([]);
      setTotalPages(0);
      setTotalEmpresas(0);
    } finally {
      setLoading(false);
    }
  };

  // 🔄 Recarregar empresas via API
  const listarEmpresas = async () => {
    console.log('🔄 Recarregando lista de empresas...');
    await carregarEmpresas(currentPage);
  };

  // 📄 Navegar para página específica
  const irParaPagina = async (page: number) => {
    if (page >= 1 && page <= totalPages && page !== currentPage) {
      console.log(`📄 Navegando para página ${page}...`);
      await carregarEmpresas(page);
    }
  };

  // 🗑️ Deletar empresa via API
  const deletarEmpresa = async (id: string) => {
    console.log('🗑️ Deletando empresa:', id);
    
    if (!id) {
      console.error('❌ ID da empresa não fornecido');
      throw new Error('ID da empresa é obrigatório');
    }

    setLoading(true);
    
    try {
      const token = localStorage.getItem('access_token');
      
      if (!token) {
        console.error('❌ Token de acesso não encontrado');
        router.push('/login');
        return;
      }

      // Verificar se a empresa existe na lista local
      const empresaExiste = empresas.find(emp => emp.$id === id);
      if (!empresaExiste) {
        console.warn('⚠️ Empresa não encontrada na lista local:', id);
        return; // Empresa já foi removida, consideramos sucesso
      }

      console.log('📋 Deletando empresa:', empresaExiste['nome-fantasia'] || empresaExiste['razao-social']);

      // Fazer requisição DELETE para a API
  const response = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/empresas/${id}`, {
        method: 'DELETE',
        headers: {
          'accept': '*/*',
          'Authorization': `Bearer ${token}`,
        },
      });

      if (!response.ok) {
        if (response.status === 401) {
          localStorage.removeItem('access_token');
          router.push('/login');
          return;
        }
        throw new Error(`Erro HTTP ${response.status}: ${response.statusText}`);
      }

      // Recarregar a página atual após exclusão bem-sucedida
      await carregarEmpresas(currentPage);

      console.log('✅ Empresa deletada com sucesso via API!');
      
    } catch (error) {
      console.error('💥 Erro na exclusão:', error);
      throw error;
    } finally {
      setLoading(false);
    }
  };

  // 🔧 Funções auxiliares
  const validarCNPJ = (cnpj: string): boolean => {
    const cnpjLimpo = cnpj.replace(/\D/g, '');
    if (cnpjLimpo.length !== 14) return false;
    
    // Validação básica dos dígitos verificadores
    let soma = 0;
    let peso = 2;
    
    for (let i = 11; i >= 0; i--) {
      soma += parseInt(cnpjLimpo[i]) * peso;
      peso = peso === 9 ? 2 : peso + 1;
    }
    
    const resto = soma % 11;
    const digito1 = resto < 2 ? 0 : 11 - resto;
    
    if (parseInt(cnpjLimpo[12]) !== digito1) return false;
    
    soma = 0;
    peso = 2;
    
    for (let i = 12; i >= 0; i--) {
      soma += parseInt(cnpjLimpo[i]) * peso;
      peso = peso === 9 ? 2 : peso + 1;
    }
    
    const resto2 = soma % 11;
    const digito2 = resto2 < 2 ? 0 : 11 - resto2;
    
    return parseInt(cnpjLimpo[13]) === digito2;
  };

  const formatarCNPJ = (valor: string): string => {
    const cnpjLimpo = valor.replace(/\D/g, '');
    return cnpjLimpo
      .replace(/(\d{2})(\d)/, '$1.$2')
      .replace(/(\d{3})(\d)/, '$1.$2')
      .replace(/(\d{3})(\d)/, '$1/$2')
      .replace(/(\d{4})(\d)/, '$1-$2')
      .replace(/(-\d{2})\d+?$/, '$1');
  };



  // 📱 Abrir modal para nova empresa
  const abrirModalNovaEmpresa = () => {
    console.log('🆕 Abrindo modal para nova empresa');
    setEmpresaEditando(null);
    setModalVisible(true);
  };

  // Fechar modal
  const fecharModal = () => {
    setModalVisible(false);
    setEmpresaEditando(null);
  };



  // Salvar empresa (nova ou editada)
  const salvarEmpresa = async (dadosEmpresa: any) => {
    console.log('💾 Salvando empresa:', dadosEmpresa);
    setLoading(true);
    
    try {
      if (empresaEditando) {
        console.log('✏️ Atualizando empresa existente:', empresaEditando.$id);
        // Atualizar empresa na lista mockada
        setEmpresas(prevEmpresas => 
          prevEmpresas.map(emp => 
            emp.$id === empresaEditando.$id 
              ? {
                  ...emp,
                  cnpj: dadosEmpresa.cnpj,
                  'razao-social': dadosEmpresa.razaoSocial,
                  'nome-fantasia': dadosEmpresa.nomeFantasia,
                  $updatedAt: new Date().toISOString()
                }
              : emp
          )
        );
      } else {
        console.log('🆕 Criando nova empresa');
        // Adicionar nova empresa à lista mockada
        const novaEmpresa = {
          $id: `mock-${Date.now()}`,
          cnpj: dadosEmpresa.cnpj,
          'razao-social': dadosEmpresa.razaoSocial,
          'nome-fantasia': dadosEmpresa.nomeFantasia,
          $createdAt: new Date().toISOString(),
          $updatedAt: new Date().toISOString()
        };
        
        setEmpresas(prevEmpresas => [novaEmpresa, ...prevEmpresas]);
        console.log('✅ Nova empresa criada com sucesso');
      }
      
      fecharModal();
    } catch (error) {
      console.error('❌ Erro ao salvar empresa:', error);
    } finally {
      setLoading(false);
    }
  };

  // Se ainda está carregando, mostrar loading
  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="w-16 h-16 border-4 border-gray-900 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
          <p className="text-gray-600">Carregando...</p>
        </div>
      </div>
    );
  }

  console.log('🎯 Renderizando página de gestão de empresas', { empresas: empresas.length });

  return (
    <div className="min-h-screen bg-gray-50">
      <Header 
        user={userData}
        title="Gestão de Empresas"
        subtitle="Gerenciar empresas do sistema"
      />

        {/* Conteúdo principal */}
        <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          {/* Header da página com botão de adicionar */}
          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
            <div>
              <h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
                <Building2 className="w-6 h-6" />
                Gestão de Empresas
              </h1>
              <p className="text-gray-600 mt-1">
                Gerencie todas as empresas cadastradas no sistema
              </p>
            </div>
            
            <StandardButton
              onClick={abrirModalNovaEmpresa}
              variant="primary"
              size="medium"
              className="flex items-center gap-2"
            >
              <Plus className="w-4 h-4" />
              Cadastrar Empresa
            </StandardButton>
          </div>

          {/* Barra de busca e ações */}
          <div className="bg-white rounded-lg shadow-sm border p-4 mb-6">
            <div className="flex flex-col sm:flex-row gap-4 items-center">
              <div className="flex-1 relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                <input
                  type="text"
                  placeholder="Buscar empresas..."
                  value={searchTerm}
                  onChange={(e) => {
                    setSearchTerm(e.target.value);
                    console.log('🔍 Buscando por:', e.target.value, '| Resultados:', empresasFiltradas.length);
                  }}
                  className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                />
              </div>
              
              <button
                onClick={listarEmpresas}
                disabled={loading}
                className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50"
              >
                <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
                Atualizar
              </button>
            </div>
          </div>

          {/* Lista de empresas */}
          <div className="bg-white rounded-lg shadow-sm border">
            <EmpresaList 
              empresas={empresasFiltradas}
              loading={loading}
              error={null}
              onEdit={(empresa) => {
                setEmpresaEditando(empresa);
                setModalVisible(true);
              }}
              onDelete={async (id: string) => {
                try {
                  await deletarEmpresa(id);
                  return true;
                } catch (error) {
                  console.error('Erro ao excluir empresa:', error);
                  return false;
                }
              }}
            />
          </div>

          {/* Controles de paginação */}
          {totalPages > 1 && (
            <div className={`mt-6 flex flex-col sm:flex-row items-center justify-between bg-white rounded-lg shadow-sm border px-6 py-4 ${loading ? 'opacity-70' : ''}`}>
              <div className="text-sm text-gray-700 mb-4 sm:mb-0">
                {searchTerm ? (
                  <>
                    Mostrando {empresasFiltradas.length} resultados de busca 
                    <span className="text-gray-500 ml-2">
                      (de {empresas.length} empresas na página atual)
                    </span>
                  </>
                ) : (
                  <>
                    Mostrando {empresas.length} de {totalEmpresas} empresas 
                    <span className="text-gray-500 ml-2">
                      (Página {currentPage} de {totalPages})
                    </span>
                  </>
                )}
              </div>
              
              <div className="flex items-center space-x-1">
                {/* Botão Primeira Página */}
                <button
                  onClick={() => irParaPagina(1)}
                  disabled={currentPage === 1 || loading}
                  className={`px-3 py-2 rounded-md text-sm font-medium ${
                    currentPage === 1 || loading
                      ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
                      : 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
                  }`}
                >
                  ««
                </button>

                {/* Botão Página Anterior */}
                <button
                  onClick={() => irParaPagina(currentPage - 1)}
                  disabled={currentPage === 1 || loading}
                  className={`px-3 py-2 rounded-md text-sm font-medium ${
                    currentPage === 1 || loading
                      ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
                      : 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
                  }`}
                >
                  ‹ Anterior
                </button>
                
                {/* Números das páginas */}
                {(() => {
                  const pages = [];
                  const maxVisiblePages = 5;
                  let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
                  let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
                  
                  // Ajustar startPage se endPage atingiu o limite
                  if (endPage - startPage + 1 < maxVisiblePages) {
                    startPage = Math.max(1, endPage - maxVisiblePages + 1);
                  }
                  
                  // Adicionar "..." antes se necessário
                  if (startPage > 1) {
                    pages.push(
                      <button
                        key={1}
                        onClick={() => irParaPagina(1)}
                        disabled={loading}
                        className="px-3 py-2 rounded-md text-sm font-medium bg-white text-gray-700 border border-gray-300 hover:bg-gray-50"
                      >
                        1
                      </button>
                    );
                    if (startPage > 2) {
                      pages.push(
                        <span key="ellipsis1" className="px-2 text-gray-400">...</span>
                      );
                    }
                  }
                  
                  // Páginas visíveis
                  for (let page = startPage; page <= endPage; page++) {
                    pages.push(
                      <button
                        key={page}
                        onClick={() => irParaPagina(page)}
                        disabled={loading}
                        className={`px-3 py-2 rounded-md text-sm font-medium ${
                          currentPage === page
                            ? 'bg-blue-600 text-white'
                            : 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
                        } ${loading ? 'cursor-not-allowed opacity-50' : ''}`}
                      >
                        {page}
                      </button>
                    );
                  }
                  
                  // Adicionar "..." depois se necessário
                  if (endPage < totalPages) {
                    if (endPage < totalPages - 1) {
                      pages.push(
                        <span key="ellipsis2" className="px-2 text-gray-400">...</span>
                      );
                    }
                    pages.push(
                      <button
                        key={totalPages}
                        onClick={() => irParaPagina(totalPages)}
                        disabled={loading}
                        className="px-3 py-2 rounded-md text-sm font-medium bg-white text-gray-700 border border-gray-300 hover:bg-gray-50"
                      >
                        {totalPages}
                      </button>
                    );
                  }
                  
                  return pages;
                })()}

                {/* Botão Próxima Página */}
                <button
                  onClick={() => irParaPagina(currentPage + 1)}
                  disabled={currentPage === totalPages || loading}
                  className={`px-3 py-2 rounded-md text-sm font-medium ${
                    currentPage === totalPages || loading
                      ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
                      : 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
                  }`}
                >
                  Próxima ›
                </button>

                {/* Botão Última Página */}
                <button
                  onClick={() => irParaPagina(totalPages)}
                  disabled={currentPage === totalPages || loading}
                  className={`px-3 py-2 rounded-md text-sm font-medium ${
                    currentPage === totalPages || loading
                      ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
                      : 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
                  }`}
                >
                  »»
                </button>
              </div>
            </div>
          )}
        </main>

        {/* Modal para cadastrar/editar empresa */}
        <EmpresaModal
          isOpen={modalVisible}
          onClose={fecharModal}
          onSave={salvarEmpresa}
          empresa={empresaEditando}
          loading={loading}
        />
        
        {/* Debug - Estado do modal */}
        {process.env.NODE_ENV === 'development' && (
          <div className="fixed bottom-4 left-4 bg-black text-white p-2 rounded text-xs z-50">
            Modal: {modalVisible ? 'Aberto' : 'Fechado'} | 
            Empresas: {empresas.length} | 
            Filtradas: {empresasFiltradas.length} |
            Busca: "{searchTerm}" |
            Loading: {loading ? 'Sim' : 'Não'}
          </div>
        )}
      </div>
  );
};

export default GestaoEmpresas;