# 🐛 Problemas Identificados na Página de Perfil

## 📋 Problemas Encontrados

### 1. ❌ Avatares não carregam (boxes vazios)
**Sintoma:** Os 32 avatares aparecem como caixas brancas/vazias sem imagens.

**Causa Identificada:**
- As URLs das imagens dos avatares estão corretas (`https://api.dicebear.com/7.x/avataaars/svg?...`)
- As imagens podem não estar carregando por:
  - Problema de CORS com a API do DiceBear
  - API do DiceBear pode estar bloqueada
  - Parâmetros da URL podem estar incorretos

### 2. ❌ Informações básicas não carregam (campos vazios)
**Sintoma:** Os campos Nome, E-mail e Matrícula aparecem vazios.

**Causa Raiz Identificada:**
```
A query `obterPerfil` retorna `null` porque o usuário logado não é encontrado na tabela `usuarios`.
```

**Detalhes Técnicos:**
- A função `obterPerfil` busca o usuário pelo email usando `ctx.auth.getUserIdentity()`
- O email retornado pela autenticação não corresponde a nenhum usuário na tabela `usuarios`
- O seed criou um usuário admin com email: `admin@sgse.pe.gov.br`
- Mas o sistema de autenticação pode estar retornando um email diferente

### 3. ❌ Foto de perfil não carrega
**Sintoma:** O preview da foto mostra apenas o ícone padrão de usuário.

**Causa:** Como o perfil (`obterPerfil`) retorna `null`, não há dados de `fotoPerfilUrl` ou `avatar` para exibir.

---

## 🔍 Análise do Sistema de Autenticação

### Arquivo: `packages/backend/convex/usuarios.ts`

```typescript
export const obterPerfil = query({
  args: {},
  handler: async (ctx) => {
    const identity = await ctx.auth.getUserIdentity();  // ❌ Retorna null ou email incorreto
    if (!identity) return null;

    const usuarioAtual = await ctx.db
      .query("usuarios")
      .withIndex("by_email", (q) => q.eq("email", identity.email!))  // ❌ Não encontra o usuário
      .first();

    if (!usuarioAtual) return null;  // ❌ Retorna null aqui
    
    // ... resto do código nunca executa
  },
});
```

### Problema Principal

**O sistema tem 2 sistemas de autenticação conflitantes:**

1. **`autenticacao.ts`** - Sistema customizado com sessões
2. **`betterAuth`** - Better Auth com adapter para Convex

O usuário está logado pelo sistema `autenticacao.ts`, mas `obterPerfil` usa `ctx.auth.getUserIdentity()` que depende do Better Auth configurado corretamente.

---

## ✅ Soluções Propostas

### Solução 1: Ajustar `obterPerfil` para usar o sistema de autenticação correto

**Modificar `packages/backend/convex/usuarios.ts`:**

```typescript
export const obterPerfil = query({
  args: {},
  handler: async (ctx) => {
    // TENTAR MELHOR AUTH PRIMEIRO
    const identity = await ctx.auth.getUserIdentity();
    
    let usuarioAtual = null;
    
    if (identity && identity.email) {
      // Buscar por email (Better Auth)
      usuarioAtual = await ctx.db
        .query("usuarios")
        .withIndex("by_email", (q) => q.eq("email", identity.email!))
        .first();
    }
    
    // SE NÃO ENCONTROU, BUSCAR POR SESSÃO ATIVA (Sistema customizado)
    if (!usuarioAtual) {
      const sessaoAtiva = await ctx.db
        .query("sessoes")
        .withIndex("by_token", (q) => q.eq("ativo", true))
        .order("desc")
        .first();
      
      if (sessaoAtiva) {
        usuarioAtual = await ctx.db.get(sessaoAtual.usuarioId);
      }
    }
    
    if (!usuarioAtual) return null;

    // Buscar fotoPerfil URL se existir
    let fotoPerfilUrl = null;
    if (usuarioAtual.fotoPerfil) {
      fotoPerfilUrl = await ctx.storage.getUrl(usuarioAtual.fotoPerfil);
    }

    return {
      _id: usuarioAtual._id,
      nome: usuarioAtual.nome,
      email: usuarioAtual.email,
      matricula: usuarioAtual.matricula,
      avatar: usuarioAtual.avatar,
      fotoPerfil: usuarioAtual.fotoPerfil,
      fotoPerfilUrl,
      setor: usuarioAtual.setor,
      statusMensagem: usuarioAtual.statusMensagem,
      statusPresenca: usuarioAtual.statusPresenca,
      notificacoesAtivadas: usuarioAtual.notificacoesAtivadas ?? true,
      somNotificacao: usuarioAtual.somNotificacao ?? true,
    };
  },
});
```

