sidepanel.js

// DSA Hints Coach - Main Application
// This file contains the main functionality for the DSA Hints Coach extension

class DSACoach {
    constructor() {
        this.config = new Config();
        this.apiService = null;
        this.currentHints = [];
        this.isLoading = false;
        this.init();
    }

    async init() {
        this.setupEventListeners();
        await this.config.init();
        this.apiService = new ApiService(this.config);
        await this.loadHistory();
        this.setupMessageListener();
        
        // Check if API key is needed
        if (!this.config.hasValidApiKey()) {
            this.showApiKeyPrompt();
        }
    }

    setupEventListeners() {
        const getHintBtn = document.getElementById('get-hint-btn');
        const clearBtn = document.getElementById('clear-btn');
        const problemTextarea = document.getElementById('problem-statement');

        if (getHintBtn) {
            getHintBtn.addEventListener('click', () => this.handleGetHint());
        }
        if (clearBtn) {
            clearBtn.addEventListener('click', () => this.handleClear());
        }
        if (problemTextarea) {
            problemTextarea.addEventListener('input', () => this.handleTextareaInput());
        }
    }

    setupMessageListener() {
        // Listen for messages from content script
        if (chrome.runtime && chrome.runtime.onMessage) {
            chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
                if (message.type === 'PROBLEM_DETECTED') {
                    this.handleProblemDetected(message.problem);
                    sendResponse({ success: true });
                }
            });
        }
    }

    showApiKeyPrompt() {
        // Remove existing API key section if present
        const existingSection = document.querySelector('.api-key-section');
        if (existingSection) {
            existingSection.remove();
        }

        const container = document.querySelector('.container');
        if (!container) return;

        const apiKeySection = document.createElement('div');
        apiKeySection.className = 'api-key-section';
        apiKeySection.innerHTML = `
            <div class="api-key-prompt">
                <h3>🔑 API Key Required</h3>
                <p>Please enter your Gemini API key to use this extension:</p>
                <input type="password" id="api-key-input" placeholder="Enter Gemini API Key" />
                <button id="save-api-key-btn" class="btn btn-primary">Save & Test API Key</button>
                <div id="api-key-status" class="api-key-status"></div>
                <p class="api-key-help">
                    <a href="https://makersuite.google.com/app/apikey" target="_blank">
                        Get your API key from Google AI Studio
                    </a>
                </p>
            </div>
        `;
        
        container.insertBefore(apiKeySection, container.firstChild);
        
        const saveBtn = document.getElementById('save-api-key-btn');
        if (saveBtn) {
            saveBtn.addEventListener('click', () => this.saveApiKey());
        }

        // Add enter key support
        const apiKeyInput = document.getElementById('api-key-input');
        if (apiKeyInput) {
            apiKeyInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    this.saveApiKey();
                }
            });
        }
    }

    async saveApiKey() {
        const apiKeyInput = document.getElementById('api-key-input');
        const saveBtn = document.getElementById('save-api-key-btn');
        const apiKey = apiKeyInput ? apiKeyInput.value.trim() : '';
        
        if (!apiKey) {
            this.showApiKeyStatus('Please enter a valid API key', 'error');
            return;
        }
        
        // Show loading state
        if (saveBtn) {
            saveBtn.disabled = true;
            saveBtn.textContent = 'Testing...';
        }
        this.showApiKeyStatus('Testing API key...', 'info');
        
        try {
            // Test the API key first
            const testResult = await this.apiService.testApiKey(apiKey);
            
            if (!testResult.valid) {
                this.showApiKeyStatus(`Invalid API key: ${testResult.error}`, 'error');
                if (saveBtn) {
                    saveBtn.disabled = false;
                    saveBtn.textContent = 'Save & Test API Key';
                }
                return;
            }
            
            // Save the API key
            const saved = await this.config.saveApiKey(apiKey);
            
            if (saved) {
                this.showApiKeyStatus('API key saved and tested successfully!', 'success');
                setTimeout(() => {
                    const section = document.querySelector('.api-key-section');
                    if (section) {
                        section.remove();
                    }
                    this.showNotification('API key configured successfully!', 'success');
                }, 1500);
            } else {
                this.showApiKeyStatus('Failed to save API key', 'error');
            }
        } catch (error) {
            console.error('Error saving API key:', error);
            this.showApiKeyStatus(`Error: ${error.message}`, 'error');
        } finally {
            if (saveBtn) {
                saveBtn.disabled = false;
                saveBtn.textContent = 'Save & Test API Key';
            }
        }
    }

    showApiKeyStatus(message, type) {
        const statusDiv = document.getElementById('api-key-status');
        if (statusDiv) {
            statusDiv.textContent = message;
            statusDiv.className = `api-key-status api-key-status-${type}`;
        }
    }

    async handleGetHint() {
        if (!this.config.hasValidApiKey()) {
            this.showNotification('Please set your API key first', 'error');
            this.showApiKeyPrompt();
            return;
        }

        const problemStatementElement = document.getElementById('problem-statement');
        const problemStatement = problemStatementElement ? problemStatementElement.value.trim() : '';
        
        if (!problemStatement) {
            this.showNotification('Please enter a problem statement', 'error');
            return;
        }

        if (this.isLoading) return;

        this.setLoadingState(true);
        
        try {
            const hints = await this.apiService.generateHints(problemStatement);
            this.displayHints(hints);
            await this.saveToHistory(problemStatement, hints);
        } catch (error) {
            console.error('Error generating hints:', error);
            
            // Handle specific error types
            if (error.message.includes('Invalid API key')) {
                this.showNotification('Invalid API key. Please check your settings.', 'error');
                this.showApiKeyPrompt();
            } else if (error.message.includes('Rate limit')) {
                this.showNotification('Rate limit exceeded. Please try again later.', 'error');
            } else if (error.message.includes('Network error')) {
                this.showNotification('Network error. Please check your internet connection.', 'error');
            } else {
                this.showNotification(`Failed to generate hints: ${error.message}`, 'error');
            }
        } finally {
            this.setLoadingState(false);
        }
    }

    displayHints(hints) {
        const hintsContainer = document.getElementById('hints-container');
        if (!hintsContainer) return;
        
        if (!hints || hints.length === 0) {
            hintsContainer.innerHTML = `
                <div class="no-hints">
                    <p>Unable to generate hints. Please try again.</p>
                </div>
            `;
            return;
        }

        const hintsHTML = hints.map(hint => `
            <div class="hint-item">
                <div class="hint-header">
                    <div class="hint-number hint-${hint.number}">${hint.number}</div>
                    <div class="hint-title">
                        ${this.getHintTitle(hint.number)}
                    </div>
                </div>
                <div class="hint-content">${hint.content}</div>
            </div>
        `).join('');

        hintsContainer.innerHTML = hintsHTML;
        this.currentHints = hints;
    }

    getHintTitle(hintNumber) {
        const titles = {
            1: 'General Direction',
            2: 'Data Structure/Algorithm',
            3: 'Optimization/Edge Cases'
        };
        return titles[hintNumber] || `Hint ${hintNumber}`;
    }

    async saveToHistory(problemStatement, hints) {
        try {
            const historyItem = {
                id: Date.now(),
                problem: problemStatement.substring(0, 100) + (problemStatement.length > 100 ? '...' : ''),
                hints: hints,
                timestamp: new Date().toISOString()
            };

            if (chrome.storage && chrome.storage.local) {
                const result = await chrome.storage.local.get(['queryHistory']);
                const history = result.queryHistory || [];
                
                // Add new item at the beginning
                history.unshift(historyItem);
                
                // Keep only last 10 items
                if (history.length > 10) {
                    history.splice(10);
                }
                
                await chrome.storage.local.set({ queryHistory: history });
                this.displayHistory(history);
            } else {
                // Fallback: store in memory
                if (!this.memoryHistory) this.memoryHistory = [];
                this.memoryHistory.unshift(historyItem);
                if (this.memoryHistory.length > 10) {
                    this.memoryHistory.splice(10);
                }
                this.displayHistory(this.memoryHistory);
            }
        } catch (error) {
            console.error('Error saving to history:', error);
        }
    }

    async loadHistory() {
        try {
            if (chrome.storage && chrome.storage.local) {
                const result = await chrome.storage.local.get(['queryHistory']);
                const history = result.queryHistory || [];
                this.displayHistory(history);
            } else if (this.memoryHistory) {
                this.displayHistory(this.memoryHistory);
            }
        } catch (error) {
            console.error('Error loading history:', error);
        }
    }

    displayHistory(history) {
        const historyContainer = document.getElementById('history-container');
        if (!historyContainer) return;
        
        if (history.length === 0) {
            historyContainer.innerHTML = '<p class="no-history">No queries yet</p>';
            return;
        }

        const historyHTML = history.map(item => `
            <div class="history-item" data-id="${item.id}">
                <div class="history-text">${item.problem}</div>
                <div class="history-timestamp">${this.formatTimestamp(item.timestamp)}</div>
            </div>
        `).join('');

        historyContainer.innerHTML = historyHTML;
        
        // Add click listeners to history items
        historyContainer.querySelectorAll('.history-item').forEach(item => {
            item.addEventListener('click', () => {
                this.loadHistoryItem(item.dataset.id);
            });
        });
    }

    async loadHistoryItem(id) {
        try {
            let history = [];
            if (chrome.storage && chrome.storage.local) {
                const result = await chrome.storage.local.get(['queryHistory']);
                history = result.queryHistory || [];
            } else if (this.memoryHistory) {
                history = this.memoryHistory;
            }
            
            const item = history.find(h => h.id === parseInt(id));
            
            if (item) {
                const problemElement = document.getElementById('problem-statement');
                if (problemElement) {
                    problemElement.value = item.problem;
                }
                this.displayHints(item.hints);
            }
        } catch (error) {
            console.error('Error loading history item:', error);
        }
    }

    formatTimestamp(timestamp) {
        const date = new Date(timestamp);
        const now = new Date();
        const diffMs = now - date;
        const diffMins = Math.floor(diffMs / 60000);
        const diffHours = Math.floor(diffMs / 3600000);
        const diffDays = Math.floor(diffMs / 86400000);

        if (diffMins < 1) return 'Just now';
        if (diffMins < 60) return `${diffMins}m ago`;
        if (diffHours < 24) return `${diffHours}h ago`;
        if (diffDays < 7) return `${diffDays}d ago`;
        return date.toLocaleDateString();
    }

    handleClear() {
        const problemElement = document.getElementById('problem-statement');
        const hintsContainer = document.getElementById('hints-container');
        
        if (problemElement) {
            problemElement.value = '';
        }
        
        if (hintsContainer) {
            hintsContainer.innerHTML = `
                <div class="no-hints">
                    <p>Click "Get Hint" to receive progressive guidance</p>
                </div>
            `;
        }
        
        this.currentHints = [];
    }

    handleTextareaInput() {
        const textarea = document.getElementById('problem-statement');
        const getHintBtn = document.getElementById('get-hint-btn');
        
        if (textarea && getHintBtn) {
            // Enable/disable button based on content
            getHintBtn.disabled = !textarea.value.trim();
        }
    }

    handleProblemDetected(problem) {
        // Store the detected problem but don't auto-fill
        this.detectedProblem = problem;
        
        // Show notification with option to load
        this.showProblemDetectedNotification(problem);
    }

    showProblemDetectedNotification(problem) {
        // Create a notification with load button
        const notification = document.createElement('div');
        notification.className = 'notification notification-info';
        notification.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 16px 24px;
            border-radius: 12px;
            color: var(--text-primary);
            font-weight: 600;
            z-index: 1000;
            animation: slideInRight 0.3s ease;
            max-width: 350px;
            background: rgba(59, 130, 246, 0.9);
            border: 1px solid #3b82f6;
            backdrop-filter: blur(20px);
        `;
        
        const problemPreview = problem.substring(0, 100) + (problem.length > 100 ? '...' : '');
        
        notification.innerHTML = `
            <div style="margin-bottom: 12px;">
                <strong>🧠 Problem Detected!</strong>
            </div>
            <div style="font-size: 14px; margin-bottom: 12px; opacity: 0.9;">
                ${problemPreview}
            </div>
            <div style="display: flex; gap: 8px;">
                <button id="load-problem-btn" style="
                    background: rgba(255, 255, 255, 0.2);
                    border: 1px solid rgba(255, 255, 255, 0.3);
                    color: white;
                    padding: 6px 12px;
                    border-radius: 6px;
                    cursor: pointer;
                    font-size: 12px;
                    font-weight: 500;
                ">Load Problem</button>
                <button id="dismiss-notification-btn" style="
                    background: transparent;
                    border: 1px solid rgba(255, 255, 255, 0.3);
                    color: white;
                    padding: 6px 12px;
                    border-radius: 6px;
                    cursor: pointer;
                    font-size: 12px;
                    font-weight: 500;
                ">Dismiss</button>
            </div>
        `;
        
        document.body.appendChild(notification);
        
        // Add event listeners
        const loadBtn = notification.querySelector('#load-problem-btn');
        const dismissBtn = notification.querySelector('#dismiss-notification-btn');
        
        if (loadBtn) {
            loadBtn.addEventListener('click', () => {
                this.loadDetectedProblem();
                this.removeNotification(notification);
            });
        }
        
        if (dismissBtn) {
            dismissBtn.addEventListener('click', () => {
                this.removeNotification(notification);
            });
        }
        
        // Auto-remove after 10 seconds
        setTimeout(() => {
            this.removeNotification(notification);
        }, 10000);
    }

    loadDetectedProblem() {
        if (this.detectedProblem) {
            const problemElement = document.getElementById('problem-statement');
            if (problemElement) {
                problemElement.value = this.detectedProblem;
                this.showNotification('Problem loaded successfully!', 'success');
            }
        }
    }

    removeNotification(notification) {
        if (notification && notification.parentNode) {
            notification.style.animation = 'slideOutRight 0.3s ease';
            setTimeout(() => {
                if (notification.parentNode) {
                    notification.parentNode.removeChild(notification);
                }
            }, 300);
        }
    }

    setLoadingState(loading) {
        this.isLoading = loading;
        const getHintBtn = document.getElementById('get-hint-btn');
        if (!getHintBtn) return;
        
        const btnText = getHintBtn.querySelector('.btn-text');
        const spinner = getHintBtn.querySelector('.loading-spinner');
        
        if (loading) {
            if (btnText) btnText.textContent = 'Generating...';
            if (spinner) spinner.style.display = 'block';
            getHintBtn.disabled = true;
        } else {
            if (btnText) btnText.textContent = 'Get Hint';
            if (spinner) spinner.style.display = 'none';
            getHintBtn.disabled = false;
        }
    }

    showNotification(message, type = 'info') {
        // Create notification element
        const notification = document.createElement('div');
        notification.className = `notification notification-${type}`;
        notification.textContent = message;
        
        // Add styles
        notification.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 12px 20px;
            border-radius: 8px;
            color: white;
            font-weight: 500;
            z-index: 1000;
            animation: slideInRight 0.3s ease;
            max-width: 300px;
        `;
        
        // Set background color based on type
        const colors = {
            success: '#10b981',
            error: '#ef4444',
            info: '#3b82f6'
        };
        notification.style.backgroundColor = colors[type] || colors.info;
        
        document.body.appendChild(notification);
        
        // Remove after 3 seconds
        setTimeout(() => {
            notification.style.animation = 'slideOutRight 0.3s ease';
            setTimeout(() => {
                if (notification.parentNode) {
                    notification.parentNode.removeChild(notification);
                }
            }, 300);
        }, 3000);
    }
}

// Add CSS animations for notifications
const style = document.createElement('style');
style.textContent = `
    @keyframes slideInRight {
        from { transform: translateX(100%); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    
    @keyframes slideOutRight {
        from { transform: translateX(0); opacity: 1; }
        to { transform: translateX(100%); opacity: 0; }
    }
`;
document.head.appendChild(style);

// Initialize the app when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    console.log('Initializing DSA Hints Coach...');
    new DSACoach();
});