Prompts Mestre: ZapBot Builder - Automação WhatsApp com IA No-Code

**Contexto:** Estamos construindo o ZapBot Builder, uma plataforma SaaS para criar chatbots de WhatsApp. O backend é Supabase (PostgreSQL) e o ORM é Drizzle. Precisamos de um esquema de banco de dados robusto para gerenciar usuários, bots, fluxos de conversa e integrações.

**Papel:** Arquiteto de Banco de Dados e Especialista em Drizzle ORM.

**Tarefa:** Crie o esquema completo do banco de dados em TypeScript usando Drizzle ORM. Inclua tabelas para:
1.  `users`: Informações básicas do usuário (ID, email, nome, ID da organização).
2.  `organizations`: Detalhes da organização (ID, nome, slug, plano de assinatura).
3.  `bots`: Configurações de cada bot (ID, nome, ID da organização, status, configurações da API do WhatsApp).
4.  `flows`: Estrutura do fluxo de conversa do bot (ID, ID do bot, nome, JSON do grafo do fluxo, data de criação/atualização).
5.  `messages`: Histórico de mensagens trocadas via bot (ID, ID do bot, ID do usuário do WhatsApp, tipo, conteúdo, timestamp).
6.  `templates`: Modelos de bots pré-definidos (ID, nome, descrição, JSON do fluxo padrão, nicho).

**Formato de Saída:** Um único bloco de código TypeScript (`schema.ts`) contendo todas as definições de tabelas e relações usando Drizzle ORM. Inclua `references` para chaves estrangeiras e `onDelete: 'cascade'` onde apropriado. Use `pgTable`, `varchar`, `timestamp`, `jsonb`, `boolean`, `serial`, `uuid`.

**Restrições:**
*   Todas as tabelas devem ter `id` (UUID ou serial), `createdAt` e `updatedAt` (timestamp com default `now()`).
*   `users` deve ter um campo `supabaseId` para linkar com o Auth do Supabase.
*   `flows` deve usar `jsonb` para armazenar o grafo do editor visual.
*   `bots` deve ter um campo `whatsappApiSettings` do tipo `jsonb` para credenciais e configurações específicas da API.
*   Use `export const` para cada definição de tabela.

**Contexto:** Com o esquema do Drizzle definido, precisamos configurar o backend tRPC para expor as operações CRUD básicas para o frontend.

**Papel:** Desenvolvedor Backend tRPC.

**Tarefa:** Crie a estrutura inicial do tRPC router principal (`appRouter.ts`) e um sub-router para `bots`. O sub-router deve incluir procedimentos para:
1.  `createBot`: Recebe `name` e `organizationId`, retorna o bot criado.
2.  `getBotById`: Recebe `id`, retorna um bot com seus fluxos associados.
3.  `updateBot`: Recebe `id` e dados parciais, atualiza o bot.
4.  `deleteBot`: Recebe `id`, deleta o bot.

**Formato de Saída:** Dois blocos de código TypeScript:
1.  `trpc.ts`: Configuração básica do tRPC (initTRPC, middlewares de autenticação e logger).
2.  `appRouter.ts`: O router principal e o `botRouter` com os procedimentos definidos, usando Zod para validação de input.

**Restrições:**
*   Use `z.object()` do Zod para validação de input e `z.infer<typeof ...>` para tipagem.
*   Inclua um middleware de autenticação básico (`isAuthed`) que verifica se `ctx.session` existe.
*   Assuma que `ctx.db` é a instância do Drizzle ORM e `ctx.session` é o objeto de sessão do Supabase.
*   Para `getBotById`, inclua os `flows` relacionados usando `with` do Drizzle.

**Contexto:** O ZapBot Builder precisa receber e processar mensagens do WhatsApp Business API via webhooks. A latência é crítica.

**Papel:** Engenheiro de Edge Computing e Especialista em Cloudflare Workers.

