/* ================================================================ Tracker FMN — Kanban / Criativos Screen v3 Modal de detalhe · UTM global · Filtros · Sem # nos nomes CONTRATO DE DADOS — Supabase (tabela insights_cache) ───────────────────────────────────────────────────── Campos consumidos pelo frontend: meta_ad_id string — ID do anúncio no Meta (matching key) gasto number — Valor investido no período (R$) cpa number — Custo por aquisição (R$) roas number — Return on Ad Spend ctr_unico number — CTR único (%) connect_rate number — Connect Rate (%) frequencia number — Frequência média periodo string — Período de referência ('hist'|'d5'|'d3') Para vincular: CARDS[n].meta_ad_id === insights_cache.meta_ad_id Quando conectado ao Supabase, os campos cpa/vendas/roas substituem os valores mock abaixo. Campos null = ainda não vinculado. ================================================================ */ const { useState, useRef, useEffect } = React; const { LucideIcon, Btn, Badge, TopBar } = window; const PRODUCT_TICKET = 297; const UTM_GLOBAL = 'utm_source=FB&utm_campaign={{campaign.name}}&utm_content={{ad.id}}&utm_medium=paid'; const COLUMNS = [ { id:'fazer', label:'Fazer', colorDot:'#3b82f6', colorBg:'rgba(59,130,246,.08)', colorBorder:'rgba(59,130,246,.25)' }, { id:'fazendo', label:'Fazendo', colorDot:'#fbbf24', colorBg:'rgba(251,191,36,.08)', colorBorder:'rgba(251,191,36,.25)' }, { id:'ativo', label:'Ativos', colorDot:'#f97316', colorBg:'rgba(249,115,22,.08)', colorBorder:'rgba(249,115,22,.3)' }, { id:'campeoes', label:'Campeões', colorDot:'#4ade80', colorBg:'rgba(74,222,128,.08)', colorBorder:'rgba(74,222,128,.25)' }, { id:'testar-novamente',label:'Testar novamente', colorDot:'#a78bfa', colorBg:'rgba(167,139,250,.08)', colorBorder:'rgba(167,139,250,.25)' }, { id:'arquivado', label:'Arquivados', colorDot:'#94a3b8', colorBg:'rgba(148,163,184,.05)', colorBorder:'rgba(148,163,184,.2)' }, ]; // Regras de classificação // Regras aprovadas em 2026-06-20 — ver tracker-fmn/REGRAS-KANBAN.md // Ótimo: >= 5 vendas E CPA < R$297 // Mediano: 1 a 4 vendas — OU — >= 5 vendas com CPA >= R$297 // Ruim: 0 vendas E gasto < R$145,53 // Testar novamente: 0 vendas E gasto >= R$145,53 const CPA_LIMITE = 207.90; const TICKET_VAL = 297; const GASTO_MIN_TEST = 145.53; // 70% do CPA limite function classifyAd(vendas, cpa, gasto) { const v = vendas || 0; const g = gasto || 0; const c = cpa != null ? cpa : (v > 0 && g > 0 ? g / v : null); if (v === 0) return g >= GASTO_MIN_TEST ? 'Testar novamente' : 'Ruim'; if (v >= 5 && (c == null || c < TICKET_VAL)) return 'Ótimo'; return 'Mediano'; } // Resolve a tag correta ao mudar de coluna. // Retorna null quando não deve alterar a tag (ex: Fazer, Fazendo). function resolveTag(novoStatus, statusAnterior, vendas, cpa, gasto) { if (novoStatus === 'ativo') return statusAnterior === 'campeoes' ? 'Recorrência' : 'Teste'; if (novoStatus === 'campeoes') return 'Ótimo'; if (novoStatus === 'testar-novamente') return 'Testar novamente'; if (novoStatus === 'arquivado') return classifyAd(vendas, cpa, gasto); return null; // fazer, fazendo: sem tag automática } const TAG_TONE = { 'Teste':'info', 'Recorrência':'teal', 'Ótimo':'success', 'Testar novamente':'info', 'Mediano':'warning', 'Ruim':'danger' }; /* ── Hook: ADS reais do Supabase ─────────────────────────────────*/ function useAdsCards() { const [cards, setCards] = useState([]); const [loading, setLoading] = useState(true); async function load() { if (!window.db) return; setLoading(true); const { data: adsList } = await window.db .from('ads') .select('numero,titulo,status,tag,tipo,headline,hook_copy,hook_visual,desenvolvimento_cta,texto_principal,titulo_ad,descricao_ad,posicionamento,media_drive_url,media_tipo,media_files,meta_ad_id,meta_ad_url,vendas_total,cpa_historico,gasto_total,isento_regra,observacoes') .order('numero', { ascending: false }); const { data: insights } = await window.db .from('insights_cache') .select('meta_ad_id,cpa,roas,gasto,compras,periodo') .eq('periodo', 'maximum'); const insightMap = Object.fromEntries((insights || []).map(i => [i.meta_ad_id, i])); const mapped = (adsList || []).map(a => { const ins = a.meta_ad_id ? insightMap[a.meta_ad_id] : null; const tipoFormatted = a.tipo === 'reels' ? 'Reels' : a.tipo === 'imagem' ? 'Imagem' : 'Carrossel'; return { id: `ads-${a.numero}`, num: String(a.numero).padStart(3,'0'), meta_ad_id: a.meta_ad_id, col: a.status, progress: a.status === 'fazendo' ? 50 : 0, hook: a.titulo, formats: [tipoFormatted], // totais agregados (soma de todas as instâncias do criativo) têm prioridade vendas: a.vendas_total ?? ins?.compras ?? null, cpa: a.cpa_historico ?? ins?.cpa ?? null, gasto: a.gasto_total ?? ins?.gasto ?? null, tag: a.status === 'ativo' ? (a.tag || 'Teste') : (a.status === 'arquivado' || a.status === 'campeoes' || a.status === 'testar-novamente') ? (a.tag || classifyAd(ins?.compras ?? a.vendas_total, ins?.cpa ?? a.cpa_historico, ins?.gasto ?? a.gasto_total)) : null, raw: a, }; }); setCards(mapped); setLoading(false); } useEffect(() => { load(); }, []); return { cards, loading, reload: load }; } function getCpaColor(cpa) { if (!cpa) return 'var(--text-3)'; const r = cpa / PRODUCT_TICKET; if (r >= 1) return 'var(--clr-neg)'; if (r >= 0.7) return 'var(--clr-warn)'; return 'var(--clr-pos)'; } function computeChampions(cards) { return Object.fromEntries( cards.filter(c => c.vendas > 0 && c.cpa > 0) .map(c => ({ id: c.id, score: (c.vendas / c.cpa) * 10000 })) .sort((a,b) => b.score - a.score) .slice(0, 20) .map((c,i) => [c.id, i+1]) ); } const FORMAT_GRADIENTS = { Reels: 'linear-gradient(135deg,#1e2d5f,#2563eb)', Imagem: 'linear-gradient(135deg,#1a2e1e,#16a34a)', Carrossel:'linear-gradient(135deg,#2d1a40,#7c3aed)', Copy: 'linear-gradient(135deg,#3a1a1a,#dc2626)', }; const FORMAT_ICONS = { Reels:'play', Imagem:'image', Carrossel:'layout-grid', Copy:'type' }; const FORMAT_TONE = { Reels:'reels', Imagem:'image', Carrossel:'carousel', Copy:'gold' }; /* ── MedalBadge ──────────────────────────────────────────────────*/ function MedalBadge({ rank }) { const s = rank===1 ? {bg:'#ffd700',color:'#000'} : rank===2 ? {bg:'#c0c0c0',color:'#000'} : rank===3 ? {bg:'#cd7f32',color:'#fff'} : {bg:'rgba(234,170,65,.25)',color:'#eaaa41'}; return (
#{rank}
); } /* ── KanbanCard ──────────────────────────────────────────────────*/ function cardThumb(raw) { try { const files = Array.isArray(raw?.media_files) ? raw.media_files : JSON.parse(raw?.media_files || '[]'); const img = files.find(f => f.tipo === 'imagem'); if (img?.file_id) return `https://drive.google.com/thumbnail?id=${img.file_id}&sz=w120`; const vid = files.find(f => f.tipo === 'video' || f.tipo === 'reels'); if (vid?.file_id) return `https://drive.google.com/thumbnail?id=${vid.file_id}&sz=w120`; } catch {} const m = (raw?.media_drive_url || '').match(/\/d\/([^/]+)/); if (m) return `https://drive.google.com/thumbnail?id=${m[1]}&sz=w120`; const m2 = (raw?.media_drive_url || '').match(/id=([^&]+)/); if (m2) return `https://drive.google.com/thumbnail?id=${m2[1]}&sz=w120`; return null; } function KanbanCard({ card, col, onOpen, onDragStart }) { const [hov, setHov] = useState(false); const cpaColor = getCpaColor(card.cpa); const thumb = cardThumb(card.raw); const isVideo = ['reels','video'].includes(card.raw?.tipo) || card.raw?.media_tipo === 'video'; const hasMedia = (() => { try { const fs = Array.isArray(card.raw?.media_files) ? card.raw.media_files : JSON.parse(card.raw?.media_files || '[]'); return fs.length > 0 || !!card.raw?.media_drive_url; } catch { return !!card.raw?.media_drive_url; } })(); return (
{ e.dataTransfer.setData('cardId', card.id); e.dataTransfer.setData('fromCol', card.col); onDragStart && onDragStart(); }} onClick={() => onOpen(card)} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} style={{ background: hov?'var(--app-surface-3)':'var(--app-surface-2)', border:`1px solid ${hov?col.colorBorder:'var(--app-border)'}`, borderRadius:10, padding:'12px 12px', display:'flex', flexDirection:'column', gap:8, cursor:'grab', transition:'all 160ms var(--ease-out)', transform: hov?'translateY(-1px)':'none' }}> {/* Header */}
{/* Miniatura */}
{thumb ? { e.currentTarget.style.display='none'; }} style={{ width:'100%', height:'100%', objectFit:'cover', display:'block' }}/> : }
ADS {card.num} {card.tag && (
{card.tag === 'Testar novamente' ? 'Testar nov.' : card.tag}
)}
{/* Hook */}

