'use client';
import { useAuthGuard } from '@/hooks/useAuthGuard';
import DebugUsuario from '@/components/DebugUsuario';
import Link from 'next/link';

const DebugUsuarioPage = () => {
  const { user, loading } = useAuthGuard();

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-600"></div>
      </div>
    );
  }

  if (!user) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-gray-800 mb-4">Acesso Negado</h1>
          <p className="text-gray-600 mb-4">Você precisa estar logado para acessar esta página.</p>
          <Link href="/" className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
            Fazer Login
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center space-x-4">
              <Link 
                href="/dashboard" 
                className="text-gray-600 hover:text-gray-900 transition-colors"
              >
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                </svg>
              </Link>
              <h1 className="text-xl font-bold text-gray-900">Debug - Dados do Usuário</h1>
            </div>
            <div className="text-sm text-gray-500">
              Usuário: {user.name}
            </div>
          </div>
        </div>
      </div>

      {/* Conteúdo */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Aviso */}
        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
          <div className="flex">
            <div className="flex-shrink-0">
              <svg className="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
              </svg>
            </div>
            <div className="ml-3">
              <h3 className="text-sm font-medium text-yellow-800">
                Página de Debug - Apenas para Desenvolvimento
              </h3>
              <div className="mt-2 text-sm text-yellow-700">
                <p>
                  Esta página mostra todos os dados do usuário para identificar problemas no sistema de verificação de registro completo.
                  <strong> Remova esta página em produção.</strong>
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Componente de Debug */}
        <DebugUsuario />

        {/* Instruções */}
        <div className="mt-8 bg-blue-50 border border-blue-200 rounded-lg p-6">
          <h3 className="text-lg font-semibold text-blue-800 mb-4">📋 Como Usar Esta Página</h3>
          <div className="space-y-3 text-blue-700">
            <p><strong>1. Verificar Status:</strong> Veja se o registro está marcado como completo ou incompleto.</p>
            <p><strong>2. Analisar Campos:</strong> Verifique quais campos estão vazios, nulos ou undefined.</p>
            <p><strong>3. Comparar Lógica:</strong> Compare os dados mostrados com a lógica do useRegistroCompleto.</p>
            <p><strong>4. Identificar Problema:</strong> Use as informações para corrigir a lógica de verificação.</p>
          </div>
        </div>

        {/* Links Úteis */}
        <div className="mt-6 flex space-x-4">
          <Link 
            href="/dashboard" 
            className="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700 transition-colors"
          >
            ← Voltar ao Dashboard
          </Link>
          <Link 
            href="/completar-registro" 
            className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors"
          >
            Completar Registro
          </Link>
        </div>
      </div>
    </div>
  );
};

export default DebugUsuarioPage;