**Tarefa:** Desenvolva um Cloudflare Worker que atua como um gateway para os webhooks do WhatsApp. Ele deve:
1.  Verificar a autenticidade do webhook (token de verificação).
2.  Processar mensagens de entrada (tipo `text`, `image`, `button_reply`, etc.).
3.  Encaminhar as mensagens processadas para um endpoint interno do tRPC (ou uma Edge Function do Supabase) para serem salvas e para o bot responder.
4.  Responder à API do WhatsApp com um status 200 para confirmação.
5.  Implementar a verificação do webhook conforme a documentação do WhatsApp (GET request com `hub.mode`, `hub.challenge`, `hub.verify_token`).

**Formato de Saída:** Um único bloco de código JavaScript/TypeScript para um Cloudflare Worker.

**Restrições:**
*   Use a API `fetch` para fazer requisições internas.
*   As credenciais (token de verificação, URL do backend) devem ser tratadas como variáveis de ambiente (`env`).
*   A lógica de processamento de mensagens pode ser um *placeholder* inicial, focando na estrutura do worker.
*   Considerar o `POST` para mensagens e `GET` para verificação.

**Contexto:** O core do ZapBot Builder é um editor visual de fluxos de conversa. Precisamos de um componente React funcional que sirva como base para essa experiência drag-and-drop, utilizando `react-flow-renderer` (ou uma alternativa leve similar, como `reactflow`).

**Papel:** Desenvolvedor Frontend React e Especialista em UX/UI.

**Tarefa:** Crie um componente React (`FlowEditor.tsx`) que:
1.  Renderize um canvas interativo onde nós e arestas podem ser adicionados e conectados.
2.  Permita arrastar e soltar nós (representando passos da conversa, como "Mensagem de Texto", "Pergunta", "Ação").
3.  Exiba um painel lateral (placeholder) para configurar o nó selecionado.
4.  Use `shadcn/ui` para os elementos visuais (botões, painéis) e `Tailwind v4` para estilização.
5.  Implemente o estado básico para nós e arestas usando `useState` e `useCallback` para otimização.

**Formato de Saída:** Um único bloco de código TypeScript/React para o componente `FlowEditor.tsx`.

**Restrições:**
*   Foco na estrutura e interatividade básica, não na lógica complexa de cada tipo de nó.
*   Defina tipos para `Node` e `Edge` (ex: `type Node = { id: string; type: string; data: any; position: { x: number; y: number; }; };`).
*   O design deve ser minimalista e *dark mode first*.
*   Use `reactflow` como biblioteca principal para o canvas.

**Contexto:** O ZapBot Builder precisa de um layout global consistente, com navegação lateral e um cabeçalho. O design é *dark mode first*.

**Papel:** Desenvolvedor Frontend e Especialista em Design System (`shadcn/ui`, `Tailwind v4`).

**Tarefa:** Crie um layout React para o `App Router` do Next.js (`layout.tsx`) que inclua:
1.  Um `Sidebar` de navegação (com links placeholder para "Dashboard", "Meus Bots", "Templates", "Configurações").
2.  Um `Header` com o logo do ZapBot Builder e um botão para alternar entre *dark* e *light mode*.
3.  O conteúdo principal da página (`children`).
4.  Use `shadcn/ui` para os componentes (Button, Sheet para sidebar responsiva) e `Tailwind v4` para o layout e estilização.
5.  Implemente a lógica de alternância de tema usando `next-themes` ou uma solução customizada com `useState` e `useEffect` para persistência.

**Formato de Saída:** Um único bloco de código TypeScript/React para o `layout.tsx`.

**Restrições:**
*   O layout deve ser responsivo.
*   O tema padrão deve ser *dark*.
*   Utilize as classes utilitárias do Tailwind para espaçamento, cores e flexbox.
*   A navegação lateral pode ser um componente separado (`Sidebar.tsx`) mas deve ser incluída no `layout.tsx`.

**Contexto:** Precisamos de formulários para criar e editar bots. Esses formulários devem ser intuitivos e seguir o design system.

**Papel:** Desenvolvedor Frontend e Especialista em Formulários Acessíveis.

**Tarefa:** Crie um componente React (`BotForm.tsx`) para criar/editar um bot. Ele deve incluir os seguintes campos:
1.  `Nome do Bot` (Input de texto).
2.  `Organização` (Select, com opções mockadas).
3.  `Status` (Toggle Switch para Ativo/Inativo).
4.  `Token da API do WhatsApp` (Input de texto, com botão para "Gerar Novo Token" - placeholder).
5.  Botões de `Salvar` e `Cancelar`.

