"use client";

import { useState, useEffect } from "react";
import { databases } from "@/lib/appwrite";
import { Query } from "appwrite";

const DebugExclusaoEmpresaPage = () => {
  const [empresas, setEmpresas] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [logs, setLogs] = useState<string[]>([]);
  
  const addLog = (message: string) => {
    const timestamp = new Date().toLocaleTimeString();
    setLogs((prev) => [...prev, `[${timestamp}] ${message}`]);
    console.log(`[DEBUG] ${message}`);
  };

  // Carregar empresas
  const carregarEmpresas = async () => {
    setLoading(true);
    addLog("🔍 Carregando empresas...");
    
    try {
      const databaseId = process.env.NEXT_PUBLIC_APPWRITE_DATABASE_ID!;
      const collectionId = process.env.NEXT_PUBLIC_APPWRITE_COLLECTION_EMPRESAS_DADOS_ID!;

      const response = await databases.listDocuments(
        databaseId,
        collectionId,
        [Query.limit(10)]
      );

      setEmpresas(response.documents);
      addLog(`✅ ${response.documents.length} empresas carregadas`);
      
      response.documents.forEach((emp: any) => {
        addLog(`📋 ID: ${emp.$id} | Nome: ${emp['nome-fantasia'] || emp['razao-social']}`);
      });
      
    } catch (error) {
      addLog(`❌ Erro ao carregar empresas: ${error}`);
    } finally {
      setLoading(false);
    }
  };

  // Testar exclusão via API
  const testarExclusao = async (empresaId: string, nomeEmpresa: string) => {
    addLog(`🗑️ Testando exclusão da empresa: ${nomeEmpresa} (ID: ${empresaId})`);
    
    try {
      const response = await fetch(`/api/empresas/${empresaId}`, {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json'
        }
      });

      addLog(`📥 Status da resposta: ${response.status} ${response.statusText}`);
      
      const data = await response.json();
      addLog(`📋 Dados da resposta: ${JSON.stringify(data, null, 2)}`);

      if (data.success) {
        addLog(`✅ Exclusão bem-sucedida!`);
        // Recarregar lista
        await carregarEmpresas();
      } else {
        addLog(`❌ Falha na exclusão: ${data.error}`);
        if (data.details) {
          addLog(`📋 Detalhes do erro: ${JSON.stringify(data.details, null, 2)}`);
        }
      }
    } catch (error) {
      addLog(`💥 Erro na requisição: ${error}`);
    }
  };

  // Verificar se empresa existe diretamente no Appwrite
  const verificarEmpresaExiste = async (empresaId: string) => {
    addLog(`🔍 Verificando se empresa existe: ${empresaId}`);
    
    try {
      const databaseId = process.env.NEXT_PUBLIC_APPWRITE_DATABASE_ID!;
      const collectionId = process.env.NEXT_PUBLIC_APPWRITE_COLLECTION_EMPRESAS_DADOS_ID!;

      const response = await databases.getDocument(databaseId, collectionId, empresaId);
      addLog(`✅ Empresa encontrada: ${response['nome-fantasia'] || response['razao-social']}`);
      return true;
    } catch (error: any) {
      if (error.code === 404) {
        addLog(`❌ Empresa não encontrada (404): ${empresaId}`);
      } else {
        addLog(`💥 Erro ao verificar empresa: ${error.message || error}`);
      }
      return false;
    }
  };

  const clearLogs = () => {
    setLogs([]);
  };

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

  return (
    <div className="min-h-screen bg-gray-50 py-12 px-4">
      <div className="max-w-6xl mx-auto">
        <div className="bg-white shadow-xl rounded-lg p-8">
          <div className="flex justify-between items-center mb-6">
            <h1 className="text-3xl font-bold text-gray-900">
              Debug - Exclusão de Empresas
            </h1>
            <div className="space-x-2">
              <button
                onClick={carregarEmpresas}
                disabled={loading}
                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
              >
                🔄 Recarregar
              </button>
              <button
                onClick={clearLogs}
                className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
              >
                🗑️ Limpar Logs
              </button>
            </div>
          </div>

          {loading && (
            <div className="flex items-center justify-center py-4">
              <div className="w-6 h-6 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mr-3"></div>
              <span>Carregando...</span>
            </div>
          )}

          {/* Lista de Empresas */}
          <div className="mb-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4">
              📋 Empresas Disponíveis ({empresas.length})
            </h2>
            
            {empresas.length === 0 ? (
              <div className="text-gray-500 p-4 border border-gray-200 rounded">
                Nenhuma empresa encontrada
              </div>
            ) : (
              <div className="grid gap-4">
                {empresas.map((empresa: any) => (
                  <div key={empresa.$id} className="border border-gray-200 rounded p-4">
                    <div className="flex justify-between items-center">
                      <div>
                        <h3 className="font-medium">
                          {empresa['nome-fantasia'] || empresa['razao-social'] || 'Sem nome'}
                        </h3>
                        <p className="text-sm text-gray-600">ID: {empresa.$id}</p>
                        <p className="text-sm text-gray-600">CNPJ: {empresa.cnpj || 'Não informado'}</p>
                      </div>
                      <div className="space-x-2">
                        <button
                          onClick={() => verificarEmpresaExiste(empresa.$id)}
                          className="px-3 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600"
                        >
                          🔍 Verificar
                        </button>
                        <button
                          onClick={() => testarExclusao(
                            empresa.$id, 
                            empresa['nome-fantasia'] || empresa['razao-social'] || 'Sem nome'
                          )}
                          className="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600"
                        >
                          🗑️ Testar Exclusão
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* Logs de Debug */}
          <div className="mb-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-2">
              📝 Logs de Debug
            </h2>
            <div className="bg-gray-900 text-green-400 p-4 rounded-lg h-64 overflow-y-auto font-mono text-sm">
              {logs.length === 0 ? (
                <div className="text-gray-500">Nenhum log ainda...</div>
              ) : (
                logs.map((log, index) => (
                  <div key={index} className="mb-1">
                    {log}
                  </div>
                ))
              )}
            </div>
          </div>

          {/* Informações Úteis */}
          <div className="bg-yellow-50 p-4 rounded-lg">
            <h3 className="font-medium text-yellow-800 mb-2">ℹ️ Informações de Debug:</h3>
            <ul className="text-sm text-yellow-700 space-y-1">
              <li>• Use "Verificar" para confirmar se a empresa existe no banco</li>
              <li>• Use "Testar Exclusão" para simular a exclusão via API</li>
              <li>• Observe os logs para entender o fluxo completo</li>
              <li>• Erro 404 significa que a empresa não foi encontrada</li>
              <li>• A lista será recarregada automaticamente após exclusões bem-sucedidas</li>
            </ul>
          </div>

          {/* Link de volta */}
          <div className="mt-6">
            <a
              href="/dashboard/empresa-novo"
              className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
            >
              ← Voltar para Gestão de Empresas
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};

export default DebugExclusaoEmpresaPage;
