/**
 * @file wally-editor.js
 * @description Editor integration for Wally Monitor — runEditorScan,
 *              saveEditorReport, updateSeoMetaBox, locateElementInEditor.
 *              Handles Gutenberg and Classic Editor scanning via iframes,
 *              displays results in the editor meta box.
 *              Depends on: WallyMonitor.Rules, WallyMonitor.Report,
 *              WallyMonitor.Utils.
 * @module WallyMonitor.Editor
 */
window.WallyMonitor = window.WallyMonitor || {};

(function($) {
    'use strict';

    WallyMonitor.Editor = WallyMonitor.Editor || {};

    /** @type {boolean} Whether an editor analysis is currently in progress */
    WallyMonitor.Editor.isAnalyzing = false;

    /**
     * Roda a análise no editor (Gutenberg ou Classic Editor)
     */
    WallyMonitor.Editor.runEditorScan = async function() {
        // Fallback robusto — garante que escapeHtml SEMPRE funciona
        var escapeHtml = (WallyMonitor.Utils && WallyMonitor.Utils.escapeHtml) || function(s) {
            s = String(s == null ? '' : s);
            var map = {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'};
            return s.replace(/[&<>"']/g, function(m) { return map[m]; });
        };
        var getImpactColor = WallyMonitor.Utils.getImpactColor;

        // Previne múltiplas análises simultâneas
        if (WallyMonitor.Editor.isAnalyzing) {
            WallyMonitor.Utils.showNotification('Uma análise já está em andamento. Por favor, aguarde.', 'warning');
            return;
        }
        
        WallyMonitor.Editor.isAnalyzing = true;
        const $resultsContainer = $('#wally-editor-results');
        $resultsContainer.html('<p>🔄 Preparando análise...</p>');

        var report; // Declared at function scope for access after inner try/finally

        try {
            // ── 0) Auto-save para garantir que alterações recentes estejam na página ──
            try {
                if (wp && wp.data && wp.data.select && wp.data.dispatch && wp.data.select('core/editor')) {
                    var isDirty = wp.data.select('core/editor').isEditedPostDirty();
                    if (isDirty) {
                        $resultsContainer.html('<p>🔄 Salvando alterações antes de analisar...</p>');
                        console.log('[Wally Editor] Post tem alterações não salvas, salvando...');
                        await wp.data.dispatch('core/editor').savePost();
                        // Aguarda a persistência do save
                        await new Promise(function(r) { setTimeout(r, 1500); });
                        console.log('[Wally Editor] ✓ Post salvo com sucesso');
                    }
                }
            } catch (saveErr) {
                console.warn('[Wally Editor] Auto-save falhou (continuando com versão publicada):', saveErr.message);
            }

            $resultsContainer.html('<p>🔄 Buscando página renderizada...</p>');

            // ── 1) Obtém o permalink da página/post atual ──
            var permalink = '';
            
            // Gutenberg: getPermalink()
            try {
                if (wp && wp.data && wp.data.select && wp.data.select('core/editor')) {
                    permalink = wp.data.select('core/editor').getPermalink() || '';
                    console.log('[Wally Editor] Gutenberg getPermalink():', permalink);
                }
            } catch (wpErr) {
                console.warn('[Wally Editor] Erro ao acessar wp.data:', wpErr.message);
            }
            
            // Fallback: Classic Editor
            if (!permalink) {
                var $sampleLink = $('#sample-permalink a');
                if ($sampleLink.length) {
                    permalink = $sampleLink.attr('href') || '';
                    console.log('[Wally Editor] Classic Editor permalink:', permalink);
                }
            }
            
            // Fallback: monta URL a partir do post ID
            if (!permalink && wallyData.postId) {
                permalink = wallyData.siteUrl + '/?p=' + wallyData.postId;
                console.log('[Wally Editor] Fallback postId URL:', permalink);
            }
            
            // Fallback: tenta pegar a URL do slug/link do Gutenberg
            if (!permalink) {
                try {
                    var postLink = wp.data.select('core/editor').getEditedPostAttribute('link');
                    if (postLink) {
                        permalink = postLink;
                        console.log('[Wally Editor] Gutenberg post link attribute:', permalink);
                    }
                } catch (e) { /* ignorar */ }
            }

            if (!permalink) {
                $resultsContainer.html('<p style="color:#856404;background:#fff3cd;padding:10px;border-radius:4px;">⚠ Não foi possível determinar a URL desta página. Salve/publique primeiro.</p>');
                WallyMonitor.Editor.isAnalyzing = false;
                return;
            }

            console.log('[Wally Editor] ▶ Analisando página completa:', permalink);
            $resultsContainer.html('<p>🔄 Buscando HTML da página: <code style="font-size:11px;">' + escapeHtml(permalink) + '</code></p>');

            // ── 2) Busca HTML completo da página renderizada ──
            // Usa mesma cadeia de fallbacks do site scanner: AJAX proxy → fetch
            var fullHtml = '';
            var fetchMethod = '';
            
            // Tenta AJAX proxy (PHP wp_remote_get)
            try {
                console.log('[Wally Editor] Tentando AJAX proxy (wally_analyze_url)...');
                var ajaxResponse = await $.post(wallyData.ajax_url, {
                    action: 'wally_analyze_url',
                    nonce: wallyData.nonce,
                    url: permalink
                });
                if (ajaxResponse.success && ajaxResponse.data && ajaxResponse.data.html) {
                    fullHtml = ajaxResponse.data.html;
                    fetchMethod = 'AJAX proxy';
                    console.log('[Wally Editor] ✓ AJAX proxy OK —', fullHtml.length, 'chars');
                } else {
                    throw new Error(ajaxResponse.data || 'AJAX retornou vazio');
                }
            } catch (ajaxErr) {
                console.warn('[Wally Editor] ✗ AJAX proxy falhou:', ajaxErr.message);
            }
            
            // Fallback: fetch direto do browser (mesma origem)
            if (!fullHtml) {
                try {
                    console.log('[Wally Editor] Tentando fetch()...');
                    var resp = await fetch(permalink, { credentials: 'same-origin' });
                    if (!resp.ok) throw new Error('HTTP ' + resp.status);
                    fullHtml = await resp.text();
                    fetchMethod = 'fetch';
                    console.log('[Wally Editor] ✓ fetch OK —', fullHtml.length, 'chars');
                } catch (fetchErr) {
                    console.error('[Wally Editor] ✗ fetch também falhou:', fetchErr.message);
                    throw new Error('Não foi possível buscar a página. AJAX e fetch falharam. Verifique se a página está publicada.');
                }
            }

            // Valida que temos HTML real (não uma página de login ou erro)
            if (!fullHtml || fullHtml.trim().length < 100) {
                $resultsContainer.html('<p style="color:#856404;background:#fff3cd;padding:10px;border-radius:4px;">⚠ A página retornou conteúdo muito curto (' + fullHtml.length + ' chars). Publique a página primeiro.</p>');
                WallyMonitor.Editor.isAnalyzing = false;
                return;
            }
            
            // Verifica se parece HTML válido (não uma página de erro JSON/texto)
            if (!/<html/i.test(fullHtml) && !/<body/i.test(fullHtml) && !/<head/i.test(fullHtml)) {
                console.warn('[Wally Editor] HTML recebido não parece uma página válida:', fullHtml.substring(0, 200));
                $resultsContainer.html('<p style="color:#856404;background:#fff3cd;padding:10px;border-radius:4px;">⚠ O conteúdo recebido não parece ser uma página HTML válida. Verifique se a página está publicada.</p>');
                WallyMonitor.Editor.isAnalyzing = false;
                return;
            }

            console.log('[Wally Editor] HTML válido recebido via ' + fetchMethod + ' (' + fullHtml.length + ' chars)');
            $resultsContainer.html('<p>🔄 Analisando acessibilidade da página completa... (' + Math.round(fullHtml.length/1024) + ' KB)</p>');

            // ── 3) Injeta HTML no div de análise (mesmo método do site scanner) ──
            var langMatch = fullHtml.match(/<html[^>]*lang=["']([^"']+)["']/i);
            var docLang = langMatch ? langMatch[1] : (document.documentElement.lang || 'pt-BR');
            var analysisContainer = null;
            var styleElements = [];
            var savedBodyClasses = document.body.className;

            try {
                analysisContainer = document.createElement('div');
                analysisContainer.id = 'wally-editor-scan-container';
                analysisContainer.setAttribute('lang', docLang);
                analysisContainer.style.cssText = 'position:fixed;top:-9999px;left:-9999px;width:1024px;height:768px;overflow:auto;pointer-events:none;z-index:-1;opacity:0.01;';

                // ── Extrai e injeta estilos da página ──
                var styleContainer = document.createDocumentFragment();
                var headMatch = fullHtml.match(/<head[^>]*>([\s\S]*?)<\/head>/i);
                if (headMatch) {
                    var headHtml = headMatch[1];
                    var styleRegex = /<style[^>]*>([\s\S]*?)<\/style>/gi;
                    var sm;
                    while ((sm = styleRegex.exec(headHtml)) !== null) {
                        var styleEl = document.createElement('style');
                        styleEl.setAttribute('data-wally-editor-scan', 'true');
                        styleEl.textContent = sm[1];
                        styleContainer.appendChild(styleEl);
                        styleElements.push(styleEl);
                    }
                    var linkRegex = /<link[^>]*rel=["']stylesheet["'][^>]*href=["']([^"']+)["'][^>]*>/gi;
                    var lm;
                    while ((lm = linkRegex.exec(headHtml)) !== null) {
                        var linkEl = document.createElement('link');
                        linkEl.rel = 'stylesheet';
                        linkEl.setAttribute('data-wally-editor-scan', 'true');
                        linkEl.href = lm[1];
                        styleContainer.appendChild(linkEl);
                        styleElements.push(linkEl);
                    }
                    document.head.appendChild(styleContainer);
                    console.log('[Wally Editor] Estilos injetados:', styleElements.length);
                }

                // ── Extrai body completo (sem admin chrome/scripts) ──
                var tempDiv = document.createElement('div');
                var bodyMatch = fullHtml.match(/<body[^>]*>([\s\S]*)<\/body>/i);
                tempDiv.innerHTML = bodyMatch ? bodyMatch[1] : fullHtml;

                ['script', 'noscript', '#wpadminbar', '.skip-link'].forEach(function(sel) {
                    try {
                        var els = tempDiv.querySelectorAll(sel);
                        for (var i = 0; i < els.length; i++) { els[i].remove(); }
                    } catch (e) { /* ignorar */ }
                });

                // ── Neutraliza landmarks de documento que causam falso positivo ──
                // A página do admin (post.php) já possui <main>, <header>, <footer>.
                // Injetar o conteúdo da página escaneada com esses mesmos elementos
                // faz o axe-core reportar "landmark-no-duplicate-main" etc.
                // Convertemos para <div> preservando atributos e conteúdo.
                ['main', 'header', 'footer'].forEach(function(tag) {
                    var landmarks = tempDiv.querySelectorAll(tag);
                    for (var i = 0; i < landmarks.length; i++) {
                        var el = landmarks[i];
                        var div = document.createElement('div');
                        div.setAttribute('data-wally-original-tag', tag);
                        for (var j = 0; j < el.attributes.length; j++) {
                            var attr = el.attributes[j];
                            div.setAttribute(attr.name, attr.value);
                        }
                        while (el.firstChild) {
                            div.appendChild(el.firstChild);
                        }
                        el.parentNode.replaceChild(div, el);
                    }
                    if (landmarks.length > 0) {
                        console.log('[Wally Editor] Neutralizados', landmarks.length, '<' + tag + '> para evitar falso positivo');
                    }
                });

                analysisContainer.innerHTML = tempDiv.innerHTML;
                console.log('[Wally Editor] Container criado com', analysisContainer.children.length, 'filhos diretos,', analysisContainer.querySelectorAll('*').length, 'elementos total');

                // ── Classes do body para cascade CSS ──
                var bodyClassMatch = fullHtml.match(/<body[^>]*class=["']([^"']+)["']/i);
                if (bodyClassMatch) {
                    bodyClassMatch[1].split(/\s+/).forEach(function(c) {
                        if (c) { document.body.classList.add(c); }
                    });
                }

                document.body.appendChild(analysisContainer);

                // Aguarda stylesheets carregarem
                var linkStylesheets = styleElements.filter(function(el) { return el.tagName === 'LINK'; });
                if (linkStylesheets.length > 0) {
                    await Promise.race([
                        Promise.all(linkStylesheets.map(function(link) {
                            return new Promise(function(resolve) {
                                if (link.sheet) { resolve(); return; }
                                link.onload = resolve;
                                link.onerror = resolve;
                            });
                        })),
                        new Promise(function(r) { setTimeout(r, 3000); })
                    ]);
                }
                await new Promise(function(r) { setTimeout(r, 200); });

                // ── 4) Roda análise (respeita modo selecionado no toggle do meta box) ──
                var $activeToggle = $('.wally-meta-mode-btn.active');
                var analysisMode = ($activeToggle.length ? $activeToggle.data('mode') : null) || wallyData.analysisMode || 'wcag';
                console.log('[Wally Editor] Rodando análise no modo:', analysisMode);
                var analysisResult = await WallyMonitor.AnalysisModes.runAnalysis(analysisContainer, analysisMode);
                console.log('[Wally Editor] Análise retornou', analysisResult.violations.length, 'violações brutas');

                // Normaliza selectors removendo prefixo do container
                var containerPrefix = '#wally-editor-scan-container > ';
                analysisResult.violations.forEach(function(v) {
                    if (v.nodes) {
                        v.nodes.forEach(function(n) {
                            n.pageUrl = permalink;
                            if (n.target && Array.isArray(n.target)) {
                                n.target = n.target.map(function(t) {
                                    return typeof t === 'string' ? t.replace(containerPrefix, '') : t;
                                });
                            }
                        });
                    }
                });

                report = WallyMonitor.Report.processAxeResults(analysisResult.violations, analysisContainer);
                report.summary.analysisMode = analysisResult.mode;
                report.summary.modeLabel    = analysisResult.label;
                report.summary.engines      = analysisResult.engines;
                report.summary.pageUrl      = permalink;
                console.log('[Wally Editor] ✓ Relatório processado:', report.summary.totalProblems, 'problemas,', report.violations.length, 'regras violadas, score:', report.summary.score);
            } finally {
                // Restaura classes originais do body
                document.body.className = savedBodyClasses;
                if (analysisContainer && analysisContainer.parentNode) {
                    analysisContainer.parentNode.removeChild(analysisContainer);
                }
                // Remove estilos injetados
                styleElements.forEach(function(el) {
                    if (el.parentNode) { el.parentNode.removeChild(el); }
                });
            }
            
            // Salva o relatório no histórico para que o meta box SEO possa exibi-lo
            WallyMonitor.Editor.saveEditorReport(report);
            
            // ── 5) Exibe resultados ──
            var modeLabel = (report.summary.modeLabel || analysisMode).toUpperCase();
            
            if (report.summary.totalProblems === 0) {
                $resultsContainer.empty()[0].innerHTML = `
                    <div style="padding: 15px; background: #d4edda; border: 1px solid #c3e6cb; border-radius: 4px; color: #155724;">
                        <strong>✓ Nenhum problema encontrado!</strong>
                        <p style="margin: 5px 0 0 0; font-size: 13px;">Esta página está em conformidade com ${escapeHtml(modeLabel)}.</p>
                        <p style="margin: 5px 0 0 0; font-size: 11px; color: #666;">
                            📄 <code style="font-size:10px;">${escapeHtml(permalink)}</code><br>
                            📋 Modo: ${escapeHtml(modeLabel)} | HTML: ${Math.round(fullHtml.length/1024)} KB
                        </p>
                    </div>
                `;
            } else {
                let html = `
                    <div style="padding: 12px; background: ${report.summary.score >= 70 ? '#fff3cd' : '#f8d7da'}; border: 2px solid ${report.summary.score >= 70 ? '#ffc107' : '#dc3545'}; border-radius: 6px; margin-bottom: 12px;">
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                            <div>
                                <strong style="font-size: 15px; color: #333;">${report.summary.totalProblems} problema(s) encontrado(s)</strong><br>
                                <small style="color: #666;">Score: <strong>${report.summary.score}/100</strong></small>
                            </div>
                            <div style="font-size: 11px; color: #666; text-align: right;">
                                <div>${report.violations.length} tipo(s) de violação</div>
                                <div style="margin-top: 2px;">👇 Clique para ver detalhes</div>
                            </div>
                        </div>
                        <div style="margin-top: 6px; font-size: 10px; color: #888; border-top: 1px solid rgba(0,0,0,0.1); padding-top: 4px;">
                            📋 ${escapeHtml(modeLabel)} | 📄 ${escapeHtml(permalink.replace(/^https?:\/\/[^/]+/, ''))}
                        </div>
                    </div>
                `;
                
                // Lista TODAS as violações EXPANDIDAS por padrão
                report.violations.forEach((v, index) => {
                    const bgColor = index % 2 === 0 ? '#f9f9f9' : '#ffffff';
                    html += `
                        <div class="wally-violation-editor" style="margin-bottom: 10px; border: 1px solid #ddd; border-radius: 4px; overflow: hidden;">
                            <div class="wally-violation-header-editor" style="background: ${bgColor}; padding: 10px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-left: 4px solid ${getImpactColor(v.impact)};">
                                <div style="flex: 1;">
                                    <strong style="font-size: 13px; color: #333;">${escapeHtml(String(v.help || ''))}</strong>
                                    <div style="font-size: 11px; color: #666; margin-top: 3px;">
                                        <span style="background: ${getImpactColor(v.impact)}; color: white; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; font-size: 10px; font-weight: bold;">${escapeHtml(v.impact)}</span>
                                        <span style="margin-left: 8px;">${v.nodes.length} elemento(s) afetado(s)</span>
                                    </div>
                                </div>
                                <span class="wally-toggle-icon" style="font-size: 20px; color: #666; transition: transform 0.2s;">▼</span>
                            </div>
                            <div class="wally-violation-body-editor" style="padding: 12px; background: white; border-top: 1px solid #eee;">
                                <p style="margin: 0 0 8px 0; font-size: 12px; color: #555;">${escapeHtml(String(v.description || ''))}</p>
                                <a href="${escapeHtml(v.helpUrl || '#')}" target="_blank" rel="noopener" style="font-size: 11px; color: #0073aa;">📖 Saiba mais sobre esta regra WCAG</a>
                                <div style="margin-top: 10px; font-size: 11px;">
                                    <strong>Elementos afetados:</strong>
                                    <ul style="margin: 5px 0 0 0; padding-left: 20px; color: #666;">
                                        ${v.nodes.slice(0, 5).map((node, nodeIndex) => `
                                            <li style="margin-bottom: 5px;">
                                                <code style="background: #f0f0f0; padding: 2px 4px; border-radius: 2px; font-size: 10px; word-break: break-all;">${escapeHtml(node.target[0])}</code>
                                            </li>
                                        `).join('')}
                                        ${v.nodes.length > 5 ? `<li style="color: #999; font-style: italic;">... e mais ${v.nodes.length - 5} elemento(s)</li>` : ''}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    `;
                });
                
                // Usa innerHTML nativo em vez de jQuery .html() para evitar que
                // jQuery interprete tags HTML escapadas (ex: &lt;script&gt;) via
                // buildFragment/appendChild, o que causa SyntaxError.
                $resultsContainer.empty()[0].innerHTML = html;
                
                // Adiciona funcionalidade de colapsar/expandir (mouse + teclado)
                $('.wally-violation-header-editor')
                    .attr({ tabindex: '0', role: 'button', 'aria-expanded': 'false' })
                    .on('click keydown', function(e) {
                        // Para keydown, aceita apenas Enter e Espaço
                        if (e.type === 'keydown' && e.key !== 'Enter' && e.key !== ' ') return;
                        if (e.type === 'keydown') e.preventDefault();

                        const $body = $(this).next('.wally-violation-body-editor');
                        const $icon = $(this).find('.wally-toggle-icon');
                        $body.slideToggle(200);
                        const expanded = $body.is(':visible');
                        $(this).attr('aria-expanded', String(expanded));
                        $icon.css('transform', expanded ? 'rotate(0deg)' : 'rotate(-90deg)');
                    });
            }

        } catch (error) {
            console.error('[Wally Editor] ✗ Erro na análise:', error);
            $resultsContainer.empty()[0].innerHTML = `
                <div style="padding: 10px; background: #f8d7da; border: 1px solid #dc3545; border-radius: 4px; color: #721c24;">
                    <strong>⚠ Erro ao analisar</strong>
                    <p style="margin: 5px 0 0 0; font-size: 12px;">
                        ${escapeHtml(error.message || 'Erro desconhecido')}
                    </p>
                    <p style="margin: 5px 0 0 0; font-size: 11px; color: #666;">
                        Verifique o console (F12) para mais detalhes.
                    </p>
                </div>
            `;
        } finally {
            WallyMonitor.Editor.isAnalyzing = false;
        }
    };

    /**
     * Salva o relatório do editor e atualiza o meta box SEO
     * @param {Object} report - Relatório processado
     */
    WallyMonitor.Editor.saveEditorReport = function(report) {
        // Obtém o post ID atual
        let postId = null;
        
        if (wp.data && wp.data.select && wp.data.select('core/editor')) {
            postId = wp.data.select('core/editor').getCurrentPostId();
        } else {
            // Classic Editor - pega do campo hidden
            postId = $('#post_ID').val();
        }
        
        if (!postId) {
            console.error('Post ID não encontrado, não é possível salvar relatório');
            return;
        }
        
        // Salva no banco de dados via AJAX usando endpoint específico do editor
        $.post(wallyData.ajax_url, {
            action: 'wally_save_editor_report',
            nonce: wallyData.nonce,
            post_id: postId,
            report: JSON.stringify(report)
        }, function(response) {
            if (response.success) {
                // Atualiza o meta box SEO após salvar
                WallyMonitor.Editor.updateSeoMetaBox();
            } else {
                console.error('Erro ao salvar relatório:', response.data);
            }
        });
    };

    /**
     * Atualiza o meta box de impacto SEO via AJAX sem recarregar a página
     */
    WallyMonitor.Editor.updateSeoMetaBox = function() {
        const $seoMetaBox = $('#wally_seo_insights .inside');
        
        if (!$seoMetaBox.length) {
            return;
        }
        
        // Pega o post ID atual
        const postId = $('#post_ID').val() || wp.data.select('core/editor').getCurrentPostId();
        if (!postId) {
            console.error('Post ID não encontrado');
            return;
        }
        
        // Mostra loading
        $seoMetaBox.html('<p style="text-align: center; padding: 20px;"><span class="spinner is-active" style="float: none; margin: 0;"></span><br><small>Atualizando dados...</small></p>');
        
        // Aguarda o relatório ser salvo antes de buscar dados atualizados.
        // O delay cobre a latência do AJAX save_editor_report.
        var SEO_METABOX_REFRESH_DELAY = 800;
        setTimeout(function() {
            jQuery.ajax({
                url: ajaxurl,
                type: 'POST',
                data: {
                    action: 'wally_refresh_seo_metabox',
                    post_id: postId,
                    nonce: wallyData.nonce
                },
                success: function(response) {
                    if (response.success) {
                        $seoMetaBox.html(response.data.html);
                    } else {
                        $seoMetaBox.html('<p style="color: #dc3232;">❌ Erro ao atualizar: ' + (response.data || 'Erro desconhecido') + '</p>');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Erro ao atualizar meta box SEO:', error);
                    $seoMetaBox.html('<p style="color: #dc3232;">❌ Erro ao atualizar dados. Tente novamente.</p>');
                }
            });
        }, 800);
    };

    /**
     * Localiza e destaca um elemento no editor do Gutenberg
     * @param {string} selector - Seletor CSS do elemento
     */
    WallyMonitor.Editor.locateElementInEditor = function(selector) {
        try {
            // Tenta encontrar o elemento no iframe de visualização
            const $iframe = $('#wally-editor-preview-frame');
            
            if (!$iframe.length || !$iframe[0].contentDocument) {
                WallyMonitor.Utils.showNotification('Não foi possível localizar o elemento. O preview não está disponível.', 'warning');
                return;
            }

            const doc = $iframe[0].contentDocument;
            const element = doc.querySelector(selector);

            if (!element) {
                WallyMonitor.Utils.showNotification('Elemento não encontrado no preview. Pode ter sido removido ou modificado.', 'warning');
                return;
            }

            // Remove destaques anteriores
            const previousHighlights = doc.querySelectorAll('.wally-highlight-element');
            previousHighlights.forEach(el => {
                el.classList.remove('wally-highlight-element');
                el.style.outline = '';
                el.style.outlineOffset = '';
                el.style.backgroundColor = '';
            });

            // Adiciona destaque ao elemento
            element.classList.add('wally-highlight-element');
            element.style.outline = '3px solid #ff0000';
            element.style.outlineOffset = '2px';
            element.style.backgroundColor = 'rgba(255, 0, 0, 0.1)';

            // Rola até o elemento no iframe
            element.scrollIntoView({ behavior: 'smooth', block: 'center' });

            // Adiciona animação de pulso
            let pulseCount = 0;
            const pulseInterval = setInterval(() => {
                element.style.outline = pulseCount % 2 === 0 ? '3px solid #ff0000' : '3px solid #ff6600';
                pulseCount++;
                if (pulseCount > 6) {
                    clearInterval(pulseInterval);
                    element.style.outline = '3px solid #ff0000';
                }
            }, 300);

            // Remove destaque após 8 segundos
            setTimeout(() => {
                element.classList.remove('wally-highlight-element');
                element.style.outline = '';
                element.style.outlineOffset = '';
                element.style.backgroundColor = '';
            }, 8000);

            // Feedback visual no botão
            const $button = $(`.wally-locate-element[data-selector="${selector.replace(/"/g, '\\"')}"]`);
            const originalText = $button.text();
            $button.text('✓ Localizado!').css('background', '#28a745');
            setTimeout(() => {
                $button.text(originalText).css('background', '#0073aa');
            }, 2000);

        } catch (error) {
            console.error('Erro ao localizar elemento:', error);
            WallyMonitor.Utils.showNotification('Erro ao localizar elemento: ' + error.message, 'error');
        }
    };

})(jQuery);