**Formato de Saída:** Um único bloco de código TypeScript/React para o componente `BotForm.tsx`.

**Restrições:**
*   Use componentes de formulário do `shadcn/ui` (Input, Select, Switch, Button, Form).
*   Implemente validação básica com `react-hook-form` e `Zod` (para o schema do formulário).
*   Garanta acessibilidade (labels, ARIA attributes).
*   O design deve ser *dark mode first*.

**Contexto:** O ZapBot Builder precisa de meta tags otimizadas para SEO e compartilhamento social em suas páginas de marketing e de produto.

**Papel:** Especialista em SEO Técnico e Otimização de Meta Tags.

**Tarefa:** Crie um componente React (`SeoHead.tsx` ou similar) que gere meta tags dinâmicas para o Next.js. Este componente deve aceitar props para:
1.  `title`: Título da página.
2.  `description`: Descrição da página.
3.  `keywords`: Palavras-chave.
4.  `ogTitle`, `ogDescription`, `ogImage`, `ogUrl`, `ogType`: Para Open Graph.
5.  `twitterCard`, `twitterSite`, `twitterCreator`: Para Twitter Cards.

**Formato de Saída:** Um único bloco de código TypeScript/React para o componente `SeoHead.tsx` que utiliza o componente `Head` do Next.js (ou o novo `Metadata` API).

**Restrições:**
*   Inclua meta tags essenciais como `charset`, `viewport`, `robots`.
*   Defina valores padrão para as props se não forem fornecidas.
*   Exemplo de uso: `<SeoHead title="ZapBot Builder - Crie seu Bot de WhatsApp" description="Automatize seu atendimento no WhatsApp sem código." />`.
*   Priorize a nova API de `Metadata` do Next.js 14+ se possível, caso contrário, use `next/head`.

**Contexto:** Para melhorar a visibilidade nos resultados de busca, a página inicial do ZapBot Builder deve incluir dados estruturados de `SoftwareApplication` e `Organization`.

**Papel:** Especialista em Schema.org e JSON-LD.

**Tarefa:** Crie um *snippet* de código JSON-LD para ser inserido na página inicial do ZapBot Builder. Ele deve descrever:
1.  Uma entidade `Organization` para o ZapBot Builder (nome, URL, logo, contato).
2.  Uma entidade `SoftwareApplication` para o ZapBot Builder (nome, descrição, sistema operacional suportado, preço, rating - placeholder).

**Formato de Saída:** Um único bloco de código JavaScript/JSON-LD.

**Restrições:**
*   Use as propriedades recomendadas pelo Schema.org para cada tipo.
*   Inclua um `aggregateRating` (placeholder) para o `SoftwareApplication`.
*   O preço pode ser `0` (freemium) ou um `Offer` com `priceCurrency` e `price`.
*   O `operatingSystem` deve ser "Web".

**Contexto:** Para garantir que todas as páginas importantes do ZapBot Builder sejam rastreadas e indexadas, precisamos de um sitemap XML e um `robots.txt` bem configurados.

**Papel:** Especialista em Crawlability e Indexação.

**Tarefa:**
1.  Crie um arquivo `robots.txt` que permita o rastreamento de todo o site, mas disallow o `/admin` e `/dashboard` (rotas de usuário logado).
2.  Crie uma função em Next.js (em `app/sitemap.ts` ou `app/api/sitemap.xml/route.ts`) que gere um sitemap XML dinâmico. Este sitemap deve incluir:
    *   A página inicial (`/`).
    *   Páginas de marketing (ex: `/features`, `/pricing`, `/contact`).
    *   Páginas de templates de bots (ex: `/templates/agendamento`, `/templates/faq` - assuma que você pode buscar esses templates do banco de dados).

**Formato de Saída:** Dois blocos de código:
1.  Conteúdo do arquivo `robots.txt`.
2.  Código TypeScript para a rota de sitemap dinâmico do Next.js.

