# Chat WhatsApp - Estrutura Modular V1

## 📁 Estrutura de Arquivos

```
/seu-projeto/
├── index_v1.php              # Arquivo principal que junta tudo
├── api_chat_v1.php           # Backend/API de comunicação
├── styles_v1.php             # CSS do chat
├── contatos_v1.php           # Sidebar de contatos
├── topo_v1.php               # Cabeçalho do chat
├── msg_v1.php                # Área de mensagens
├── digitacao_v1.php          # Área de digitação + anexos + gravação
├── script_v1.php             # JavaScript principal
├── conn.php                  # Conexão com banco (seu arquivo)
├── uploads/                  # Pasta de arquivos (criada automaticamente)
└── logs/                     # Logs de envio (criada automaticamente)
```

## 🚀 Como Funciona

### 1. index_v1.php
Arquivo principal que:
- Valida sessão do usuário (`$_SESSION['usuario_api']` e `$_SESSION['id_sessao']`)
- Inclui todos os componentes na ordem correta
- Passa os parâmetros para o JavaScript

### 2. styles_v1.php
CSS completo com:
- Variáveis CSS (fácil customização)
- Design responsivo
- Dark mode (opcional)
- Suporte para todos os tipos de mensagem

### 3. contatos_v1.php
Sidebar lateral com:
- Lista de contatos
- Busca de contatos
- Badge de não lidas
- Última mensagem

### 4. topo_v1.php
Cabeçalho do chat com:
- Avatar do contato
- Nome e status
- Botões de ação

### 5. msg_v1.php
Área de mensagens que suporta:
- ✅ Texto
- ✅ Imagens (com preview)
- ✅ Vídeos (player integrado)
- ✅ Áudios (player integrado)
- ✅ PDFs e documentos (com download)

### 6. digitacao_v1.php
Área de input com:
- ✅ Textarea auto-redimensionável
- ✅ Botão de anexar (imagem, áudio, documento)
- ✅ Botão de gravar áudio (usa MediaRecorder API)
- ✅ Botão de enviar

### 7. script_v1.php
JavaScript que gerencia:
- Carregamento de contatos
- Seleção de contato
- Carregamento de mensagens
- Envio de mensagens (texto e arquivos)
- Gravação de áudio
- Polling de novas mensagens (3s)
- Upload de arquivos

### 8. api_chat_v1.php
Backend com as ações:
- `listar_contatos` - Lista todos os contatos
- `carregar_mensagens` - Carrega mensagens de um contato
- `enviar_mensagem` - Envia texto ou arquivo
- `verificar_novas` - Verifica novas mensagens (polling)

## 🔧 Configuração

### 1. Banco de Dados

Certifique-se que tem essas tabelas:

```sql
-- Tabela de contatos
CREATE TABLE contatos (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nome VARCHAR(255) NOT NULL,
    telefone VARCHAR(20) NOT NULL,
    usuario_api VARCHAR(100) NOT NULL,
    id_sessao VARCHAR(100) NOT NULL,
    criado_em TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    INDEX idx_usuario_sessao (usuario_api, id_sessao)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- Tabela de conversas
CREATE TABLE conversas (
    id INT AUTO_INCREMENT PRIMARY KEY,
    contato_id INT NOT NULL,
    usuario_id INT DEFAULT 0,
    origem ENUM('usuario', 'contato') NOT NULL,
    tipo_mensagem ENUM('texto', 'imagem', 'audio', 'video', 'pdf') DEFAULT 'texto',
    conteudo TEXT,
    arquivo_url VARCHAR(500),
    arquivo_nome VARCHAR(255),
    arquivo_tipo VARCHAR(100),
    arquivo_tamanho INT,
    status ENUM('novo', 'lido', 'enviado') DEFAULT 'novo',
    criado_em TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    atualizado_em TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    INDEX idx_contato (contato_id),
    INDEX idx_status (status),
    FOREIGN KEY (contato_id) REFERENCES contatos(id) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- Tabela de configuração
CREATE TABLE config (
    id INT AUTO_INCREMENT PRIMARY KEY,
    ip_vps VARCHAR(100),
    porta VARCHAR(10),
    chave VARCHAR(255)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
```

### 2. Sessão (Seu Sistema de Login)

O chat espera essas variáveis de sessão:

```php
$_SESSION['usuario_api'] = 'seu_usuario_api';
$_SESSION['id_sessao'] = 'sua_sessao_id';
```

