Manual changes saved

script.js

@@ -55,6 +55,45 @@ class VideoEditorInteligente {
             formatErrors: new Map()
         };
         
+        // ✅ MELHORIAS CRÍTICAS - Sistema de renderização reprojetado
+        this.renderingState = {
+            isRendering: false,
+            currentSegment: null,
+            startTime: 0,
+            frameCount: 0,
+            droppedFrames: 0,
+            avgFrameTime: 0,
+            lastFrameTime: 0,
+            targetFPS: 30,
+            frameInterval: 1000 / 30
+        };
+        
+        // ✅ Cache de vídeos com estado real-time
+        this.videoCache = new Map();
+        this.activeVideos = new Set();
+        
+        // ✅ Sistema de sincronização robusto
+        this.syncManager = {
+            audioContext: null,
+            audioBuffer: null,
+            audioSource: null,
+            globalStartTime: 0,
+            audioStartTime: 0,
+            isAudioPlaying: false
+        };
+        
+        // ✅ Fila de renderização com prioridade
+        this.renderQueue = [];
+        this.isProcessingQueue = false;
+        
+        // ✅ Sistema de fallback instantâneo
+        this.fallbackSystem = {
+            isActive: false,
+            fallbackCanvas: null,
+            fallbackCtx: null,
+            lastGoodFrame: null
+        };
+        
         this.init();
     }
 
@@ -63,6 +102,70 @@ class VideoEditorInteligente {
         this.setupAudienceSelection();
         this.setupAnalyzeButton();
         this.detectBrowserCapabilities();
+        this.injectAdditionalStyles();
+    }
+
+    // ✅ NOVO: Injetar estilos adicionais para status de fallback
+    injectAdditionalStyles() {
+        const additionalStyles = `
+            .status-badge {
+                padding: 4px 8px;
+                border-radius: 4px;
+                font-size: 11px;
+                font-weight: bold;
+                margin-left: 8px;
+            }
+
+            .status-badge.approved {
+                background: #28a745;
+                color: white;
+            }
+
+            .status-badge.fallback {
+                background: #ffc107;
+                color: #212529;
+            }
+
+            .status-badge.generic {
+                background: #dc3545;
+                color: white;
+            }
+
+            .generic-take {
+                border: 2px dashed #dc3545;
+                background: #fff5f5;
+            }
+
+            .fallback-take {
+                border: 2px dashed #ffc107;
+                background: #fffdf5;
+            }
+
+            .low-score {
+                color: #dc3545 !important;
+                font-weight: bold;
+            }
+
+            .take-header {
+                display: flex;
+                align-items: center;
+                margin-bottom: 10px;
+            }
+
+            .theme-matching-warning {
+                background: #fff3cd;
+                border: 1px solid #ffeaa7;
+                border-radius: 4px;
+                padding: 8px 12px;
+                margin: 8px 0;
+                font-size: 12px;
+                color: #856404;
+            }
+        `;
+
+        const styleSheet = document.createElement('style');
+        styleSheet.textContent = additionalStyles;
+        document.head.appendChild(styleSheet);
     }
 
     // ✅ NOVO: Detecção de capacidades do navegador
@@ -217,7 +320,7 @@ class VideoEditorInteligente {
         this.log(`Validação concluída: ${validFiles} válidos, ${invalidFiles} inválidos`);
         
         if (invalidFiles > 0) {
-            alert(`⚠️ Atenção: ${invalidFiles} arquivo(s) de vídeo inválido(s) detected. Verifique os formatos suportados: MP4, WebM, MOV, AVI`);
+            alert(`⚠️ Atenção: ${invalidFiles} arquivo(s) de vídeo inválido(s) detectados. Verifique os formatos suportados: MP4, WebM, MOV, AVI`);
         }
     }
 
@@ -1263,6 +1366,7 @@ class VideoEditorInteligente {
         };
     }
 
+    // ✅ MELHORIA: Processar takes com limiares dinâmicos por tema
     processAllTakes() {
         if (!this.scriptBlocks || !this.analyzedTakes) return;
         
@@ -1283,11 +1387,30 @@ class VideoEditorInteligente {
                     take.composition * 0.05
                 );
                 
-                take.approved = take.totalScore >= 75;
+                // ✅ USAR LIMIAR DINÂMICO POR TEMA
+                const threshold = this.calculateOptimalApprovalThreshold(take.theme);
+                take.approved = take.totalScore >= threshold;
+                
+                this.log(`Take ${take.theme}: score ${take.totalScore.toFixed(1)}, threshold ${threshold}, approved ${take.approved}`);
             });
         });
     }
 
