"use client";

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

const DebugRegistroPage = () => {
  const [user, setUser] = useState<any>(null);
  const [userDoc, setUserDoc] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [logs, setLogs] = useState<string[]>([]);
  const addLog = (message: string) => {
    const timestamp = new Date().toLocaleTimeString();
    setLogs((prev) => [...prev, `[${timestamp}] ${message}`]);
    console.log(`[DEBUG] ${message}`);
  };

  useEffect(() => {
    const debugAuth = async () => {
      try {
        addLog("🔍 Iniciando debug de autenticação...");

        // 1. Verificar usuário autenticado
        const currentUser = await getCurrentUserWithRetry();
        if (!currentUser) {
          addLog("❌ Nenhum usuário autenticado");
          return;
        }

        setUser(currentUser);
        addLog(
          `✅ Usuário autenticado: ${currentUser.name} (ID: ${currentUser.$id})`
        );

        // 2. Verificar registro no banco
        const databaseId = process.env.NEXT_PUBLIC_APPWRITE_DATABASE_ID!;
        const collectionId =
          process.env.NEXT_PUBLIC_APPWRITE_COLLECTION_USUARIOS_ID!;

        addLog("🔍 Buscando usuário na base de dados...");

        const response = await databases.listDocuments(
          databaseId,
          collectionId,
          [Query.equal("auth-id-appwrite", currentUser.$id), Query.limit(1)]
        );

        if (response.documents.length === 0) {
          addLog("❌ Usuário não encontrado na base de dados");
        } else {
          const doc = response.documents[0];
          setUserDoc(doc);
          addLog(`✅ Usuário encontrado na base de dados (ID: ${doc.$id})`);
          addLog(`📋 Nome Civil: ${doc["nome-civil"] || "NÃO PREENCHIDO"}`);
          addLog(`📋 CPF: ${doc.cpf || "NÃO PREENCHIDO"}`);
          addLog(`📋 Endereços: ${doc.enderecos?.length || 0} endereço(s)`);
          addLog(`📋 Empresas: ${doc.empresas?.length || 0} empresa(s)`);

          // Verificar completude
          const camposObrigatorios = ["nome-civil", "cpf"];
          const camposFaltantes = camposObrigatorios.filter(
            (campo) => !doc[campo] || doc[campo].toString().trim() === ""
          );

          const temEndereco =
            doc.enderecos &&
            Array.isArray(doc.enderecos) &&
            doc.enderecos.length > 0;

          if (camposFaltantes.length > 0 || !temEndereco) {
            addLog(
              `⚠️ Registro incompleto - Campos faltantes: ${camposFaltantes.join(
                ", "
              )}, Tem endereço: ${temEndereco}`
            );
          } else {
            addLog("✅ Registro completo!");
          }
        }
      } catch (error) {
        addLog(`💥 Erro: ${error}`);
      } finally {
        setLoading(false);
      }
    };

    debugAuth();
  }, []);

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

  const refreshData = async () => {
    setLoading(true);
    setLogs([]);
    // Re-execute debug
    window.location.reload();
  };

  return (
    <div className="min-h-screen bg-gray-50 py-12 px-4">
      <div className="max-w-4xl 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 do Registro
            </h1>
            <div className="space-x-2">
              <button
                onClick={refreshData}
                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
              >
                🔄 Atualizar
              </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-8">
              <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mr-3"></div>
              <span>Verificando dados...</span>
            </div>
          )}

          {/* Informações do Usuário Autenticado */}
          {user && (
            <div className="mb-6 p-4 bg-blue-50 rounded-lg">
              <h2 className="text-lg font-semibold text-blue-900 mb-2">
                👤 Usuário Autenticado
              </h2>
              <pre className="text-sm text-blue-800 whitespace-pre-wrap">
                {JSON.stringify(user, null, 2)}
              </pre>
            </div>
          )}

          {/* Informações do Documento do Usuário */}
          {userDoc && (
            <div className="mb-6 p-4 bg-green-50 rounded-lg">
              <h2 className="text-lg font-semibold text-green-900 mb-2">
                📄 Documento na Base de Dados
              </h2>
              <pre className="text-sm text-green-800 whitespace-pre-wrap">
                {JSON.stringify(userDoc, null, 2)}
              </pre>
            </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>

          {/* Storage Debug */}
          <div className="mb-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-2">
              💾 SessionStorage Debug
            </h2>
            <div className="bg-yellow-50 p-4 rounded-lg">
              <SessionStorageDebug addLog={addLog} />
            </div>
          </div>

          {/* Links de Navegação */}
          <div className="flex space-x-4">
            <a
              href="/completar-registro"
              className="px-4 py-2 bg-orange-600 text-white rounded hover:bg-orange-700"
            >
              🔧 Ir para Completar Registro
            </a>
            <a
              href="/dashboard"
              className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
            >
              📊 Ir para Dashboard
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};

export default DebugRegistroPage;