Se não estiverem definidas, redireciona para `login.php`.

### 3. Permissões

```bash
chmod 777 uploads/
chmod 777 logs/
```

## 📱 Recursos Implementados

### ✅ Mensagens de Texto
- Envio e recebimento
- Quebras de linha (Shift+Enter)
- Emojis completos (UTF-8MB4)

### ✅ Imagens
- Upload via botão de anexo
- Compressão automática (1200px)
- Preview clicável
- Formatos: JPG, PNG, GIF, WEBP

### ✅ Vídeos
- Upload via botão de anexo
- Player nativo integrado
- Formatos: MP4, AVI, MOV, WEBM

### ✅ Áudios
- Upload via botão de anexo
- **GRAVAÇÃO DE ÁUDIO** via microfone
- Player integrado
- Formatos: MP3, OGG, WAV, M4A

### ✅ Documentos
- Upload via botão de anexo
- Preview com ícone, nome e tamanho
- Botão de download
- Formatos: PDF, DOC, DOCX, TXT

### ✅ Interface
- Design WhatsApp-like
- Responsivo (mobile/desktop)
- Busca de contatos
- Badge de não lidas
- Scroll automático
- Animações suaves

## 🎨 Personalização

### Cores
Edite as variáveis CSS em `styles_v1.php`:

```css
.chat-component-wrapper {
    --chat-primary: #25d366;      /* Verde WhatsApp */
    --chat-bg: #ffffff;           /* Fundo branco */
    --chat-bubble-sent: #dcf8c6;  /* Bolha enviada */
    /* ... */
}
```

### Dark Mode
Adicione a classe `dark-mode` ao wrapper:

```php
<div class="chat-component-wrapper dark-mode" ...>
```

### Intervalo de Atualização
Altere no final de `script_v1.php`:

```javascript
setInterval(async () => {
    // ...
}, 3000); // 3 segundos
```

## 🎤 Gravação de Áudio

A gravação de áudio usa a **MediaRecorder API**:

1. Clique no botão 🎤
2. Permite acesso ao microfone
3. Grava em formato WebM
4. Clique novamente para parar e enviar
5. Áudio é enviado automaticamente

**Requisitos:**
- HTTPS ou localhost
- Navegador moderno (Chrome, Firefox, Edge)
- Permissão de microfone

## 📤 Upload de Arquivos

**Limites:**
- Tamanho máximo: 50MB por arquivo
- Imagens: redimensionadas para 1200px
- Qualidade JPEG: 85%

**Tipos suportados:**
- Imagens: JPG, PNG, GIF, WEBP
- Vídeos: MP4, AVI, MOV, WEBM
- Áudios: MP3, OGG, WAV, M4A
- Documentos: PDF, DOC, DOCX, TXT

## 🔐 Segurança

- ✅ Prepared statements (SQL Injection)
- ✅ Escape de HTML (XSS)
- ✅ Validação de tipos de arquivo
- ✅ Limite de tamanho de upload
- ✅ UTF-8MB4 para emojis
- ✅ Validação de sessão

## 🐛 Troubleshooting

### Mensagens não aparecem
- Verifique `$_SESSION['usuario_api']` e `$_SESSION['id_sessao']`
- Confira o console do navegador (F12)
- Veja logs em `/logs/envio_YYYY-MM-DD.txt`

### Áudio não grava
- Use HTTPS ou localhost
- Permita acesso ao microfone
- Verifique compatibilidade do navegador

### Arquivos não fazem upload
- Permissões da pasta `/uploads/`
- php.ini: `upload_max_filesize` e `post_max_size`
- Tamanho do arquivo (máx 50MB)

## 📊 Estrutura do Código

### index_v1.php
```php
<?php
session_start();
// Valida sessão
// Inclui componentes
?>
```

### Ordem de Inclusão
1. `styles_v1.php` (CSS)
2. `contatos_v1.php` (Sidebar)
3. `topo_v1.php` (Header)
4. `msg_v1.php` (Mensagens)
5. `digitacao_v1.php` (Input)
6. `script_v1.php` (JavaScript)

## 💡 Próximos Passos

Para criar a **Versão 2 (Multi-Atendente)**:
- Sistema de atribuição
- Transferência de conversas
- Painel administrativo
- Histórico de atendentes
- Métricas de atendimento

---

**Desenvolvido por:** EditaCódigo
**Data:** Fevereiro 2025
**Versão:** 1.0
