"use client";

import { useState } from "react";

const DebugConfigPage = () => {
  const [logs, setLogs] = useState<string[]>([]);
  
  const addLog = (message: string) => {
    const timestamp = new Date().toLocaleTimeString();
    setLogs((prev) => [...prev, `[${timestamp}] ${message}`]);
    console.log(`[DEBUG] ${message}`);
  };

  const testarConfiguracoes = () => {
    addLog("🔍 Verificando configurações do Appwrite...");
    
    // Verificar variáveis do cliente
    addLog(`📋 ENDPOINT: ${process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT || 'NÃO CONFIGURADO'}`);
    addLog(`📋 PROJECT_ID: ${process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || 'NÃO CONFIGURADO'}`);
    addLog(`📋 DATABASE_ID: ${process.env.NEXT_PUBLIC_APPWRITE_DATABASE_ID || 'NÃO CONFIGURADO'}`);
    addLog(`📋 COLLECTION_EMPRESAS_DADOS_ID: ${process.env.NEXT_PUBLIC_APPWRITE_COLLECTION_EMPRESAS_DADOS_ID || 'NÃO CONFIGURADO'}`);
    
    // Testar se as configurações estão válidas
    const configs = [
      { name: 'ENDPOINT', value: process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT },
      { name: 'PROJECT_ID', value: process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID },
      { name: 'DATABASE_ID', value: process.env.NEXT_PUBLIC_APPWRITE_DATABASE_ID },
      { name: 'COLLECTION_EMPRESAS_DADOS_ID', value: process.env.NEXT_PUBLIC_APPWRITE_COLLECTION_EMPRESAS_DADOS_ID }
    ];
    
    const configsInvalidas = configs.filter(config => !config.value);
    
    if (configsInvalidas.length > 0) {
      addLog(`❌ Configurações ausentes: ${configsInvalidas.map(c => c.name).join(', ')}`);
    } else {
      addLog('✅ Todas as configurações estão presentes');
    }
  };

  const testarCadastroEmpresa = async () => {
    addLog("🧪 Testando cadastro de empresa...");
    
    const dadosTeste = {
      documentId: 'unique()',
      data: {
        cnpj: '12345678000199',
        'razao-social': 'Empresa Teste LTDA',
        'nome-fantasia': 'Empresa Teste'
      }
    };
    
    addLog(`📤 Enviando dados: ${JSON.stringify(dadosTeste, null, 2)}`);
    
    try {
      const response = await fetch('/api/empresas', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(dadosTeste)
      });
      
      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('✅ Cadastro realizado com sucesso!');
        return data.data.$id; // Retorna o ID para possível exclusão
      } else {
        addLog(`❌ Falha no cadastro: ${data.error}`);
        if (data.details) {
          addLog(`📋 Detalhes: ${JSON.stringify(data.details, null, 2)}`);
        }
      }
    } catch (error) {
      addLog(`💥 Erro na requisição: ${error}`);
    }
    
    return null;
  };

  const testarExclusaoEmpresa = async (empresaId: string) => {
    addLog(`🗑️ Testando exclusão da empresa: ${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 realizada com sucesso!');
      } else {
        addLog(`❌ Falha na exclusão: ${data.error}`);
        if (data.details) {
          addLog(`📋 Detalhes: ${JSON.stringify(data.details, null, 2)}`);
        }
      }
    } catch (error) {
      addLog(`💥 Erro na requisição: ${error}`);
    }
  };

  const testarListagemEmpresas = async () => {
    addLog("📋 Testando listagem de empresas...");
    
    try {
      const response = await fetch('/api/empresas', {
        method: 'GET',
        headers: { 'Content-Type': 'application/json' }
      });
      
      addLog(`📥 Status da resposta: ${response.status} ${response.statusText}`);
      
      const data = await response.json();
      addLog(`📋 Total de empresas: ${data.total || 0}`);
      
      if (data.success) {
        addLog('✅ Listagem realizada com sucesso!');
        data.documents?.forEach((emp: any, index: number) => {
          addLog(`  ${index + 1}. ID: ${emp.$id} | Nome: ${emp['nome-fantasia'] || emp['razao-social']}`);
        });
      } else {
        addLog(`❌ Falha na listagem: ${data.error}`);
        if (data.details) {
          addLog(`📋 Detalhes: ${JSON.stringify(data.details, null, 2)}`);
        }
      }
    } catch (error) {
      addLog(`💥 Erro na requisição: ${error}`);
    }
  };

  const testarFluxoCompleto = async () => {
    addLog("🚀 Iniciando teste do fluxo completo...");
    
    // 1. Testar configurações
    testarConfiguracoes();
    
    // 2. Testar listagem
    await testarListagemEmpresas();
    
    // 3. Testar cadastro
    const empresaId = await testarCadastroEmpresa();
    
    // 4. Se cadastrou, testar exclusão
    if (empresaId) {
      await new Promise(resolve => setTimeout(resolve, 2000)); // Aguardar 2 segundos
      await testarExclusaoEmpresa(empresaId);
    }
    
    addLog("🏁 Teste completo finalizado!");
  };

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

  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 - Configurações e APIs
            </h1>
            <button
              onClick={clearLogs}
              className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
            >
              🗑️ Limpar Logs
            </button>
          </div>

          {/* Botões de Teste */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
            <button
              onClick={testarConfiguracoes}
              className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
            >
              🔍 Configurações
            </button>
            <button
              onClick={testarListagemEmpresas}
              className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
            >
              📋 Listar
            </button>
            <button
              onClick={testarCadastroEmpresa}
              className="px-4 py-2 bg-orange-600 text-white rounded hover:bg-orange-700"
            >
              ➕ Cadastrar
            </button>
            <button
              onClick={testarFluxoCompleto}
              className="px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700"
            >
              🚀 Teste Completo
            </button>
          </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-96 overflow-y-auto font-mono text-sm">
              {logs.length === 0 ? (
                <div className="text-gray-500">Clique em um botão para começar os testes...</div>
              ) : (
                logs.map((log, index) => (
                  <div key={index} className="mb-1">
                    {log}
                  </div>
                ))
              )}
            </div>
          </div>

          {/* Informações */}
          <div className="bg-blue-50 p-4 rounded-lg">
            <h3 className="font-medium text-blue-800 mb-2">ℹ️ Como usar:</h3>
            <ul className="text-sm text-blue-700 space-y-1">
              <li>• <strong>Configurações:</strong> Verifica se as variáveis de ambiente estão configuradas</li>
              <li>• <strong>Listar:</strong> Testa a API de listagem de empresas</li>
              <li>• <strong>Cadastrar:</strong> Tenta cadastrar uma empresa de teste</li>
              <li>• <strong>Teste Completo:</strong> Executa todos os testes em sequência</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 DebugConfigPage;
