# ✅ Guia Rápido: Sistema de Notificações em Tempo Real

## 📋 Resumo

O sistema de notificações **JÁ ESTÁ PRONTO** e **FUNCIONA**! Não precisa de Firebase ou keys externas.

---

## ✅ O que já está configurado no Backend:

1. ✅ **Socket.io instalado** (`package.json`)
2. ✅ **Socket.io inicializado** (`app.js`)
3. ✅ **WebSocket handler configurado** (`middleware/websocketHandler.js`)
4. ✅ **Funções de notificação criadas** (`utils/notificationUtils.js`)
5. ✅ **Integração nas aprovações de compras** (`controllers/purchaseController.js`)

**Não precisa configurar nada no backend!** 🎉

---

## 🔌 O que você precisa fazer (Frontend):

### **1. Instalar Socket.io no Frontend:**
```bash
npm install socket.io-client
# ou
yarn add socket.io-client
```

### **2. Conectar ao WebSocket no Frontend:**
```javascript
import io from 'socket.io-client';

// URL do seu backend (ajuste conforme necessário)
const socket = io('http://localhost:8000', {
  transports: ['websocket'],
  // Opcional: autenticação via token
  auth: {
    token: `Bearer ${userToken}` // Token JWT do usuário autenticado
  }
});

// Quando conectar
socket.on('connect', () => {
  console.log('✅ Conectado ao servidor');
  
  // Registrar usuário online (usando user_id do usuário autenticado)
  socket.emit('user-online', userId); // userId do cliente
});

// Receber confirmação de conexão
socket.on('connected', (data) => {
  console.log('✅', data.message);
  // Exemplo: { message: 'Conectado ao sistema de notificações', userId: '5' }
});
```

### **3. Escutar Notificações:**
```javascript
// Escutar notificações
socket.on('notification', (notification) => {
  console.log('🔔 Notificação recebida:', notification);
  
  if (notification.type === 'purchase_approved') {
    // Exibir notificação de compra aprovada
    showNotification({
      title: notification.title,
      message: notification.message,
      type: 'success'
    });
    
    // Atualizar pontos na UI
    updatePoints(notification.data.total_points);
    
    // Atualizar lista de compras
    refreshPurchases();
  } else if (notification.type === 'purchase_rejected') {
    // Exibir notificação de compra rejeitada
    showNotification({
      title: notification.title,
      message: notification.message,
      type: 'error'
    });
    
    // Atualizar lista de compras
    refreshPurchases();
  }
});
```

### **4. Gerenciar Desconexão:**
```javascript
// Reconectar automaticamente se conexão cair
socket.on('disconnect', () => {
  console.log('❌ Desconectado do servidor');
  // Reconectar após alguns segundos
  setTimeout(() => {
    socket.connect();
  }, 3000);
});
```

---

## 🎯 Exemplo Completo (React/Flutter/React Native):

### **React:**
```javascript
import { useEffect, useState } from 'react';
import io from 'socket.io-client';

function App() {
  const [socket, setSocket] = useState(null);
  const [points, setPoints] = useState(0);

  useEffect(() => {
    // Conectar ao WebSocket
    const newSocket = io('http://localhost:8000', {
      transports: ['websocket'],
      auth: {
        token: `Bearer ${localStorage.getItem('token')}`
      }
    });

    // Quando conectar
    newSocket.on('connect', () => {
      console.log('✅ Conectado');
      
      // Registrar usuário (userId do usuário autenticado)
      const userId = localStorage.getItem('userId');
      newSocket.emit('user-online', userId);
    });

    // Receber confirmação
    newSocket.on('connected', (data) => {
      console.log('✅', data.message);
    });

    // Escutar notificações
    newSocket.on('notification', (notification) => {
      if (notification.type === 'purchase_approved') {
        // Atualizar pontos
        setPoints(notification.data.total_points);
        
        // Exibir notificação
        alert(`${notification.title}\n${notification.message}`);
      }
    });

    setSocket(newSocket);

    // Limpar conexão ao desmontar
    return () => {
      newSocket.close();
    };
  }, []);

  return (
    <div>
      <h1>Pontos: {points}</h1>
      {/* Seu conteúdo */}
    </div>
  );
}
```

---

## 🧪 Como Testar:

### **1. Iniciar Backend:**
```bash
npm start
# ou
npm run dev
```

### **2. Verificar no Console do Backend:**
```
WebSocket connected
User 5 connected and socket stored
```

### **3. Aprovar uma Compra:**
```bash
POST /api/purchases/123/confirm
Authorization: Bearer ADMIN_TOKEN
```

### **4. Verificar Logs:**
```
✅ Notificação de compra aprovada enviada para cliente 5
```

### **5. Cliente Recebe Notificação no Frontend:**
```javascript
// No console do navegador:
🔔 Notificação recebida: {
  type: 'purchase_approved',
  title: 'Compra Aprovada! 🎉',
  message: 'Sua compra de 150.50 MZN foi aprovada!',
  data: {
    purchase_id: 123,
    points_earned: 30,
    total_points: 250,
    ...
  }
}
```

---

## ⚙️ Configuração CORS (se necessário):

O WebSocket precisa estar permitido no CORS. Verifique em `app.js`:

```javascript
const corsOptions = {
  origin: ['http://localhost:8080', 'http://localhost:5173', ...],
  credentials: true
};
```

O Socket.io **já está incluído** nas configurações de CORS existentes.

---

## 🔒 Segurança:

### **Autenticação (Opcional mas Recomendado):**

Você pode adicionar autenticação JWT no WebSocket. Se já tem autenticação no `websocket.js`, o Socket.io vai validar o token automaticamente.

**No Frontend:**
```javascript
const socket = io('http://localhost:8000', {
  auth: {
    token: `Bearer ${userToken}`
  }
});
```

**No Backend** (já configurado se usar `websocket.js`):
- O middleware valida o token automaticamente
- Apenas usuários autenticados podem conectar

---

## ✅ Status: PRONTO PARA USAR

- ✅ Backend configurado e funcionando
- ✅ Socket.io instalado e inicializado
- ✅ Funções de notificação prontas
- ✅ Integração nas aprovações funcionando
- ⚠️ **Só falta conectar o Frontend ao WebSocket**

---

## 🆘 Troubleshooting:

### **Problema: Cliente não recebe notificação**
- ✅ Verifique se o frontend está conectado (`socket.on('connect')`)
- ✅ Verifique se o usuário está registrado (`socket.emit('user-online', userId)`)
- ✅ Verifique se o `userId` está correto (mesmo ID do usuário que fez a compra)
- ✅ Verifique os logs do servidor para ver se a notificação foi enviada

### **Problema: Erro de CORS**
- ✅ Verifique se a URL do backend está correta
- ✅ Verifique se o CORS permite a origem do frontend
- ✅ Verifique se o Socket.io está configurado para aceitar a origem

### **Problema: Conexão não estabelece**
- ✅ Verifique se o backend está rodando
- ✅ Verifique se a porta está correta (padrão: 8000)
- ✅ Verifique se há firewall bloqueando

---

## 📝 Resumo:

1. ✅ **Backend:** Já está tudo configurado, não precisa fazer nada
2. ⚠️ **Frontend:** Só precisa conectar ao WebSocket e escutar notificações
3. ✅ **Não precisa de Firebase ou keys externas** - Socket.io funciona direto
4. ✅ **Não precisa configurar nada no backend** - já está pronto

**Pronto para usar!** 🚀