**Restrições:**
*   O sitemap deve retornar o cabeçalho `Content-Type: application/xml`.
*   As datas de `lastmod` devem ser geradas dinamicamente (ex: `new Date().toISOString()`).
*   As URLs dos templates devem ser geradas a partir de dados mockados ou de uma chamada de API (placeholder).

**Contexto:** Imagens e fontes são frequentemente os maiores gargalos de performance. Precisamos otimizar ambos para o ZapBot Builder.

**Papel:** Engenheiro de Performance Web e Especialista em Core Web Vitals.

**Tarefa:** Demonstre como otimizar imagens e fontes no Next.js 14+:
1.  **Imagens:** Crie um exemplo de uso do componente `next/image` para uma imagem de herói na página inicial. Inclua `priority`, `fill` (ou `width`/`height`), `sizes` e `alt`.
2.  **Fontes:** Mostre como importar e otimizar uma fonte customizada (ex: Inter do Google Fonts) usando `next/font/google`. Inclua `display: 'swap'` e pré-carregamento.

**Formato de Saída:** Dois blocos de código TypeScript/React:
1.  Um componente React (`HeroSection.tsx`) com a imagem otimizada.
2.  O arquivo `layout.tsx` (ou `globals.css`) mostrando a configuração da fonte.

**Restrições:**
*   Para a imagem, use um placeholder de URL (`/images/hero.webp`).
*   Para a fonte, use `Inter` do Google Fonts.
*   Enfatize a geração automática de `srcset` e `sizes` pelo `next/image`.
*   A fonte deve ser carregada de forma a evitar CLS (Cumulative Layout Shift).

**Contexto:** O editor visual de fluxos é complexo e pode impactar o LCP da página principal. Precisamos carregá-lo de forma otimizada.

**Papel:** Engenheiro de Performance Web e Especialista em Otimização de Bundle.

**Tarefa:** Demonstre como implementar lazy loading e code splitting para o componente `FlowEditor` (o editor drag-and-drop).
1.  Use `React.lazy` e `Suspense` para carregar o `FlowEditor` apenas quando ele for necessário (ex: quando o usuário navega para a página de edição de bot).
2.  Explique como o Next.js lida com o code splitting automaticamente para rotas, mas como essa abordagem é útil para componentes grandes dentro de uma rota.

**Formato de Saída:** Um bloco de código TypeScript/React para a página de edição de bot (`app/bots/[id]/edit/page.tsx`).

**Restrições:**
*   A página deve exibir um *fallback* enquanto o editor está sendo carregado.
*   Assuma que `FlowEditor` é um componente pesado.
*   O foco é na técnica, não na implementação completa do editor.

**Contexto:** O CSS pode ser um bloqueador de renderização. Precisamos garantir que apenas o CSS essencial seja carregado inicialmente e que o bundle final seja mínimo.

**Papel:** Especialista em CSS Performance e Otimização de Estilos.

**Tarefa:** Explique e demonstre como o Tailwind v4, em conjunto com o Next.js, otimiza o CSS automaticamente.
1.  Descreva como o Tailwind v4 gera CSS *on-demand* e como isso se compara a versões anteriores.
2.  Mostre um exemplo de configuração do `tailwind.config.ts` que garanta o *purging* eficiente de classes não utilizadas.
3.  Explique a importância do CSS crítico e como o Next.js lida com isso em conjunto com o Tailwind.

**Formato de Saída:**
1.  Uma explicação textual concisa sobre o Tailwind v4 e CSS crítico.
2.  Um bloco de código TypeScript para um `tailwind.config.ts` otimizado.
3.  Um bloco de código para um `globals.css` minimalista que importa o Tailwind.

**Restrições:**
*   Foco nas capacidades *zero-config* do Tailwind v4 para *purging*.
*   Mencione a integração nativa do Next.js com o PostCSS.
*   Não é necessário gerar CSS crítico manualmente, mas explicar o conceito.

**Contexto:** Queremos um pipeline de deploy contínuo para o ZapBot Builder no Vercel, garantindo que cada push no `main` resulte em um deploy automático.

**Papel:** Engenheiro de DevOps e Especialista em Vercel.

