FATOMANIA - Site de Curiosidades Científicas

# FATOMANIA - Site de Curiosidades Científicas

## Overview
FATOMANIA is a Portuguese scientific curiosities website providing interactive content across various scientific topics. It features a dynamic content management system, user authentication via Firebase, and interactive dashboards, making scientific knowledge accessible and engaging. The project aims to deliver educational content in an interactive format, with a focus on modern web technologies and a responsive user experience.

## User Preferences
I prefer simple language and clear explanations. I want iterative development with frequent, small updates rather than large, infrequent ones. Please ask for my approval before making any major architectural changes or introducing new external dependencies. When implementing features, prioritize user experience and maintain consistency with the existing design language. Do not make changes to the existing file structure without explicit approval.

## System Architecture
The project utilizes a modern web stack consisting of HTML5, CSS3, and ES6 JavaScript for the frontend. Authentication is handled by Firebase Authentication with Google Sign-in. A Python HTTP server serves static files. The architecture supports dynamic content loading through Firestore, interactive dashboards for authenticated users, and a comprehensive content submission and administration system.

**UI/UX Decisions:**
- Modern, responsive design principles.
- Preservation of the Portuguese language and original branding.
- Consistent modal behavior and article viewing across sections.
- Dynamic content display for articles, quizzes, and multimedia.
- Certificate generation for quiz achievements.

**Technical Implementations:**
- **Firebase Integration:** Firebase Authentication for user management and Firestore for dynamic content storage.
- **Content Management:** Dedicated submission forms (e.g., `submit-news.html`, `submit-quiz.html`) and an `admin-panel.html` for centralized content administration.
- **Image Uploads:** Implemented using the `imgbb` API for direct client-side uploads, with a centralized utility (`js/upload-utils.js`).
- **Dynamic Content Sections:** Eight main "mania" sections (e.g., `newsmania-modern.html`, `quizmania-modern.html`) designed for dynamic content display and user interaction.
- **Client-Side Data Handling:** Fallback mechanisms for Firestore queries (client-side ordering when server-side indexes are unavailable) and dynamic filtering.
- **Module-based JavaScript:** Utilizing ES6 modules, with functions explicitly exposed to the `window` object for HTML `onclick` events.

**Feature Specifications:**
- Scientific articles and educational content.
- User authentication and personalized dashboards.
- Interactive quizzes with ranking systems.
- Dynamic news feeds, art galleries, and technology hubs.
- Submission forms for user-generated content.
- Lab tools and simulations (e.g., `lab/periotab.js`).
- WhatsApp integration for contact forms.

**System Design Choices:**
- **Frontend-only with Firebase Backend:** The application operates entirely on the client-side, accessing Firebase services (Auth, Firestore) directly from the browser.
- **Static File Serving:** A Python `http.server` is used for serving static assets, configured for Replit's autoscale deployment.
- **Absolute Paths:** All internal links and resource paths use absolute references.

## External Dependencies
- **Firebase:**
    - **Firebase Authentication:** For user sign-up, login, and session management.
    - **Firestore:** NoSQL cloud database for storing dynamic content (articles, quizzes, user profiles).
- **imgbb API:** Used for image uploads from client-side forms.
- **Python Standard Library:** Specifically, `http.server` for serving static files.

## Replit Environment Setup
**Date:** October 3, 2025

### Development Workflow
- **Workflow Name:** Static Server
- **Command:** `python -m http.server 5000 --bind 0.0.0.0`
- **Port:** 5000 (frontend)
- **Host:** 0.0.0.0 (required for Replit proxy/iframe access)

### Deployment Configuration
- **Deployment Type:** Autoscale
- **Run Command:** `python -m http.server 5000 --bind 0.0.0.0`
- **Build Command:** None (static files only)
- **Notes:** Autoscale deployment is used as the site is stateless with Firebase backend handling all dynamic data.

### Environment Requirements
- Python 3.11+ (http.server module)
- No package dependencies (uses CDN for Firebase and Font Awesome)
- Static file serving only

### Project Status
✅ Successfully imported and configured for Replit environment (October 3, 2025)
✅ Development server running on port 5000 with 0.0.0.0 binding
✅ Deployment configured for autoscale production deployment
✅ All frontend routes functional and tested
✅ Firebase integration active and verified
✅ Sistema de interações implementado e funcional
✅ Sistema de logging centralizado operacional
✅ Painel de administração criado com controle de acesso
✅ Python 3.11.13 installed and operational
✅ All pages loading correctly with proper asset delivery

## Problemas Conhecidos e Limitações

### ✅ Sistema de Conquistas - Quizzes Perfeitos
**Status:** Resolvido com dupla estratégia
**Última Atualização:** 03/10/2025

**Solução Implementada:**
1. **Query Simplificada:** Usa apenas `where('userId', '==', userId)` que não requer índice composto
2. **Contador no Perfil:** Campo `perfectQuizzes` incrementado diretamente no documento do usuário
3. **Fallback Robusto:** Se a query falhar, usa dados do perfil (`userData.perfectQuizzes`)
4. **Logging Detalhado:** Mensagens de debug para rastrear quizzes perfeitos