### Solução 2: Corrigir URLs dos avatares

**Opção A: Testar URL diretamente no navegador**

Abra no navegador:
```
https://api.dicebear.com/7.x/avataaars/svg?seed=John-Happy&mouth=smile,twinkle&eyes=default,happy&eyebrow=default,raisedExcited&top=blazerShirt,blazerSweater&backgroundColor=b6e3f4,c0aede,d1d4f9
```

Se a imagem não carregar, a API pode estar com problema.

**Opção B: Usar CDN alternativo ou biblioteca local**

Instalar `@dicebear/core` e `@dicebear/collection` (já instalado) e gerar SVGs localmente:

```typescript
import { createAvatar } from '@dicebear/core';
import { avataaars } from '@dicebear/collection';

function getAvatarSvg(avatarId: string): string {
  const avatar = avatares.find(a => a.id === avatarId);
  if (!avatar) return "";
  
  const isFormal = parseInt(avatar.id.split('-')[2]) % 2 === 1;
  const topType = isFormal 
    ? ["blazerShirt", "blazerSweater"]
    : ["hoodie", "sweater", "overall", "shirtCrewNeck"];
  
  const svg = createAvatar(avataaars, {
    seed: avatar.seed,
    mouth: ["smile", "twinkle"],
    eyes: ["default", "happy"],
    eyebrow: ["default", "raisedExcited"],
    top: topType,
    backgroundColor: ["b6e3f4", "c0aede", "d1d4f9"],
  });
  
  return svg.toDataUriSync(); // Retorna data:image/svg+xml;base64,...
}
```

### Solução 3: Adicionar logs de depuração

**Adicionar logs temporários em `obterPerfil`:**

```typescript
export const obterPerfil = query({
  args: {},
  handler: async (ctx) => {
    console.log("=== DEBUG obterPerfil ===");
    
    const identity = await ctx.auth.getUserIdentity();
    console.log("Identity:", identity);
    
    if (!identity) {
      console.log("❌ Identity é null");
      return null;
    }
    
    console.log("Email da identity:", identity.email);

    const usuarioAtual = await ctx.db
      .query("usuarios")
      .withIndex("by_email", (q) => q.eq("email", identity.email!))
      .first();
    
    console.log("Usuário encontrado:", usuarioAtual ? "SIM" : "NÃO");
    
    if (!usuarioAtual) {
      // Listar todos os usuários para debug
      const todosUsuarios = await ctx.db.query("usuarios").collect();
      console.log("Total de usuários no banco:", todosUsuarios.length);
      console.log("Emails cadastrados:", todosUsuarios.map(u => u.email));
      return null;
    }
    
    // ... resto do código
  },
});
```

---

## 🧪 Como Testar

### 1. Verificar o sistema de autenticação:
```bash
# No console do navegador (F12)
# Verificar se há token de sessão
localStorage.getItem('convex-session-token')
```

### 2. Fazer logout e login novamente:
- Fazer logout do sistema
- Fazer login com matrícula `0000` e senha `Admin@123`
- Acessar `/perfil` novamente

### 3. Verificar os logs do Convex:
```bash
cd packages/backend
npx convex logs
```

---

## 📊 Status dos Problemas

| Problema | Status | Prioridade |
|----------|--------|------------|
| Avatares não carregam | 🔍 Investigando | Alta |
| Informações não carregam | ✅ Causa identificada | **Crítica** |
| Foto não carrega | ⏳ Aguardando fix do perfil | Média |

---

## 🎯 Próximos Passos Recomendados

1. **URGENTE:** Implementar **Solução 1** para corrigir `obterPerfil`
2. Testar URL dos avatares no navegador
3. Se necessário, implementar **Solução 2 (Opção B)** para avatares locais
4. Adicionar logs de debug para confirmar funcionamento
5. Remover logs após correção

---

## 💡 Observações

- O seed foi executado com sucesso ✅
- O usuário admin está criado no banco ✅
- O problema é na **integração** entre autenticação e query de perfil
- Após corrigir `obterPerfil`, o sistema deve funcionar completamente

---

**Criado em:** $(Get-Date)
**Seed executado:** ✅ Sim
**Usuário admin:** matrícula `0000`, senha `Admin@123`