feat: let users pick the Page/Instagram account when adding ads to a campaign

Some ad accounts aren't authorized to use the Instagram account that's
auto-detected from the existing ad set, causing Meta error 200/1815199
on publish. The new selector lists all of the user's connected Pages
(with linked Instagram accounts) so they can choose a valid combination
themselves, falling back to the auto-detected default. Also paginate
/me/accounts so accounts beyond the first page show up.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/dashboard/AddAdModal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Wand2, Upload, CheckCircle2 } from 'lucide-react';
 import { Modal } from '@/components/ui/Modal';
 import { Spinner } from '@/components/ui/Spinner';
@@ -8,6 +8,12 @@ import { ErrorBlock } from '@/components/ui/ErrorBlock';
 import { parseApiError, type FriendlyError } from '@/lib/errors';
 import type { AdCopyVariation } from '@/lib/ai/copywriter';
 
+type MetaPage = {
+  id: string;
+  name: string;
+  instagram_account: { id: string; username: string; profile_picture_url?: string } | null;
+};
+
 interface AddAdModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -45,6 +51,23 @@ export function AddAdModal({
   const [defaults, setDefaults] = useState<CreativeDefaults | null>(null);
   const [defaultsLoading, setDefaultsLoading] = useState(false);
 
+  const [pages, setPages] = useState<MetaPage[]>([]);
+  const [pagesLoading, setPagesLoading] = useState(false);
+  const [selectedPageId, setSelectedPageId] = useState('');
+
+  // Página detectada automaticamente a partir do anúncio existente no ad set
+  // (ou a primeira da lista, se não houver match) — usada como valor inicial
+  // do seletor até o usuário escolher outra explicitamente.
+  const autoSelectedPageId = useMemo(() => {
+    if (pages.length === 0) return '';
+    const preferred = defaults?.page_id ? pages.find((p) => p.id === defaults.page_id) : undefined;
+    return preferred?.id || pages[0].id;
+  }, [pages, defaults]);
+
+  const effectivePageId = selectedPageId || autoSelectedPageId;
+  const selectedPage = pages.find((p) => p.id === effectivePageId) || null;
+  const selectedInstagramAccount = selectedPage?.instagram_account || null;
+
   const [copyLoading, setCopyLoading] = useState(false);
   const [copyVariations, setCopyVariations] = useState<AdCopyVariation[]>([]);
   const [selectedCopy, setSelectedCopy] = useState<number | null>(null);
@@ -90,6 +113,32 @@ export function AddAdModal({
     };
   }, [adsetId, campaignName, adsetName]);
 
+  // Carrega as páginas/Instagram conectados para o usuário poder escolher
+  // explicitamente — em vez de depender só da detecção automática, que pode
+  // trazer uma combinação não autorizada para esta conta de anúncios.
+  useEffect(() => {
+    let cancelled = false;
+
+    (async () => {
+      setPagesLoading(true);
+      try {
+        const res = await fetch('/api/meta/pages');
+        const data = await res.json();
+        if (!cancelled && data.success) {
+          setPages(data.data || []);
+        }
+      } catch {
+        // Segue sem a lista — o usuário ainda pode publicar com os defaults detectados.
+      } finally {
+        if (!cancelled) setPagesLoading(false);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
   const generateCopy = async () => {
     if (!context.trim()) {
       setError('Descreva sobre o que é esse anúncio antes de gerar as copies.');
@@ -181,11 +230,12 @@ export function AddAdModal({
   const canPublish =
     !!selectedCopyData &&
     !!selectedImage &&
+    !!effectivePageId &&
     (!!link.trim() || !!defaults?.whatsapp_link || !!defaults?.whatsapp_phone_number);
 
   const publish = async () => {
     if (!canPublish || !selectedCopyData || !selectedImage) {
-      setError('Selecione uma copy e uma imagem antes de publicar.');
+      setError('Selecione uma página, uma copy e uma imagem antes de publicar.');
       return;
     }
 
@@ -200,8 +250,8 @@ export function AddAdModal({
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           campaign_name: campaignName,
-          page_id: defaults?.page_id,
+          page_id: effectivePageId || defaults?.page_id,
-          instagram_actor_id: defaults?.instagram_actor_id,
+          instagram_actor_id: selectedInstagramAccount?.id || undefined,
           link: link.trim() || undefined,
           headline: selectedCopyData.headline,
           primary_text: selectedCopyData.primary_text,
@@ -255,6 +305,51 @@ export function AddAdModal({
           </div>
         ) : (
           <>
+            <div>
+              <label className="block text-xs uppercase tracking-wider font-medium mb-2" style={{ color: 'var(--muted-fg)' }}>
+                Página do Facebook que vai promover *
+              </label>
+
+              {pagesLoading ? (
+                <div className="flex items-center gap-2 text-xs py-2" style={{ color: 'var(--muted-fg)' }}>
+                  <Spinner size="sm" /> Carregando páginas conectadas...
+                </div>
+              ) : pages.length === 0 ? (
+                <p className="text-xs" style={{ color: 'var(--muted-fg)' }}>
+                  Nenhuma página encontrada na sua conta do Facebook. A Meta vai usar a página padrão deste ad set.
+                </p>
+              ) : (
+                <div className="relative">
+                  <select
+                    value={effectivePageId}
+                    onChange={(e) => setSelectedPageId(e.target.value)}
+                    className="input-field appearance-none w-full cursor-pointer pr-10"
+                  >
+                    {pages.map((page) => (
+                      <option key={page.id} value={page.id}>
+                        {page.name}
+                        {page.instagram_account ? ` · Instagram: @${page.instagram_account.username}` : ' · sem Instagram vinculado'}
+                      </option>
+                    ))}
+                  </select>
+                  <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3" style={{ color: 'var(--muted-fg)' }}>
+                    <svg className="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                      <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
+                    </svg>
+                  </div>
+                </div>
+              )}
+
+              <p className="text-[11px] mt-1.5" style={{ color: 'var(--muted-fg)' }}>
+                {selectedInstagramAccount ? (
+                  <>O anúncio também vai rodar no Instagram conectado a essa página: <strong>@{selectedInstagramAccount.username}</strong>.</>
+                ) : (
+                  'Esta página não tem uma conta do Instagram vinculada — o anúncio roda só no Facebook.'
+                )}
+                {' '}Se a Meta recusar por falta de permissão entre a conta de anúncios e o Instagram, escolha outra página aqui ou autorize o vínculo no Business Manager.
+              </p>
+            </div>
+
             <div>
               <label className="block text-xs uppercase tracking-wider font-medium mb-2" style={{ color: 'var(--muted-fg)' }}>
                 Sobre o que é esse anúncio?
@@ -262,10 +357,15 @@ export function AddAdModal({
               <textarea
                 value={context}
                 onChange={(e) => setContext(e.target.value)}
-                placeholder="Ex: Promoção de fim de ano, novo recurso do produto, depoimento de cliente..."
+                placeholder="Ex: Topo de bolo personalizado para festa infantil, com balões e confete coloridos, convite digital de aniversário..."
                 rows={3}
                 className="input-field text-sm"
               />
+              <p className="text-[11px] mt-1.5" style={{ color: 'var(--muted-fg)' }}>
+                💡 Para gerar fotos relevantes, descreva o <strong>produto/cena</strong> que a imagem deve mostrar
+                (não só o texto de venda) — ex.: &quot;topo de bolo com nome da criança, decoração de festa de aniversário&quot;.
+                Pré-preenchemos com a copy do anúncio atual; edite à vontade antes de gerar.
+              </p>
             </div>
 
             {/* Copy */}

src/lib/mcp/client.ts

@@ -27,6 +27,24 @@ async function fetchGraphGet(path: string, token: string, params: Record<string,
   return data;
 }
 
+// Helper para requests GET que percorre todas as páginas (paging.next) —
+// necessário pra endpoints como /me/accounts, que retornam só um lote por vez.
+async function fetchGraphGetAll(path: string, token: string, params: Record<string, string | number> = {}) {
+  const first = await fetchGraphGet(path, token, { limit: 100, ...params });
+  const results: unknown[] = [...(first.data || [])];
+
+  let nextUrl: string | undefined = first.paging?.next;
+  while (nextUrl) {
+    const res = await fetch(nextUrl);
+    const data = await res.json();
+    if (data.error) throwMetaError(data.error);
+    results.push(...(data.data || []));
+    nextUrl = data.paging?.next;
+  }
+
+  return results;
+}
+
 // Helper para requests POST com JSON body
 async function fetchGraphPostJson(path: string, token: string, body: any = {}) {
   const url = new URL(`https://graph.facebook.com/v20.0${path}`);
@@ -118,10 +136,10 @@ export async function callMetaTool(
       }
 
       case 'list_pages': {
-        resultData = await fetchGraphGet('/me/accounts', token, {
+        const allPages = await fetchGraphGetAll('/me/accounts', token, {
           fields: 'id,name,access_token,instagram_business_account{id,username,profile_picture_url}',
         });
-        return { content: [{ type: 'text', text: JSON.stringify(resultData.data || []) }] };
+        return { content: [{ type: 'text', text: JSON.stringify(allPages) }] };
       }
 
       case 'get_insights_for_account':