'use client';
import { useState, useEffect } from 'react';
import { databases } from '@/lib/appwrite';
import { Query } from 'appwrite';
import { account } from '@/lib/appwrite';

const DebugRegistro = () => {
  const [userData, setUserData] = useState<any>(null);
  const [authUser, setAuthUser] = useState<any>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUserData = async () => {
      try {
        // Obter usuário autenticado
        const user = await account.get();
        setAuthUser(user);

        // Buscar dados do usuário na base de dados
        const databaseId = process.env.NEXT_PUBLIC_APPWRITE_DATABASE_ID!;
        const collectionId = process.env.NEXT_PUBLIC_APPWRITE_COLLECTION_USUARIOS_ID!;

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

        if (response.documents.length > 0) {
          setUserData(response.documents[0]);
        }
      } catch (error) {
        console.error('Erro ao buscar dados:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchUserData();
  }, []);

  if (loading) {
    return <div className="p-4 bg-gray-100 rounded">Carregando dados de debug...</div>;
  }

  const checkCompletion = () => {
    if (!userData) return { completo: false, motivos: ['Usuário não encontrado'] };

    const motivos = [];

    // Verificar dados pessoais
    if (!userData['nome-civil'] || !userData.cpf) {
      motivos.push('Dados pessoais faltantes');
    }

    // Verificar endereços
    const enderecosValidos = Array.isArray(userData.enderecos) && 
                            userData.enderecos.length > 0 && 
                            userData.enderecos.some((endereco: any) => endereco && endereco.trim() !== '');
    if (!enderecosValidos) {
      motivos.push('Endereços inválidos');
    }

    // Verificar empresas
    const temEmpresa = userData.empresas_array &&
                      Array.isArray(userData.empresas_array) &&
                      userData.empresas_array.length > 0;
    if (!temEmpresa) {
      motivos.push('Empresas faltantes');
    }

    return { completo: motivos.length === 0, motivos };
  };

  const { completo, motivos } = checkCompletion();

  return (
    <div className="p-6 bg-white rounded-lg shadow-lg border-2 border-blue-500 mb-4">
      <h2 className="text-xl font-bold mb-4 text-blue-600">🔍 Debug - Status do Registro</h2>
      
      <div className="mb-4">
        <h3 className="font-semibold text-lg mb-2">Status:</h3>
        <div className={`p-3 rounded-lg ${completo ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
          {completo ? '✅ REGISTRO COMPLETO' : '❌ REGISTRO INCOMPLETO'}
        </div>
      </div>

      {!completo && (
        <div className="mb-4">
          <h3 className="font-semibold text-lg mb-2">Motivos:</h3>
          <ul className="list-disc pl-5">
            {motivos.map((motivo, index) => (
              <li key={index} className="text-red-600">{motivo}</li>
            ))}
          </ul>
        </div>
      )}

      <div className="space-y-4">
        <div>
          <h3 className="font-semibold">Auth User ID:</h3>
          <code className="bg-gray-100 p-2 rounded block">{authUser?.$id}</code>
        </div>

        <div>
          <h3 className="font-semibold">Nome Civil:</h3>
          <code className="bg-gray-100 p-2 rounded block">{userData?.['nome-civil'] || 'VAZIO'}</code>
        </div>

        <div>
          <h3 className="font-semibold">CPF:</h3>
          <code className="bg-gray-100 p-2 rounded block">{userData?.cpf || 'VAZIO'}</code>
        </div>

        <div>
          <h3 className="font-semibold">Endereços:</h3>
          <code className="bg-gray-100 p-2 rounded block">
            {JSON.stringify(userData?.enderecos, null, 2) || 'VAZIO'}
          </code>
        </div>

        <div>
          <h3 className="font-semibold">Empresas Array:</h3>
          <code className="bg-gray-100 p-2 rounded block">
            {JSON.stringify(userData?.empresas_array, null, 2) || 'VAZIO'}
          </code>
        </div>
      </div>

      <button 
        onClick={() => localStorage.removeItem('registro-incompleto-dismissed')}
        className="mt-4 bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
      >
        Limpar Cache do Modal
      </button>
    </div>
  );
};

export default DebugRegistro;