**Tarefa:** Descreva o processo de configuração de CI/CD para um projeto Next.js no Vercel, incluindo:
1.  Como conectar o repositório Git (GitHub/GitLab/Bitbucket).
2.  Configuração de variáveis de ambiente (ex: `DATABASE_URL`, `NEXT_PUBLIC_SUPABASE_URL`, `WHATSAPP_VERIFY_TOKEN`).
3.  Configuração de *build commands* e *output directory* (se necessário, embora o Next.js seja detectado automaticamente).
4.  Como configurar *preview deployments* para *pull requests*.

**Formato de Saída:** Uma explicação textual passo a passo e um bloco de código YAML (ex: para GitHub Actions, se houver necessidade de passos adicionais além do Vercel nativo).

**Restrições:**
*   Foco na integração nativa do Vercel com provedores Git.
*   As variáveis de ambiente devem ser sensíveis e não expostas no frontend se não forem `NEXT_PUBLIC_`.
*   Mencione a importância dos *preview deployments* para revisões de código.

**Contexto:** Após o deploy, precisamos monitorar a performance do ZapBot Builder e identificar rapidamente quaisquer erros.

**Papel:** Engenheiro de Confiabilidade do Site (SRE) e Especialista em Monitoramento.

**Tarefa:** Descreva como configurar o monitoramento de performance e erros para o ZapBot Builder:
1.  **Vercel Analytics:** Como habilitar e quais métricas ele oferece (Core Web Vitals, Tráfego).
2.  **Sentry (Opcional, mas recomendado):** Como integrar o Sentry para monitoramento de erros de frontend e backend (Next.js Edge Functions/API Routes). Inclua um *snippet* de código para inicialização do Sentry.

**Formato de Saída:** Uma explicação textual e um bloco de código TypeScript para a inicialização do Sentry.

**Restrições:**
*   A integração do Sentry deve ser feita de forma a capturar erros tanto no cliente quanto no servidor (Edge Functions).
*   As chaves DSN do Sentry devem ser variáveis de ambiente.
*   Mencione a importância de configurar alertas.

**Contexto:** Para otimizar a latência e reduzir a carga no backend, precisamos de uma estratégia de cache inteligente, especialmente para dados de templates de bots e outras informações estáticas.

**Papel:** Engenheiro de Rede e Especialista em Edge Caching.

**Tarefa:** Descreva como usar Cloudflare Workers para implementar cache em endpoints de API específicos do ZapBot Builder (ex: `/api/templates`).
1.  Explique o conceito de Edge Caching e como os Workers podem atuar como um proxy reverso.
2.  Crie um *snippet* de código para um Cloudflare Worker que:
    *   Intercepta requisições para `/api/templates`.
    *   Verifica se a resposta está em cache (Cache API).
    *   Se estiver, retorna do cache.
    *   Se não estiver, faz a requisição ao backend, armazena em cache e retorna a resposta.
    *   Define uma política de cache (ex: TTL de 1 hora).

**Formato de Saída:** Uma explicação textual e um bloco de código JavaScript/TypeScript para um Cloudflare Worker.

**Restrições:**
*   O Worker deve lidar com métodos `GET` para endpoints de leitura.
*   As chaves de cache devem ser baseadas na URL da requisição.
*   Considere a invalidação de cache (ex: via *purge* manual ou TTL).
*   A URL do backend deve ser uma variável de ambiente.

**Contexto Geral:** Você é Zé Mané, um engenheiro de software autodidata e irreverente, especialista em desenvolvimento web moderno, SEO técnico, arquitetura de ranqueamento, e IA para desenvolvimento. Sua missão é projetar e prototipar o "ZapBot Builder", um SaaS que democratiza a criação de chatbots de WhatsApp para PMEs, eliminando a complexidade técnica.

**Público-alvo:** PMEs, profissionais liberais.
**Estilo de Design:** Minimalista, dark mode first.
**Complexidade:** MVP.

**Stack Tecnológica:** Next.js 14+, React 19, Tailwind v4, shadcn/ui, Radix UI, tRPC, Drizzle ORM, Supabase (PostgreSQL, Auth, Storage), Vercel, Cloudflare Workers.

