# 🔔 Guia de Notificações para Produção

## 🎯 Status Atual

**✅ NOTIFICAÇÕES DESABILITADAS** para evitar confusão em produção
- Badges do menu footer mostram **ZERO** notificações
- Demo automático **DESABILITADO**
- Sistema preparado para integração real

## 🚀 Como Habilitar com APIs Reais

### 1. **WebSocket (Tempo Real)**

```typescript
// No serviço ou componente que gerencia notificações
constructor(private mobileMenuService: MobileMenuService) {
  // Conectar WebSocket real
  this.mobileMenuService.connectWebSocket('wss://api.prafrota.com/notifications');
}

// Implementar no mobile-menu.service.ts
connectWebSocket(webSocketUrl: string): void {
  const ws = new WebSocket(webSocketUrl);
  
  ws.onmessage = (event) => {
    const notification = JSON.parse(event.data);
    // Exemplo: { type: 'meli', count: 5, message: 'Novas rotas disponíveis' }
    this.updateNotification(notification.type, notification.count, notification.message);
  };
  
  ws.onerror = (error) => {
    console.error('❌ WebSocket error:', error);
  };
}
```

### 2. **API REST (Polling)**

```typescript
// Carregar notificações a cada 30 segundos
ngOnInit() {
  this.loadNotifications();
  setInterval(() => this.loadNotifications(), 30000);
}

async loadNotifications() {
  await this.mobileMenuService.loadNotificationsFromAPI('/api/notifications');
}

// Implementar no mobile-menu.service.ts
async loadNotificationsFromAPI(apiUrl: string): Promise<void> {
  try {
    const response = await fetch(apiUrl, {
      headers: { 'Authorization': `Bearer ${token}` }
    });
    const data = await response.json();
    
    // Exemplo response:
    // {
    //   meli: { count: 3, message: 'Novas rotas' },
    //   vehicles: { count: 1, message: 'Manutenção pendente' },
    //   dashboard: { count: 0, message: '' }
    // }
    
    Object.entries(data).forEach(([type, notification]) => {
      this.updateNotification(type, notification.count, notification.message);
    });
  } catch (error) {
    console.error('❌ Erro ao carregar notificações:', error);
  }
}
```

### 3. **Server-Sent Events (SSE)**

```typescript
// Alternativa ao WebSocket
connectSSE(sseUrl: string): void {
  const eventSource = new EventSource(sseUrl);
  
  eventSource.onmessage = (event) => {
    const notification = JSON.parse(event.data);
    this.updateNotification(notification.type, notification.count, notification.message);
  };
}
```

## 📋 Implementação Passo a Passo

### **PASSO 1: Habilitar Demo (Desenvolvimento)**

```typescript
// mobile-footer-menu.component.ts - linha 125
ngOnInit() {
  // ... outros subscribes

  // ✅ DESENVOLVIMENTO: Habilitar demo temporário
  this.mobileMenuService.startDemoNotifications();
}
```

### **PASSO 2: Implementar API Real**

```typescript
// mobile-menu.service.ts - descomentar método
startDemoNotifications(): void {
  // Substituir por lógica real
  console.log('🚀 Carregando notificações reais...');
  
  // Opção 1: WebSocket
  this.connectWebSocket('wss://api.prafrota.com/ws');
  
  // Opção 2: Polling
  this.loadNotificationsFromAPI('/api/notifications');
  setInterval(() => this.loadNotificationsFromAPI('/api/notifications'), 30000);
}
```

### **PASSO 3: Configurar Backend**

```javascript
// Exemplo de endpoint de notificações
app.get('/api/notifications', (req, res) => {
  res.json({
    meli: {
      count: getNewMeliRoutes(req.user.id).length,
      message: 'Novas rotas disponíveis'
    },
    vehicles: {
      count: getPendingMaintenance(req.user.id).length,
      message: 'Manutenção pendente'
    },
    dashboard: {
      count: getPendingReports(req.user.id).length,
      message: 'Relatórios pendentes'
    },
    sidebar: {
      count: 0,
      message: ''
    }
  });
});
```

## 🎛️ Controle Manual de Notificações

### **Atualizar Notificação Específica**

```typescript
// Quando uma nova rota Meli chegar
this.mobileMenuService.setMeliNotifications(5, 'Novas rotas disponíveis');

// Quando um veículo precisar de manutenção
this.mobileMenuService.setVehicleNotifications(2, 'Revisão programada');

// Quando houver relatórios pendentes
this.mobileMenuService.setDashboardNotifications(1, 'Relatório mensal');
```

### **Limpar Notificações**