+    // ✅ NOVO: Calcular limiar ótimo de aprovação por tema
+    calculateOptimalApprovalThreshold(theme) {
+        const thresholds = {
+            'geral': 60, // Reduzido para tema genérico
+            'produto': 70,
+            'detalhe': 70,
+            'uso': 65,
+            'qualidade': 70,
+            'design': 65,
+            'conforto': 65
+        };
+        
+        return thresholds[theme] || 60; // Default mais baixo
+    }
+
     processVisualAnalysis() {
         if (!this.analyzedTakes || this.analyzedTakes.length === 0) return;
         
@@ -1338,18 +1461,40 @@ class VideoEditorInteligente {
         if (currentGroup.length > 0) {
             this.createContextualGroup(currentGroup, currentTheme, groupStartTime);
         }
+        
+        // ✅ VALIDAR COBERTURA DE TEMAS
+        this.validateThemeCoverage();
     }
 
+    // ✅ MELHORIA: Sistema de fallback automático para temas sem takes
     createContextualGroup(blocks, theme, startTime) {
-        const bestTakes = this.analyzedTakes.flatMap(video =>
-            video.takes.filter(take => 
-                take.theme === theme && 
-                take.approved
-            ).sort((a, b) => b.totalScore - a.totalScore).slice(0, 3)
-        );
-        
-        const selectedTake = bestTakes.length > 0 ? 
-            bestTakes[Math.floor(Math.random() * Math.min(bestTakes.length, 2))] : null;
+        // Buscar takes compatíveis com matching inteligente
+        let bestTakes = this.findBestMatchingTakes(theme, this.analyzedTakes.flatMap(v => v.takes));
+        
+        // Se não houver takes aprovados, usar os melhores disponíveis
+        let approvedTakes = bestTakes.filter(take => take.approved);
+        let selectedTake = null;
+        let wasFallback = false;
+        let wasGeneric = false;
+        
+        if (approvedTakes.length > 0) {
+            // Usar takes aprovados
+            selectedTake = approvedTakes[Math.floor(Math.random() * Math.min(approvedTakes.length, 2))];
+        } else if (bestTakes.length > 0) {
+            // Fallback: usar melhor take disponível mesmo sem aprovação
+            selectedTake = bestTakes[0];
+            wasFallback = true;
+            this.log(`Usando fallback não aprovado para tema "${theme}": score ${selectedTake.totalScore.toFixed(1)}`, 'warn');
+            
+            // Aprovar temporariamente este take
+            selectedTake.approved = true;
+            selectedTake.wasFallback = true;
+        } else {
+            // Fallback final: criar take genérico
+            selectedTake = this.createGenericTake(theme);
+            wasGeneric = true;
+            this.log(`Criando take genérico para tema "${theme}"`, 'warn');
+        }
         
         const duration = blocks.reduce((sum, block) => sum + block.duration, 0);
         const endTime = startTime + duration;
@@ -1363,13 +1508,118 @@ class VideoEditorInteligente {
             startTime: startTime,
             endTime: endTime,
             duration: duration,
-            flowScore: selectedTake ? selectedTake.totalScore : 0,
-            bestTakes: bestTakes
+            flowScore: selectedTake ? selectedTake.totalScore : 50,
+            bestTakes: bestTakes.length > 0 ? bestTakes : [selectedTake],
+            wasFallback: wasFallback,
+            wasGeneric: wasGeneric,
+            matchingInfo: {
+                exactMatches: bestTakes.filter(t => t.theme === theme).length,
+                similarMatches: wasFallback ? bestTakes.length : 0,
+                isGeneric: wasGeneric
+            }
         };
         
         this.blockGroups.push(group);
     }
 
+    // ✅ NOVO: Criar take genérico quando não há nenhum disponível
+    createGenericTake(theme) {
+        // Usar primeiro vídeo disponível como base
+        const baseVideo = this.videoFiles[0];
+        const baseIndex = 0;
+        
+        return {
+            fileIndex: baseIndex,
+            fileName: baseVideo.name,
+            theme: theme,
+            duration: 4.0, // Duração padrão
+            angle: 'Frontal', // Ângulo neutro
+            quality: 70, // Qualidade média
+            relevanceScore: 65, // Score mínimo
+            totalScore: 65, // Score total mínimo
+            type: 'generic',
+            approved: true,
+            wasGeneric: true,
+            orientation: this.videoOrientation,
+            codec: 'generic',
+            format: 'generic',
+            startTime: 0,
+            endTime: 4.0
+        };
+    }
+
+    // ✅ NOVO: Melhorar matching de temas com similaridade
+    findBestMatchingTakes(targetTheme, allTakes) {
+        // Mapeamento de temas similares
+        const similarThemes = {
+            'geral': ['produto', 'uso', 'qualidade', 'design'],
+            'produto': ['geral', 'qualidade', 'design'],
+            'uso': ['geral', 'produto', 'conforto'],
+            'qualidade': ['geral', 'produto', 'detalhe'],
+            'design': ['geral', 'produto', 'detalhe'],
+            'conforto': ['geral', 'uso', 'produto'],
+            'detalhe': ['geral', 'qualidade', 'produto']
+        };
+        
+        // Buscar exato primeiro
+        let exactMatches = allTakes.filter(take => take.theme === targetTheme);
+        
+        if (exactMatches.length > 0) {
+            return exactMatches;
+        }
+        
+        // Buscar temas similares
+        const similar = similarThemes[targetTheme] || [];
+        let similarMatches = [];
+        
+        for (const simTheme of similar) {
+            const matches = allTakes.filter(take => take.theme === simTheme);
+            if (matches.length > 0) {
+                similarMatches = similarMatches.concat(matches);
+            }
+        }
+        
+        if (similarMatches.length > 0) {
+            this.log(`Usando temas similares para "${targetTheme}": ${similar.join(', ')}`, 'info');
+            return similarMatches;
+        }
+        
+        // Retornar todos os takes ordenados por score
+        return allTakes.sort((a, b) => b.totalScore - a.totalScore);
+    }
+
+    // ✅ NOVO: Validar cobertura de temas
+    validateThemeCoverage() {
+        const themes = new Set();
+        const themesWithTakes = new Set();
+        
+        // Coletar todos os temas dos blocos
+        this.scriptBlocks.forEach(block => {
+            themes.add(block.theme);
+        });
+        
+        // Verificar quais temas têm takes
+        themes.forEach(theme => {
+            const hasTake = this.blockGroups.some(group => 
+                group.theme === theme && group.take
+            );
+            if (hasTake) {
+                themesWithTakes.add(theme);
+            }
+        });
+        
+        // Reportar status
+        const missingThemes = Array.from(themes).filter(t => !themesWithTakes.has(t));
+        
+        if (missingThemes.length > 0) {
+            this.log(`Temas sem takes: ${missingThemes.join(', ')}`, 'error');
+        } else {
+            this.log(`Todos os temas têm takes: ${Array.from(themes).join(', ')}`, 'success');
+        }
+        
+        return missingThemes.length === 0;
+    }
+
     generateIntelligentTimeline() {
         if (!this.blockGroups || this.blockGroups.length === 0) return;
         
@@ -1386,7 +1636,10 @@ class VideoEditorInteligente {
             bestTakes: group.bestTakes,
             flowScore: group.flowScore,
             hasTake: !!group.take,
-            hasAudio: !!this.audioFile
+            hasAudio: !!this.audioFile,
+            wasFallback: group.wasFallback || false,
+            wasGeneric: group.wasGeneric || false,
+            matchingInfo: group.matchingInfo || {}
         }));
         
         this.analysisResults = {
@@ -1547,6 +1800,24 @@ class VideoEditorInteligente {
                 `;
             }).join('');
             
+            // ✅ MELHORIA: Adicionar aviso de matching se necessário
+            let matchingWarning = '';
+            if (group.matchingInfo && !group.matchingInfo.exactMatches && group.matchingInfo.similarMatches > 0) {
+                matchingWarning = `
+                    <div class="theme-matching-warning">
+                        <i data-feather="info"></i>
+                        <strong>Matching de Temas:</strong> Usando ${group.matchingInfo.similarMatches} takes de temas similares (${group.matchingInfo.similarThemes ? group.matchingInfo.similarThemes.join(', ') : ''})
+                    </div>
+                `;
+            } else if (group.matchingInfo && group.matchingInfo.isGeneric) {
+                matchingWarning = `
+                    <div class="theme-matching-warning">
+                        <i data-feather="alert-triangle"></i>
+                        <strong>Take Genérico:</strong> Nenhum take compatível encontrado, usando take gerado automaticamente
+                    </div>
+                `;
+            }
+            
             groupElement.innerHTML = `
                 <div class="group-header">
                     <div class="group-info">
@@ -1568,6 +1839,7 @@ class VideoEditorInteligente {
                         </div>
                     </div>
                 </div>
+                ${matchingWarning}
                 ${blocksHtml}
                 ${group.take ? this.generateContextualTakeHtml(group) : this.generateMissingTakeHtml(group)}
             `;
@@ -1578,15 +1850,36 @@ class VideoEditorInteligente {
         feather.replace();
     }
 
+    // ✅ MELHORIA: Atualizar display para mostrar status de fallback
     generateContextualTakeHtml(group) {
         const take = group.take;
+        const isFallback = group.wasFallback || false;
+        const isGeneric = group.wasGeneric || false;
+        
+        let statusBadge = '';
+        if (isGeneric) {
+            statusBadge = '<span class="status-badge generic">⚡ Genérico</span>';
+        } else if (isFallback) {
+            statusBadge = '<span class="status-badge fallback">🔄 Fallback</span>';
+        } else {
+            statusBadge = '<span class="status-badge approved">✅ Aprovado</span>';
+        }
+        
         return `
-            <div class="take-selection">
+            <div class="take-selection ${isGeneric ? 'generic-take' : ''} ${isFallback ? 'fallback-take' : ''}">
+                <div class="take-header">
+                    <h4><i data-feather="film"></i> ${take.fileName}</h4>
+                    ${statusBadge}
+                </div>
                 <div class="take-video-container">
                     <video class="take-video" muted>
                         <source src="${URL.createObjectURL(this.videoFiles[take.fileIndex])}" type="video/mp4">
                     </video>
-                    <div class="take-overlay">${take.totalScore.toFixed(1)}/100</div>
+                    <div class="take-overlay">
+                        Score: ${take.totalScore.toFixed(1)}/100
+                        ${take.wasGeneric ? '<br><small>Gerado automaticamente</small>' : ''}
+                        ${take.wasFallback ? '<br><small>Fallback não aprovado</small>' : ''}
+                    </div>
                 </div>
                 <div class="take-details">
                     <h4><i data-feather="film"></i> ${take.fileName}</h4>
@@ -1613,7 +1906,7 @@ class VideoEditorInteligente {
                         </div>
                         <div class="metric-item">
                             <span class="metric-label">Score Total</span>
-                            <span class="metric-value">${take.totalScore.toFixed(1)}/100</span>
+                            <span class="metric-value ${take.totalScore < 70 ? 'low-score' : ''}">${take.totalScore.toFixed(1)}/100</span>
                         </div>
                         <div class="metric-item">
                             <span class="metric-label">Orientação</span>
@@ -1765,96 +2058,246 @@ class VideoEditorInteligente {
 
     // ✅ IMPLEMENTAÇÃO COMPLETA: Sistema robusto de renderização
     async createIntelligentVideo(timelineItems) {
-        if (this.isRendering && this.renderingPromise) {
-            this.log('Renderização já em andamento, aguardando...', 'warn');
-            try {
-                await this.renderingPromise;
-            } catch (error) {
-                this.log('Renderização anterior falhou, iniciando nova...', 'warn');
-            }
+        if (this.renderingState.isRendering) {
+            throw new Error('Renderização já em andamento');
         }
         
-        this.renderingPromise = new Promise(async (resolve, reject) => {
-            if (this.isRendering) {
-                reject(new Error('Conflito: renderização iniciada simultaneamente'));
-                return;
-            }
+        this.renderingState.isRendering = true;
+        this.renderingState.startTime = Date.now();
+        this.renderingState.frameCount = 0;
+        this.renderingState.droppedFrames = 0;
+        
+        try {
+            this.log(`Iniciando renderização inteligente: ${timelineItems.length} itens`);
+            
+            // ✅ ETAPA 1: Pré-carregar todos os vídeos necessários
+            await this.preloadAllRequiredVideos(timelineItems);
+            
+            // ✅ ETAPA 2: Configurar sincronização de áudio
+            await this.setupAudioSync();
+            
+            // ✅ ETAPA 3: Criar canvas de renderização
+            const { canvas, ctx } = this.createRenderCanvas();
             
-            this.isRendering = true;
-            this.clearAllTimeouts();
-            this.retryAttempts.clear();
+            // ✅ ETAPA 4: Iniciar renderização em tempo real
+            const videoBlob = await this.renderRealtime(ctx, canvas, timelineItems);
             
-            // ✅ RESETAR ESTATÍSTICAS
-            this.renderingStats = {
-                totalFrames: 0,
-                successfulFrames: 0,
-                failedFrames: 0,
-                loadingFrames: 0,
-                averageFrameTime: 0,
-                codecErrors: new Map(),
-                formatErrors: new Map()
+            return videoBlob;
+            
+        } finally {
+            this.cleanupRendering();
+        }
+    }
+
+    // ✅ MÉTODO ESSENCIAL - Sistema robusto de carregamento de vídeo
+    async loadVideoRobust(fileIndex) {
+        const cacheKey = `video-${fileIndex}`;
+        
+        if (this.videoCache.has(cacheKey)) {
+            const cached = this.videoCache.get(cacheKey);
+            if (cached.isReady && cached.video.readyState >= 4) {
+                this.log(`Usando vídeo em cache: ${fileIndex}`);
+                return cached;
+            }
+        }
+        
+        this.log(`Carregando vídeo robusto: ${fileIndex}`);
+        
+        const video = document.createElement('video');
+        const file = this.videoFiles[fileIndex];
+        
+        return new Promise((resolve, reject) => {
+            let loadTimeout = null;
+            let metadataTimeout = null;
+            let seekTimeout = null;
+            
+            const cleanup = () => {
+                if (loadTimeout) clearTimeout(loadTimeout);
+                if (metadataTimeout) clearTimeout(metadataTimeout);
+                if (seekTimeout) clearTimeout(seekTimeout);
+                this.activeVideos.delete(video);
             };
             
-            try {
-                this.log(`Iniciando criação de vídeo inteligente (${this.videoOrientation} ${this.canvasDimensions.width}x${this.canvasDimensions.height})...`);
+            const handleSuccess = () => {
+                cleanup();
                 
-                const totalTime = timelineItems.reduce((sum, item) => sum + item.duration, 0);
-                const baseTimeout = 300000;
-                const perSecondTimeout = 3000;
-                const dynamicTimeout = Math.max(baseTimeout, totalTime * perSecondTimeout);
+                const videoData = {
+                    video: video,
+                    isReady: true,
+                    fileIndex: fileIndex,
+                    fileName: file.name,
+                    duration: video.duration,
+                    width: video.videoWidth,
+                    height: video.videoHeight,
+                    aspectRatio: video.videoWidth / video.videoHeight,
+                    codec: this.detectVideoCodec(file),
+                    loadTime: Date.now()
+                };
                 
-                this.renderingTimeout = setTimeout(() => {
-                    this.log('Timeout geral de renderização alcançado', 'error');
-                    this.cleanupRendering();
-                    this.printRenderingStats();
-                    reject(new Error('Timeout: renderização demorou demais'));
-                }, dynamicTimeout);
+                this.videoCache.set(cacheKey, videoData);
+                this.activeVideos.add(video);
                 
-                this.updateExportProgress(30, 'Preparando mídias e pré-carregando vídeos...');
-                await this.preloadRequiredVideos(timelineItems);
+                this.log(`Vídeo carregado com sucesso: ${file.name} (${videoData.width}x${videoData.height})`);
+                resolve(videoData);
+            };
+            
+            const handleError = (error) => {
+                cleanup();
+                URL.revokeObjectURL(video.src);
+                this.log(`Erro ao carregar vídeo ${fileIndex}: ${error.message}`, 'error');
+                reject(error);
+            };
+            
+            // Configurar vídeo com opções otimizadas
+            video.src = URL.createObjectURL(file);
+            video.crossOrigin = 'anonymous';
+            video.preload = 'auto';
+            video.muted = true;
+            video.loop = false;
+            video.playsInline = true;
+            
+            // Timeout total de carregamento (30 segundos)
+            loadTimeout = setTimeout(() => {
+                handleError(new Error(`Timeout no carregamento do vídeo ${fileIndex}`));
+            }, 30000);
+            
+            // Verificar metadata rapidamente
+            metadataTimeout = setTimeout(() => {
+                if (video.readyState < 1) {
+                    this.log(`Forçando carregamento para vídeo ${fileIndex}`, 'warn');
+                    video.load();
+                }
+            }, 2000);
+            
+            video.addEventListener('loadedmetadata', () => {
+                if (metadataTimeout) {
+                    clearTimeout(metadataTimeout);
+                    metadataTimeout = null;
+                }
                 
-                // ✅ CANVAS COM ORIENTAÇÃO E FORMATO DINÂMICOS
-                const canvas = document.createElement('canvas');
-                const ctx = canvas.getContext('2d');
-                canvas.width = this.canvasDimensions.width;
-                canvas.height = this.canvasDimensions.height;
+                if (!video.videoWidth || !video.videoHeight || !video.duration) {
+                    handleError(new Error(`Metadata inválida: ${video.videoWidth}x${video.videoHeight}, dur: ${video.duration}`));
+                    return;
+                }
                 
-                this.log(`Canvas criado: ${canvas.width}x${canvas.height}`);
+                // Pré-carregar primeiro frame
+                video.currentTime = 0.1;
                 
-                // ✅ DETECTAR MELHOR FORMATO DE SAÍDA
+                seekTimeout = setTimeout(() => {
+                    // Mesmo se o seek falhar, continuamos se tivermos metadata válida
+                    if (video.readyState >= 2) {
+                        video.currentTime = 0;
+                        handleSuccess();
+                    } else {
+                        handleError(new Error(`ReadyState insuficiente: ${video.readyState}`));
+                    }
+                }, 5000);
+            }, { once: true });
+            
+            video.addEventListener('seeked', () => {
+                if (seekTimeout && video.currentTime === 0.1) {
+                    clearTimeout(seekTimeout);
+                    seekTimeout = null;
+                    video.currentTime = 0;
+                    handleSuccess();
+                }
+            }, { once: true });
+            
+            video.addEventListener('error', (e) => {
+                handleError(new Error(`Erro no vídeo: ${e.message || 'Erro desconhecido'}`));
+            }, { once: true });
+            
+            // Iniciar carregamento
+            video.load();
+        });
+    }
+
+    // ✅ ETAPA 1: Pré-carregamento paralelo otimizado
+    async preloadAllRequiredVideos(timelineItems) {
+        const requiredIndexes = new Set();
+        timelineItems.forEach(item => {
+            if (item.hasTake && item.take) {
+                requiredIndexes.add(item.take.fileIndex);
+            }
+        });
+        
+        this.log(`Pré-carregando ${requiredIndexes.size} vídeos...`);
+        
+        const loadPromises = Array.from(requiredIndexes).map(async (index) => {
+            try {
+                await this.loadVideoRobust(index);
+                this.log(`Vídeo ${index} pré-carregado`);
+            } catch (error) {
+                this.log(`Falha no pré-carregamento do vídeo ${index}: ${error.message}`, 'warn');
+                // Continuar mesmo com falha - sistema de fallback lidará com isso
+            }
+        });
+        
+        await Promise.allSettled(loadPromises);
+        this.log('Pré-carregamento concluído');
+    }
+
+    // ✅ ETAPA 2: Configurar sincronização de áudio robusta
+    async setupAudioSync() {
+        this.syncManager.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        
+        try {
+            const arrayBuffer = await this.audioFile.arrayBuffer();
+            this.syncManager.audioBuffer = await this.syncManager.audioContext.decodeAudioData(arrayBuffer);
+            this.log(`Áudio carregado: ${this.syncManager.audioBuffer.duration.toFixed(1)}s`);
+        } catch (error) {
+            this.log(`Erro ao carregar áudio: ${error.message}`, 'warn');
+            // Continuar sem áudio se falhar
+        }
+    }
+
+    // ✅ ETAPA 3: Canvas de renderização otimizado
+    createRenderCanvas() {
+        const canvas = document.createElement('canvas');
+        canvas.width = this.canvasDimensions.width;
+        canvas.height = this.canvasDimensions.height;
+        
+        // Configurar contexto para melhor performance
+        const ctx = canvas.getContext('2d', {
+            alpha: false,
+            desynchronized: true,
+            willReadFrequently: false
+        });
+        
+        // Configurar image smoothing para melhor qualidade
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = 'high';
+        
+        this.log(`Canvas criado: ${canvas.width}x${canvas.height}`);
+        
+        return { canvas, ctx };
+    }
+
+    // ✅ ETAPA 4: Renderização em tempo real com controle preciso
+    async renderRealtime(ctx, canvas, timelineItems) {
+        return new Promise(async (resolve, reject) => {
+            try {
+                const totalTime = timelineItems.reduce((sum, item) => sum + item.duration, 0);
                 const outputFormat = this.detectBestOutputFormat();
-                this.log(`Formato de saída escolhido: ${outputFormat.mimeType}`);
-                
-                const stream = canvas.captureStream(30);
-                const audioContext = new (window.AudioContext || window.webkitAudioContext)();
-                
-                this.log('Carregando áudio do narrador...');
-                const audioBuffer = await this.loadAudio(audioContext, this.audioFile);
-                
-                const gainNode = audioContext.createGain();
-                gainNode.gain.value = 0.7;
-                const audioDestination = audioContext.createMediaStreamDestination();
-                gainNode.connect(audioDestination);
-                
-                const audioSource = audioContext.createBufferSource();
-                audioSource.buffer = audioBuffer;
-                audioSource.connect(gainNode);
                 
-                const combinedStream = new MediaStream([
-                    ...stream.getVideoTracks(),
-                    ...audioDestination.stream.getAudioTracks()
-                ]);
+                // Configurar stream de vídeo
+                const stream = canvas.captureStream(this.renderingState.targetFPS);
+                
+                // Configurar áudio se disponível
+                let combinedStream = stream;
+                if (this.syncManager.audioBuffer) {
+                    const audioStream = await this.createAudioStream();
+                    combinedStream = new MediaStream([
+                        ...stream.getVideoTracks(),
+                        ...audioStream.getAudioTracks()
+                    ]);
+                }
                 
-                // ✅ CONFIGURAÇÃO OTIMIZADA DO MEDIA RECORDER
-                const mediaRecorderConfig = {
+                // Configurar MediaRecorder
+                const mediaRecorder = new MediaRecorder(combinedStream, {
                     mimeType: outputFormat.mimeType,
-                    videoBitsPerSecond: outputFormat.videoBitrate,
-                    audioBitsPerSecond: 96000
-                };
-                
-                this.log(`Configurando MediaRecorder: ${JSON.stringify(mediaRecorderConfig)}`);
-                
-                const mediaRecorder = new MediaRecorder(combinedStream, mediaRecorderConfig);
+                    videoBitsPerSecond: outputFormat.videoBitrate
+                });
                 
                 const chunks = [];
                 mediaRecorder.ondataavailable = (event) => {
@@ -1864,752 +2307,345 @@ class VideoEditorInteligente {
                 };
                 
                 mediaRecorder.onstop = () => {
-                    this.log('Gravação finalizada, criando blob...');
-                    this.cleanupRendering();
-                    this.printRenderingStats();
-                    
                     const blob = new Blob(chunks, { type: outputFormat.mimeType });
+                    this.log(`Renderização concluída: ${blob.size} bytes`);
                     resolve(blob);
                 };
                 
-                mediaRecorder.onerror = (event) => {
-                    this.log(`Erro no MediaRecorder: ${event.error}`, 'error');
-                    this.cleanupRendering();
-                    this.printRenderingStats();
-                    reject(new Error('Erro ao gravar vídeo'));
-                };
-                
-                this.log('Iniciando gravação...');
+                // Iniciar gravação
                 mediaRecorder.start();
-                audioSource.start(0);
+                this.syncManager.globalStartTime = Date.now();
+                this.syncManager.audioStartTime = this.syncManager.globalStartTime;
                 
-                this.updateExportProgress(50, 'Processando vídeos com sistema de retry...');
-                await this.processTimelineWithRetry(ctx, canvas, timelineItems, audioContext);
+                // Iniciar áudio se disponível
+                if (this.syncManager.audioBuffer) {
+                    this.startAudioPlayback();
+                }
+                
+                // Loop de renderização principal
+                this.renderingState.lastFrameTime = performance.now();
                 
-                setTimeout(() => {
-                    if (this.isRendering) {
-                        this.log('Finalizando gravação...');
+                const renderLoop = () => {
+                    if (!this.renderingState.isRendering) {
+                        mediaRecorder.stop();
+                        return;
+                    }
+                    
+                    const now = performance.now();
+                    const elapsed = (now - this.syncManager.globalStartTime) / 1000; // Convert to seconds
+                    
+                    if (elapsed >= totalTime) {
                         mediaRecorder.stop();
+                        return;
                     }
-                }, 3000);
+                    
+                    // Controlar FPS
+                    const deltaTime = now - this.renderingState.lastFrameTime;
+                    if (deltaTime >= this.renderingState.frameInterval) {
+                        this.renderFrame(ctx, canvas, timelineItems, elapsed);
+                        this.renderingState.lastFrameTime = now - (deltaTime % this.renderingState.frameInterval);
+                    }
+                    
+                    requestAnimationFrame(renderLoop);
+                };
+                
+                requestAnimationFrame(renderLoop);
                 
             } catch (error) {
-                this.cleanupRendering();
-                this.printRenderingStats();
-                this.log(`Erro na criação do vídeo: ${error.message}`, 'error');
                 reject(error);
             }
         });
-        
-        return this.renderingPromise;
     }
 
-    // ✅ NOVO: Detecção do melhor formato de saída
-    detectBestOutputFormat() {
-        const formats = [
-            {
-                mimeType: 'video/webm;codecs=vp9,opus',
-                extension: 'webm',
-                videoBitrate: 6000000,
-                priority: 1
-            },
-            {
-                mimeType: 'video/mp4;codecs=avc1.42E01E,mp4a.40.2',
-                extension: 'mp4',
-                videoBitrate: 8000000,
-                priority: 2
-            },
-            {
-                mimeType: 'video/webm;codecs=vp8,opus',
-                extension: 'webm',
-                videoBitrate: 4000000,
-                priority: 3
-            },
-            {
-                mimeType: 'video/webm;codecs=av1,opus',
-                extension: 'webm',
-                videoBitrate: 5000000,
-                priority: 4
+    // ✅ FRAME POR FRAME - Renderização precisa com fallback
+    renderFrame(ctx, canvas, timelineItems, currentTime) {
+        try {
+            // Encontrar o segmento atual
+            const currentSegment = this.findCurrentSegment(timelineItems, currentTime);
+            
+            if (!currentSegment) {
+                this.renderBlackScreen(ctx, canvas);
+                return;
             }
-        ];
-        
-        // Testar suporte e escolher o melhor
-        for (const format of formats) {
-            if (MediaRecorder.isTypeSupported(format.mimeType)) {
-                this.log(`Formato suportado: ${format.mimeType} (prioridade: ${format.priority})`);
-                return format;
+            
+            // Tentar renderizar o vídeo
+            const videoData = this.videoCache.get(`video-${currentSegment.take.fileIndex}`);
+            
+            if (videoData && videoData.isReady) {
+                this.renderVideoFrame(ctx, canvas, videoData.video, currentSegment, currentTime);
+            } else {
+                this.renderFallbackScreen(ctx, canvas, currentSegment, currentTime);
             }
+            
+            this.renderingState.frameCount++;
+            
+        } catch (error) {
+            this.log(`Erro no frame ${this.renderingState.frameCount}: ${error.message}`, 'error');
+            this.renderingState.droppedFrames++;
         }
+    }
+
+    // ✅ ENCONTRAR SEGMENTO ATUAL - Algoritmo otimizado
+    findCurrentSegment(timelineItems, currentTime) {
+        let accumulatedTime = 0;
         
-        // Fallback para o formato mais básico
-        const fallback = {
-            mimeType: 'video/webm',
-            extension: 'webm',
-            videoBitrate: 3000000,
-            priority: 999
-        };
+        for (const item of timelineItems) {
+            if (!item.hasTake) continue;
+            
+            if (currentTime >= accumulatedTime && currentTime < accumulatedTime + item.duration) {
+                const localTime = currentTime - accumulatedTime;
+                return {
+                    ...item,
+                    localTime: localTime,
+                    videoTime: item.take.startTime + localTime
+                };
+            }
+            
+            accumulatedTime += item.duration;
+        }
         
-        this.log(`Usando fallback: ${fallback.mimeType}`);
-        return fallback;
+        return null;
     }
 
-    // ✅ NOVO: Imprimir estatísticas de renderização
-    printRenderingStats() {
-        this.log('=== ESTATÍSTICAS DE RENDERIZAÇÃO ===');
-        this.log(`Frames totais: ${this.renderingStats.totalFrames}`);
-        this.log(`Frames bem-sucedidos: ${this.renderingStats.successfulFrames}`);
-        this.log(`Frames falhados: ${this.renderingStats.failedFrames}`);
-        this.log(`Frames de loading: ${this.renderingStats.loadingFrames}`);
-        this.log(`Tempo médio por frame: ${this.renderingStats.averageFrameTime.toFixed(2)}ms`);
+    // ✅ RENDERIZAR VÍDEO - Sincronização precisa
+    renderVideoFrame(ctx, canvas, video, segment, currentTime) {
+        // Sincronizar tempo do vídeo
+        const targetTime = segment.videoTime;
+        const currentTimeDiff = Math.abs(video.currentTime - targetTime);
         
-        if (this.renderingStats.codecErrors.size > 0) {
-            this.log('Erros de codec:');
-            this.renderingStats.codecErrors.forEach((count, codec) => {
-                this.log(`  ${codec}: ${count} erros`);
-            });
+        if (currentTimeDiff > 0.1) {
+            video.currentTime = targetTime;
         }
         
-        if (this.renderingStats.formatErrors.size > 0) {
-            this.log('Erros de formato:');
-            this.renderingStats.formatErrors.forEach((error, file) => {
-                this.log(`  ${file}: ${error}`);
-            });
-        }
+        // Limpar canvas
+        ctx.fillStyle = '#000000';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
         
-        const successRate = this.renderingStats.totalFrames > 0 
-            ? (this.renderingStats.successfulFrames / this.renderingStats.totalFrames * 100).toFixed(1)
-            : 0;
+        // Calcular dimensões para manter aspect ratio
+        const videoAspect = video.videoWidth / video.videoHeight;
+        const canvasAspect = canvas.width / canvas.height;
         
-        this.log(`Taxa de sucesso: ${successRate}%`);
-        this.log('====================================');
-    }
-
-    async preloadRequiredVideos(timelineItems) {
-        const requiredFileIndexes = new Set();
+        let drawWidth, drawHeight, drawX, drawY;
         
-        timelineItems.forEach(item => {
-            if (item.hasTake && item.take) {
-                requiredFileIndexes.add(item.take.fileIndex);
-            }
-        });
+        if (videoAspect > canvasAspect) {
+            drawHeight = canvas.height;
+            drawWidth = drawHeight * videoAspect;
+            drawX = (canvas.width - drawWidth) / 2;
+            drawY = 0;
+        } else {
+            drawWidth = canvas.width;
+            drawHeight = drawWidth / videoAspect;
+            drawX = 0;
+            drawY = (canvas.height - drawHeight) / 2;
+        }
         
-        const preloadPromises = Array.from(requiredFileIndexes).map(async (fileIndex) => {
-            const file = this.videoFiles[fileIndex];
-            try {
-                await this.preloadVideo(file, fileIndex);
-                this.log(`Vídeo ${fileIndex} pré-carregado com sucesso`);
-            } catch (error) {
-                this.log(`Falha ao pré-carregar vídeo ${fileIndex}: ${error.message}`, 'warn');
-                this.renderingStats.formatErrors.set(file.name, error.message);
+        // Desenhar vídeo
+        try {
+            ctx.drawImage(video, drawX, drawY, drawWidth, drawHeight);
+            
+            // Overlay de informações (opcional)
+            if (this.debugMode) {
+                this.renderDebugOverlay(ctx, segment, currentTime);
             }
-        });
+        } catch (error) {
+            this.log(`Erro ao desenhar vídeo: ${error.message}`, 'warn');
+            this.renderFallbackScreen(ctx, canvas, segment, currentTime);
+        }
+    }
+
+    // ✅ TELA PRETA - Para gaps na timeline
+    renderBlackScreen(ctx, canvas) {
+        ctx.fillStyle = '#000000';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
         
-        await Promise.allSettled(preloadPromises);
+        if (this.debugMode) {
+            ctx.fillStyle = '#666666';
+            ctx.font = '16px Arial';
+            ctx.textAlign = 'center';
+            ctx.fillText('Aguardando próximo segmento...', canvas.width / 2, canvas.height / 2);
+            ctx.textAlign = 'left';
+        }
+    }
+
+    // ✅ TELA DE FALLBACK - Quando o vídeo não está disponível
+    renderFallbackScreen(ctx, canvas, segment, currentTime) {
+        ctx.fillStyle = '#000000';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        
+        ctx.fillStyle = '#333333';
+        ctx.fillRect(50, 50, canvas.width - 100, canvas.height - 100);
+        
+        ctx.fillStyle = 'white';
+        ctx.font = 'bold 24px Arial';
+        ctx.textAlign = 'center';
+        ctx.fillText(`Grupo ${segment.groupId}`, canvas.width / 2, canvas.height / 2 - 60);
+        
+        ctx.font = '18px Arial';
+        ctx.fillText(`Tema: ${segment.theme}`, canvas.width / 2, canvas.height / 2 - 20);
+        
+        ctx.font = '14px Arial';
+        ctx.fillText(`Ângulo: ${segment.take.angle}`, canvas.width / 2, canvas.height / 2 + 20);
+        ctx.fillText(`Score: ${segment.flowScore.toFixed(1)}%`, canvas.width / 2, canvas.height / 2 + 50);
+        ctx.fillText(`Modo: Fallback`, canvas.width / 2, canvas.height / 2 + 80);
+        
+        const progress = segment.localTime / segment.duration;
+        ctx.fillText(`Progresso: ${(progress * 100).toFixed(1)}%`, canvas.width / 2, canvas.height / 2 + 110);
+        
+        // Barra de progresso
+        const barWidth = 300;
+        const barHeight = 10;
+        const barX = (canvas.width - barWidth) / 2;
+        const barY = canvas.height / 2 + 130;
+        
+        ctx.fillStyle = '#555555';
+        ctx.fillRect(barX, barY, barWidth, barHeight);
+        
+        ctx.fillStyle = '#00ff00';
+        ctx.fillRect(barX, barY, barWidth * progress, barHeight);
+        
+        ctx.textAlign = 'left';
     }
 
-    clearAllTimeouts() {
-        if (this.renderingTimeout) {
-            clearTimeout(this.renderingTimeout);
-            this.renderingTimeout = null;
+    // ✅ OVERLAY DE DEBUG - Informações em tempo real
+    renderDebugOverlay(ctx, segment, currentTime) {
+        const alpha = 0.7;
+        
+        // Fundo do overlay
+        ctx.fillStyle = `rgba(0, 0, 0, ${0.6 * alpha})`;
+        ctx.fillRect(10, 10, 400, 120);
+        
+        ctx.fillStyle = 'white';
+        ctx.font = 'bold 12px Arial';
+        ctx.fillText(`Grupo ${segment.groupId} - ${segment.theme}`, 20, 30);
+        
+        ctx.font = '11px Arial';
+        ctx.fillText(`Tempo: ${currentTime.toFixed(2)}s / ${segment.localTime.toFixed(2)}s`, 20, 50);
+        ctx.fillText(`Score: ${segment.flowScore.toFixed(1)}% | Frame: ${this.renderingState.frameCount}`, 20, 70);
+        ctx.fillText(`FPS: ${(1000 / this.renderingState.frameInterval).toFixed(0)} | Dropped: ${this.renderingState.droppedFrames}`, 20, 90);
+        ctx.fillText(`Video Time: ${segment.videoTime.toFixed(2)}s | ${this.canvasDimensions.width}x${this.canvasDimensions.height}`, 20, 110);
+    }
+
+    // ✅ STREAM DE ÁUDIO - Sincronização precisa
+    async createAudioStream() {
+        if (!this.syncManager.audioBuffer) {
+            throw new Error('Buffer de áudio não disponível');
         }
         
-        this.segmentTimeouts.forEach((timeoutId, segmentId) => {
-            clearTimeout(timeoutId);
-        });
-        this.segmentTimeouts.clear();
+        const destination = this.syncManager.audioContext.createMediaStreamDestination();
+        const source = this.syncManager.audioContext.createBufferSource();
+        source.buffer = this.syncManager.audioBuffer;
         
-        this.log('Todos os timeouts limpos');
+        // Aplicar ganho para evitar clipping
+        const gainNode = this.syncManager.audioContext.createGain();
+        gainNode.gain.value = 0.7;
+        
+        source.connect(gainNode);
+        gainNode.connect(destination);
+        
+        this.syncManager.audioSource = source;
+        
+        return destination.stream;
     }
 
-    cleanupRendering() {
-        this.isRendering = false;
-        this.renderingPromise = null;
-        this.clearAllTimeouts();
-        this.retryAttempts.clear();
-        this.log('Renderização limpa');
+    // ✅ INICIAR ÁUDIO - Sincronizado com vídeo
+    startAudioPlayback() {
+        if (!this.syncManager.audioSource || !this.syncManager.audioBuffer) {
+            return;
+        }
+        
+        const audioDelay = 50; // 50ms de delay para sincronizar com vídeo
+        
+        setTimeout(() => {
+            this.syncManager.audioSource.start(0);
+            this.syncManager.isAudioPlaying = true;
+            this.log('Áudio iniciado');
+        }, audioDelay);
     }
 
-    // ✅ IMPLEMENTAÇÃO COMPLETA: Processamento com debugging extensivo
-    async processTimelineWithRetry(ctx, canvas, timelineItems, audioContext) {
-        return new Promise(async (resolve, reject) => {
+    // ✅ LIMPEZA - Liberar recursos
+    cleanupRendering() {
+        this.renderingState.isRendering = false;
+        
+        // Parar áudio
+        if (this.syncManager.audioSource) {
             try {
-                let currentTime = 0;
-                let successCount = 0;
-                let failureCount = 0;
-                
-                this.log(`Processando ${timelineItems.length} itens com sistema de retry e debugging`);
-                
-                for (let i = 0; i < timelineItems.length; i++) {
-                    if (!this.isRendering) {
-                        this.log('Renderização cancelada', 'warn');
-                        resolve();
-                        return;
-                    }
-                    
-                    const item = timelineItems[i];
-                    
-                    this.log(`Processando item ${i + 1}/${timelineItems.length}: Grupo ${item.groupId} (${item.theme})`);
-                    
-                    if (!item.hasTake) {
-                        this.log(`Item ${item.groupId} não tem take, pulando...`, 'warn');
-                        currentTime += item.duration;
-                        continue;
-                    }
-                    
-                    let retryCount = 0;
-                    const maxRetries = 3;
-                    let success = false;
-                    let finalFrameCount = 0;
-                    
-                    while (retryCount < maxRetries && !success) {
-                        try {
-                            const retryKey = `item-${item.groupId}`;
-                            
-                            if (retryCount > 0) {
-                                this.log(`Retry ${retryCount}/${maxRetries} para item ${item.groupId}`);
-                                await this.delay(3000 * retryCount);
-                            }
-                            
-                            const baseTimeout = 90000; // Aumentado para 90s
-                            const retryMultiplier = Math.pow(1.5, retryCount);
-                            const segmentTimeoutMs = Math.max(baseTimeout * retryMultiplier, item.duration * 6000 + 20000);
-                            
-                            const frameCount = await this.renderVideoSegmentWithRetry(ctx, canvas, item, currentTime, audioContext, segmentTimeoutMs);
-                            
-                            finalFrameCount = frameCount;
-                            success = true;
-                            successCount++;
-                            this.log(`Item ${item.groupId} processado com sucesso: ${frameCount} frames (tentativa ${retryCount + 1})`);
-                            
-                        } catch (segmentError) {
-                            retryCount++;
-                            this.log(`Tentativa ${retryCount} falhou para item ${item.groupId}: ${segmentError.message}`, 'error');
-                            
-                            // ✅ REGISTRAR ERROS DE CODEC/FORMATO
-                            if (segmentError.message.includes('codec') || segmentError.message.includes('formato')) {
-                                const codec = item.take?.codec || 'unknown';
-                                const format = item.take?.format || 'unknown';
-                                this.renderingStats.codecErrors.set(codec, (this.renderingStats.codecErrors.get(codec) || 0) + 1);
-                                this.renderingStats.formatErrors.set(item.take.fileName, segmentError.message);
-                            }
-                            
-                            if (retryCount >= maxRetries) {
-                                failureCount++;
-                                this.log(`Item ${item.groupId} falhou após ${maxRetries} tentativas, usando fallback`, 'error');
-                                
-                                const fallbackFrames = await this.renderAdvancedFallback(ctx, canvas, item, currentTime);
-                                finalFrameCount = fallbackFrames;
-                                success = true;
-                            }
-                        }
-                    }
-                    
-                    this.log(`Item ${item.groupId}: ${finalFrameCount} frames renderizados`);
-                    currentTime += item.duration;
-                    
-                    const pauseTime = Math.min(500, item.duration * 100);
-                    await this.delay(pauseTime);
-                }
-                
-                this.log(`Processamento concluído: ${successCount} sucessos, ${failureCount} falhas com fallback`);
-                resolve();
-                
+                this.syncManager.audioSource.stop();
             } catch (error) {
-                this.log(`Erro no processamento da timeline: ${error.message}`, 'error');
-                reject(error);
+                // Ignorar erros ao parar áudio
             }
-        });
-    }
-
-    // ✅ IMPLEMENTAÇÃO COMPLETA: Renderização com debugging detalhado
-    async renderVideoSegmentWithRetry(ctx, canvas, item, startTime, audioContext, segmentTimeoutMs) {
-        const segmentId = `segment-${item.groupId}`;
+            this.syncManager.audioSource = null;
+        }
         
-        return new Promise((resolve, reject) => {
-            const segmentTimeout = setTimeout(() => {
-                this.log(`Timeout no segmento ${item.groupId} após ${segmentTimeoutMs}ms`, 'error');
-                this.segmentTimeouts.delete(segmentId);
-                reject(new Error(`Timeout no segmento ${item.groupId}`));
-            }, segmentTimeoutMs);
-            
-            this.segmentTimeouts.set(segmentId, segmentTimeout);
-            
+        if (this.syncManager.audioContext) {
             try {
-                // ✅ ESTRATÉGIA MELHORADA DE OBTENÇÃO DO VÍDEO
-                let video = this.videoPreloadCache.get(`video-${item.take.fileIndex}`);
-                
-                if (!video) {
-                    const loadedVideo = this.loadedVideos[item.take.fileIndex];
-                    video = loadedVideo ? loadedVideo.video : null;
-                }
-                
-                if (!video) {
-                    video = document.createElement('video');
-                    video.src = URL.createObjectURL(this.videoFiles[item.take.fileIndex]);
-                    video.crossOrigin = 'anonymous';
-                }
-                
-                // Configuração robusta do vídeo
-                video.loop = false;
-                video.muted = true;
-                video.playsInline = true;
-                video.preload = 'auto';
-                
-                const targetDuration = item.duration * 1000;
-                const actualStartTime = Date.now();
-                let frameCount = 0;
-                let lastFrameTime = 0;
-                const targetFPS = 30;
-                const frameInterval = 1000 / targetFPS;
-                
-                let consecutiveErrors = 0;
-                const maxErrors = 30; // Aumentado para ser mais tolerante
-                let videoReadyStateReached = false;
-                let actualFramesRendered = 0;
-                let frameStartTime = 0;
-                const frameTimes = [];
-                
-                const checkVideoReady = () => {
-                    return video.readyState >= 2 && 
-                           video.videoWidth > 0 && 
-                           video.videoHeight > 0 &&
-                           !isNaN(video.duration) &&
-                           video.duration > 0;
-                };
-                
-                const forceVideoLoad = async () => {
-                    if (!checkVideoReady()) {
-                        this.log(`Forçando carregamento do vídeo para item ${item.groupId}`);
-                        
-                        try {
-                            video.load();
-                            await this.delay(2000);
-                            
-                            video.currentTime = 0.1;
-                            await this.waitForVideoSeek(video);
-                            video.currentTime = 0;
-                            await this.waitForVideoSeek(video);
-                        } catch (seekError) {
-                            this.log(`Erro ao forçar seek: ${seekError.message}`, 'warn');
-                        }
-                        
-                        if (!checkVideoReady()) {
-                            throw new Error(`Vídeo não está pronto após tentativas forçadas`);
-                        }
-                    }
-                };
-                
-                const renderFrame = async () => {
-                    if (!this.isRendering) {
-                        clearTimeout(segmentTimeout);
-                        this.segmentTimeouts.delete(segmentId);
-                        reject(new Error('Renderização cancelada'));
-                        return;
-                    }
-                    
-                    try {
-                        const now = Date.now();
-                        const elapsed = now - actualStartTime;
-                        const progress = Math.min(1, elapsed / targetDuration);
-                        
-                        if (progress < 1 && consecutiveErrors < maxErrors) {
-                            // Controle de FPS
-                            if (now - lastFrameTime >= frameInterval) {
-                                frameStartTime = Date.now();
-                                frameCount++;
-                                actualFramesRendered++;
-                                lastFrameTime = now;
-                                consecutiveErrors = 0;
-                                
-                                // ✅ ATUALIZAR ESTATÍSTICAS
-                                this.renderingStats.totalFrames++;
-                                
-                                if (!videoReadyStateReached) {
-                                    if (checkVideoReady()) {
-                                        videoReadyStateReached = true;
-                                        this.log(`Vídeo pronto para item ${item.groupId}`);
-                                        this.renderingStats.successfulFrames++;
-                                    } else {
-                                        this.renderingStats.loadingFrames++;
-                                        try {
-                                            await forceVideoLoad();
-                                        } catch (forceError) {
-                                            this.log(`Falha ao forçar carregamento: ${forceError.message}`, 'error');
-                                            this.renderingStats.failedFrames++;
-                                        }
-                                    }
-                                }
-                                
-                                const videoTime = item.take.startTime + (progress * item.duration);
-                                const timeDiff = Math.abs(video.currentTime - videoTime);
-                                
-                                if (timeDiff > 0.5) {
-                                    try {
-                                        video.currentTime = videoTime;
-                                    } catch (timeError) {
-                                        this.log(`Erro ao ajustar tempo: ${timeError.message}`, 'warn');
-                                    }
-                                }
-                                
-                                // Renderizar com tratamento robusto
-                                try {
-                                    ctx.fillStyle = '#000000';
-                                    ctx.fillRect(0, 0, canvas.width, canvas.height);
-                                    
-                                    if (videoReadyStateReached && video.readyState >= 2) {
-                                        const drawSuccess = this.drawVideoSafely(ctx, video, canvas);
-                                        if (drawSuccess) {
-                                            this.drawOverlaySafely(ctx, item, progress, actualFramesRendered);
-                                            this.renderingStats.successfulFrames++;
-                                        } else {
-                                            this.drawLoadingScreen(ctx, item, 'Erro ao desenhar vídeo');
-                                            this.renderingStats.failedFrames++;
-                                        }
-                                    } else {
-                                        this.drawLoadingScreen(ctx, item, 'Carregando vídeo...');
-                                        this.renderingStats.loadingFrames++;
-                                    }
-                                    
-                                } catch (drawError) {
-                                    consecutiveErrors++;
-                                    this.renderingStats.failedFrames++;
-                                    this.log(`Erro ao desenhar frame ${actualFramesRendered}: ${drawError.message}`, 'error');
-                                    
-                                    if (consecutiveErrors < maxErrors) {
-                                        this.drawErrorScreen(ctx, item, `Erro ${consecutiveErrors}/${maxErrors}`);
-                                    } else {
-                                        throw new Error(`Muitos erros consecutivos na renderização: ${drawError.message}`);
-                                    }
-                                }
-                                
-                                // ✅ REGISTRAR TEMPO DO FRAME
-                                const frameTime = Date.now() - frameStartTime;
-                                frameTimes.push(frameTime);
-                                if (frameTimes.length > 100) {
-                                    frameTimes.shift(); // Manter apenas últimos 100 frames
-                                }
-                                this.renderingStats.averageFrameTime = frameTimes.reduce((a, b) => a + b, 0) / frameTimes.length;
-                            }
-                            
-                            if (consecutiveErrors < maxErrors) {
-                                requestAnimationFrame(renderFrame);
-                            } else {
-                                throw new Error('Muitos erros consecutivos na renderização');
-                            }
-                            
-                        } else {
-                            clearTimeout(segmentTimeout);
-                            this.segmentTimeouts.delete(segmentId);
-                            
-                            if (consecutiveErrors >= maxErrors) {
-                                reject(new Error(`Muitos erros consecutivos no segmento ${item.groupId}`));
-                            } else {
-                                this.log(`Segmento ${item.groupId} renderizado: ${actualFramesRendered} frames`);
-                                resolve(actualFramesRendered);
-                            }
-                        }
-                        
-                    } catch (frameError) {
-                        consecutiveErrors++;
-                        this.renderingStats.failedFrames++;
-                        this.log(`Erro no frame ${actualFramesRendered}: ${frameError.message}`, 'error');
-                        
-                        if (consecutiveErrors < maxErrors) {
-                            requestAnimationFrame(renderFrame);
-                        } else {
-                            clearTimeout(segmentTimeout);
-                            this.segmentTimeouts.delete(segmentId);
-                            reject(new Error(`Erro crítico no segmento ${item.groupId}: ${frameError.message}`));
-                        }
-                    }
-                };
-                
-                const startRendering = async () => {
-                    try {
-                        await forceVideoLoad();
-                        
-                        video.currentTime = item.take.startTime;
-                        
-                        try {
-                            await video.play();
-                        } catch (playError) {
-                            this.log(`Play falhou, continuando anyway: ${playError.message}`, 'warn');
-                        }
-                        
-                        requestAnimationFrame(renderFrame);
-                        
-                    } catch (initError) {
-                        clearTimeout(segmentTimeout);
-                        this.segmentTimeouts.delete(segmentId);
-                        reject(new Error(`Erro na inicialização: ${initError.message}`));
-                    }
-                };
-                
-                if (checkVideoReady()) {
-                    startRendering();
-                } else {
-                    setTimeout(() => {
-                        startRendering();
-                    }, 3000); // Aumentado para 3s
-                }
-                
+                this.syncManager.audioContext.close();
             } catch (error) {
-                clearTimeout(segmentTimeout);
-                this.segmentTimeouts.delete(segmentId);
-                this.log(`Erro geral no segmento ${item.groupId}: ${error.message}`, 'error');
-                this.renderingStats.failedFrames++;
-                reject(error);
+                // Ignorar erros ao fechar context
             }
-        });
-    }
-
-    async renderAdvancedFallback(ctx, canvas, item, currentTime) {
-        this.log(`Aplicando fallback avançado para item ${item.groupId}`);
-        
-        const duration = item.duration * 1000;
-        const frames = Math.floor(duration * 0.02); // Reduzir FPS para fallback
-        const frameDelay = duration / frames;
-        let actualFrames = 0;
+            this.syncManager.audioContext = null;
+        }
         
-        try {
-            const video = this.videoPreloadCache.get(`video-${item.take.fileIndex}`);
-            if (video && video.readyState >= 2) {
-                for (let i = 0; i < frames; i++) {
-                    if (!this.isRendering) break;
-                    
-                    actualFrames++;
-                    this.renderingStats.totalFrames++;
-                    
-                    const progress = i / frames;
-                    const targetTime = item.take.startTime + (progress * item.duration);
-                    
-                    if (Math.abs(video.currentTime - targetTime) > 0.5) {
-                        video.currentTime = targetTime;
-                        await this.waitForVideoSeek(video);
-                    }
-                    
-                    ctx.fillStyle = '#000000';
-                    ctx.fillRect(0, 0, canvas.width, canvas.height);
-                    
-                    try {
-                        const aspect = video.videoWidth / video.videoHeight;
-                        const canvasAspect = canvas.width / canvas.height;
-                        
-                        let drawWidth, drawHeight, drawX, drawY;
-                        
-                        if (aspect > canvasAspect) {
-                            drawHeight = canvas.height;
-                            drawWidth = drawHeight * aspect;
-                            drawX = (canvas.width - drawWidth) / 2;
-                            drawY = 0;
-                        } else {
-                            drawWidth = canvas.width;
-                            drawHeight = drawWidth / aspect;
-                            drawX = 0;
-                            drawY = (canvas.height - drawHeight) / 2;
-                        }
-                        
-                        ctx.drawImage(video, drawX, drawY, drawWidth, drawHeight);
-                        this.renderingStats.successfulFrames++;
-                        
-                        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
-                        ctx.fillRect(10, 10, 400, 100);
-                        ctx.fillStyle = 'white';
-                        ctx.font = 'bold 16px Arial';
-                        ctx.fillText(`Grupo ${item.groupId} - ${item.theme}`, 20, 35);
-                        ctx.font = '14px Arial';
-                        ctx.fillText(`Fallback: Frame estático`, 20, 60);
-                        ctx.fillText(`Progresso: ${(progress * 100).toFixed(1)}%`, 20, 85);
-                        ctx.fillText(`Codec: ${item.take.codec || 'unknown'}`, 20, 105);
-                        
-                    } catch (drawError) {
-                        this.log(`Erro no frame fallback ${i}: ${drawError.message}`, 'error');
-                        this.renderingStats.failedFrames++;
-                    }
-                    
-                    await this.delay(frameDelay);
-                }
-                
-                this.log(`Fallback renderizado: ${actualFrames} frames`);
-                return actualFrames;
+        // Limpar vídeos ativos
+        this.activeVideos.forEach(video => {
+            if (video.src) {
+                URL.revokeObjectURL(video.src);
             }
-        } catch (error) {
-            this.log(`Fallback de frames falhou: ${error.message}`, 'warn');
-        }
+        });
+        this.activeVideos.clear();
         
-        // Fallback final: tela informativa
-        for (let i = 0; i < frames; i++) {
-            if (!this.isRendering) break;
-            
-            actualFrames++;
-            this.renderingStats.totalFrames++;
-            
-            ctx.fillStyle = '#000000';
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
-            
-            const progress = i / frames;
-            
-            ctx.fillStyle = '#333333';
-            ctx.fillRect(100, 100, canvas.width - 200, canvas.height - 200);
-            
-            ctx.fillStyle = 'white';
-            ctx.font = 'bold 24px Arial';
-            ctx.textAlign = 'center';
-            ctx.fillText(`Grupo ${item.groupId}`, canvas.width / 2, canvas.height / 2 - 60);
-            
-            ctx.font = '20px Arial';
-            ctx.fillText(`Tema: ${item.theme}`, canvas.width / 2, canvas.height / 2 - 20);
-            
-            ctx.font = '16px Arial';
-            ctx.fillText(`Ângulo: ${item.take.angle}`, canvas.width / 2, canvas.height / 2 + 20);
-            ctx.fillText(`Score: ${item.flowScore.toFixed(1)}%`, canvas.width / 2, canvas.height / 2 + 50);
-            ctx.fillText(`Modo: Informação Estática`, canvas.width / 2, canvas.height / 2 + 80);
-            ctx.fillText(`Codec: ${item.take.codec || 'unknown'}`, canvas.width / 2, canvas.height / 2 + 110);
-            ctx.fillText(`Formato: ${item.take.format || 'unknown'}`, canvas.width / 2, canvas.height / 2 + 140);
-            
-            const barWidth = 400;
-            const barHeight = 20;
-            const barX = (canvas.width - barWidth) / 2;
-            const barY = canvas.height / 2 + 180;
-            
-            ctx.fillStyle = '#555555';
-            ctx.fillRect(barX, barY, barWidth, barHeight);
-            
-            ctx.fillStyle = '#00ff00';
-            ctx.fillRect(barX, barY, barWidth * progress, barHeight);
-            
-            ctx.fillStyle = 'white';
-            ctx.font = '14px Arial';
-            ctx.fillText(`${(progress * 100).toFixed(1)}%`, canvas.width / 2, barY + 35);
-            
-            ctx.textAlign = 'left';
-            this.renderingStats.successfulFrames++;
-            
-            await this.delay(frameDelay);
-        }
+        // Limpar cache (opcional - manter para performance)
+        // this.videoCache.clear();
         
-        this.log(`Fallback informativo renderizado: ${actualFrames} frames`);
-        return actualFrames;
+        this.log('Renderização limpa');
     }
 
-    drawVideoSafely(ctx, video, canvas) {
-        try {
-            if (!video.videoWidth || !video.videoHeight) {
-                return false;
+    // ✅ NOVO: Detecção do melhor formato de saída
+    detectBestOutputFormat() {
+        const formats = [
+            {
+                mimeType: 'video/webm;codecs=vp9,opus',
+                extension: 'webm',
+                videoBitrate: 6000000,
+                priority: 1
+            },
+            {
+                mimeType: 'video/mp4;codecs=avc1.42E01E,mp4a.40.2',
+                extension: 'mp4',
+                videoBitrate: 8000000,
+                priority: 2
+            },
+            {
+                mimeType: 'video/webm;codecs=vp8,opus',
+                extension: 'webm',
+                videoBitrate: 4000000,
+                priority: 3
+            },
+            {
+                mimeType: 'video/webm;codecs=av1,opus',
+                extension: 'webm',
+                videoBitrate: 5000000,
+                priority: 4
             }
-            
-            const videoAspect = video.videoWidth / video.videoHeight;
-            const canvasAspect = canvas.width / canvas.height;
-            
-            let drawWidth, drawHeight, drawX, drawY;
-            
-            if (videoAspect > canvasAspect) {
-                drawHeight = canvas.height;
-                drawWidth = drawHeight * videoAspect;
-                drawX = (canvas.width - drawWidth) / 2;
-                drawY = 0;
-            } else {
-                drawWidth = canvas.width;
-                drawHeight = drawWidth / videoAspect;
-                drawX = 0;
-                drawY = (canvas.height - drawHeight) / 2;
+        ];
+        
+        // Testar suporte e escolher o melhor
+        for (const format of formats) {
+            if (MediaRecorder.isTypeSupported(format.mimeType)) {
+                this.log(`Formato suportado: ${format.mimeType} (prioridade: ${format.priority})`);
+                return format;
             }
-            
-            ctx.drawImage(video, drawX, drawY, drawWidth, drawHeight);
-            
-            return true;
-            
-        } catch (error) {
-            this.log(`Erro ao desenhar vídeo: ${error.message}`, 'error');
-            return false;
-        }
-    }
-
-    drawOverlaySafely(ctx, item, progress, frameCount) {
-        try {
-            const alpha = Math.min(1, progress * 2);
-            
-            ctx.fillStyle = `rgba(0, 0, 0, ${0.6 * (1 - alpha * 0.3)})`;
-            ctx.fillRect(10, 10, 450, 100); // Aumentado para acomodar mais informações
-            
-            ctx.fillStyle = 'white';
-            ctx.font = 'bold 14px Arial';
-            ctx.fillText(`Grupo ${item.groupId} - ${item.theme}`, 20, 35);
-            ctx.font = '12px Arial';
-            ctx.fillText(`Score: ${item.flowScore.toFixed(1)}% | Frame: ${frameCount}`, 20, 55);
-            ctx.fillText(`Progresso: ${(progress * 100).toFixed(1)}% | ${this.videoOrientation}`, 20, 75);
-            ctx.fillText(`Codec: ${item.take.codec || 'unknown'} | Formato: ${item.take.format || 'unknown'}`, 20, 95);
-            
-        } catch (error) {
-            this.log(`Erro no overlay: ${error.message}`, 'error');
-        }
-    }
-
-    drawErrorScreen(ctx, item, message) {
-        try {
-            ctx.fillStyle = '#000000';
-            ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-            
-            ctx.fillStyle = '#ff4444';
-            ctx.font = 'bold 24px Arial';
-            ctx.textAlign = 'center';
-            ctx.fillText(`Erro no Grupo ${item.groupId}`, ctx.canvas.width / 2, ctx.canvas.height / 2 - 30);
-            
-            ctx.fillStyle = '#ffffff';
-            ctx.font = '16px Arial';
-            ctx.fillText(message, ctx.canvas.width / 2, ctx.canvas.height / 2 + 10);
-            ctx.fillText(`Codec: ${item.take.codec || 'unknown'}`, ctx.canvas.width / 2, ctx.canvas.height / 2 + 40);
-            ctx.fillText(`Formato: ${item.take.format || 'unknown'}`, ctx.canvas.width / 2, ctx.canvas.height / 2 + 70);
-            
-            ctx.textAlign = 'left';
-        } catch (error) {
-            this.log(`Erro ao desenhar tela de erro: ${error.message}`, 'error');
-        }
-    }
-
-    drawLoadingScreen(ctx, item, message) {
-        try {
-            ctx.fillStyle = '#000000';
-            ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-            
-            ctx.fillStyle = '#666666';
-            ctx.font = '18px Arial';
-            ctx.textAlign = 'center';
-            ctx.fillText(`${message}...`, ctx.canvas.width / 2, ctx.canvas.height / 2 - 20);
-            
-            ctx.font = '14px Arial';
-            ctx.fillText(`Grupo ${item.groupId} - ${item.theme}`, ctx.canvas.width / 2, ctx.canvas.height / 2 + 10);
-            ctx.fillText(`Codec: ${item.take.codec || 'unknown'}`, ctx.canvas.width / 2, ctx.canvas.height / 2 + 40);
-            ctx.fillText(`Formato: ${item.take.format || 'unknown'}`, ctx.canvas.width / 2, ctx.canvas.height / 2 + 70);
-            
-            ctx.textAlign = 'left';
-        } catch (error) {
-            this.log(`Erro ao desenhar tela de loading: ${error.message}`, 'error');
         }
-    }
-
-    async renderBlackScreen(ctx, canvas, duration) {
-        const frames = Math.floor(duration * 30);
-        const frameDelay = 1000 / 30;
         
-        for (let i = 0; i < frames; i++) {
-            if (!this.isRendering) break;
-            
-            ctx.fillStyle = '#000000';
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
-            
-            ctx.fillStyle = '#666666';
-            ctx.font = '16px Arial';
-            ctx.textAlign = 'center';
-            ctx.fillText(`Processando...`, canvas.width / 2, canvas.height / 2);
-            
-            await this.delay(frameDelay);
-        }
-    }
-
-    async loadAudio(audioContext, file) {
-        const arrayBuffer = await file.arrayBuffer();
-        return await audioContext.decodeAudioData(arrayBuffer);
+        // Fallback para o formato mais básico
+        const fallback = {
+            mimeType: 'video/webm',
+            extension: 'webm',
+            videoBitrate: 3000000,
+            priority: 999
+        };
+        
+        this.log(`Usando fallback: ${fallback.mimeType}`);
+        return fallback;
     }
 
     async exportAudioOnly() {
@@ -2636,17 +2672,13 @@ class VideoEditorInteligente {
         }, 2000);
     }
 
-    delay(ms) {
-        return new Promise(resolve => setTimeout(resolve, ms));
-    }
-
     exportProjectFile(isFallback = false) {
         const projectData = {
             metadata: {
                 projectName: `Projeto_Inteligente_${new Date().toISOString().slice(0, 10)}`,
                 audience: this.targetAudience,
                 createdAt: new Date().toISOString(),
-                version: '8.0 - Sistema Completo de Debugging e Compatibilidade',
+                version: '9.0 - Sistema Completo de Fallback e Matching Inteligente',
                 totalBlocks: this.scriptBlocks ? this.scriptBlocks.length : 0,
                 totalGroups: this.blockGroups ? this.blockGroups.length : 0,
                 totalDuration: this.finalTimeline ? 
@@ -2678,10 +2710,13 @@ class VideoEditorInteligente {
                     duration: group.take.duration,
                     orientation: group.take.orientation,
                     codec: group.take.codec,
-                    format: group.take.format
+                    format: group.take.format,
+                    wasFallback: group.take.wasFallback || false,
+                    wasGeneric: group.take.wasGeneric || false
                 } : null,
                 flowScore: group.flowScore || 0,
-                bestTakes: group.bestTakes || []
+                bestTakes: group.bestTakes || [],
+                matchingInfo: group.matchingInfo || {}
             })),
             timeline: this.finalTimeline || [],
             qualityMetrics: this.qualityMetrics || {},
@@ -2704,7 +2739,12 @@ class VideoEditorInteligente {
             formatValidation: true,
             codecDetection: true,
             debuggingSystem: true,
-            renderingStats: this.renderingStats
+            renderingStats: this.renderingStats,
+            themeCoverage: {
+                totalThemes: [...new Set(this.scriptBlocks?.map(b => b.theme) || [])],
+                themesWithTakes: [...new Set(this.blockGroups?.map(g => g.theme).filter(t => t) || [])],
+                matchingSuccess: this.validateThemeCoverage()
+            }
         };
         
         const blob = new Blob([JSON.stringify(projectData, null, 2)], { type: 'application/json' });
@@ -2740,6 +2780,10 @@ class VideoEditorInteligente {
         const modal = document.getElementById('exportProgress');
         if (modal) modal.classList.remove('active');
     }
+
+    delay(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
 }
 
 // Funções globais
@@ -2762,4 +2806,5 @@ function exportProjectFile() {
     editor.exportProjectFile();
 }
 
+// Inicialização do editor
 const editor = new VideoEditorInteligente();