{card.hook}

{/* Formats */}
{hasMedia ? card.formats.map(f => {f}) : Aguardando criativo }
{/* Metrics */} {(card.vendas !== null || card.cpa !== null) && (
{card.vendas !== null && (
Vendas
{card.vendas}
)} {card.cpa !== null && (
CPA
R${card.cpa}
)}
)}
); } /* ── KanbanColumn ────────────────────────────────────────────────*/ function KanbanColumn({ col, cards, onOpen, onAddNew, onDropCard }) { const [dragOver, setDragOver] = useState(false); return (
{ e.preventDefault(); setDragOver(true); }} onDragLeave={() => setDragOver(false)} onDrop={e => { e.preventDefault(); setDragOver(false); const id=e.dataTransfer.getData('cardId'); const from=e.dataTransfer.getData('fromCol'); if(id && from !== col.id) onDropCard(id, col.id); }} style={{ width:238, minWidth:238, display:'flex', flexDirection:'column', background: dragOver ? `${col.colorBg.replace('.08','0.18')}` : col.colorBg, border:`1px solid ${dragOver ? col.colorDot : col.colorBorder}`, borderRadius:12, overflow:'hidden', height:'100%', transition:'border-color 120ms, background 120ms' }}>
{col.label}
{cards.length}
{cards.map(c => ( ))}
); } /* ── UtmCopyBtn ──────────────────────────────────────────────────*/ function UtmCopyBtn() { const [copied, setCopied] = useState(false); const copy = () => { navigator.clipboard.writeText(UTM_GLOBAL).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1800); }); }; return ( ); } /* ── MetaAdModal ─────────────────────────────────────────────────*/ function MetaAdModal({ card, onClose }) { const SUPA_URL = window.db?.supabaseUrl || ''; const SUPA_KEY = window.db?.supabaseKey || ''; // listas e seleção const [campaigns, setCampaigns] = useState([]); const [adsets, setAdsets] = useState([]); const [campaignId, setCampaignId] = useState(''); const [campaignName, setCampaignName] = useState(''); const [adsetId, setAdsetId] = useState(''); const [adsetName, setAdsetName] = useState(''); const [loadingCamp, setLoadingCamp] = useState(true); const [loadingAdset, setLoadingAdset] = useState(false); // criar nova campanha const [newCamp, setNewCamp] = useState(false); const [newCampName, setNewCampName] = useState(''); const [newCampObj, setNewCampObj] = useState('OUTCOME_SALES'); const [creatingCamp, setCreatingCamp] = useState(false); // criar novo conjunto const [newAdset, setNewAdset] = useState(false); const [newAdsetName, setNewAdsetName] = useState(''); const [newAdsetBudget, setNewAdsetBudget] = useState(''); const [creatingAdset, setCreatingAdset] = useState(false); // fluxo final const [confirm, setConfirm] = useState(false); const [status, setStatus] = useState('idle'); const [errorMsg, setErrorMsg] = useState(''); const [resultId, setResultId] = useState(''); const raw = card.raw || {}; const mediaFiles = (() => { try { return Array.isArray(raw.media_files) ? raw.media_files : JSON.parse(raw.media_files || '[]'); } catch { return []; } })(); const firstFile = mediaFiles[0] || null; async function callFn(body) { const r = await fetch(`${SUPA_URL}/functions/v1/meta-criar-ad`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${SUPA_KEY}` }, body: JSON.stringify(body), }); const d = await r.json(); if (!r.ok) { const msg = d?.error || d?.message || `Erro HTTP ${r.status}`; throw new Error(msg); } return d; } useEffect(() => { callFn({ action: 'campaigns' }) .then(d => { setCampaigns(d.campaigns || []); setLoadingCamp(false); }) .catch(() => setLoadingCamp(false)); }, []); async function handleCampaignChange(id, name) { setCampaignId(id); setCampaignName(name); setAdsetId(''); setAdsetName(''); setAdsets([]); setNewAdset(false); if (!id) return; setLoadingAdset(true); try { const d = await callFn({ action: 'adsets', campaign_id: id }); setAdsets(d.adsets || []); } catch (e) { setErrorMsg(e.message || 'Erro ao carregar conjuntos'); } finally { setLoadingAdset(false); } } async function handleCreateCampaign() { if (!newCampName.trim()) return; setCreatingCamp(true); const d = await callFn({ action: 'create_campaign', name: newCampName.trim(), objective: newCampObj, daily_budget: 0 }); if (d.campaign) { setCampaigns(prev => [...prev, d.campaign]); await handleCampaignChange(d.campaign.id, d.campaign.name); setNewCamp(false); setNewCampName(''); } else { setErrorMsg(d.error || 'Erro ao criar campanha'); } setCreatingCamp(false); } async function handleCreateAdset() { if (!newAdsetName.trim() || !newAdsetBudget) return; setCreatingAdset(true); const d = await callFn({ action: 'create_adset', campaign_id: campaignId, name: newAdsetName.trim(), daily_budget: parseFloat(newAdsetBudget) }); if (d.adset) { setAdsets(prev => [...prev, d.adset]); setAdsetId(d.adset.id); setAdsetName(d.adset.name); setNewAdset(false); setNewAdsetName(''); setNewAdsetBudget(''); } else { setErrorMsg(d.error || 'Erro ao criar conjunto'); } setCreatingAdset(false); } async function handleCreate() { setStatus('loading'); setErrorMsg(''); try { const d = await callFn({ action: 'create', adset_id: adsetId, card: { num: card.num, titulo: raw.titulo || '', hook: raw.hook_copy || raw.hook || '', texto_principal: raw.texto_principal || '', titulo_ad: raw.titulo_ad || '', descricao_ad: raw.descricao_ad || '', media_tipo: raw.tipo || 'reels', file_id: firstFile?.file_id || '', }, utm: UTM_GLOBAL, }); if (d.error) { setStatus('error'); setErrorMsg(d.error); } else { setStatus('success'); setResultId(d.ad_id || ''); } } catch (e) { setStatus('error'); setErrorMsg(e.message || 'Erro inesperado'); } } // estilos alinhados com o resto do kanban const field = { width:'100%', padding:'9px 12px', borderRadius:8, background:'var(--app-surface-2)', border:'1px solid var(--app-border)', color:'var(--text-1)', fontFamily:'Roboto,sans-serif', fontSize:13, colorScheme:'dark' }; const S = { select: { ...field, cursor:'pointer', appearance:'none', WebkitAppearance:'none' }, input: { ...field, outline:'none', boxSizing:'border-box' }, label: { fontSize:10, fontFamily:'Roboto,sans-serif', fontWeight:700, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--text-3)', marginBottom:4, display:'block' }, linkBtn: { background:'none', border:'none', color:'var(--fmn-gold)', fontSize:11, fontFamily:'Roboto,sans-serif', cursor:'pointer', padding:0 }, row: { display:'flex', gap:8, marginTop:6 }, miniBtn: (active) => ({ flex:1, padding:'8px 10px', borderRadius:7, border:'none', fontSize:12, fontFamily:'Roboto,sans-serif', fontWeight:700, cursor: active ? 'pointer' : 'default', background: active ? 'var(--fmn-gold)' : 'rgba(255,255,255,.06)', color: active ? '#000' : 'var(--text-3)' }), subBox: { padding:'12px', borderRadius:10, background:'var(--app-surface-2)', border:'1px solid var(--app-border-2)', display:'flex', flexDirection:'column', gap:8 }, }; return (
e.stopPropagation()} style={{ background:'var(--app-surface)', border:'1px solid var(--app-border-2)', borderRadius:16, padding:'24px', width:480, maxHeight:'90vh', overflowY:'auto', display:'flex', flexDirection:'column', gap:16, boxShadow:'0 20px 60px rgba(0,0,0,.6)' }}> {/* Header */}
Criar Anúncio no Meta
ADS {card.num} — {raw.titulo || raw.hook_copy || ''}
{/* Sucesso */} {status === 'success' && (
Anúncio criado!
{campaignName} › {adsetName}
{resultId && ( Ver no Gerenciador → )}
)} {/* Erro inline */} {errorMsg && status !== 'success' && (
{errorMsg}
)} {/* Formulário principal */} {status !== 'success' && !confirm && ( <> {/* ── Campanha ── */}
{loadingCamp ?
Carregando...
: !newCamp ? <>
:
setNewCampName(e.target.value)}/>
}
{/* ── Conjunto ── */}
{!campaignId ?
Selecione uma campanha primeiro
: loadingAdset ?
Carregando...
: !newAdset ? <>
:
setNewAdsetName(e.target.value)}/> setNewAdsetBudget(e.target.value)}/>
Segmentação padrão: Brasil, 20–65 anos. Ajuste depois no Gerenciador.
}
{/* UTM */}
UTM: {UTM_GLOBAL}
{!firstFile && (
Nenhum arquivo indexado. Vincule o Drive antes de criar no Meta.
)} )} {/* Gate de confirmação */} {confirm && status !== 'success' && (
{firstFile?.tipo === 'video' && (
Upload de vídeo via Drive pode falhar — o Meta exige uma URL pública acessível sem login. Se der erro, hospede o vídeo em outro lugar (ex: servidor próprio, Cloudflare R2) e cole a URL direta no campo de mídia do card.
)}
Confirmar criação
Campanha: {campaignName}
Conjunto: {adsetName}
Arquivo: {firstFile?.tipo} ({firstFile?.file_id?.slice(0,12)}…)
Status inicial: PAUSADO
)}
); } /* ── MetaIdField — campo editável com auto-busca ─────────────────*/ function MetaIdField({ card, onSaved }) { const [val, setVal] = useState(card.meta_ad_id || ''); const [status, setStatus] = useState('idle'); // idle | searching | found | notfound | saving | saved | error const [candidates, setCandidates] = useState([]); const SUPABASE_URL = window.db?.supabaseUrl || ''; const SUPABASE_KEY = window.db?.supabaseKey || ''; // Auto-busca ao abrir quando não há meta_ad_id useEffect(() => { if (!card.meta_ad_id) autoSearch(); }, []); async function autoSearch() { setStatus('searching'); setCandidates([]); try { // Busca por número primeiro const num = card.num ? parseInt(card.num, 10) : null; const query = num ? String(num) : card.hook; const res = await fetch( `${SUPABASE_URL}/functions/v1/meta-search?q=${encodeURIComponent(query)}&limit=10`, { headers: { apikey: SUPABASE_KEY, Authorization: `Bearer ${SUPABASE_KEY}` } } ); const json = await res.json(); const ads = json.ads || []; if (ads.length === 1) { // Match único — auto-preenche e salva setVal(ads[0].id); setStatus('found'); await saveId(ads[0].id); } else if (ads.length > 1) { setCandidates(ads); setStatus('found'); } else { // Tenta pelo título const res2 = await fetch( `${SUPABASE_URL}/functions/v1/meta-search?q=${encodeURIComponent(card.hook || '')}&limit=10`, { headers: { apikey: SUPABASE_KEY, Authorization: `Bearer ${SUPABASE_KEY}` } } ); const json2 = await res2.json(); const ads2 = json2.ads || []; if (ads2.length === 1) { setVal(ads2[0].id); setStatus('found'); await saveId(ads2[0].id); } else if (ads2.length > 1) { setCandidates(ads2); setStatus('found'); } else { setStatus('notfound'); } } } catch { setStatus('error'); } } async function saveId(id) { if (!id) return; setStatus('saving'); try { await window.db.from('ads').update({ meta_ad_id: id }).eq('numero', parseInt(card.num, 10)); setStatus('saved'); if (onSaved) onSaved(id); setTimeout(() => setStatus('idle'), 2000); } catch { setStatus('error'); } } const inputStyle = { flex: 1, padding: '8px 12px', borderRadius: 8, background: 'var(--app-surface-2)', border: '1px solid var(--app-border)', color: 'var(--text-1)', fontFamily: 'Roboto,sans-serif', fontSize: 12, fontVariantNumeric: 'tabular-nums', }; const statusColor = status === 'saved' ? 'var(--clr-pos)' : status === 'error' ? 'var(--clr-neg)' : status === 'notfound' ? 'var(--clr-warn)' : 'var(--text-3)'; const statusText = status === 'searching' ? 'Buscando...' : status === 'saving' ? 'Salvando...' : status === 'saved' ? 'Salvo!' : status === 'error' ? 'Erro ao salvar' : status === 'notfound' ? 'Não encontrado automaticamente' : status === 'found' && candidates.length > 1 ? `${candidates.length} candidatos encontrados` : ''; return (
Meta Ad ID {statusText && ( {statusText} )}
setVal(e.target.value)} placeholder="Ex: 120244206034940167" style={inputStyle} onFocus={e => e.target.style.borderColor = 'rgba(234,170,65,.4)'} onBlur={e => e.target.style.borderColor = 'var(--app-border)'} />
{/* Lista de candidatos quando há mais de 1 match */} {candidates.length > 1 && (
{candidates.map(ad => ( ))}
)}
); } /* ── AdsDetailModal ──────────────────────────────────────────────*/ function AdsDetailModal({ card, onClose, onUpdate, siblings=[], onNavigate }) { const raw = card.raw || {}; const col = COLUMNS.find(cl => cl.id === card.col) || COLUMNS[0]; const cpaColor = getCpaColor(card.cpa); const [showMeta, setShowMeta] = useState(false); const [noMediaAlert, setNoMediaAlert] = useState(false); const [saveStatus, setSaveStatus] = useState('idle'); // idle | saving | saved | error const [copiedField, setCopiedField] = useState(null); const [deleteConfirm, setDeleteConfirm] = useState(false); const [deleting, setDeleting] = useState(false); const [videoPlaying, setVideoPlaying] = useState(false); // Estado de todos os campos editáveis const [fields, setFields] = useState({ titulo: raw.titulo || '', status: raw.status || card.col, tipo: raw.tipo || 'reels', headline: raw.headline || '', hook_visual: raw.hook_visual || '', hook_copy: raw.hook_copy || '', texto_principal: raw.texto_principal || '', desenvolvimento_cta: raw.desenvolvimento_cta || '', titulo_ad: raw.titulo_ad || '', descricao_ad: raw.descricao_ad || '', observacoes: raw.observacoes || '', referencia: raw.referencia || '', meta_ad_url: raw.meta_ad_url || '', media_drive_url: raw.media_drive_url || '', media_tipo: raw.media_tipo || '', }); const [showDriveInput, setShowDriveInput] = useState(false); const [driveInputVal, setDriveInputVal] = useState(raw.media_drive_url || ''); const [driveInputTipo, setDriveInputTipo] = useState(raw.tipo || 'reels'); const [carouselIdx, setCarouselIdx] = useState(0); const sibIdx = siblings.findIndex(s => s.id === card.id); const hasPrev = sibIdx > 0; const hasNext = sibIdx >= 0 && sibIdx < siblings.length - 1; const goPrev = () => { if (hasPrev) onNavigate?.(siblings[sibIdx - 1]); }; const goNext = () => { if (hasNext) onNavigate?.(siblings[sibIdx + 1]); }; // Arquivos sincronizados do Drive (array JSONB) const mediaFiles = (() => { try { return Array.isArray(raw.media_files) ? raw.media_files : JSON.parse(raw.media_files || '[]'); } catch { return []; } })(); const isCarousel = /carrossel/i.test(fields.tipo) && mediaFiles.length > 1; const currentFile = isCarousel ? mediaFiles[carouselIdx] : mediaFiles[0]; function parseDriveUrl(url) { if (!url) return null; const fileMatch = url.match(/\/file\/d\/([^/]+)/); const idMatch = url.match(/[?&]id=([^&]+)/); const id = fileMatch?.[1] || idMatch?.[1]; if (!id) return null; return id; } function drivePreviewUrl(fileId, tipo) { if (!fileId) return null; if (tipo === 'video' || tipo === 'reels') return `https://drive.google.com/file/d/${fileId}/preview`; return `https://drive.google.com/thumbnail?id=${fileId}&sz=w800`; } // Preview: sempre usa Drive let previewEmbed = null; let previewIsVideo = false; let previewViewUrl = null; const cardIsVideo = /reels/i.test(raw.tipo) || raw.tipo === 'video'; if (isCarousel && currentFile) { previewEmbed = drivePreviewUrl(currentFile.file_id, currentFile.tipo); previewIsVideo = /^(video|reels)$/i.test(currentFile.tipo) || cardIsVideo; previewViewUrl = currentFile.url_view; } else if (currentFile) { previewEmbed = drivePreviewUrl(currentFile.file_id, currentFile.tipo); previewIsVideo = /^(video|reels)$/i.test(currentFile.tipo) || cardIsVideo; previewViewUrl = currentFile.url_view; } else { // fallback legado const driveId = parseDriveUrl(fields.media_drive_url); if (driveId) { previewIsVideo = /^reels$/i.test(fields.tipo) || fields.media_tipo === 'video'; previewEmbed = previewIsVideo ? `https://drive.google.com/file/d/${driveId}/preview` : `https://drive.google.com/thumbnail?id=${driveId}&sz=w800`; previewViewUrl = `https://drive.google.com/file/d/${driveId}/view`; } } const driveId = parseDriveUrl(fields.media_drive_url); const isVideo = previewIsVideo; function vincularDrive() { const url = driveInputVal.trim(); if (!url) return; const id = parseDriveUrl(url); if (!id) { alert('URL inválida. Cole o link de compartilhamento do Google Drive.'); return; } const midiaTipo = driveInputTipo === 'imagem' ? 'imagem' : 'video'; set('media_drive_url', url); set('media_tipo', midiaTipo); set('tipo', driveInputTipo); setShowDriveInput(false); } const set = (key, val) => setFields(f => ({ ...f, [key]: val })); async function salvar() { setSaveStatus('saving'); const { error } = await window.db.from('ads').update(fields).eq('numero', parseInt(card.num, 10)); if (error) { setSaveStatus('error'); return; } setSaveStatus('saved'); if (onUpdate) onUpdate({ ...card, col: fields.status, hook: fields.titulo, raw: { ...raw, ...fields } }); setTimeout(() => setSaveStatus('idle'), 2000); } async function mudarStatus(novoStatus) { const patch = { status: novoStatus }; const novaTag = resolveTag(novoStatus, fields.status, card.vendas, card.cpa, card.gasto); if (novaTag !== null) { patch.tag = novaTag; set('tag', novaTag); } set('status', novoStatus); await window.db.from('ads').update(patch).eq('numero', parseInt(card.num, 10)); if (onUpdate) onUpdate({ ...card, col: novoStatus, raw: { ...raw, status: novoStatus, tag: patch.tag ?? raw.tag } }); } async function retirarDoTeste() { const novaTag = classifyAd(card.vendas, card.cpa, card.gasto); const patch = { status: 'arquivado', tag: novaTag }; set('status', 'arquivado'); set('tag', novaTag); await window.db.from('ads').update(patch).eq('numero', parseInt(card.num, 10)); if (onUpdate) onUpdate({ ...card, col: 'arquivado', raw: { ...raw, status: 'arquivado', tag: novaTag } }); } async function deletarAd() { setDeleting(true); await window.db.from('ads').delete().eq('numero', parseInt(card.num, 10)); if (onUpdate) onUpdate({ ...card, deleted: true }); onClose(); } const copyToClipboard = (text, field) => { navigator.clipboard.writeText(text).then(() => { setCopiedField(field); setTimeout(() => setCopiedField(null), 1500); }); }; function CopyField({ id, label, fieldKey, rows = 3 }) { return (
{label}