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

const GestaoEmpresas = () => {
  const router = useRouter();
  const [user, setUser] = useState<Models.User<Models.Preferences> | null>(null);
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
  const [empresas, setEmpresas] = useState<any[]>([]);
  const [editingEmpresa, setEditingEmpresa] = useState<any>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
  
  const [formData, setFormData] = useState({
    cnpj: '',
    razaoSocial: '',
    nomeFantasia: ''
  });

  // 🔐 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.documents?.length || 0);
        setEmpresas(data.documents || []);
        setMessage({ 
          type: 'success', 
          text: `${data.documents?.length || 0} empresas carregadas!` 
        });
      } else {
        console.error('❌ Erro ao carregar empresas:', data.error);
        setMessage({ type: 'error', text: 'Erro ao carregar empresas.' });
      }
    } catch (error) {
      console.error('💥 Erro na listagem:', error);
      setMessage({ type: 'error', text: 'Erro de conexão ao carregar empresas.' });
    } finally {
      setLoading(false);
    }
  };

  // 🔄 Atualizar empresa existente
  const salvarEdicao = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!editingEmpresa?.$id) {
      setMessage({ type: 'error', text: 'ID da empresa não encontrado.' });
      return;
    }

    console.log('🔄 Atualizando empresa:', editingEmpresa.$id);
    setLoading(true);
    
    try {
      const payload = {
        cnpj: formData.cnpj,
        'razao-social': formData.razaoSocial,
        'nome-fantasia': formData.nomeFantasia
      };
      
      console.log('📤 Dados para atualização:', payload);
      
      const response = await fetch(`/api/empresas/${editingEmpresa.$id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      
      const data = await response.json();
      
      if (data.success) {
        console.log('✅ Empresa atualizada com sucesso!');
        setMessage({ type: 'success', text: `Empresa "${formData.nomeFantasia}" atualizada com sucesso!` });
        setEditingEmpresa(null);
        setIsModalOpen(false);
        await listarEmpresas();
        resetForm();
      } else {
        console.error('❌ Erro na atualização:', data.error);
        setMessage({ type: 'error', text: data.error || 'Erro ao atualizar empresa.' });
      }
    } catch (error) {
      console.error('💥 Erro na atualização:', error);
      setMessage({ type: 'error', text: 'Erro de conexão ao atualizar empresa.' });
    } finally {
      setLoading(false);
    }
  };

  // ➕ Cadastrar nova empresa
  const cadastrarEmpresa = async (e: React.FormEvent) => {
    e.preventDefault();
    console.log('➕ Cadastrando nova empresa...');
    setLoading(true);
    
    try {
      const payload = {
        cnpj: formData.cnpj,
        'razao-social': formData.razaoSocial,
        'nome-fantasia': formData.nomeFantasia
      };
      
      console.log('📤 Dados para cadastro:', payload);
      
      const response = await fetch('/api/empresas', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      
      const data = await response.json();
      
      if (data.success) {
        console.log('✅ Empresa cadastrada com sucesso!');
        setMessage({ type: 'success', text: `Empresa "${formData.nomeFantasia}" cadastrada com sucesso!` });
        setIsModalOpen(false);
        await listarEmpresas();
        resetForm();
      } else {
        console.error('❌ Erro no cadastro:', data.error);
        
        if (data.error?.includes('duplicate key')) {
          setMessage({ type: 'error', text: 'CNPJ já cadastrado no sistema.' });
        } else {
          setMessage({ type: 'error', text: data.error || 'Erro ao cadastrar empresa.' });
        }
      }
    } catch (error) {
      console.error('💥 Erro no cadastro:', error);
      setMessage({ type: 'error', text: 'Erro de conexão ao cadastrar empresa.' });
    } finally {
      setLoading(false);
    }
  };

  // 🗑️ Deletar empresa
  const deletarEmpresa = async (id: string): Promise<boolean> => {
    console.log('🗑️ Deletando empresa:', id);
    setLoading(true);
    
    try {
      const response = await fetch(`/api/empresas/${id}`, {
        method: 'DELETE'
      });
      
      const data = await response.json();
      
      if (data.success) {
        console.log('✅ Empresa deletada com sucesso!');
        setMessage({ type: 'success', text: 'Empresa deletada com sucesso!' });
        
        // Recarregar a lista para garantir sincronização
        await listarEmpresas();
        return true;
      } else {
        console.error('❌ Erro na exclusão:', data.error);
        setMessage({ type: 'error', text: data.error || 'Erro ao deletar empresa.' });
        return false;
      }
    } catch (error) {
      console.error('💥 Erro na exclusão:', error);
      setMessage({ type: 'error', text: 'Erro de conexão ao deletar empresa.' });
      return false;
    } finally {
      setLoading(false);
    }
  };

  // 🧹 Resetar formulário
  const resetForm = () => {
    setFormData({
      cnpj: '',
      razaoSocial: '',
      nomeFantasia: ''
    });
  };

  // 📝 Manipular mudanças no formulário
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    
    if (name === 'cnpj') {
      // Aplicar máscara de CNPJ
      const maskedValue = value
        .replace(/\D/g, '') // Remove todos os caracteres não numéricos
        .replace(/^(\d{2})(\d)/, '$1.$2') // Adiciona ponto após os 2 primeiros dígitos
        .replace(/^(\d{2})\.(\d{3})(\d)/, '$1.$2.$3') // Adiciona ponto após os 3 próximos dígitos
        .replace(/\.(\d{3})(\d)/, '.$1/$2') // Adiciona barra após os próximos 3 dígitos
        .replace(/(\d{4})(\d)/, '$1-$2') // Adiciona hífen antes dos 2 últimos dígitos
        .slice(0, 18); // Limita o tamanho
      
      setFormData({ ...formData, [name]: maskedValue });
    } else {
      setFormData({ ...formData, [name]: value });
    }
  };

  // 📝 Iniciar edição de empresa
  const iniciarEdicao = (empresa: any) => {
    console.log('📝 Iniciando edição da empresa:', empresa.$id);
    setEditingEmpresa(empresa);
    setFormData({
      cnpj: empresa.cnpj || '',
      razaoSocial: empresa['razao-social'] || '',
      nomeFantasia: empresa['nome-fantasia'] || ''
    });
    setIsModalOpen(true);
  };

  // ❌ Cancelar edição
  const cancelarEdicao = () => {
    setEditingEmpresa(null);
    setIsModalOpen(false);
    resetForm();
  };

  // 📱 Abrir modal para nova empresa
  const abrirModalNovaEmpresa = () => {
    setEditingEmpresa(null);
    resetForm();
    setIsModalOpen(true);
  };

  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="md"
              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>

          {/* Mensagem de feedback */}
          {message && (
            <div className={`mb-6 p-4 rounded-lg ${
              message.type === 'success' 
                ? 'bg-green-100 border border-green-400 text-green-700'
                : 'bg-red-100 border border-red-400 text-red-700'
            }`}>
              <div className="flex items-center">
                {message.type === 'success' ? (
                  <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                  </svg>
                ) : (
                  <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
                  </svg>
                )}
                {message.text}
              </div>
            </div>
          )}

          {/* Lista de empresas */}
          <EmpresaList
            empresas={empresas}
            loading={loading}
            error={null}
            onEdit={iniciarEdicao}
            onDelete={deletarEmpresa}
            onRefresh={listarEmpresas}
          />
        </main>

        {/* Modal de Cadastro/Edição */}
        {isModalOpen && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
            <div className="bg-white rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto">
              <div className="p-6">
                <div className="flex justify-between items-center mb-6">
                  <h2 className="text-xl font-semibold text-gray-900">
                    {editingEmpresa ? 'Editar Empresa' : 'Nova Empresa'}
                  </h2>
                  <button
                    onClick={cancelarEdicao}
                    className="text-gray-400 hover:text-gray-600 transition-colors"
                  >
                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                    </svg>
                  </button>
                </div>
                
                <form onSubmit={editingEmpresa ? salvarEdicao : cadastrarEmpresa} className="space-y-6">
                  <div>
                    <label htmlFor="cnpj" className="block text-sm font-medium text-gray-700 mb-2">
                      CNPJ *
                    </label>
                    <input
                      type="text"
                      id="cnpj"
                      name="cnpj"
                      value={formData.cnpj}
                      onChange={handleInputChange}
                      placeholder="00.000.000/0001-00"
                      maxLength={18}
                      required
                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors bg-white text-gray-900 placeholder-gray-500"
                    />
                  </div>
                  
                  <div>
                    <label htmlFor="razaoSocial" className="block text-sm font-medium text-gray-700 mb-2">
                      Razão Social *
                    </label>
                    <input
                      type="text"
                      id="razaoSocial"
                      name="razaoSocial"
                      value={formData.razaoSocial}
                      onChange={handleInputChange}
                      placeholder="Razão Social da Empresa"
                      required
                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors bg-white text-gray-900 placeholder-gray-500"
                    />
                  </div>
                  
                  <div>
                    <label htmlFor="nomeFantasia" className="block text-sm font-medium text-gray-700 mb-2">
                      Nome Fantasia *
                    </label>
                    <input
                      type="text"
                      id="nomeFantasia"
                      name="nomeFantasia"
                      value={formData.nomeFantasia}
                      onChange={handleInputChange}
                      placeholder="Nome Fantasia da Empresa"
                      required
                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors bg-white text-gray-900 placeholder-gray-500"
                    />
                  </div>
                  
                  <div className="flex space-x-4">
                    <button
                      type="submit"
                      disabled={loading}
                      className="flex-1 bg-gradient-to-r from-blue-600 to-green-600 text-white py-3 px-6 rounded-lg font-medium hover:from-blue-700 hover:to-green-700 disabled:opacity-50 transition-all duration-200 flex items-center justify-center cursor-pointer"
                    >
                      {loading ? (
                        <>
                          <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
                          Processando...
                        </>
                      ) : (
                        <>
                          {editingEmpresa ? 'Atualizar' : 'Salvar'}
                        </>
                      )}
                    </button>
                    
                    <button
                      type="button"
                      onClick={cancelarEdicao}
                      className="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
                    >
                      Cancelar
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        )}
      </div>
    </RoleGuard>
  );
};

export default GestaoEmpresas;
