sidepanel.js

let locations = [];

function log(msg) {
    const logs = document.getElementById('logs');
    const div = document.createElement('div');
    div.textContent = `[${new Date().toLocaleTimeString()}] ${msg}`;
    logs.insertBefore(div, logs.firstChild);
}

function updateUI() {
    const container = document.getElementById('locations');
    container.innerHTML = '';
    
    locations.forEach(loc => {
        const div = document.createElement('div');
        div.className = 'location';
        
        const span = document.createElement('span');
        span.textContent = `${loc.lat.toFixed(5)}, ${loc.lng.toFixed(5)}`;
        
        const btn = document.createElement('button');
        btn.textContent = "Maps";
        btn.onclick = () => window.open(`https://www.google.com/maps?q=${loc.lat},${loc.lng}`, '_blank');
        
        div.appendChild(span);
        div.appendChild(btn);
        container.appendChild(div);
    });
}

// Settings Logic
const settingsPanel = document.getElementById('settingsPanel');
const settingsToggleBtn = document.getElementById('settingsToggleBtn');
const apiKeyInput = document.getElementById('apiKey');
const apiProviderSelect = document.getElementById('apiProvider');
const modelNameInput = document.getElementById('modelName');
const modelNameContainer = document.getElementById('modelNameContainer');
const saveSettingsBtn = document.getElementById('saveSettingsBtn');
const savePreferencesBtn = document.getElementById('savePreferencesBtn');
const coachLanguageSelect = document.getElementById('coachLanguage');
const showKeyHintCheckbox = document.getElementById('showKeyHint');
const showCoachAnalysisCheckbox = document.getElementById('showCoachAnalysis');
const showVisualCluesCheckbox = document.getElementById('showVisualClues');
const autoClearCheckbox = document.getElementById('autoClear');

apiProviderSelect.addEventListener('change', () => {
    if (apiProviderSelect.value === 'openrouter' || apiProviderSelect.value === 'groq') {
        modelNameContainer.style.display = 'block';
        
        // Auto-set recommended model if empty or switching provider
        if (apiProviderSelect.value === 'groq') {
             modelNameInput.value = 'llama-3.2-11b-vision-preview';
             modelNameInput.placeholder = 'llama-3.2-11b-vision-preview';
        } else if (apiProviderSelect.value === 'openrouter') {
             if (modelNameInput.value.includes('groq')) { // clear if switching from groq defaults
                 modelNameInput.value = 'google/gemini-2.0-flash-lite-preview-02-05:free';
             }
             modelNameInput.placeholder = 'google/gemini-2.0-flash-lite-preview-02-05:free';
        }

    } else {
        modelNameContainer.style.display = 'none';
    }
});

settingsToggleBtn.addEventListener('click', () => {
    if (settingsPanel.style.display === 'none') {
        settingsPanel.style.display = 'block';
        // Load settings
        chrome.storage.local.get([
            'apiKey', 'apiProvider', 'modelName', 
            'coachLanguage', 'showKeyHint', 'showCoachAnalysis', 'showVisualClues', 'autoClear'
        ], (result) => {
            if (result.apiKey) apiKeyInput.value = result.apiKey;
            if (result.apiProvider) {
                apiProviderSelect.value = result.apiProvider;
                if (result.apiProvider === 'openrouter' || result.apiProvider === 'groq') {
                    modelNameContainer.style.display = 'block';
                }
            }
            if (result.modelName) modelNameInput.value = result.modelName;
            
            // Load Preferences
            if (result.coachLanguage) coachLanguageSelect.value = result.coachLanguage;
            if (result.showKeyHint !== undefined) showKeyHintCheckbox.checked = result.showKeyHint;
            if (result.showCoachAnalysis !== undefined) showCoachAnalysisCheckbox.checked = result.showCoachAnalysis;
            if (result.showVisualClues !== undefined) showVisualCluesCheckbox.checked = result.showVisualClues;
            if (result.autoClear !== undefined) autoClearCheckbox.checked = result.autoClear;
        });
    } else {
        settingsPanel.style.display = 'none';
    }
});

saveSettingsBtn.addEventListener('click', () => {
    const apiKey = apiKeyInput.value.trim();
    const apiProvider = apiProviderSelect.value;
    const modelName = modelNameInput.value.trim();
    
    chrome.storage.local.set({ apiKey, apiProvider, modelName }, () => {
        log("API Settings saved.");
        settingsPanel.style.display = 'none';
    });
});

savePreferencesBtn.addEventListener('click', () => {
    const coachLanguage = coachLanguageSelect.value;
    const showKeyHint = showKeyHintCheckbox.checked;
    const showCoachAnalysis = showCoachAnalysisCheckbox.checked;
    const showVisualClues = showVisualCluesCheckbox.checked;
    const autoClear = autoClearCheckbox.checked;
    
    chrome.storage.local.set({ 
        coachLanguage, 
        showKeyHint, 
        showCoachAnalysis, 
        showVisualClues,
        autoClear
    }, () => {
        log("Coach Preferences saved.");
        settingsPanel.style.display = 'none';
    });
});


chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.type === "LOG") {
        log(`${message.payload.type}: ${message.payload.message}`);
    } else if (message.type === "LOCATIONS_FOUND") {
        const newLocs = message.payload;
        
        // Check autoClear setting
        chrome.storage.local.get(['autoClear'], (result) => {
            if (result.autoClear) {
                locations = [];
                // Also update UI immediately to reflect clear if needed, or just let the add logic handle it
            }
            
            let added = 0;
            newLocs.forEach(nl => {
                if (!locations.some(l => l.lat === nl.lat && l.lng === nl.lng)) {
                    locations.push(nl);
                    added++;
                }
            });
            
            if (result.autoClear || added > 0) {
                if (result.autoClear) log("Auto-cleared old locations.");
                if (added > 0) log(`Added ${added} new locations.`);
                updateUI();
            }
        });
    } else if (message.type === "MAP_DETECTED") {
        log("Map instance detected on page.");
    }
});

document.getElementById('clearBtn').addEventListener('click', () => {
    locations = [];
    updateUI();
    log("Cleared locations.");
});

document.getElementById('showPinsBtn').addEventListener('click', async () => {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    if (tab) {
        chrome.tabs.sendMessage(tab.id, {
            target: "INJECTED",
            type: "SHOW_PINS",
            payload: locations
        });
        log("Sent SHOW_PINS command.");
    }
});