# Integração com Chatwoot Dashboard App

## Resumo das Mudanças

O painel foi adaptado para funcionar como um **Dashboard App do Chatwoot** usando a `postMessage API`. Agora, em vez de usar URL parameters, o `accountId` é **extraído automaticamente do contexto do Chatwoot**.

## Como Funciona

### 1. **Modo Sem accountId na URL**
Quando o painel é aberto sem um `accountid` na URL (ex: `dashboard.php`), ele:
- Exibe uma mensagem aguardando dados do Chatwoot
- Escuta por mensagens via `window.addEventListener('message', ...)`
- Requisita dados automaticamente via `window.parent.postMessage('chatwoot-dashboard-app:fetch-info', '*')`

### 2. **Recebimento de Dados do Chatwoot**
O Chatwoot envia um evento `message` com o contexto da conversa:

```javascript
{
  "event": "appContext",
  "data": {
    "accountId": 123,  // ou account_id, ou conversation.account_id
    "conversation": { ... },
    "contact": { ... },
    // outros dados do contexto
  }
}
```

### 3. **Carregamento dos Posts via AJAX**
Ao receber o `accountId`, o painel faz uma requisição AJAX:

```
GET /dashboard.php?action=fetch-posts&accountid=123
```

Resposta (JSON):
```json
{
  "success": true,
  "accountId": 123,
  "posts": [ ... ],
  "schema": { ... }
}
```

## Compatibilidade com URL Parameters

O painel **continua funcionando com URL parameters** para fins de teste/fallback:

```
dashboard.php?accountid=123
```

Quando um `accountid` é fornecido na URL, o painel carrega os dados imediatamente sem aguardar o Chatwoot.

## Novo Endpoint AJAX

### Requisição
```
GET /dashboard.php?action=fetch-posts&accountid={inteiro}
```

### Respostas

**Sucesso (200):**
```json
{
  "success": true,
  "accountId": 123,
  "posts": [ ... ],
  "schema": { 
    "id": "id_coluna",
    "caption": "caption_coluna",
    // ... mapeamento de colunas
  }
}
```

**Erro (400):**
```json
{
  "success": false,
  "error": "Parâmetro accountid inválido ou ausente."
}
```

**Não encontrado (404):**
```json
{
  "success": false,
  "error": "Conta não encontrada para o accountid informado."
}
```

**Erro servidor (500):**
```json
{
  "success": false,
  "error": "Erro ao consultar postagens...",
  "details": null // ou mensagem detalhada se APP_DEBUG=1
}
```

## Mudanças no Código

### dashboard.php
- ✅ Adicionado endpoint AJAX para `action=fetch-posts`
- ✅ accountId agora é opcional na URL (pode ser 0 se aguardando Chatwoot)
- ✅ Header renderiza mensagem "Aguardando Chatwoot..." quando accountId = 0
- ✅ Botão "Atualizar Postagens" fica desabilitado até ter accountId

### assets/app.js
- ✅ `S` (schema) agora é `let` em vez de `const` (pode ser atualizado)
- ✅ `ALL_POSTS` agora é `let` em vez de `const` (pode ser atualizado)
- ✅ Adicionado `isJSONValid()` para validar mensagens
- ✅ Adicionado `loadPostsData(accountId)` para fazer requisição AJAX
- ✅ Adicionado `window.addEventListener('message', ...)` para escutar Chatwoot
- ✅ Adicionado `requestChatwootData()` para solicitar dados sob demanda
- ✅ Adicionadas verificações para não quebrar se `S === null`
- ✅ Ao carregar dados com sucesso, atualiza header e botões dinamicamente

## Como Integrar com Chatwoot

### 1. Adicione como Dashboard App
No painel de administração do Chatwoot:
- Vá para **Settings → Apps**
- Clique em **Add Dashboard App**
- **App URL:** `https://seu-servidor/dashboard.php`
- **App Name:** `Painel Instagram`

### 2. O Chatwoot fornecerá:
- Context automático (accountId, conversation, contact)
- Poderá acessar dados do painel via iframe

## Exemplos de Uso

### Caso 1: Acesso Direto (teste/fallback)
```
https://seu-servidor/dashboard.php?accountid=42
```
→ Carrega posts imediatamente da conta #42

### Caso 2: Via Chatwoot (produção)
```
https://seu-servidor/dashboard.php
```
→ Aguarda dados do Chatwoot e carrega automaticamente

### Caso 3: Teste Manual da API AJAX
```bash
curl "https://seu-servidor/dashboard.php?action=fetch-posts&accountid=42"
```

## Debugging

### Painel de Debug Visual (Recomendado)

Quando o painel é aberto sem `accountid` na URL, aparece automaticamente um **painel de debug visual** na página com:

- **Status atual** do painel (aguardando/carregado)
- **Account ID** encontrado
- **Número de posts** carregados
- **Última mensagem** recebida
- **Logs em tempo real** das operações
- **Botões de ação** para teste

### Botões do Painel de Debug

- **🔄 Solicitar Dados**: Força uma nova requisição ao Chatwoot
- **🧪 Testar Conta 123**: Testa carregamento de uma conta específica
- **🗑️ Limpar Logs**: Limpa o histórico de logs
- **📊 Status Detalhado**: Mostra informações completas em popup

### Console Debug (Avançado)

Se preferir usar o console, as funções `painelDebug` e `debug` estão disponíveis:

```javascript
debug.status()      // Status geral
debug.showPosts()   // Ver posts carregados
debug.manualRequest() // Solicitar dados manualmente
debug.loadTest(123) // Testar conta específica
debug.help()        // Menu de ajuda
```

### O Que Procurar

**Se o Chatwoot estiver funcionando:**
```
📬 Mensagem recebida de [origem]
🎯 appContext encontrado!
🎉 accountId encontrado: 123
🔄 Carregando posts da conta 123...
✅ Dados recebidos! Posts: 42
```

**Se não estiver funcionando:**
```
📬 Mensagem recebida de [origem]
⚠️ Nenhum accountId encontrado na mensagem
```

### Teste Manual

1. Abra o painel no Chatwoot
2. Clique em **🧪 Testar Conta 123** para testar com uma conta conhecida
3. Verifique se os logs mostram sucesso
4. Se funcionar, o problema está na estrutura de dados do Chatwoot

### Verificação de Estrutura

Para ver exatamente que dados o Chatwoot está enviando:

1. Abra o console (F12)
2. Procure por logs `[painel_insta] 📋 Dados brutos:`
3. Verifique se existe `appContext` e qual é a estrutura dos dados

## Variáveis Globais Disponíveis

| Variável | Tipo | Descrição |
|----------|------|-----------|
| `window.__ACCOUNT_ID__` | number | ID da conta (0 se aguardando) |
| `window.__SCHEMA__` | object | Mapeamento de colunas |
| `window.__POSTS__` | array | Lista de postagens |
| `window.__WEBHOOK_URL__` | string | URL do webhook para atualizar |

## Notas Importantes

- ✅ O painel mantém compatibilidade com acesso direto via URL parameter
- ✅ Funciona com o Chatwoot postMessage API
- ✅ Suporta fallback automático entre diferentes nomes de colunas
- ✅ Todos os dados são validados antes de usar
- ✅ Logs úteis no console para debugging