**Como Funciona:**
- Quando um quiz é completado com 100%, o campo `perfectQuizzes` é incrementado no perfil
- `calculateUserStats()` lê da coleção `quiz-results` E do perfil do usuário
- Conquistas de quizzes perfeitos funcionam mesmo se a query falhar

**Arquivos Modificados:**
- `js/achievements-system.js` - Query melhorada com logging
- `mania/quizmania-modern.html` - Atualização do contador perfectQuizzes

## Atualizações Recentes (Outubro 2025)

### 0. Correções do Sistema de Conquistas e Null Safety ✅
**Data:** 03/10/2025
**Arquivos:** `js/dashboard.js`, `js/achievements-system.js`

**Problemas Corrigidos:**
1. **Renderização de Conquistas:** Conquistas eram exibidas como strings ao invés de objetos
   - Corrigido para renderizar `achievement.icon`, `achievement.name` e `achievement.description`
   - Adicionados fallbacks: icon padrão '🏆', name usa achievement.id se ausente
   
2. **Null Pointer no Dashboard:** Erro quando `userProfile` era null
   - Adicionado optional chaining: `userProfile?.name || user?.displayName || ...`
   - Previne crashes quando perfil não carrega
   
3. **Validação de userId:** Sistema de conquistas poderia receber userId inválido
   - Adicionada validação: verifica se userId é string não-vazia
   - Retorna null imediatamente se inválido

4. **Tratamento de Erro Firestore:** Query de quiz-results pode falhar por falta de índice
   - Adicionado try-catch na query
   - Fallback para `userData.quizzesPlayed` quando query falha
   - Logs detalhados para debug

**Limitação Conhecida:**
- Ver seção "Problemas Conhecidos" sobre índice Firestore necessário para conquistas de quizzes perfeitos

### 1. Correção Crítica do Firebase ✅
**Data:** 03/10/2025
**Arquivo:** `firebase-config.js`

**Problema Identificado:** Funções `arrayRemove`, `arrayUnion` e `setDoc` não estavam sendo importadas do Firebase, causando erros em funcionalidades de interação.

**Solução Implementada:**
- Adicionadas importações das funções faltantes
- Exportadas no objeto global `window.firebaseDB`
- Todas as funcionalidades de interação agora funcionam corretamente

### 2. Sistema Mestre de Interações ✅
**Arquivos Criados:**
- `js/interactions-master.js` - Gerenciador central de todas as interações
- `js/favorites-modal.js` - Modal de visualização e gerenciamento de favoritos
- `js/init-interactions.js` - Inicializador unificado de todos os módulos

**Funcionalidades Implementadas:**
- **Likes:** Toggle de curtidas com persistência no Firestore
- **Comentários:** Sistema completo de comentários por artigo
- **Favoritos:** Adicionar/remover favoritos com modal de listagem
- **Compartilhamento:** Web Share API com fallback para clipboard
- **Visualizações:** Contador de views automático
- **Jogadas:** Contador de plays para quizzes e experimentos

**Integração:**
✅ newsmania-modern.html - Sistema completo de interações
✅ quizmania-modern.html - Contador de jogadas + favoritos
✅ labmania-modern.html - Preparado para tracking de visualizações

### 3. Modal de Favoritos ✅
**Arquivo:** `js/favorites-modal.js`

**Funcionalidades:**
- Lista todos os artigos favoritados pelo usuário
- Mostra detalhes: título, categoria, imagem
- Permite remover favoritos individualmente
- Abre artigos diretamente do modal
- Design responsivo e moderno

### 4. Sistema de Logging Centralizado ✅
**Arquivo:** `js/error-logger.js`

**Funcionalidades:**
- Captura automática de erros JavaScript globais
- Captura de promessas rejeitadas não tratadas
- Armazenamento duplo: localStorage + Firestore
- Níveis de log: ERROR, WARNING, INFO, DEBUG
- Funções exportadas globalmente para uso em qualquer página
- Metadados completos: timestamp, URL, userId, userAgent, stack trace

**APIs Disponíveis:**
```javascript
window.logError(errorData)    // Registrar erro
window.logWarning(warningData) // Registrar aviso
window.logInfo(infoData)       // Registrar informação
window.getFirebaseLogs(limit)  // Buscar logs do Firebase
window.getLogStats()           // Obter estatísticas
window.deleteLog(logId)        // Deletar log específico
window.clearOldLogs(days)      // Limpar logs antigos
window.clearAllLogs()          // Limpar todos os logs
```

### 5. Painel de Administração de Logs ✅
**Arquivo:** `admin-logs.html`
**URL:** `/admin-logs.html`

**Funcionalidades:**
- Dashboard com estatísticas de erros (total, por nível, últimas 24h)
- Visualização de logs com filtros por nível
- Busca e paginação (50/100/200/500 logs)
- Deletar logs individuais
- Limpar logs antigos (30+ dias)
- Limpar todos os logs (confirmação dupla)
- Design moderno com tema FATOMANIA

