"use client";

import { useState, useEffect } from "react";

const DebugNetworkPage = () => {
  const [logs, setLogs] = useState<string[]>([]);
  const [interceptedRequests, setInterceptedRequests] = useState<any[]>([]);

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

  useEffect(() => {
    // Interceptar fetch para monitorar chamadas de API
    const originalFetch = window.fetch;
    
    window.fetch = async (...args: Parameters<typeof fetch>) => {
      const [url, options] = args;
      const method = options?.method || 'GET';
      
      addLog(`🌐 Interceptada: ${method} ${url}`);
      
      const requestInfo = {
        url: url.toString(),
        method,
        timestamp: new Date().toISOString(),
        options
      };
      
      setInterceptedRequests(prev => [...prev, requestInfo]);
      
      try {
        const response = await originalFetch(...args);
        addLog(`📥 Resposta: ${response.status} ${response.statusText} para ${method} ${url}`);
        
        // Se for uma chamada relacionada a empresas, vamos loggar mais detalhes
        if (url.toString().includes('/api/empresas')) {
          const clonedResponse = response.clone();
          try {
            const data = await clonedResponse.json();
            addLog(`📋 Dados da resposta empresa: ${JSON.stringify(data, null, 2)}`);
          } catch (e) {
            addLog(`⚠️ Não foi possível ler dados da resposta de ${url}`);
          }
        }
        
        return response;
      } catch (error) {
        addLog(`💥 Erro na requisição: ${error} para ${method} ${url}`);
        throw error;
      }
    };
    
    addLog("🔍 Monitor de rede ativado");
    
    // Cleanup
    return () => {
      window.fetch = originalFetch;
      addLog("🛑 Monitor de rede desativado");
    };
  }, []);

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

  const testDelete = async (fakeId: string) => {
    addLog(`🧪 Testando exclusão com ID falso: ${fakeId}`);
    
    try {
      const response = await fetch(`/api/empresas/${fakeId}`, {
        method: 'DELETE'
      });
      
      const data = await response.json();
      addLog(`📋 Resultado do teste: ${JSON.stringify(data, null, 2)}`);
    } catch (error) {
      addLog(`💥 Erro no teste: ${error}`);
    }
  };

  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 - Monitor de Rede
            </h1>
            <button
              onClick={clearLogs}
              className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
            >
              🗑️ Limpar
            </button>
          </div>

          {/* Botões de Teste */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
            <button
              onClick={() => testDelete('id-inexistente-123')}
              className="px-4 py-3 bg-red-600 text-white rounded hover:bg-red-700"
            >
              🧪 Testar DELETE com ID Falso
            </button>
            <button
              onClick={() => {
                addLog("🔄 Navegando para gestão de empresas...");
                window.location.href = '/dashboard/empresa-novo';
              }}
              className="px-4 py-3 bg-blue-600 text-white rounded hover:bg-blue-700"
            >
              📊 Ir para Gestão de Empresas
            </button>
            <button
              onClick={() => {
                addLog("🔄 Recarregando página...");
                window.location.reload();
              }}
              className="px-4 py-3 bg-green-600 text-white rounded hover:bg-green-700"
            >
              🔄 Recarregar Página
            </button>
          </div>

          {/* Resumo de Requisições */}
          <div className="mb-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-2">
              📊 Resumo de Requisições ({interceptedRequests.length})
            </h2>
            
            {interceptedRequests.length === 0 ? (
              <div className="p-4 bg-gray-100 rounded text-gray-600">
                Nenhuma requisição interceptada ainda
              </div>
            ) : (
              <div className="space-y-2 max-h-48 overflow-y-auto">
                {interceptedRequests.map((req, index) => (
                  <div key={index} className="p-3 bg-blue-50 rounded text-sm">
                    <div className="font-medium text-blue-900">
                      {req.method} {req.url}
                    </div>
                    <div className="text-blue-700 text-xs">
                      {new Date(req.timestamp).toLocaleTimeString()}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* Logs Detalhados */}
          <div className="mb-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-2">
              📝 Logs Detalhados
            </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">Aguardando atividade de rede...</div>
              ) : (
                logs.map((log, index) => (
                  <div key={index} className="mb-1">
                    {log}
                  </div>
                ))
              )}
            </div>
          </div>

          {/* Instruções */}
          <div className="bg-yellow-50 p-4 rounded-lg">
            <h3 className="font-medium text-yellow-800 mb-2">💡 Como usar:</h3>
            <ul className="text-sm text-yellow-700 space-y-1">
              <li>• Esta página monitora todas as requisições HTTP</li>
              <li>• Use "Testar DELETE" para simular uma exclusão</li>
              <li>• Vá para "Gestão de Empresas" e tente excluir uma empresa</li>
              <li>• Observe os logs para ver se há chamadas inesperadas</li>
              <li>• Se aparecer erro 404, você verá exatamente qual URL está causando</li>
            </ul>
          </div>

          {/* Links */}
          <div className="mt-6 space-x-4">
            <a
              href="/debug-config"
              className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
            >
              🔍 Debug Config
            </a>
            <a
              href="/teste-rapido"
              className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
            >
              🧪 Teste Rápido
            </a>
            <a
              href="/dashboard/empresa-novo"
              className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
            >
              ← Gestão de Empresas
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};

export default DebugNetworkPage;