```typescript
// Quando usuário navegar para a seção
navigateToMeliRoutes() {
  this.router.navigate(['/app/routes/mercado-live']);
  this.mobileMenuService.clearNotification('meli'); // ✅ Limpa badge
}

// Limpar todas as notificações
this.mobileMenuService.clearNotification('meli');
this.mobileMenuService.clearNotification('vehicles');
this.mobileMenuService.clearNotification('dashboard');
```

## 🧪 Testes em Desenvolvimento

### **Teste Manual via Console**

```javascript
// No console do navegador
const service = window.ng.getComponent(document.querySelector('app-mobile-footer-menu')).mobileMenuService;

// Testar notificações
service.setMeliNotifications(10, 'Teste Meli');
service.setVehicleNotifications(5, 'Teste Veículos');
service.setDashboardNotifications(3, 'Teste Dashboard');

// Limpar tudo
service.clearNotification('meli');
service.clearNotification('vehicles');
service.clearNotification('dashboard');
```

### **Habilitar Demo Temporário**

```typescript
// Para testar visual das notificações
// mobile-footer-menu.component.ts
ngOnInit() {
  // Descomentar esta linha:
  this.mobileMenuService.startDemoNotifications();
}
```

## 🔌 Integração com Backend

### **Headers de Autenticação**

```typescript
async loadNotificationsFromAPI(apiUrl: string): Promise<void> {
  const token = localStorage.getItem('auth_token');
  
  const response = await fetch(apiUrl, {
    headers: {
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'application/json'
    }
  });
}
```

### **Tratamento de Erros**

```typescript
async loadNotificationsFromAPI(apiUrl: string): Promise<void> {
  try {
    const response = await fetch(apiUrl);
    
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
    
    const data = await response.json();
    // Processar notificações...
    
  } catch (error) {
    console.error('❌ Erro ao carregar notificações:', error);
    
    // Fallback: manter notificações zeradas em caso de erro
    this.clearAllNotifications();
  }
}

clearAllNotifications(): void {
  ['meli', 'vehicles', 'dashboard', 'sidebar'].forEach(type => {
    this.clearNotification(type);
  });
}
```

## 🎯 Estrutura de Dados Esperada

### **Formato da API**

```json
{
  "meli": {
    "count": 3,
    "message": "Novas rotas disponíveis",
    "timestamp": "2025-01-15T10:30:00Z",
    "priority": "normal"
  },
  "vehicles": {
    "count": 1,
    "message": "Manutenção programada para amanhã",
    "timestamp": "2025-01-15T09:15:00Z",
    "priority": "high"
  },
  "dashboard": {
    "count": 2,
    "message": "Relatórios mensais disponíveis",
    "timestamp": "2025-01-15T08:00:00Z",
    "priority": "low"
  },
  "sidebar": {
    "count": 0,
    "message": "",
    "timestamp": "2025-01-15T07:00:00Z",
    "priority": "normal"
  }
}
```

### **Formato do WebSocket**

```json
{
  "type": "notification_update",
  "data": {
    "category": "meli",
    "count": 5,
    "message": "Nova rota urgente adicionada",
    "timestamp": "2025-01-15T10:45:00Z",
    "user_id": "user123"
  }
}
```

## 📊 Monitoramento

### **Logs Importantes**

```typescript
// Log quando notificação é atualizada
console.log(`📱 Notificação atualizada para ${type}: ${count}`);

// Log quando falha carregamento
console.error('❌ Falha ao carregar notificações:', error);

// Log quando WebSocket conecta
console.log('🔌 WebSocket conectado para notificações');

// Log quando usuário limpa notificação
console.log(`✅ Notificação ${type} marcada como vista`);
```

### **Métricas Sugeridas**

- Tempo de resposta da API de notificações
- Taxa de erro no carregamento
- Frequência de atualizações WebSocket
- Engajamento do usuário (cliques nos badges)

## 🚀 Resumo para Produção

### ✅ **ATUALMENTE (Produção)**
- Notificações **ZERADAS**
- Demo **DESABILITADO**
- Sistema **PREPARADO** para integração

### 🔧 **PRÓXIMOS PASSOS**
1. **Desenvolver** endpoints de API
2. **Configurar** WebSocket/SSE (opcional)
3. **Descomentar** código de integração
4. **Testar** em desenvolvimento
5. **Deploy** para produção

### 📞 **Quando Implementar**
- Substitua `startDemoNotifications()` por lógica real
- Configure autenticação nos requests
- Implemente tratamento de erros
- Adicione logs e monitoramento

---

**Status**: ✅ **Pronto para integração real**  
**Última atualização**: Janeiro 2025 