**Controle de Acesso:**
- ✅ Verificação de autenticação obrigatória
- ✅ Verificação de role='admin' no documento do usuário
- ✅ Redirecionamento automático de não-autorizados
- ⚠️ **REQUER configuração adicional para produção** (ver SECURITY_GUIDE.md)

### 6. Documentação de Segurança ✅
**Arquivo:** `SECURITY_GUIDE.md`

Documenta:
- Limitações de segurança do sistema atual
- Requisitos obrigatórios para ambiente de produção
- Exemplos de Firestore Security Rules
- Implementação de Custom Claims
- Migração para Cloud Functions
- Checklist completo de segurança

**⚠️ IMPORTANTE:** O painel admin atual usa controle de acesso client-side. Para produção, é **OBRIGATÓRIO** implementar:
1. Firestore Security Rules
2. Firebase Custom Claims
3. Cloud Functions para operações destrutivas

## Padrão de Integração de Interações

### Como adicionar interações em outras páginas mania:

**Passo 1:** Adicionar botão de favoritos no header
```html
<nav>
    <a onclick="window.openFavoritesModal?.()" style="cursor: pointer;">
        <i class="fas fa-bookmark"></i> Favoritos
    </a>
</nav>
```

**Passo 2:** Carregar sistema de interações
```html
<!-- Antes do fechamento do </body> -->
<script type="module" src="/js/init-interactions.js"></script>
```

**Passo 3:** Usar funções de interação
```javascript
// Abrir artigo com interações
window.openArticleWithInteractions(articleId, 'nome-colecao')

// Incrementar visualizações
window.incrementViews('nome-colecao', 'item-id')

// Incrementar jogadas (quiz/lab)
window.incrementPlays('quizzes', 'quiz-id')
```

## Próximos Passos

### Páginas Pendentes de Integração (10 páginas):
- [ ] sciencemania-modern.html
- [ ] techmania-modern.html
- [ ] spacemania-modern.html
- [ ] ecomania-modern.html
- [ ] sportmania-modern.html
- [ ] medmania-modern.html
- [ ] gamesmania-modern.html
- [ ] artmania-modern.html
- [ ] historymania-modern.html
- [ ] misticmania-modern.html

### Segurança (Para Produção):
- [ ] Implementar Firestore Security Rules
- [ ] Configurar Firebase Custom Claims
- [ ] Migrar operações destrutivas para Cloud Functions
- [ ] Auditoria de segurança completa
- [ ] Remover funções globais do error-logger.js
- [ ] Implementar rate limiting

### Melhorias Futuras:
- [ ] Sistema de notificações em tempo real
- [ ] Ranking de usuários mais ativos
- [ ] Badges e conquistas
- [ ] Comentários aninhados (respostas)
- [ ] Moderação de comentários
- [ ] Analytics de engajamento

## Arquivos Importantes

### Configuração e Autenticação:
- `firebase-config.js` - Configuração central do Firebase
- `logsin.html` - Página de login/cadastro
- `dashboard.html` - Dashboard principal do usuário

### Sistema de Interações:
- `js/interactions-master.js` - Gerenciador de interações
- `js/favorites-modal.js` - Modal de favoritos
- `js/init-interactions.js` - Inicializador
- `js/error-logger.js` - Sistema de logging

### Administração:
- `admin-logs.html` - Painel de logs (requer role='admin')
- `admin-panel.html` - Painel de administração de conteúdo

### Páginas Mania (Já Integradas):
- `mania/newsmania-modern.html` - Notícias científicas
- `mania/quizmania-modern.html` - Quizzes interativos
- `mania/labmania-modern.html` - Laboratórios virtuais

### Documentação:
- `SECURITY_GUIDE.md` - Guia de segurança completo
- `RELATORIO_AUDITORIA.md` - Relatório de auditoria e erros corrigidos

## Notas Técnicas

### Firebase Collections:
- `error-logs` - Logs de erros do sistema (NOVA)
- `users` - Dados e perfis de usuários
- `news-articles` - Artigos de notícias
- `quizzes` - Quizzes e perguntas
- `lab-articles` - Experimentos de laboratório
- `comments` - Comentários em artigos (NOVA)
- `notifications` - Notificações do sistema
- ... (outras coleções de artigos)

### Funções Globais Disponíveis:
```javascript
// Firebase
window.firebaseAuth
window.firebaseDB

// Interações
window.openFavoritesModal()
window.openArticleWithInteractions(id, collection)
window.incrementViews(collection, id)
window.incrementPlays(collection, id)
window.toggleLike(collection, id, title)
window.addComment(collection, id, text, author)
window.shareArticle(title, description, url)

// Logging
window.logError(data)
window.logWarning(data)
window.logInfo(data)
```

## Contato e Suporte
Para questões sobre segurança, consulte `SECURITY_GUIDE.md`
Para erros conhecidos e soluções, consulte `RELATORIO_AUDITORIA.md`