visual_trainer.js

(function() {
    // Create Button
    const btn = document.createElement('div');
    btn.className = 'geocoach-trainer-btn';
    btn.innerHTML = `
        <svg viewBox="0 0 24 24">
            <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
        </svg>
    `;
    document.body.appendChild(btn);

    // Create Panel
    const panel = document.createElement('div');
    panel.className = 'geocoach-trainer-panel';
    panel.innerHTML = `
        <div class="geocoach-panel-header">
            <h3>🤖 GeoCoach Trainer</h3>
            <div style="display: flex; gap: 8px;">
                <button class="geocoach-reset-btn" title="Reset">↻</button>
                <button class="geocoach-close-btn" title="Close">×</button>
            </div>
        </div>
        <div class="geocoach-panel-content">
            <div class="geocoach-loading" style="display:none;">
                <div class="geocoach-spinner"></div>
                Analyzing view...
            </div>
            <div id="geocoach-results"></div>
        </div>
    `;
    document.body.appendChild(panel);

    const closeBtn = panel.querySelector('.geocoach-close-btn');
    const resetBtn = panel.querySelector('.geocoach-reset-btn');
    const content = panel.querySelector('#geocoach-results');
    const loading = panel.querySelector('.geocoach-loading');
    const header = panel.querySelector('.geocoach-panel-header');

    // Drag Functionality
    let isDragging = false;
    let dragOffsetX = 0;
    let dragOffsetY = 0;

    header.addEventListener('mousedown', (e) => {
        isDragging = true;
        // Calculate offset from the top-left of the panel
        const rect = panel.getBoundingClientRect();
        dragOffsetX = e.clientX - rect.left;
        dragOffsetY = e.clientY - rect.top;
        
        // Disable transitions during drag for responsiveness
        panel.style.transition = 'none';
        
        // Ensure we switch to explicit left/top positioning if not already
        // This prevents fighting with bottom/right CSS
        panel.style.bottom = 'auto';
        panel.style.right = 'auto';
        panel.style.left = rect.left + 'px';
        panel.style.top = rect.top + 'px';
    });

    document.addEventListener('mousemove', (e) => {
        if (!isDragging) return;
        e.preventDefault(); // Prevent selection
        
        const newLeft = e.clientX - dragOffsetX;
        const newTop = e.clientY - dragOffsetY;
        
        panel.style.left = newLeft + 'px';
        panel.style.top = newTop + 'px';
    });

    document.addEventListener('mouseup', () => {
        if (isDragging) {
            isDragging = false;
            // Re-enable transitions if you had any (optional)
            // panel.style.transition = ''; 
        }
    });

    // Toggle Panel
    function togglePanel(show) {
        if (show) {
            panel.classList.add('visible');
        } else {
            panel.classList.remove('visible');
        }
    }

    // Fix: Use onclick directly to ensure event fires or add event listener correctly
    // Sometimes elements are recreated or events lost if not careful.
    closeBtn.onclick = (e) => {
        e.stopPropagation();
        togglePanel(false);
    };

    resetBtn.onclick = (e) => {
        e.stopPropagation();
        content.innerHTML = '';
        // Optional: Close panel or keep it open empty?
        // User asked for reset, likely just clearing results.
        // Let's keep it open but empty.
        content.innerHTML = `<div class="geocoach-clue-item">
            <div class="geocoach-clue-text">Trainer reset. Click the robot button to analyze again.</div>
        </div>`;
    };

    // Button Click Handler
    btn.addEventListener('click', () => {
        togglePanel(true);
        content.innerHTML = '';
        loading.style.display = 'block';

        // Send message to background to capture screenshot and analyze
        chrome.runtime.sendMessage({ type: "ANALYZE_SCREENSHOT" }, (response) => {
            loading.style.display = 'none';
            
            if (response && response.success) {
                renderResults(response.data);
            } else {
                content.innerHTML = `<div class="geocoach-clue-item geocoach-confidence-low">
                    <div class="geocoach-clue-text">Error: ${response ? response.error : 'Unknown error'}</div>
                </div>`;
            }
        });
    });

    async function renderResults(data) {
        if (!data) {
            content.innerHTML = `<div class="geocoach-clue-item">
                <div class="geocoach-clue-text">No data received.</div>
            </div>`;
            return;
        }

        // Load Preferences
        const prefs = await chrome.storage.local.get(['showKeyHint', 'showCoachAnalysis', 'showVisualClues']);
        const showKeyHint = prefs.showKeyHint !== undefined ? prefs.showKeyHint : true;
        const showCoachAnalysis = prefs.showCoachAnalysis !== undefined ? prefs.showCoachAnalysis : true;
        const showVisualClues = prefs.showVisualClues !== undefined ? prefs.showVisualClues : true;

        // 0. Display Key Hint (Top Priority)
        if (showKeyHint && data.key_hint) {
            const hintDiv = document.createElement('div');
            hintDiv.className = 'geocoach-clue-item';
            hintDiv.style.borderLeft = '3px solid #FFD700'; // Gold for Key Hint
            hintDiv.style.background = 'rgba(255, 215, 0, 0.1)';
            hintDiv.innerHTML = `
                <div class="geocoach-clue-category" style="color: #FFD700;">🔑 KEY HINT</div>
                <div class="geocoach-clue-text" style="font-weight: 500;">${data.key_hint}</div>
            `;
            content.appendChild(hintDiv);
        }

        // 1. Display Reasoning (The "Coach" part)
        if (showCoachAnalysis && data.reasoning) {
            const reasoningDiv = document.createElement('div');
            reasoningDiv.className = 'geocoach-clue-item';
            reasoningDiv.style.borderLeft = '3px solid #2196F3'; // Blue for info
            reasoningDiv.innerHTML = `
                <div class="geocoach-clue-category">💡 COACH ANALYSIS</div>
                <div class="geocoach-clue-text" style="white-space: pre-wrap;">${data.reasoning}</div>
            `;
            content.appendChild(reasoningDiv);
        }

        // 2. Display Visual Clues
        if (showVisualClues && data.clues && data.clues.length > 0) {
            data.clues.forEach(clue => {
                const item = document.createElement('div');
                item.className = `geocoach-clue-item geocoach-confidence-${clue.confidence ? clue.confidence.toLowerCase() : 'medium'}`;
                item.innerHTML = `
                    <div class="geocoach-clue-category">${clue.category}</div>
                    <div class="geocoach-clue-text">${clue.description}</div>
                `;
                content.appendChild(item);
            });
        }

        // 3. Hidden Answer Section
        if (data.country) {
            const answerContainer = document.createElement('div');
            answerContainer.style.marginTop = '15px';
            answerContainer.style.textAlign = 'center';
            answerContainer.style.borderTop = '1px solid #333';
            answerContainer.style.paddingTop = '10px';
            
            const revealBtn = document.createElement('button');
            revealBtn.textContent = '🕵️ Reveal Answer';
            revealBtn.style.cssText = 'padding: 8px 16px; background: #2a2a2a; color: #ddd; border: 1px solid #444; border-radius: 4px; cursor: pointer; font-size: 14px; transition: all 0.2s;';
            revealBtn.onmouseover = () => revealBtn.style.background = '#3a3a3a';
            revealBtn.onmouseout = () => revealBtn.style.background = '#2a2a2a';
            
            const answerText = document.createElement('div');
            answerText.style.display = 'none';
            answerText.style.marginTop = '8px';
            answerText.style.fontWeight = 'bold';
            answerText.style.fontSize = '1.2em';
            answerText.style.color = '#4CAF50';
            answerText.style.textAlign = 'left';
            answerText.style.background = 'rgba(0,0,0,0.3)';
            answerText.style.padding = '10px';
            answerText.style.borderRadius = '8px';
            
            let answerHTML = `<div style="font-size: 1.4em; margin-bottom: 8px;">📍 ${data.country}</div>`;
            if (data.city && data.city !== 'Unknown') {
                answerHTML += `<div style="font-size: 1.1em; color: #e0e0e0; margin-top: 4px;">🏙️ ${data.city}</div>`;
            }
            if (data.region) {
                answerHTML += `<div style="font-size: 1.0em; color: #bbb; margin-top: 4px; font-style: italic;">🧭 Position: ${data.region}</div>`;
            }
            answerText.innerHTML = answerHTML;
            
            revealBtn.onclick = () => {
                revealBtn.style.display = 'none';
                answerText.style.display = 'block';
                // Scroll to bottom
                setTimeout(() => {
                    content.scrollTop = content.scrollHeight;
                }, 10);
            };
            
            answerContainer.appendChild(revealBtn);
            answerContainer.appendChild(answerText);
            content.appendChild(answerContainer);
        } else if (!data.reasoning && (!data.clues || data.clues.length === 0)) {
             content.innerHTML = `<div class="geocoach-clue-item">
                <div class="geocoach-clue-text">No specific clues found.</div>
            </div>`;
        }
    }

})();