'use client';
import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { account } from '@/lib/appwrite';
import { Models } from 'appwrite';
import Header from '@/components/Header';
import { Building2, Plus, Search, RefreshCw } from 'lucide-react';
import EmpresaList from '@/components/EmpresaList';
import { RoleGuard } from '@/components/auth/RoleGuard';
import { UserRole } from '@/types/auth';
import StandardButton from '@/components/StandardButton';
import EmpresaModal from '@/components/EmpresaModal';

const GestaoEmpresas = () => {
  const router = useRouter();
  const [user, setUser] = useState<Models.User<Models.Preferences> | null>(null);
  const [empresas, setEmpresas] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  
  // Estados para o modal e edição
  const [modalVisible, setModalVisible] = useState(false);
  const [empresaEditando, setEmpresaEditando] = useState<any>(null);

  // 🔐 Verificar autenticação e carregar dados
  useEffect(() => {
    const initializeUser = async () => {
      try {
        const currentUser = await account.get();
        setUser(currentUser);
        await listarEmpresas();
      } catch (error) {
        console.error('❌ Usuário não autenticado:', error);
        router.push('/');
      }
    };
    
    initializeUser();
  }, [router]);

  //  Listar empresas via API
  const listarEmpresas = async () => {
    console.log('📋 Listando empresas via API...');
    setLoading(true);
    
    try {
      const response = await fetch('/api/empresas');
      const data = await response.json();
      
      if (data.success) {
        console.log('✅ Empresas carregadas:', data.empresas);
        setEmpresas(data.empresas || []);
      } else {
        console.error('❌ Erro ao carregar empresas:', data.error);
        setEmpresas([]);
      }
    } catch (error) {
      console.error('💥 Erro na requisição:', error);
      setEmpresas([]);
    } finally {
      setLoading(false);
    }
  };

  // 🔄 Atualizar empresa
  const atualizarEmpresa = async (id: string, dados: any) => {
    console.log('🔄 Atualizando empresa via API...');
    setLoading(true);
    
    try {
      const payload = {
        data: {
          cnpj: dados.cnpj.replace(/\D/g, ''),
          'razao-social': dados.razaoSocial,
          'nome-fantasia': dados.nomeFantasia
        }
      };
      
      console.log('📤 Dados para atualização:', payload);
      
      const response = await fetch(`/api/empresas?id=${id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      
      const data = await response.json();
      
      if (data.success) {
        console.log('✅ Empresa atualizada com sucesso!');
        await listarEmpresas();
      } else {
        console.error('❌ Erro na atualização:', data.error);
        throw new Error('Erro ao atualizar empresa');
      }
    } catch (error) {
      console.error('💥 Erro na atualização:', error);
      throw error;
    } finally {
      setLoading(false);
    }
  };

  // 🗑️ Deletar empresa
  const deletarEmpresa = async (id: string) => {
    console.log('🗑️ Deletando empresa via API...', id);
    setLoading(true);
    
    try {
      const response = await fetch(`/api/empresas?id=${id}`, {
        method: 'DELETE'
      });
      
      const data = await response.json();
      
      if (data.success) {
        console.log('✅ Empresa deletada com sucesso!');
        await listarEmpresas();
      } else {
        console.error('❌ Erro na exclusão:', data.error);
        throw new Error('Erro ao excluir empresa');
      }
    } catch (error) {
      console.error('💥 Erro na exclusão:', error);
      throw error;
    } finally {
      setLoading(false);
    }
  };

  // 📱 Abrir modal para nova empresa
  const abrirModalNovaEmpresa = () => {
    setEmpresaEditando(null);
    setModalVisible(true);
  };

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

  // Salvar empresa (nova ou editada)
  const salvarEmpresa = async (dadosEmpresa: any) => {
    setLoading(true);
    
    try {
      if (empresaEditando) {
        await atualizarEmpresa(empresaEditando.$id, dadosEmpresa);
      } else {
        const payload = {
          documentId: 'unique()',
          data: {
            cnpj: dadosEmpresa.cnpj.replace(/\D/g, ''),
            'razao-social': dadosEmpresa.razaoSocial,
            'nome-fantasia': dadosEmpresa.nomeFantasia
          }
        };
        
        const response = await fetch('/api/empresas', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload)
        });

        if (!response.ok) {
          throw new Error('Erro ao cadastrar empresa');
        }
      }
      
      fecharModal();
      await listarEmpresas();
    } catch (error) {
      console.error('Erro ao salvar empresa:', error);
      throw error;
    } finally {
      setLoading(false);
    }
  };

  if (!user) {
    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">Verificando autenticação...</p>
        </div>
      </div>
    );
  }

  return (
    <RoleGuard allowedRoles={[UserRole.SUPERADMIN]}>
      <div className="min-h-screen bg-gray-50">
        <Header 
          user={user} 
          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)}
                  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={empresas}
              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;
                }
              }}
              onRefresh={listarEmpresas}
            />
          </div>
        </main>

        {/* Modal para cadastrar/editar empresa */}
        <EmpresaModal
          isOpen={modalVisible}
          onClose={fecharModal}
          onSave={salvarEmpresa}
          empresa={empresaEditando}
          loading={loading}
        />
      </div>
    </RoleGuard>
  );
};

export default GestaoEmpresas;