**Features Core do MVP:**
1.  **Autenticação de Usuário:** Login/Registro via Supabase Auth.
2.  **Dashboard de Usuário:** Visão geral dos bots.
3.  **Criação/Edição de Bot:** Formulário para nome, organização, token WhatsApp.
4.  **Editor Visual Drag-and-Drop de Fluxos de Conversa:** Canvas para nós e arestas, painel de configuração de nós.
5.  **Integração One-Click com WhatsApp Business API:** Configuração de webhooks.
6.  **Templates de Bots por Nicho:** Ex: Agendamento, FAQ.

**Sua Tarefa (Gerar um Projeto Completo):**
Gere os seguintes artefatos de código e documentação para o ZapBot Builder, seguindo a stack e as features core:

1.  **Estrutura de Pastas e Arquivos:** Proponha uma estrutura de pastas para um projeto Next.js 14+ (`app/`, `components/`, `lib/`, `server/`, `types/`, `public/`).
2.  **Esquema de Banco de Dados (Drizzle ORM):**
    *   Tabelas: `users`, `organizations`, `bots`, `flows`, `messages`, `templates`.
    *   Tipagem completa, chaves estrangeiras, `jsonb` para fluxos e configurações.
3.  **Configuração do tRPC:**
    *   `trpc.ts`: Contexto, `initTRPC`, middleware de autenticação.
    *   `appRouter.ts`: Router principal.
    *   `botRouter.ts`: Procedimentos para `createBot`, `getBotById`, `updateBot`, `deleteBot` (com Zod validation).
    *   `flowRouter.ts`: Procedimentos para `createFlow`, `getFlowById`, `updateFlow` (para o grafo JSON).
4.  **Componentes Frontend Essenciais:**
    *   `layout.tsx`: Layout global com Sidebar de navegação, Header, Dark Mode Toggle (usando `next-themes` e `shadcn/ui`).
    *   `page.tsx` (Home): Página inicial de marketing simples com chamada para ação.
    *   `dashboard/page.tsx`: Página de dashboard com lista de bots do usuário.
    *   `bots/[id]/edit/page.tsx`: Página de edição de bot, com lazy loading do `FlowEditor`.
    *   `BotForm.tsx`: Formulário para criar/editar bot (com `react-hook-form`, `Zod`, `shadcn/ui`).
    *   `FlowEditor.tsx`: Componente base para o editor visual drag-and-drop (usando `reactflow`, `shadcn/ui`).
5.  **Integração WhatsApp (Cloudflare Worker):**
    *   `whatsapp-worker.ts`: Cloudflare Worker para webhooks (verificação, processamento de mensagem, encaminhamento para tRPC/Edge Function).
6.  **Otimização SEO:**
    *   `SeoHead.tsx`: Componente para meta tags dinâmicas (title, description, OG, Twitter).
    *   `sitemap.ts`: Rota de sitemap XML dinâmico.
    *   `robots.txt`: Arquivo `robots.txt` para controle de rastreamento.
7.  **Otimização de Performance:**
    *   Exemplo de uso de `next/image` e `next/font/google` no `layout.tsx` ou `HeroSection.tsx`.
    *   Explicação de como o Tailwind v4 e Next.js otimizam CSS.
8.  **Configuração de Deploy:**
    *   `vercel.json`: Configuração básica para Vercel (se necessário para rewrites/redirects).
    *   `.env.example`: Variáveis de ambiente essenciais.

**Formato de Saída:**
Organize a saída em seções claras, com títulos para cada arquivo/componente. Use blocos de código TypeScript/JavaScript/JSON/YAML. Inclua comentários explicativos onde necessário. Mantenha o tom de Zé Mané: técnico, direto e com um toque de irreverência.

**Restrições:**
*   Não gere código de teste.
*   Foque na estrutura e nos *placeholders* funcionais, não na lógica de negócio completa de cada feature.
*   Priorize a clareza e a modularidade do código.
*   Garanta que todos os componentes `shadcn/ui` e classes `Tailwind v4` sejam usados corretamente.
*   Assegure que o dark mode seja o padrão.
*   As chamadas de API para o Supabase devem ser via Drizzle ORM e tRPC.