visualizer.js

// Use TimeFormatter class if available, otherwise use fallback functions
// This maintains backward compatibility while using OOP structure
let globalStopFlag = false;

// Fallback functions for backward compatibility
function getBestTimeFormat(ms) {
    if (typeof TimeFormatter !== 'undefined') {
        return TimeFormatter.getBestFormat(ms);
    }
    // Fallback implementation
    if (ms >= 86400000) return 'd';
    if (ms >= 3600000) return 'h';
    if (ms >= 60000) return 'm';
    if (ms >= 2000) return 's';
    return 'ms';
}

function formatTimeValue(ms, format = 'ms') {
    if (typeof TimeFormatter !== 'undefined') {
        if (format === 'auto' || (!format || format === 'ms')) {
            if (ms >= 2000) {
                format = TimeFormatter.getBestFormat(ms);
            }
        }
        return TimeFormatter.format(ms, format);
    }
    // Fallback implementation (original code)
    if (format === 'auto' || (!format || format === 'ms')) {
        if (ms >= 2000) {
            format = getBestTimeFormat(ms);
        }
    }

    if (ms >= 86400000 && format !== 'd') {
        format = 'd';
    } else if (ms >= 3600000 && ms < 86400000 && format !== 'd' && format !== 'h') {
        format = 'h';
    } else if (ms >= 60000 && ms < 3600000 && format !== 'd' && format !== 'h' && format !== 'm') {
        format = 'm';
    } else if (ms >= 2000 && ms < 60000 && format !== 'd' && format !== 'h' && format !== 'm' && format !== 's') {
        format = 's';
    }

    switch (format) {
        case 's':
            return `${(ms / 1000).toFixed(3)}s`;
        case 'm':
            const minutes = Math.floor(ms / 60000);
            const seconds = ((ms % 60000) / 1000).toFixed(1);
            return minutes > 0 ? `${minutes}m ${seconds}s` : `${seconds}s`;
        case 'h':
            const hours = Math.floor(ms / 3600000);
            const remainingMs = ms % 3600000;
            const mins = Math.floor(remainingMs / 60000);
            const secs = ((remainingMs % 60000) / 1000).toFixed(1);
            if (hours > 0) {
                return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
            }
            return mins > 0 ? `${mins}m ${secs}s` : `${secs}s`;
        case 'd':
            const days = Math.floor(ms / 86400000);
            const remainingMsAfterDays = ms % 86400000;
            const hrs = Math.floor(remainingMsAfterDays / 3600000);
            const remainingMsAfterHours = remainingMsAfterDays % 3600000;
            const minsAfterHours = Math.floor(remainingMsAfterHours / 60000);
            if (days > 0) {
                return hrs > 0 ? `${days}d ${hrs}h` : `${days}d`;
            }
            return hrs > 0 ? `${hrs}h ${minsAfterHours}m` : `${minsAfterHours}m`;
        case 'ms':
        default:
            return `${Math.round(ms)}ms`;
    }
}

let rawTimeValues = {
    sortTime: 0,
    pathTime: 0,
    searchTime: 0,
    graphTime: 0,
    dpTime: 0,
    stringTime: 0,
    mathTime: 0
};

// Use VisualizationManager if available, otherwise use fallback
function stopAllVisualizations() {
    globalStopFlag = true;
    
    // Use VisualizationManager if available
    if (typeof VisualizationManager !== 'undefined' && window.visualizationManager) {
        window.visualizationManager.stopAll();
    } else {
        // Fallback to direct references
        if (sortingVisualizer) sortingVisualizer.stop();
        if (searchingVisualizer) searchingVisualizer.stop();
        if (pathfindingVisualizer) pathfindingVisualizer.stop();
        if (treeVisualizer) treeVisualizer.stop();
        if (graphVisualizer) graphVisualizer.stop();
        if (dpVisualizer) dpVisualizer.stop();
        if (stringVisualizer) stringVisualizer.stop();
        if (languageArena) languageArena.stop();
    }

    // Reset flag after a short delay
    setTimeout(() => { globalStopFlag = false; }, 100);
}

// Make it globally available
if (typeof window !== 'undefined') {
    window.stopAllVisualizations = stopAllVisualizations;
}

// Use LanguageManager if available, otherwise use fallback
// This maintains backward compatibility while using OOP structure

// Initialize language manager instance
let languageManager = null;
if (typeof LanguageManager !== 'undefined') {
    languageManager = new LanguageManager();
    if (typeof window !== 'undefined') {
        window.languageManager = languageManager;
    }
}

// Fallback LANGUAGE_SPEED for backward compatibility
const LANGUAGE_SPEED = {
    cpp: 1.0,        // Baseline (fastest) - Native compiled
    rust: 1.0,       // Similar to C++ - Native compiled, zero-cost abstractions
    c: 1.0,          // Similar to C++ - Native compiled
    go: 1.15,        // Slightly slower - Compiled, GC overhead
    swift: 1.2,      // Fast - Native compiled, ARC
    java: 1.4,       // JIT compiled - HotSpot optimization
    csharp: 1.5,     // Similar to Java - .NET JIT
    kotlin: 1.6,     // JVM-based - Similar to Java
    node: 1.8,       // V8 JIT - Highly optimized JavaScript
    deno: 1.9,       // V8 based - Similar to Node, slight overhead
    javascript: 2.0, // V8 optimized - Modern JS engines are fast
    typescript: 2.0, // Compiles to JS - Same performance as JS
    elixir: 4.5,     // BEAM VM - Good for concurrency, slower for CPU-bound
    python: 7.5,     // Interpreted - CPython is slower, PyPy faster
    php: 9.0,        // Interpreted - Server-side optimized
    bash: 10.0,      // Shell script - Interpreted, slower than Python
    ruby: 11.0       // Interpreted - Slower than Python
};

// Fallback functions for backward compatibility
let _cachedLanguageIcons = null;
let _cachedTheme = null;

function getLanguageIcons() {
    // Use LanguageManager if available
    if (languageManager) {
        return languageManager.getIcons();
    }
    
    // Fallback implementation
    const currentTheme = document.documentElement.getAttribute('data-theme');
    if (_cachedLanguageIcons && _cachedTheme === currentTheme) {
        return _cachedLanguageIcons;
    }

    const isDarkMode = currentTheme !== 'light';
    _cachedLanguageIcons = {
        java: 'icons/java.svg',
        python: 'icons/python.svg',
        deno: isDarkMode ? 'icons/deno-light.svg' : 'icons/deno.png',
        node: 'icons/nodejs.svg',
        typescript: 'icons/typescript.svg',
        php: 'icons/php.svg',
        elixir: 'icons/elixir.svg',
        kotlin: 'icons/kotlin.svg',
        swift: 'icons/swift.svg',
        ruby: 'icons/ruby.svg',
        javascript: 'icons/javascript.svg',
        cpp: 'icons/cplusplus.svg',
        csharp: 'icons/csharp.svg',
        rust: isDarkMode ? 'icons/rust-dark.png' : 'icons/rust.svg',
        go: 'icons/go.svg',
        c: 'icons/cplusplus.svg',
        bash: 'icons/bash.svg'
    };
    _cachedTheme = currentTheme;
    return _cachedLanguageIcons;
}

// Cache language info
let _cachedLanguageInfo = null;

function getLanguageInfo() {
    // Use LanguageManager if available
    if (languageManager) {
        return languageManager.getInfo();
    }
    
    // Fallback implementation
    const icons = getLanguageIcons();
    if (!_cachedLanguageInfo || _cachedLanguageInfo.rust.icon !== icons.rust) {
        _cachedLanguageInfo = {
            javascript: { name: 'JavaScript', symbol: 'JS', color: '#f7df1e', icon: icons.javascript },
            python: { name: 'Python', symbol: 'PY', color: '#3776ab', icon: icons.python },
            java: { name: 'Java', symbol: 'JV', color: '#007396', icon: icons.java },
            cpp: { name: 'C++', symbol: 'C++', color: '#00599c', icon: icons.cpp },
            csharp: { name: 'C#', symbol: 'C#', color: '#239120', icon: icons.csharp },
            go: { name: 'Go', symbol: 'GO', color: '#00add8', icon: icons.go },
            rust: { name: 'Rust', symbol: 'RS', color: '#dea584', icon: icons.rust },
            ruby: { name: 'Ruby', symbol: 'RB', color: '#cc342d', icon: icons.ruby },
            php: { name: 'PHP', symbol: 'PHP', color: '#777bb4', icon: icons.php },
            elixir: { name: 'Elixir', symbol: 'EX', color: '#6e4a7e', icon: icons.elixir },
            node: { name: 'Node.js', symbol: 'ND', color: '#339933', icon: icons.node },
            deno: { name: 'Deno', symbol: 'DN', color: '#000000', icon: icons.deno },
            kotlin: { name: 'Kotlin', symbol: 'KT', color: '#7F52FF', icon: icons.kotlin },
            swift: { name: 'Swift', symbol: 'SW', color: '#FA7343', icon: icons.swift },
            typescript: { name: 'TypeScript', symbol: 'TS', color: '#3178c6', icon: icons.typescript },
            c: { name: 'C', symbol: 'C', color: '#a8b9cc', icon: icons.c },
            bash: { name: 'Bash', symbol: 'SH', color: '#4EAA25', icon: icons.bash }
        };
    }
    return _cachedLanguageInfo;
}

// Initialize cached values (for backward compatibility)
const LANGUAGE_ICONS = getLanguageIcons();
const LANGUAGE_INFO = getLanguageInfo();

function updateRustIcons() {
    _cachedLanguageInfo = null;
    const icons = getLanguageIcons();
    const rustIcon = icons.rust;

    requestAnimationFrame(() => {
        const rustImages = document.querySelectorAll('img[src*="rust"]');
        rustImages.forEach(img => {
            if (img.src.includes('rust')) {
                img.src = rustIcon;
            }
        });
    });

    // Update cached LANGUAGE_INFO
    if (_cachedLanguageInfo && _cachedLanguageInfo.rust) {
        _cachedLanguageInfo.rust.icon = rustIcon;
    }
}

function updateDenoIcons() {
    _cachedLanguageInfo = null;
    const icons = getLanguageIcons();
    const denoIcon = icons.deno;

    requestAnimationFrame(() => {
        const denoImages = document.querySelectorAll('img[src*="deno"]');
        denoImages.forEach(img => {
            if (img.src.includes('deno')) {
                img.src = denoIcon;
            }
        });
    });

    if (_cachedLanguageInfo && _cachedLanguageInfo.deno) {
        _cachedLanguageInfo.deno.icon = denoIcon;
    }
}

class SortingVisualizer {
    constructor() {
        this.array = [];
        this.size = 30;
        this.speed = 50;
        this.isRunning = false;
        this.isPaused = false;
        this.shouldStop = false;
        this.comparisons = 0;
        this.swaps = 0;
        this.currentAlgorithm = 'bubbleSort';
        this.container = document.getElementById('sortingBars');
        this.startTime = null;
        this.pausedTime = 0; // Accumulated paused time
        this.isCompareMode = false;
        this.compareResults = { algo1: null, algo2: null };
        this.isCompareRunning = false;
        this.isComparePaused = false;
        this.compareViz1 = null;
        this.compareViz2 = null;
        this.sizeUpdateTimeout = null; // For debouncing size updates
        this.init();
    }

    init() {
        this.generateArray();
        this.bindEvents();
        this.updateButtonStates(); // Initialize button states
    }

    bindEvents() {
        const sizeSlider = document.getElementById('arraySize');
        const speedSlider = document.getElementById('sortSpeed');
        const shuffleBtn = document.getElementById('shuffleArray');
        const startBtn = document.getElementById('startSort');
        const pauseResumeBtn = document.getElementById('pauseResumeSort');
        const stopBtn = document.getElementById('stopSort');

        if (sizeSlider) {
            // Update display immediately on input
            sizeSlider.addEventListener('input', (e) => {
                const newSize = parseInt(e.target.value, 10);
                const sizeValueEl = document.getElementById('arraySizeValue');
                if (sizeValueEl && !isNaN(newSize) && newSize >= 10 && newSize <= 9999) {
                    sizeValueEl.textContent = newSize;
                }
            });

            // Debounce the actual array generation on change
            sizeSlider.addEventListener('change', (e) => {
                try {
                    const newSize = parseInt(e.target.value, 10);
                    const sizeValueEl = document.getElementById('arraySizeValue');
                    // Validate size value
                    if (!isNaN(newSize) && newSize >= 10 && newSize <= 9999) {
                        // Clear any pending timeout
                        if (this.sizeUpdateTimeout) {
                            clearTimeout(this.sizeUpdateTimeout);
                        }
                        
                        // Debounce the array generation
                        this.sizeUpdateTimeout = setTimeout(() => {
                            // Only update if not in comparison mode or if regular visualization is visible
                            const regularViz = document.getElementById('regularVisualization');
                            if (!this.isCompareMode || (regularViz && regularViz.style.display !== 'none')) {
                                this.size = newSize;
                                if (sizeValueEl) {
                                    sizeValueEl.textContent = this.size;
                                }
                                this.updateSizePresets();
                                // Only generate if container exists and is visible
                                if (this.container && this.container.offsetParent !== null) {
                                    this.generateArray();
                                }
                            }
                        }, 150); // 150ms debounce
                    }
                } catch (error) {
                    console.error('Error updating array size:', error);
                    // Reset to default if error occurs
                    this.size = 30;
                    const sizeValueEl = document.getElementById('arraySizeValue');
                    if (sizeValueEl) {
                        sizeValueEl.textContent = '30';
                    }
                    if (sizeSlider) {
                        sizeSlider.value = 30;
                    }
                }
            });
        }

        // Size preset buttons - only bind to sorting section presets
        const sortingSection = document.getElementById('sorting');
        if (sortingSection) {
            sortingSection.querySelectorAll('.btn-preset[data-size]').forEach(btn => {
                btn.addEventListener('click', () => {
                    try {
                        const size = parseInt(btn.dataset.size, 10);
                        if (!isNaN(size) && size >= 10 && size <= 9999) {
                            this.size = size;
                            if (sizeSlider) {
                                sizeSlider.value = size;
                            }
                            const sizeValueEl = document.getElementById('arraySizeValue');
                            if (sizeValueEl) {
                                sizeValueEl.textContent = size;
                            }
                            this.updateSizePresets();
                            this.generateArray();
                        }
                    } catch (error) {
                        console.error('Error setting preset size:', error);
                    }
                });
            });
        }

        // Comparison mode toggle
        const toggleCompareBtn = document.getElementById('toggleCompare');
        const compareControls = document.getElementById('compareControls');
        const compareContainer = document.getElementById('compareContainer');
        const startCompareBtn = document.getElementById('startCompare');

        if (toggleCompareBtn) {
            toggleCompareBtn.addEventListener('click', () => {
                this.isCompareMode = !this.isCompareMode;
                const regularViz = document.getElementById('regularVisualization');

                if (this.isCompareMode) {
                    this.stopComparison(); // Stop any running comparison
                    compareControls.style.display = 'block';
                    compareContainer.style.display = 'grid';
                    if (regularViz) regularViz.style.display = 'none';
                    toggleCompareBtn.textContent = '❌ Exit Compare';
                    toggleCompareBtn.classList.add('active');
                } else {
                    this.stopComparison(); // Stop any running comparison
                    compareControls.style.display = 'none';
                    compareContainer.style.display = 'none';
                    if (regularViz) regularViz.style.display = 'block';
                    toggleCompareBtn.textContent = '⚔️ Compare';
                    toggleCompareBtn.classList.remove('active');
                }
            });
        }

        if (startCompareBtn) {
            startCompareBtn.addEventListener('click', () => this.startComparison());
        }

        // Comparison mode pause/resume and stop buttons
        const pauseResumeCompareBtn = document.getElementById('pauseResumeCompare');
        const stopCompareBtn = document.getElementById('stopCompare');

        if (pauseResumeCompareBtn) {
            pauseResumeCompareBtn.addEventListener('click', () => this.togglePauseResumeCompare());
        }

        if (stopCompareBtn) {
            stopCompareBtn.addEventListener('click', () => this.stopComparison());
        }

        if (speedSlider) {
            const multiplierEl = document.getElementById('sortSpeedMultiplier');
            if (multiplierEl) {
                // Initialize multiplier display
                const initialMultiplier = Math.round((this.speed / 50) * 10) / 10;
                multiplierEl.textContent = `${initialMultiplier}x`;
            }
            speedSlider.addEventListener('input', (e) => {
                try {
                    const newSpeed = parseInt(e.target.value, 10);
                    // Validate speed value - allow up to 250 (5x speed)
                    // For arrays > 500, allow higher speeds (up to 5x)
                    const maxSpeed = this.size > 500 ? 250 : 150; // 5x for large arrays, 3x for smaller
                    const actualMaxSpeed = Math.min(250, maxSpeed);
                    if (!isNaN(newSpeed) && newSpeed >= 25 && newSpeed <= actualMaxSpeed) {
                        this.speed = newSpeed;
                        if (multiplierEl) {
                            const multiplier = Math.round((this.speed / 50) * 10) / 10;
                            multiplierEl.textContent = `${multiplier}x`;
                        }
                    } else if (newSpeed > actualMaxSpeed) {
                        // Clamp to max speed
                        this.speed = actualMaxSpeed;
                        speedSlider.value = actualMaxSpeed;
                        if (multiplierEl) {
                            const multiplier = Math.round((this.speed / 50) * 10) / 10;
                            multiplierEl.textContent = `${multiplier}x`;
                        }
                    }
                } catch (error) {
                    console.error('Error updating speed:', error);
                    // Reset to default if error occurs
                    this.speed = 50;
                    if (multiplierEl) {
                        multiplierEl.textContent = '1x';
                    }
                }
            });
            
            // Update max speed when array size changes
            const updateMaxSpeed = () => {
                const maxSpeed = this.size > 500 ? 250 : 150;
                speedSlider.max = maxSpeed;
            };
            
            // Listen for size changes
            const sizeSlider = document.getElementById('arraySize');
            if (sizeSlider) {
                sizeSlider.addEventListener('change', updateMaxSpeed);
            }
            
            // Update on preset button clicks
            document.querySelectorAll('.btn-preset[data-size]').forEach(btn => {
                btn.addEventListener('click', updateMaxSpeed);
            });
        }

        if (shuffleBtn) shuffleBtn.addEventListener('click', () => this.generateArray());
        if (startBtn) startBtn.addEventListener('click', () => this.start());
        if (pauseResumeBtn) pauseResumeBtn.addEventListener('click', () => this.togglePauseResume());
        if (stopBtn) stopBtn.addEventListener('click', () => this.stop());
    }

    updateButtonStates() {
        const startBtn = document.getElementById('startSort');
        const pauseResumeBtn = document.getElementById('pauseResumeSort');
        const stopBtn = document.getElementById('stopSort');

        if (this.isRunning) {
            if (startBtn) {
                startBtn.style.visibility = 'hidden';
                startBtn.style.position = 'absolute';
                startBtn.style.opacity = '0';
                startBtn.style.pointerEvents = 'none';
            }
            if (pauseResumeBtn) {
                pauseResumeBtn.style.visibility = 'visible';
                pauseResumeBtn.style.position = 'static';
                pauseResumeBtn.style.opacity = '1';
                pauseResumeBtn.style.pointerEvents = 'auto';
                pauseResumeBtn.textContent = this.isPaused ? '▶ Resume' : '⏸ Pause';
            }
            if (stopBtn) {
                stopBtn.style.visibility = 'visible';
                stopBtn.style.position = 'static';
                stopBtn.style.opacity = '1';
                stopBtn.style.pointerEvents = 'auto';
            }
        } else {
            if (startBtn) {
                startBtn.style.visibility = 'visible';
                startBtn.style.position = 'static';
                startBtn.style.opacity = '1';
                startBtn.style.pointerEvents = 'auto';
            }
            if (pauseResumeBtn) {
                pauseResumeBtn.style.visibility = 'hidden';
                pauseResumeBtn.style.position = 'absolute';
                pauseResumeBtn.style.opacity = '0';
                pauseResumeBtn.style.pointerEvents = 'none';
            }
            if (stopBtn) {
                stopBtn.style.visibility = 'hidden';
                stopBtn.style.position = 'absolute';
                stopBtn.style.opacity = '0';
                stopBtn.style.pointerEvents = 'none';
            }
        }
    }

    togglePauseResume() {
        if (this.isPaused) {
            this.resume();
        } else {
            this.pause();
        }
    }

    pause() {
        if (!this.isRunning || this.isPaused) return;
        this.isPaused = true;
        // Save pause time to account for elapsed time
        if (this.startTime) {
            this.pausedTime += performance.now() - this.startTime;
        }
        this.updateButtonStates();
    }

    resume() {
        if (!this.isPaused || !this.isRunning) return;
        this.isPaused = false;
        // Restart timing (pausedTime already accumulated in pause())
        this.startTime = performance.now();
        this.updateButtonStates();
        // The algorithm will continue naturally from the delay() function
    }

    updateSizePresets() {
        document.querySelectorAll('.btn-preset').forEach(btn => {
            const presetSize = parseInt(btn.dataset.size);
            if (presetSize === this.size) {
                btn.classList.add('active');
            } else {
                btn.classList.remove('active');
            }
        });
    }

    generateArray() {
        // Don't generate if in comparison mode and regular viz is hidden
        if (this.isCompareMode) {
            const regularViz = document.getElementById('regularVisualization');
            if (regularViz && regularViz.style.display === 'none') {
                return; // Don't update regular visualization when in comparison mode
            }
        }
        
        this.stop();
        
        // Validate size before generating
        if (this.size < 10 || this.size > 9999 || isNaN(this.size)) {
            this.size = 30;
        }
        
        this.array = Array.from({ length: this.size }, () => Math.floor(Math.random() * 100) + 1);
        
        // Only render if container exists and is visible
        if (this.container && this.container.offsetParent !== null) {
            this.render();
        }
        
        this.resetStats();
        this.updateButtonStates();
    }

    render(comparing = [], swapping = [], sorted = [], container = null) {
        const targetContainer = container || this.container;
        if (!targetContainer) return;
        
        // Safety check: ensure container is in DOM and visible
        if (!targetContainer.parentNode || targetContainer.offsetParent === null) {
            return;
        }

        // Validate array exists and has valid length
        if (!this.array || this.array.length === 0) {
            return;
        }

        // For large arrays (>1000), use sampling for performance
        const shouldSample = this.array.length > 1000;
        const sampleSize = shouldSample ? 1000 : this.array.length;
        const step = shouldSample ? Math.ceil(this.array.length / sampleSize) : 1;

        // Use requestAnimationFrame for smoother rendering and to ensure container is measured
        requestAnimationFrame(() => {
            try {
                // Clear container completely to remove any lingering visual states
                targetContainer.innerHTML = '';
                
                const maxVal = Math.max(...this.array);
                
                if (maxVal === 0 || isNaN(maxVal)) {
                    return; // Invalid array values
                }

                // Calculate bar width after container is in DOM and visible
                const gap = 2; // gap between bars in pixels
                const containerPadding = 32; // approximate padding
                const containerWidth = targetContainer.clientWidth || targetContainer.offsetWidth || 800; // fallback to 800px
                const availableWidth = Math.max(100, containerWidth - containerPadding);
                const totalBars = shouldSample ? sampleSize : this.array.length;
                
                // Calculate bar width to fit container, but ensure visibility
                // For arrays <= 200: bars fill container (flex)
                // For arrays > 200: calculate width, minimum 2px for visibility, allow horizontal scrolling
                let barWidth = null;
                let useFlex = false;
                
                if (this.array.length <= 200) {
                    // Small arrays: use flex to fill container
                    useFlex = true;
                } else {
                    // Large arrays: calculate width to fit container, but ensure minimum 2px for visibility
                    const calculatedWidth = (availableWidth / totalBars) - gap;
                    // Minimum 2px width for visibility, maximum 30px for aesthetics
                    barWidth = Math.max(2, Math.min(calculatedWidth, 30));
                    
                    // If bars would be too small, ensure they're at least 2px and container will scroll
                    // This ensures all bars are visible when scrolling
                    if (calculatedWidth < 2) {
                        barWidth = 2;
                    }
                }

                for (let i = 0; i < this.array.length; i += step) {
                    const val = this.array[i];
                    if (isNaN(val)) continue; // Skip invalid values
                    
                    const bar = document.createElement('div');
                    bar.className = 'bar';
                    bar.style.height = `${(val / maxVal) * 100}%`;
                    
                    // Set width based on array size
                    if (useFlex) {
                        // Small arrays: use flex to fill container
                        bar.style.flex = '1 1 auto';
                        bar.style.minWidth = '0';
                    } else if (barWidth !== null) {
                        // Large arrays: explicit width to ensure visibility and scrolling
                        bar.style.width = `${barWidth}px`;
                        bar.style.minWidth = `${barWidth}px`;
                        bar.style.maxWidth = `${barWidth}px`;
                        bar.style.flexShrink = '0';
                        bar.style.flexGrow = '0';
                    } else if (shouldSample) {
                        bar.style.width = `${step * 100 / sampleSize}%`;
                    }

                    // Apply visual states - only one state per bar (sorted > swapping > comparing)
                    if (sorted.includes(i)) {
                        bar.classList.add('sorted');
                    } else if (swapping.includes(i)) {
                        bar.classList.add('swapping');
                    } else if (comparing.includes(i)) {
                        bar.classList.add('comparing');
                    }

                    targetContainer.appendChild(bar);
                }
            } catch (error) {
                console.error('Error rendering array:', error);
            }
        });
    }

    resetStats() {
        this.comparisons = 0;
        this.swaps = 0;
        this.updateStat('comparisons', '0');
        this.updateStat('swaps', '0');
        this.updateStat('sortTime', '0ms');
    }

    updateStat(id, value) {
        const el = document.getElementById(id);
        if (el) el.textContent = value;
    }

    stop() {
        this.shouldStop = true;
        this.isRunning = false;
        this.isPaused = false;
        this.pausedTime = 0;
        // Reset visual state when stopped
        this.render(); // Clear any highlighting/comparing/swapping states
        this.updateButtonStates();
    }

    async start() {
        if (this.isRunning && !this.isPaused) return;

        // If resuming from pause, just resume
        if (this.isPaused) {
            this.resume();
            return;
        }

        // Starting fresh
        this.isRunning = true;
        this.isPaused = false;
        this.shouldStop = false;
        this.pausedTime = 0;
        this.resetStats();
        this.updateButtonStates();

        if (typeof audioEngine !== 'undefined') audioEngine.playBattleStart();

        this.startTime = performance.now();

        switch (this.currentAlgorithm) {
            case 'bubbleSort': await this.bubbleSort(); break;
            case 'quickSort': await this.quickSort(0, this.array.length - 1); break;
            case 'mergeSort': await this.mergeSortWrapper(); break;
            case 'insertionSort': await this.insertionSort(); break;
            case 'selectionSort': await this.selectionSort(); break;
            case 'heapSort': await this.heapSort(); break;
            case 'countingSort': await this.countingSort(); break;
            case 'radixSort': await this.radixSort(); break;
            case 'shellSort': await this.shellSort(); break;
            case 'timSort': await this.timSort(); break;
            case 'bucketSort': await this.bucketSort(); break;
            case 'cocktailSort': await this.cocktailSort(); break;
            case 'combSort': await this.combSort(); break;
            case 'cycleSort': await this.cycleSort(); break;
            case 'gnomeSort': await this.gnomeSort(); break;
            case 'pancakeSort': await this.pancakeSort(); break;
            default: await this.bubbleSort();
        }

        if (!this.shouldStop && !this.isPaused) {
            const endTime = performance.now();
            const elapsed = endTime - this.startTime + this.pausedTime;
            rawTimeValues.sortTime = elapsed;
            const formatSelect = document.getElementById('sortTimeFormat');
            let format = formatSelect ? formatSelect.value : 'ms';
            if (elapsed >= 2000) {
                const bestFormat = getBestTimeFormat(elapsed);
                format = bestFormat;
                if (formatSelect) formatSelect.value = bestFormat;
            }
            this.updateStat('sortTime', formatTimeValue(elapsed, format));
            this.render([], [], Array.from({ length: this.array.length }, (_, i) => i));
            if (typeof audioEngine !== 'undefined') audioEngine.playComplete();
        }

        if (!this.isPaused) {
            this.isRunning = false;
            this.pausedTime = 0;
            this.updateButtonStates();
            // Show feedback modal after algorithm completion
            if (typeof showFeedbackModal === 'function') {
                setTimeout(() => showFeedbackModal(), 1000); // Delay 1 second after completion
            }
        }
    }

    async startComparison() {
        if (this.isCompareRunning && !this.isComparePaused) return;

        if (this.isComparePaused) {
            this.resumeComparison();
            return;
        }

        const algo1 = document.getElementById('compareAlgo1').value;
        const algo2 = document.getElementById('compareAlgo2').value;
        const lang1 = document.getElementById('compareLang1').value;
        const lang2 = document.getElementById('compareLang2').value;

        if (algo1 === algo2 && lang1 === lang2) {
            alert('Please select different algorithms or languages to compare!');
            return;
        }

        this.isCompareRunning = true;
        this.isComparePaused = false;
        this.shouldStop = false;

        // Update button states
        this.updateCompareButtonStates();

        // Generate the same array for both algorithms
        const testArray = Array.from({ length: this.size }, () => Math.floor(Math.random() * 100) + 1);

        // Create copies for each algorithm
        const array1 = [...testArray];
        const array2 = [...testArray];

        // Update algorithm names with language
        const langInfo = getLanguageInfo();
        const lang1Name = langInfo[lang1]?.name || lang1;
        const lang2Name = langInfo[lang2]?.name || lang2;
        document.getElementById('compareAlgo1Name').textContent = `${this.getAlgorithmName(algo1)} (${lang1Name})`;
        document.getElementById('compareAlgo2Name').textContent = `${this.getAlgorithmName(algo2)} (${lang2Name})`;

        // Reset stats
        document.getElementById('comparisons1').textContent = '0';
        document.getElementById('swaps1').textContent = '0';
        document.getElementById('sortTime1').textContent = '0ms';
        document.getElementById('comparisons2').textContent = '0';
        document.getElementById('swaps2').textContent = '0';
        document.getElementById('sortTime2').textContent = '0ms';

        // Run both algorithms in parallel
        const container1 = document.getElementById('sortingBars1');
        const container2 = document.getElementById('sortingBars2');

        // Render initial arrays
        this.renderArray(array1, container1);
        this.renderArray(array2, container2);

        // Run comparisons with language speed factors
        const [result1, result2] = await Promise.all([
            this.runAlgorithmForComparison(algo1, lang1, array1, container1, 1),
            this.runAlgorithmForComparison(algo2, lang2, array2, container2, 2)
        ]);

        // Display winner
        this.displayComparisonResults(result1, result2);

        this.isCompareRunning = false;
        this.updateCompareButtonStates();
        // Show feedback modal after comparison completion
        if (typeof showFeedbackModal === 'function') {
            setTimeout(() => showFeedbackModal(), 1000); // Delay 1 second after completion
        }
    }

    stopComparison() {
        this.shouldStop = true;
        this.isCompareRunning = false;
        this.isComparePaused = false;
        if (this.compareViz1) this.compareViz1.shouldStop = true;
        if (this.compareViz2) this.compareViz2.shouldStop = true;
        this.updateCompareButtonStates();
    }

    togglePauseResumeCompare() {
        if (this.isComparePaused) {
            this.resumeComparison();
        } else {
            this.pauseComparison();
        }
    }

    pauseComparison() {
        if (!this.isCompareRunning || this.isComparePaused) return;
        this.isComparePaused = true;
        if (this.compareViz1) this.compareViz1.isPaused = true;
        if (this.compareViz2) this.compareViz2.isPaused = true;
        this.updateCompareButtonStates();
    }

    resumeComparison() {
        if (!this.isComparePaused || !this.isCompareRunning) return;
        this.isComparePaused = false;
        if (this.compareViz1) this.compareViz1.isPaused = false;
        if (this.compareViz2) this.compareViz2.isPaused = false;
        this.updateCompareButtonStates();
    }

    updateCompareButtonStates() {
        const startBtn = document.getElementById('startCompare');
        const pauseResumeBtn = document.getElementById('pauseResumeCompare');
        const stopBtn = document.getElementById('stopCompare');

        if (this.isCompareRunning) {
            if (startBtn) {
                startBtn.style.visibility = 'hidden';
                startBtn.style.position = 'absolute';
                startBtn.style.opacity = '0';
                startBtn.style.pointerEvents = 'none';
            }
            if (pauseResumeBtn) {
                pauseResumeBtn.style.visibility = 'visible';
                pauseResumeBtn.style.position = 'static';
                pauseResumeBtn.style.opacity = '1';
                pauseResumeBtn.style.pointerEvents = 'auto';
                pauseResumeBtn.textContent = this.isComparePaused ? '▶ Resume' : '⏸ Pause';
            }
            if (stopBtn) {
                stopBtn.style.visibility = 'visible';
                stopBtn.style.position = 'static';
                stopBtn.style.opacity = '1';
                stopBtn.style.pointerEvents = 'auto';
            }
        } else {
            if (startBtn) {
                startBtn.style.visibility = 'visible';
                startBtn.style.position = 'static';
                startBtn.style.opacity = '1';
                startBtn.style.pointerEvents = 'auto';
            }
            if (pauseResumeBtn) {
                pauseResumeBtn.style.visibility = 'hidden';
                pauseResumeBtn.style.position = 'absolute';
                pauseResumeBtn.style.opacity = '0';
                pauseResumeBtn.style.pointerEvents = 'none';
            }
            if (stopBtn) {
                stopBtn.style.visibility = 'hidden';
                stopBtn.style.position = 'absolute';
                stopBtn.style.opacity = '0';
                stopBtn.style.pointerEvents = 'none';
            }
        }
    }

    getAlgorithmName(algoKey) {
        const names = {
            'bubbleSort': 'Bubble Sort',
            'quickSort': 'Quick Sort',
            'mergeSort': 'Merge Sort',
            'insertionSort': 'Insertion Sort',
            'selectionSort': 'Selection Sort',
            'heapSort': 'Heap Sort'
        };
        return names[algoKey] || algoKey;
    }

    renderArray(arr, container) {
        if (!container || !arr || arr.length === 0) return;
        
        // Use requestAnimationFrame to ensure container is measured
        requestAnimationFrame(() => {
            try {
                container.innerHTML = '';
                const maxVal = Math.max(...arr);
                if (maxVal === 0 || isNaN(maxVal)) return;

                const shouldSample = arr.length > 1000;
                const sampleSize = shouldSample ? 1000 : arr.length;
                const step = shouldSample ? Math.ceil(arr.length / sampleSize) : 1;

                // Calculate bar width after container is in DOM and visible
                const gap = 2;
                const containerPadding = 32;
                const containerWidth = container.clientWidth || container.offsetWidth || 800;
                const availableWidth = Math.max(100, containerWidth - containerPadding);
                const totalBars = shouldSample ? sampleSize : arr.length;
                
                // Calculate bar width to fit container
                let barWidth = null;
                let useFlex = false;
                
                if (arr.length <= 200) {
                    useFlex = true;
                } else {
                    const calculatedWidth = (availableWidth / totalBars) - gap;
                    barWidth = Math.max(1, Math.min(calculatedWidth, 30));
                    if (barWidth < 2) {
                        barWidth = 2;
                    }
                }

                for (let i = 0; i < arr.length; i += step) {
                    const val = arr[i];
                    if (isNaN(val)) continue;
                    
                    const bar = document.createElement('div');
                    bar.className = 'bar';
                    bar.style.height = `${(val / maxVal) * 100}%`;
                    
                    // Set width based on array size
                    if (useFlex) {
                        bar.style.flex = '1 1 auto';
                        bar.style.minWidth = '0';
                    } else if (barWidth !== null) {
                        bar.style.width = `${barWidth}px`;
                        bar.style.minWidth = `${barWidth}px`;
                        bar.style.maxWidth = `${barWidth}px`;
                        bar.style.flexShrink = '0';
                        bar.style.flexGrow = '0';
                    } else if (shouldSample) {
                        bar.style.width = `${step * 100 / sampleSize}%`;
                    }
                    
                    container.appendChild(bar);
                }
            } catch (error) {
                console.error('Error rendering array:', error);
            }
        });
    }

    async runAlgorithmForComparison(algoKey, langKey, array, container, panelNum) {
        const comparisons = { count: 0 };
        const swaps = { count: 0 };
        const startTime = performance.now();

        // Get language speed factor - use LanguageManager if available
        const langSpeed = (languageManager && languageManager.getSpeed) 
            ? languageManager.getSpeed(langKey) 
            : (LANGUAGE_SPEED[langKey] || 1.0);

        // Create a temporary visualizer instance for this comparison
        const tempViz = {
            array: array,
            container: container,
            comparisons: comparisons,
            swaps: swaps,
            shouldStop: false,
            isPaused: false,
            speed: this.speed,
            langSpeed: langSpeed,
            getDelay: () => {
                // Use the same improved delay calculation as regular mode
                const multiplier = this.speed / 50;
                let baseDelay;
                if (this.speed <= 50) {
                    baseDelay = Math.max(1, 101 - this.speed);
                } else if (this.speed <= 100) {
                    baseDelay = Math.max(1, 51 - ((this.speed - 50) * 0.5));
                } else if (this.speed <= 150) {
                    baseDelay = Math.max(0.5, 26 - ((this.speed - 100) * 0.3));
                } else {
                    baseDelay = Math.max(0.1, 11 - ((this.speed - 150) * 0.1));
                }
                // Apply language speed factor - faster languages have shorter delays
                const langMultiplier = 1 / langSpeed;
                return Math.max(0.1, (baseDelay / multiplier / 10) * langMultiplier);
            },
            delay: async function () {
                // Wait for resume if paused
                while (this.isPaused && !this.shouldStop) {
                    await new Promise(resolve => setTimeout(resolve, 50));
                }
                if (this.shouldStop) return;
                return new Promise(resolve => setTimeout(resolve, this.getDelay()));
            },
            updateStat: (id, value) => {
                const statId = id === 'comparisons' ? `comparisons${panelNum}` :
                    id === 'swaps' ? `swaps${panelNum}` : null;
                if (statId) {
                    const el = document.getElementById(statId);
                    if (el) el.textContent = value;
                }
            },
            render: (comparing = [], swapping = [], sorted = []) => {
                if (!container) return;
                
                // Use requestAnimationFrame to ensure container is measured
                requestAnimationFrame(() => {
                    try {
                        // Clear container completely to remove any lingering visual states
                        container.innerHTML = '';
                        
                        const maxVal = Math.max(...array);
                        if (maxVal === 0 || isNaN(maxVal)) return;
                        
                        const shouldSample = array.length > 1000;
                        const sampleSize = shouldSample ? 1000 : array.length;
                        const step = shouldSample ? Math.ceil(array.length / sampleSize) : 1;

                        // Calculate bar width after container is in DOM and visible
                        const gap = 2;
                        const containerPadding = 32;
                        const containerWidth = container.clientWidth || container.offsetWidth || 800;
                        const availableWidth = Math.max(100, containerWidth - containerPadding);
                        const totalBars = shouldSample ? sampleSize : array.length;
                        
                        // Calculate bar width to fit container, but ensure visibility
                        let barWidth = null;
                        let useFlex = false;
                        
                        if (array.length <= 200) {
                            useFlex = true;
                        } else {
                            // Large arrays: ensure minimum 2px width for visibility
                            const calculatedWidth = (availableWidth / totalBars) - gap;
                            barWidth = Math.max(2, Math.min(calculatedWidth, 30));
                            
                            // If bars would be too small, ensure they're at least 2px and container will scroll
                            if (calculatedWidth < 2) {
                                barWidth = 2;
                            }
                        }

                        for (let i = 0; i < array.length; i += step) {
                            const val = array[i];
                            if (isNaN(val)) continue;
                            
                            const bar = document.createElement('div');
                            bar.className = 'bar';
                            bar.style.height = `${(val / maxVal) * 100}%`;
                            
                            // Set width based on array size
                            if (useFlex) {
                                bar.style.flex = '1 1 auto';
                                bar.style.minWidth = '0';
                            } else if (barWidth !== null) {
                                // Large arrays: explicit width to ensure visibility and scrolling
                                bar.style.width = `${barWidth}px`;
                                bar.style.minWidth = `${barWidth}px`;
                                bar.style.maxWidth = `${barWidth}px`;
                                bar.style.flexShrink = '0';
                                bar.style.flexGrow = '0';
                            } else if (shouldSample) {
                                bar.style.width = `${step * 100 / sampleSize}%`;
                            }

                            // Apply visual states - only one state per bar (sorted > swapping > comparing)
                            if (sorted.includes(i)) {
                                bar.classList.add('sorted');
                            } else if (swapping.includes(i)) {
                                bar.classList.add('swapping');
                            } else if (comparing.includes(i)) {
                                bar.classList.add('comparing');
                            }

                            container.appendChild(bar);
                        }
                    } catch (error) {
                        console.error('Error rendering comparison:', error);
                    }
                });
            }
        };

        // Store reference for pause/stop control
        if (panelNum === 1) this.compareViz1 = tempViz;
        else this.compareViz2 = tempViz;

        // Run the algorithm
        switch (algoKey) {
            case 'bubbleSort': await this.bubbleSortForComparison(tempViz); break;
            case 'quickSort': await this.quickSortForComparison(tempViz, 0, array.length - 1); break;
            case 'mergeSort': await this.mergeSortWrapperForComparison(tempViz); break;
            case 'insertionSort': await this.insertionSortForComparison(tempViz); break;
            case 'selectionSort': await this.selectionSortForComparison(tempViz); break;
            case 'heapSort': await this.heapSortForComparison(tempViz); break;
        }

        const endTime = performance.now();
        const elapsed = endTime - startTime;

        // Calculate simulated execution time based on operations and language speed
        // Base time per operation (in ms) - comparisons and swaps have different weights
        const baseTimePerComparison = 0.1; // ms per comparison
        const baseTimePerSwap = 0.2; // ms per swap (swaps are more expensive)
        const totalOperations = (comparisons.count * baseTimePerComparison) + (swaps.count * baseTimePerSwap);
        const simulatedTime = totalOperations / langSpeed;

        // Update time display
        const timeId = `sortTime${panelNum}`;
        const timeEl = document.getElementById(timeId);
        if (timeEl) {
            const format = simulatedTime >= 2000 ? getBestTimeFormat(simulatedTime) : 'ms';
            timeEl.textContent = formatTimeValue(simulatedTime, format);
        }

        // Final render
        tempViz.render([], [], Array.from({ length: array.length }, (_, i) => i));

        return {
            time: simulatedTime, // Use simulated time for comparison
            comparisons: comparisons.count,
            swaps: swaps.count,
            algorithm: algoKey
        };
    }

    displayComparisonResults(result1, result2) {
        const winner = result1.time < result2.time ? 1 : 2;
        const faster = result1.time < result2.time ? result1 : result2;
        const slower = result1.time < result2.time ? result2 : result1;
        const speedup = slower.time > 0 ? (slower.time / faster.time).toFixed(2) : '1.00';

        // Highlight winner
        const panel1 = document.querySelector('#sortingBars1').closest('.compare-panel');
        const panel2 = document.querySelector('#sortingBars2').closest('.compare-panel');

        // Remove any existing winner badges
        const existingBadges1 = panel1?.querySelectorAll('.winner-badge');
        const existingBadges2 = panel2?.querySelectorAll('.winner-badge');
        existingBadges1?.forEach(b => b.remove());
        existingBadges2?.forEach(b => b.remove());

        if (panel1) {
            panel1.style.borderColor = winner === 1 ? '#22c55e' : 'var(--border-color)';
            panel1.style.borderWidth = winner === 1 ? '3px' : '1px';

            // Add winner badge
            if (winner === 1) {
                const badge = document.createElement('div');
                badge.className = 'winner-badge';
                badge.textContent = `⚡ ${speedup}x Faster`;
                badge.style.cssText = 'position: absolute; top: 10px; right: 10px; background: #22c55e; color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; z-index: 10;';
                panel1.style.position = 'relative';
                panel1.appendChild(badge);
            }
        }

        if (panel2) {
            panel2.style.borderColor = winner === 2 ? '#22c55e' : 'var(--border-color)';
            panel2.style.borderWidth = winner === 2 ? '3px' : '1px';

            // Add winner badge
            if (winner === 2) {
                const badge = document.createElement('div');
                badge.className = 'winner-badge';
                badge.textContent = `⚡ ${speedup}x Faster`;
                badge.style.cssText = 'position: absolute; top: 10px; right: 10px; background: #22c55e; color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; z-index: 10;';
                panel2.style.position = 'relative';
                panel2.appendChild(badge);
            }
        }
    }

    // Comparison versions of sorting algorithms (simplified, no audio)
    async bubbleSortForComparison(viz) {
        const n = viz.array.length;
        for (let i = 0; i < n - 1 && !viz.shouldStop; i++) {
            for (let j = 0; j < n - i - 1 && !viz.shouldStop; j++) {
                viz.comparisons.count++;
                viz.updateStat('comparisons', viz.comparisons.count);
                viz.render([j, j + 1], []);
                if (viz.array[j] > viz.array[j + 1]) {
                    [viz.array[j], viz.array[j + 1]] = [viz.array[j + 1], viz.array[j]];
                    viz.swaps.count++;
                    viz.updateStat('swaps', viz.swaps.count);
                    viz.render([], [j, j + 1]);
                }
                await viz.delay();
            }
        }
    }

    async insertionSortForComparison(viz) {
        for (let i = 1; i < viz.array.length && !viz.shouldStop; i++) {
            let key = viz.array[i];
            let j = i - 1;
            while (j >= 0 && viz.array[j] > key && !viz.shouldStop) {
                viz.comparisons.count++;
                viz.updateStat('comparisons', viz.comparisons.count);
                viz.array[j + 1] = viz.array[j];
                viz.swaps.count++;
                viz.updateStat('swaps', viz.swaps.count);
                viz.render([j], [j + 1]);
                await viz.delay();
                j--;
            }
            viz.array[j + 1] = key;
        }
    }

    async selectionSortForComparison(viz) {
        for (let i = 0; i < viz.array.length - 1 && !viz.shouldStop; i++) {
            let minIdx = i;
            for (let j = i + 1; j < viz.array.length && !viz.shouldStop; j++) {
                viz.comparisons.count++;
                viz.updateStat('comparisons', viz.comparisons.count);
                viz.render([minIdx, j], []);
                await viz.delay();
                if (viz.array[j] < viz.array[minIdx]) {
                    minIdx = j;
                }
            }
            if (minIdx !== i && !viz.shouldStop) {
                [viz.array[i], viz.array[minIdx]] = [viz.array[minIdx], viz.array[i]];
                viz.swaps.count++;
                viz.updateStat('swaps', viz.swaps.count);
                viz.render([], [i, minIdx]);
                await viz.delay();
            }
        }
    }

    async quickSortForComparison(viz, low, high) {
        if (low < high && !viz.shouldStop) {
            const pi = await this.partitionForComparison(viz, low, high);
            await this.quickSortForComparison(viz, low, pi - 1);
            await this.quickSortForComparison(viz, pi + 1, high);
        }
    }

    async partitionForComparison(viz, low, high) {
        const pivot = viz.array[high];
        let i = low - 1;
        for (let j = low; j < high && !viz.shouldStop; j++) {
            viz.comparisons.count++;
            viz.updateStat('comparisons', viz.comparisons.count);
            viz.render([j, high], []);
            await viz.delay();
            if (viz.array[j] < pivot) {
                i++;
                [viz.array[i], viz.array[j]] = [viz.array[j], viz.array[i]];
                viz.swaps.count++;
                viz.updateStat('swaps', viz.swaps.count);
                viz.render([], [i, j]);
                await viz.delay();
            }
        }
        if (!viz.shouldStop) {
            [viz.array[i + 1], viz.array[high]] = [viz.array[high], viz.array[i + 1]];
            viz.swaps.count++;
            viz.updateStat('swaps', viz.swaps.count);
        }
        return i + 1;
    }

    async mergeSortWrapperForComparison(viz) {
        await this.mergeSortForComparison(viz, 0, viz.array.length - 1);
    }

    async mergeSortForComparison(viz, l, r) {
        if (l < r && !viz.shouldStop) {
            const m = Math.floor((l + r) / 2);
            await this.mergeSortForComparison(viz, l, m);
            await this.mergeSortForComparison(viz, m + 1, r);
            await this.mergeForComparison(viz, l, m, r);
        }
    }

    async mergeForComparison(viz, l, m, r) {
        const left = viz.array.slice(l, m + 1);
        const right = viz.array.slice(m + 1, r + 1);
        let i = 0, j = 0, k = l;
        while (i < left.length && j < right.length && !viz.shouldStop) {
            viz.comparisons.count++;
            viz.updateStat('comparisons', viz.comparisons.count);
            if (left[i] <= right[j]) {
                viz.array[k] = left[i++];
            } else {
                viz.array[k] = right[j++];
            }
            viz.render([k], []);
            k++;
            await viz.delay();
        }
        while (i < left.length && !viz.shouldStop) {
            viz.array[k++] = left[i++];
            viz.render([k - 1], []);
            await viz.delay();
        }
        while (j < right.length && !viz.shouldStop) {
            viz.array[k++] = right[j++];
            viz.render([k - 1], []);
            await viz.delay();
        }
    }

    async heapSortForComparison(viz) {
        const n = viz.array.length;
        for (let i = Math.floor(n / 2) - 1; i >= 0 && !viz.shouldStop; i--) {
            await this.heapifyForComparison(viz, n, i);
        }
        for (let i = n - 1; i > 0 && !viz.shouldStop; i--) {
            [viz.array[0], viz.array[i]] = [viz.array[i], viz.array[0]];
            viz.swaps.count++;
            viz.updateStat('swaps', viz.swaps.count);
            viz.render([], [0, i]);
            await viz.delay();
            await this.heapifyForComparison(viz, i, 0);
        }
    }

    async heapifyForComparison(viz, n, i) {
        if (viz.shouldStop) return;
        let largest = i;
        const left = 2 * i + 1;
        const right = 2 * i + 2;
        if (left < n) {
            viz.comparisons.count++;
            if (viz.array[left] > viz.array[largest]) largest = left;
        }
        if (right < n) {
            viz.comparisons.count++;
            if (viz.array[right] > viz.array[largest]) largest = right;
        }
        viz.updateStat('comparisons', viz.comparisons.count);
        if (largest !== i && !viz.shouldStop) {
            [viz.array[i], viz.array[largest]] = [viz.array[largest], viz.array[i]];
            viz.swaps.count++;
            viz.updateStat('swaps', viz.swaps.count);
            viz.render([i, largest], []);
            await viz.delay();
            await this.heapifyForComparison(viz, n, largest);
        }
    }

    getDelay() {
        // Speed calculation: 
        // - speed 25 = 0.5x (slower)
        // - speed 50 = 1x (normal)
        // - speed 100 = 2x (faster)
        // - speed 150 = 3x (much faster)
        // - speed 250 = 5x (very fast)
        const multiplier = this.speed / 50;
        // Base delay decreases as speed increases
        // For higher speeds, reduce delay more aggressively
        // BUT: maintain minimum delay to ensure browser can render visual state changes
        let baseDelay;
        if (this.speed <= 50) {
            // 0.5x to 1x: linear decrease
            baseDelay = Math.max(1, 101 - this.speed);
        } else if (this.speed <= 100) {
            // 1x to 2x: faster decrease
            baseDelay = Math.max(1, 51 - ((this.speed - 50) * 0.5));
        } else if (this.speed <= 150) {
            // 2x to 3x: even faster decrease, but maintain minimum for rendering
            baseDelay = Math.max(2, 26 - ((this.speed - 100) * 0.3));
        } else {
            // 3x to 5x: very fast decrease, but maintain minimum 2ms for browser rendering
            baseDelay = Math.max(2, 11 - ((this.speed - 150) * 0.1));
        }
        // Ensure minimum delay of 2ms at high speeds to allow browser to render state changes
        return Math.max(2, baseDelay / multiplier);
    }

    async delay() {
        if (this.shouldStop) return;
        // Wait for resume if paused
        while (this.isPaused && !this.shouldStop) {
            await new Promise(resolve => setTimeout(resolve, 50));
        }
        if (this.shouldStop) return;
        return new Promise(resolve => setTimeout(resolve, this.getDelay()));
    }

    async bubbleSort() {
        const n = this.array.length;
        for (let i = 0; i < n - 1 && !this.shouldStop; i++) {
            for (let j = 0; j < n - i - 1 && !this.shouldStop; j++) {
                this.comparisons++;
                this.updateStat('comparisons', this.comparisons);
                this.render([j, j + 1], []);
                if (typeof audioEngine !== 'undefined') audioEngine.playComparison(this.array[j], this.array[j + 1]);

                if (this.array[j] > this.array[j + 1]) {
                    [this.array[j], this.array[j + 1]] = [this.array[j + 1], this.array[j]];
                    this.swaps++;
                    this.updateStat('swaps', this.swaps);
                    this.render([], [j, j + 1]);
                    if (typeof audioEngine !== 'undefined') audioEngine.playSwap();
                }
                await this.delay();
            }
        }
    }

    async insertionSort() {
        for (let i = 1; i < this.array.length && !this.shouldStop; i++) {
            let key = this.array[i];
            let j = i - 1;

            while (j >= 0 && this.array[j] > key && !this.shouldStop) {
                this.comparisons++;
                this.updateStat('comparisons', this.comparisons);
                this.array[j + 1] = this.array[j];
                this.swaps++;
                this.updateStat('swaps', this.swaps);
                this.render([j], [j + 1]);
                if (typeof audioEngine !== 'undefined') audioEngine.playInsert();
                await this.delay();
                j--;
            }
            this.array[j + 1] = key;
        }
    }

    async selectionSort() {
        for (let i = 0; i < this.array.length - 1 && !this.shouldStop; i++) {
            let minIdx = i;
            for (let j = i + 1; j < this.array.length && !this.shouldStop; j++) {
                this.comparisons++;
                this.updateStat('comparisons', this.comparisons);
                this.render([minIdx, j], []);
                if (typeof audioEngine !== 'undefined') audioEngine.playTone(this.array[j]);
                await this.delay();
                if (this.array[j] < this.array[minIdx]) {
                    minIdx = j;
                }
            }
            if (minIdx !== i && !this.shouldStop) {
                [this.array[i], this.array[minIdx]] = [this.array[minIdx], this.array[i]];
                this.swaps++;
                this.updateStat('swaps', this.swaps);
                this.render([], [i, minIdx]);
                if (typeof audioEngine !== 'undefined') audioEngine.playSwap();
                await this.delay();
            }
        }
    }

    async quickSort(low, high) {
        if (low < high && !this.shouldStop) {
            const pi = await this.partition(low, high);
            await this.quickSort(low, pi - 1);
            await this.quickSort(pi + 1, high);
        }
    }

    async partition(low, high) {
        const pivot = this.array[high];
        if (typeof audioEngine !== 'undefined') audioEngine.playPivot();
        let i = low - 1;

        for (let j = low; j < high && !this.shouldStop; j++) {
            this.comparisons++;
            this.updateStat('comparisons', this.comparisons);
            this.render([j, high], []);
            await this.delay();

            if (this.array[j] < pivot) {
                i++;
                [this.array[i], this.array[j]] = [this.array[j], this.array[i]];
                this.swaps++;
                this.updateStat('swaps', this.swaps);
                this.render([], [i, j]);
                if (typeof audioEngine !== 'undefined') audioEngine.playSwap();
                await this.delay();
            }
        }
        if (!this.shouldStop) {
            [this.array[i + 1], this.array[high]] = [this.array[high], this.array[i + 1]];
            this.swaps++;
            this.updateStat('swaps', this.swaps);
        }
        return i + 1;
    }

    async mergeSortWrapper() {
        await this.mergeSort(0, this.array.length - 1);
    }

    async mergeSort(l, r) {
        if (l < r && !this.shouldStop) {
            const m = Math.floor((l + r) / 2);
            await this.mergeSort(l, m);
            await this.mergeSort(m + 1, r);
            await this.merge(l, m, r);
        }
    }

    async merge(l, m, r) {
        const left = this.array.slice(l, m + 1);
        const right = this.array.slice(m + 1, r + 1);
        let i = 0, j = 0, k = l;

        while (i < left.length && j < right.length && !this.shouldStop) {
            this.comparisons++;
            this.updateStat('comparisons', this.comparisons);

            if (left[i] <= right[j]) {
                this.array[k] = left[i++];
            } else {
                this.array[k] = right[j++];
            }
            this.render([k], []);
            if (typeof audioEngine !== 'undefined') audioEngine.playMerge();
            k++;
            await this.delay();
        }

        while (i < left.length && !this.shouldStop) {
            this.array[k++] = left[i++];
            this.render([k - 1], []);
            await this.delay();
        }

        while (j < right.length && !this.shouldStop) {
            this.array[k++] = right[j++];
            this.render([k - 1], []);
            await this.delay();
        }
    }

    async heapSort() {
        const n = this.array.length;

        for (let i = Math.floor(n / 2) - 1; i >= 0 && !this.shouldStop; i--) {
            await this.heapify(n, i);
        }

        for (let i = n - 1; i > 0 && !this.shouldStop; i--) {
            [this.array[0], this.array[i]] = [this.array[i], this.array[0]];
            this.swaps++;
            this.updateStat('swaps', this.swaps);
            this.render([], [0, i]);
            if (typeof audioEngine !== 'undefined') audioEngine.playSwap();
            await this.delay();
            await this.heapify(i, 0);
        }
    }

    async heapify(n, i) {
        if (this.shouldStop) return;
        let largest = i;
        const left = 2 * i + 1;
        const right = 2 * i + 2;

        if (left < n) {
            this.comparisons++;
            if (this.array[left] > this.array[largest]) largest = left;
        }
        if (right < n) {
            this.comparisons++;
            if (this.array[right] > this.array[largest]) largest = right;
        }

        this.updateStat('comparisons', this.comparisons);

        if (largest !== i && !this.shouldStop) {
            [this.array[i], this.array[largest]] = [this.array[largest], this.array[i]];
            this.swaps++;
            this.updateStat('swaps', this.swaps);
            this.render([i, largest], []);
            if (typeof audioEngine !== 'undefined') audioEngine.playHeapify();
            await this.delay();
            await this.heapify(n, largest);
        }
    }

    async bucketSort() {
        const n = this.array.length;
        if (n <= 0) return;
        const max = Math.max(...this.array);
        const min = Math.min(...this.array);
        const bucketCount = n;
        const buckets = Array(bucketCount).fill(null).map(() => []);
        const bucketSize = (max - min) / bucketCount;

        for (let num of this.array) {
            const bucketIndex = Math.floor((num - min) / bucketSize);
            const idx = bucketIndex === bucketCount ? bucketCount - 1 : bucketIndex;
            buckets[idx].push(num);
        }

        let index = 0;
        for (let i = 0; i < buckets.length && !this.shouldStop; i++) {
            buckets[i].sort((a, b) => a - b);
            for (let j = 0; j < buckets[i].length && !this.shouldStop; j++) {
                this.array[index++] = buckets[i][j];
                this.comparisons++;
                this.updateStat('comparisons', this.comparisons);
                this.render([index - 1], []);
                if (typeof audioEngine !== 'undefined') audioEngine.playCompare();
                await this.delay();
            }
        }
    }

    async cocktailSort() {
        let swapped = true;
        let start = 0;
        let end = this.array.length - 1;

        while (swapped && !this.shouldStop) {
            swapped = false;
            for (let i = start; i < end && !this.shouldStop; i++) {
                this.comparisons++;
                this.updateStat('comparisons', this.comparisons);
                if (this.array[i] > this.array[i + 1]) {
                    [this.array[i], this.array[i + 1]] = [this.array[i + 1], this.array[i]];
                    this.swaps++;
                    this.updateStat('swaps', this.swaps);
                    this.render([i, i + 1], []);
                    if (typeof audioEngine !== 'undefined') audioEngine.playSwap();
                    await this.delay();
                    swapped = true;
                }
            }
            if (!swapped) break;
            swapped = false;
            end--;
            for (let i = end - 1; i >= start && !this.shouldStop; i--) {
                this.comparisons++;
                this.updateStat('comparisons', this.comparisons);
                if (this.array[i] > this.array[i + 1]) {
                    [this.array[i], this.array[i + 1]] = [this.array[i + 1], this.array[i]];
                    this.swaps++;
                    this.updateStat('swaps', this.swaps);
                    this.render([i, i + 1], []);
                    if (typeof audioEngine !== 'undefined') audioEngine.playSwap();
                    await this.delay();
                    swapped = true;
                }
            }
            start++;
        }
    }

    async combSort() {
        const shrink = 1.3;
        let gap = this.array.length;
        let sorted = false;

        while (!sorted && !this.shouldStop) {
            gap = Math.floor(gap / shrink);
            if (gap <= 1) {
                gap = 1;
                sorted = true;
            }
            for (let i = 0; i + gap < this.array.length && !this.shouldStop; i++) {
                this.comparisons++;
                this.updateStat('comparisons', this.comparisons);
                if (this.array[i] > this.array[i + gap]) {
                    [this.array[i], this.array[i + gap]] = [this.array[i + gap], this.array[i]];
                    this.swaps++;
                    this.updateStat('swaps', this.swaps);
                    this.render([i, i + gap], []);
                    if (typeof audioEngine !== 'undefined') audioEngine.playSwap();
                    await this.delay();
                    sorted = false;
                }
            }
        }
    }

    async cycleSort() {
        for (let cycleStart = 0; cycleStart < this.array.length - 1 && !this.shouldStop; cycleStart++) {
            let item = this.array[cycleStart];
            let pos = cycleStart;
            for (let i = cycleStart + 1; i < this.array.length && !this.shouldStop; i++) {
                this.comparisons++;
                this.updateStat('comparisons', this.comparisons);
                if (this.array[i] < item) pos++;
            }
            if (pos === cycleStart) continue;
            while (item === this.array[pos] && !this.shouldStop) pos++;
            [this.array[pos], item] = [item, this.array[pos]];
            this.swaps++;
            this.updateStat('swaps', this.swaps);
            this.render([pos], []);
            if (typeof audioEngine !== 'undefined') audioEngine.playSwap();
            await this.delay();
            while (pos !== cycleStart && !this.shouldStop) {
                pos = cycleStart;
                for (let i = cycleStart + 1; i < this.array.length && !this.shouldStop; i++) {
                    this.comparisons++;
                    this.updateStat('comparisons', this.comparisons);
                    if (this.array[i] < item) pos++;
                }
                while (item === this.array[pos] && !this.shouldStop) pos++;
                [this.array[pos], item] = [item, this.array[pos]];
                this.swaps++;
                this.updateStat('swaps', this.swaps);
                this.render([pos], []);
                if (typeof audioEngine !== 'undefined') audioEngine.playSwap();
                await this.delay();
            }
        }
    }

    async gnomeSort() {
        let index = 0;
        while (index < this.array.length && !this.shouldStop) {
            if (index === 0 || this.array[index] >= this.array[index - 1]) {
                index++;
            } else {
                this.comparisons++;
                this.updateStat('comparisons', this.comparisons);
                [this.array[index], this.array[index - 1]] = [this.array[index - 1], this.array[index]];
                this.swaps++;
                this.updateStat('swaps', this.swaps);
                this.render([index, index - 1], []);
                if (typeof audioEngine !== 'undefined') audioEngine.playSwap();
                await this.delay();
                index--;
            }
        }
    }

    async pancakeSort() {
        for (let currSize = this.array.length; currSize > 1 && !this.shouldStop; currSize--) {
            let maxIdx = 0;
            for (let i = 0; i < currSize && !this.shouldStop; i++) {
                this.comparisons++;
                this.updateStat('comparisons', this.comparisons);
                if (this.array[i] > this.array[maxIdx]) maxIdx = i;
            }
            if (maxIdx !== currSize - 1) {
                await this.flip(maxIdx);
                await this.flip(currSize - 1);
            }
        }
    }

    async flip(k) {
        let start = 0;
        while (start < k && !this.shouldStop) {
            [this.array[start], this.array[k]] = [this.array[k], this.array[start]];
            this.swaps++;
            this.updateStat('swaps', this.swaps);
            this.render([start, k], []);
            if (typeof audioEngine !== 'undefined') audioEngine.playSwap();
            await this.delay();
            start++;
            k--;
        }
    }

    setAlgorithm(algo) {
        this.currentAlgorithm = algo;
    }
}

class PathfindingVisualizer {
    constructor() {
        this.grid = [];
        this.rows = 15;
        this.cols = 35;
        this.startCell = { row: 7, col: 3 };
        this.endCell = { row: 7, col: 31 };
        this.isRunning = false;
        this.shouldStop = false;
        this.isDrawing = false;
        this.currentAlgorithm = 'bfs';
        this.container = document.getElementById('pathGrid');
        this.speed = 50;
        this.isCompareMode = false;
        this.isCompareRunning = false;
        this.isComparePaused = false;
        this.compareViz1 = null;
        this.compareViz2 = null;
        this.init();
    }

    init() {
        this.initGrid();
        this.bindEvents();
    }

    initGrid() {
        if (!this.container) return;

        this.shouldStop = true;
        this.isRunning = false;

        // Cleanup old event listeners
        if (this.grid && this.grid.length > 0) {
            this.grid.forEach(row => {
                row.forEach(cell => {
                    if (cell && cell._handlers) {
                        const handlers = cell._handlers;
                        const cellEl = Array.from(this.container.children).find(
                            el => el.dataset.row == cell.row && el.dataset.col == cell.col
                        );
                        if (cellEl) {
                            cellEl.removeEventListener('mousedown', handlers.handleMouseDown);
                            cellEl.removeEventListener('mouseenter', handlers.handleMouseEnter);
                            cellEl.removeEventListener('mouseup', handlers.handleMouseUp);
                        }
                    }
                });
            });
        }

        this.grid = [];
        this.container.innerHTML = '';
        this.container.style.gridTemplateColumns = `repeat(${this.cols}, 22px)`;

        for (let i = 0; i < this.rows; i++) {
            this.grid[i] = [];
            for (let j = 0; j < this.cols; j++) {
                const cell = document.createElement('div');
                cell.className = 'cell';
                cell.dataset.row = i;
                cell.dataset.col = j;

                if (i === this.startCell.row && j === this.startCell.col) {
                    cell.classList.add('start');
                    cell.textContent = 'S';
                } else if (i === this.endCell.row && j === this.endCell.col) {
                    cell.classList.add('end');
                    cell.textContent = 'E';
                }

                // Mouse events for drawing walls (throttled for performance)
                let lastToggleTime = 0;
                const throttleDelay = 16; // ~60fps

                const handleMouseDown = (e) => {
                    e.preventDefault();
                    if (!this.isRunning) {
                        this.isDrawing = true;
                        this.toggleWall(i, j);
                        lastToggleTime = Date.now();
                    }
                };

                const handleMouseEnter = () => {
                    const now = Date.now();
                    if (this.isDrawing && !this.isRunning && (now - lastToggleTime) >= throttleDelay) {
                        this.toggleWall(i, j);
                        lastToggleTime = now;
                    }
                };

                const handleMouseUp = () => {
                    this.isDrawing = false;
                };

                cell.addEventListener('mousedown', handleMouseDown);
                cell.addEventListener('mouseenter', handleMouseEnter);
                cell.addEventListener('mouseup', handleMouseUp);

                // Store handlers for cleanup
                cell._handlers = { handleMouseDown, handleMouseEnter, handleMouseUp };

                this.container.appendChild(cell);
                this.grid[i][j] = { isWall: false, isVisited: false, isPath: false };
            }
        }

        // Global mouseup to stop drawing (with cleanup)
        if (this.globalMouseUpHandler) {
            document.removeEventListener('mouseup', this.globalMouseUpHandler);
        }
        this.globalMouseUpHandler = () => {
            this.isDrawing = false;
        };
        document.addEventListener('mouseup', this.globalMouseUpHandler);

        this.resetStats();
        this.shouldStop = false;
    }

    bindEvents() {
        const generateBtn = document.getElementById('generateMaze');
        const startBtn = document.getElementById('startPath');
        const clearBtn = document.getElementById('clearPath');
        const speedSlider = document.getElementById('pathSpeed');
        const infoBtn = document.getElementById('pathInfoBtn');
        const toggleCompareBtn = document.getElementById('togglePathCompare');
        const startCompareBtn = document.getElementById('startPathCompare');
        const pauseResumeCompareBtn = document.getElementById('pauseResumePathCompare');
        const stopCompareBtn = document.getElementById('stopPathCompare');
        const compareControls = document.getElementById('pathCompareControls');
        const compareContainer = document.getElementById('pathCompareContainer');
        const regularViz = document.getElementById('pathRegularVisualization');

        if (generateBtn) generateBtn.addEventListener('click', () => this.generateMaze());
        if (startBtn) startBtn.addEventListener('click', () => this.start());
        if (clearBtn) clearBtn.addEventListener('click', () => this.clearAll());
        if (infoBtn) infoBtn.addEventListener('click', () => this.showPathInfo());

        if (speedSlider) {
            const multiplierEl = document.getElementById('pathSpeedMultiplier');
            speedSlider.addEventListener('input', (e) => {
                this.speed = parseInt(e.target.value);
                if (multiplierEl) {
                    const multiplier = Math.round((this.speed / 50) * 10) / 10;
                    multiplierEl.textContent = `${multiplier}x`;
                }
            });
            if (multiplierEl) {
                multiplierEl.textContent = '1x';
            }
        }

        if (toggleCompareBtn) {
            toggleCompareBtn.addEventListener('click', () => {
                this.isCompareMode = !this.isCompareMode;
                if (this.isCompareMode) {
                    this.stopComparison();
                    if (compareControls) compareControls.style.display = 'block';
                    if (compareContainer) compareContainer.style.display = 'grid';
                    if (regularViz) regularViz.style.display = 'none';
                    toggleCompareBtn.textContent = '❌ Exit Compare';
                    toggleCompareBtn.classList.add('active');
                } else {
                    this.stopComparison();
                    if (compareControls) compareControls.style.display = 'none';
                    if (compareContainer) compareContainer.style.display = 'none';
                    if (regularViz) regularViz.style.display = 'block';
                    toggleCompareBtn.textContent = '⚔️ Compare';
                    toggleCompareBtn.classList.remove('active');
                }
            });
        }

        if (startCompareBtn) {
            startCompareBtn.addEventListener('click', () => this.startComparison());
        }

        if (pauseResumeCompareBtn) {
            pauseResumeCompareBtn.addEventListener('click', () => this.togglePauseResumeCompare());
        }

        if (stopCompareBtn) {
            stopCompareBtn.addEventListener('click', () => this.stopComparison());
        }

        // Close info modal handlers
        const closeBtn = document.getElementById('pathInfoCloseBtn');
        if (closeBtn) {
            closeBtn.onclick = () => {
                const modal = document.getElementById('pathInfoModal');
                if (modal) modal.style.display = 'none';
            };
        }

        const modal = document.getElementById('pathInfoModal');
        if (modal) {
            modal.onclick = (e) => {
                if (e.target === modal) {
                    modal.style.display = 'none';
                }
            };
        }
    }

    showPathInfo() {
        const rows = this.rows;
        const cols = this.cols;
        const totalCells = rows * cols;
        const wallCount = this.grid.reduce((count, row) =>
            count + row.filter(cell => cell.isWall).length, 0
        );
        const modal = document.getElementById('pathInfoModal');
        const content = document.getElementById('pathInfoContent');

        if (content) {
            content.innerHTML = `
                <div class="search-info-grid">
                    <div class="search-info-item">
                        <span class="search-info-label">Grid Size:</span>
                        <span class="search-info-value">${rows} × ${cols}</span>
                    </div>
                    <div class="search-info-item">
                        <span class="search-info-label">Total Cells:</span>
                        <span class="search-info-value">${totalCells}</span>
                    </div>
                    <div class="search-info-item">
                        <span class="search-info-label">Walls:</span>
                        <span class="search-info-value">${wallCount}</span>
                    </div>
                    <div class="search-info-item">
                        <span class="search-info-label">Start:</span>
                        <span class="search-info-value">(${this.startCell.row}, ${this.startCell.col})</span>
                    </div>
                    <div class="search-info-item">
                        <span class="search-info-label">End:</span>
                        <span class="search-info-value">(${this.endCell.row}, ${this.endCell.col})</span>
                    </div>
                    <div class="search-info-item">
                        <span class="search-info-label">Algorithm:</span>
                        <span class="search-info-value">${this.currentAlgorithm.toUpperCase()}</span>
                    </div>
                </div>
            `;
        }

        if (modal) modal.style.display = 'flex';
    }

    async startComparison() {
        if (this.isCompareRunning) return;

        const algo1 = document.getElementById('pathCompareAlgo1')?.value || 'bfs';
        const algo2 = document.getElementById('pathCompareAlgo2')?.value || 'dfs';
        const lang1 = document.getElementById('pathCompareLang1')?.value || 'python';
        const lang2 = document.getElementById('pathCompareLang2')?.value || 'java';

        // Update algorithm names
        const name1El = document.getElementById('pathCompareAlgo1Name');
        const name2El = document.getElementById('pathCompareAlgo2Name');
        if (name1El) name1El.textContent = `${algo1.toUpperCase()} (${lang1})`;
        if (name2El) name2El.textContent = `${algo2.toUpperCase()} (${lang2})`;

        // Create common grid state
        const commonGrid = this.grid.map(row => row.map(cell => ({ ...cell })));

        // Initialize comparison grids
        this.initComparisonGrid(1, commonGrid);
        this.initComparisonGrid(2, commonGrid);

        // Reset stats
        document.getElementById('nodesVisited1').textContent = '0';
        document.getElementById('nodesVisited2').textContent = '0';
        document.getElementById('pathLength1').textContent = '0';
        document.getElementById('pathLength2').textContent = '0';
        document.getElementById('pathTime1').textContent = '0ms';
        document.getElementById('pathTime2').textContent = '0ms';

        // Reset panels
        const panel1 = document.querySelector('#pathGrid1').closest('.compare-panel');
        const panel2 = document.querySelector('#pathGrid2').closest('.compare-panel');
        if (panel1) panel1.style.borderColor = 'var(--border-color)';
        if (panel2) panel2.style.borderColor = 'var(--border-color)';

        this.isCompareRunning = true;
        this.isComparePaused = false;
        this.updateCompareButtonStates();

        // Run both algorithms in parallel
        const [result1, result2] = await Promise.all([
            this.runAlgorithmForComparison(algo1, lang1, 1, commonGrid),
            this.runAlgorithmForComparison(algo2, lang2, 2, commonGrid)
        ]);

        if (!this.isComparePaused && this.isCompareRunning) {
            this.displayComparisonResults(result1, result2);
        }

        this.isCompareRunning = false;
        this.updateCompareButtonStates();
        // Show feedback modal after comparison completion
        if (typeof showFeedbackModal === 'function') {
            setTimeout(() => showFeedbackModal(), 1000); // Delay 1 second after completion
        }
    }

    initComparisonGrid(panelNum, gridData) {
        const container = document.getElementById(`pathGrid${panelNum}`);
        if (!container) return;

        container.innerHTML = '';
        container.style.gridTemplateColumns = `repeat(${this.cols}, 22px)`;

        for (let i = 0; i < this.rows; i++) {
            for (let j = 0; j < this.cols; j++) {
                const cell = document.createElement('div');
                cell.className = 'cell';
                cell.dataset.row = i;
                cell.dataset.col = j;

                if (i === this.startCell.row && j === this.startCell.col) {
                    cell.classList.add('start');
                    cell.textContent = 'S';
                } else if (i === this.endCell.row && j === this.endCell.col) {
                    cell.classList.add('end');
                    cell.textContent = 'E';
                } else if (gridData[i][j].isWall) {
                    cell.classList.add('wall');
                }

                container.appendChild(cell);
            }
        }
    }

    async runAlgorithmForComparison(algoKey, langKey, panelNum, gridData) {
        const container = document.getElementById(`pathGrid${panelNum}`);
        if (!container) return { time: 0, nodesVisited: 0, pathLength: 0 };

        const startTime = performance.now();
        let nodesVisited = 0;
        let pathLength = 0;

        const langSpeed = LANGUAGE_SPEED[langKey] || 1.0;
        const baseDelay = this.getDelay();
        const delay = Math.max(1, baseDelay / langSpeed);

        // Run BFS for comparison (simplified)
        const path = await this.bfsForComparison(container, gridData, delay, panelNum);

        const endTime = performance.now();
        const elapsed = endTime - startTime;

        if (path) {
            pathLength = path.length;
            await this.animatePathForComparison(container, path, panelNum);
        }

        // Calculate simulated execution time based on nodes visited and language speed
        // Base time per node (in ms) - adjusted by language speed
        const baseTimePerNode = 0.4; // ms per node
        const simulatedTime = (nodesVisited * baseTimePerNode) / langSpeed;

        // Update stats
        document.getElementById(`nodesVisited${panelNum}`).textContent = nodesVisited;
        document.getElementById(`pathLength${panelNum}`).textContent = pathLength;
        const timeEl = document.getElementById(`pathTime${panelNum}`);
        if (timeEl) {
            const format = simulatedTime >= 2000 ? getBestTimeFormat(simulatedTime) : 'ms';
            timeEl.textContent = formatTimeValue(simulatedTime, format);
        }

        return {
            time: simulatedTime, // Use simulated time for comparison
            nodesVisited: nodesVisited,
            pathLength: pathLength
        };
    }

    async bfsForComparison(container, gridData, delay, panelNum) {
        const queue = [{ row: this.startCell.row, col: this.startCell.col, path: [{ row: this.startCell.row, col: this.startCell.col }] }];
        const visited = new Set();
        visited.add(`${this.startCell.row},${this.startCell.col}`);
        let nodesVisited = 0;
        const directions = [[-1, 0], [1, 0], [0, -1], [0, 1]];

        while (queue.length > 0 && this.isCompareRunning && !this.isComparePaused) {
            const { row, col, path } = queue.shift();
            nodesVisited++;

            // Update nodes visited stat
            document.getElementById(`nodesVisited${panelNum}`).textContent = nodesVisited;

            if (row === this.endCell.row && col === this.endCell.col) {
                document.getElementById(`pathLength${panelNum}`).textContent = path.length;
                return path;
            }

            // Mark as visited
            const cell = container.children[row * this.cols + col];
            if (cell && !cell.classList.contains('start') && !cell.classList.contains('end')) {
                cell.classList.add('visited');
            }

            await new Promise(r => setTimeout(r, delay));

            // Explore neighbors
            for (const [dr, dc] of directions) {
                if (!this.isCompareRunning || this.isComparePaused) break;

                const newRow = row + dr;
                const newCol = col + dc;
                const key = `${newRow},${newCol}`;

                if (newRow >= 0 && newRow < this.rows &&
                    newCol >= 0 && newCol < this.cols &&
                    !visited.has(key) &&
                    !gridData[newRow][newCol].isWall) {

                    visited.add(key);
                    queue.push({
                        row: newRow,
                        col: newCol,
                        path: [...path, { row: newRow, col: newCol }]
                    });
                }
            }
        }

        return null;
    }

    async animatePathForComparison(container, path, panelNum) {
        for (let i = 0; i < path.length && this.isCompareRunning; i++) {
            const { row, col } = path[i];
            const cell = container.children[row * this.cols + col];
            if (cell && !cell.classList.contains('start') && !cell.classList.contains('end')) {
                cell.classList.remove('visited');
                cell.classList.add('path');
            }
            await new Promise(r => setTimeout(r, 30));
        }
    }

    displayComparisonResults(result1, result2) {
        const winner = result1.time < result2.time ? 1 : 2;
        const faster = result1.time < result2.time ? result1 : result2;
        const slower = result1.time < result2.time ? result2 : result1;
        const speedup = slower.time > 0 ? (slower.time / faster.time).toFixed(2) : '1.00';

        const panel1 = document.querySelector('#pathGrid1').closest('.compare-panel');
        const panel2 = document.querySelector('#pathGrid2').closest('.compare-panel');

        // Remove any existing winner badges
        const existingBadges1 = panel1?.querySelectorAll('.winner-badge');
        const existingBadges2 = panel2?.querySelectorAll('.winner-badge');
        existingBadges1?.forEach(b => b.remove());
        existingBadges2?.forEach(b => b.remove());

        if (panel1) {
            panel1.style.borderColor = winner === 1 ? '#22c55e' : 'var(--border-color)';
            panel1.style.borderWidth = winner === 1 ? '3px' : '1px';

            if (winner === 1) {
                const badge = document.createElement('div');
                badge.className = 'winner-badge';
                badge.textContent = `⚡ ${speedup}x Faster`;
                badge.style.cssText = 'position: absolute; top: 10px; right: 10px; background: #22c55e; color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; z-index: 10;';
                panel1.style.position = 'relative';
                panel1.appendChild(badge);
            }
        }

        if (panel2) {
            panel2.style.borderColor = winner === 2 ? '#22c55e' : 'var(--border-color)';
            panel2.style.borderWidth = winner === 2 ? '3px' : '1px';

            if (winner === 2) {
                const badge = document.createElement('div');
                badge.className = 'winner-badge';
                badge.textContent = `⚡ ${speedup}x Faster`;
                badge.style.cssText = 'position: absolute; top: 10px; right: 10px; background: #22c55e; color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; z-index: 10;';
                panel2.style.position = 'relative';
                panel2.appendChild(badge);
            }
        }
    }

    togglePauseResumeCompare() {
        if (this.isComparePaused) {
            this.resumeComparison();
        } else {
            this.pauseComparison();
        }
    }

    pauseComparison() {
        this.isComparePaused = true;
        this.updateCompareButtonStates();
    }

    resumeComparison() {
        this.isComparePaused = false;
        this.updateCompareButtonStates();
    }

    stopComparison() {
        this.isCompareRunning = false;
        this.isComparePaused = false;
        this.updateCompareButtonStates();
    }

    updateCompareButtonStates() {
        const pauseResumeBtn = document.getElementById('pauseResumePathCompare');
        const stopBtn = document.getElementById('stopPathCompare');

        if (this.isCompareRunning) {
            if (pauseResumeBtn) {
                pauseResumeBtn.style.visibility = 'visible';
                pauseResumeBtn.style.position = 'static';
                pauseResumeBtn.style.opacity = '1';
                pauseResumeBtn.style.pointerEvents = 'auto';
                pauseResumeBtn.textContent = this.isComparePaused ? '▶ Resume' : '⏸ Pause';
            }
            if (stopBtn) {
                stopBtn.style.visibility = 'visible';
                stopBtn.style.position = 'static';
                stopBtn.style.opacity = '1';
                stopBtn.style.pointerEvents = 'auto';
            }
        } else {
            if (pauseResumeBtn) {
                pauseResumeBtn.style.visibility = 'hidden';
                pauseResumeBtn.style.position = 'absolute';
                pauseResumeBtn.style.opacity = '0';
                pauseResumeBtn.style.pointerEvents = 'none';
            }
            if (stopBtn) {
                stopBtn.style.visibility = 'hidden';
                stopBtn.style.position = 'absolute';
                stopBtn.style.opacity = '0';
                stopBtn.style.pointerEvents = 'none';
            }
        }
    }

    toggleWall(row, col) {
        if ((row === this.startCell.row && col === this.startCell.col) ||
            (row === this.endCell.row && col === this.endCell.col)) return;

        this.grid[row][col].isWall = !this.grid[row][col].isWall;
        const cell = this.container.children[row * this.cols + col];
        if (cell) {
            cell.classList.toggle('wall');
            if (typeof audioEngine !== 'undefined') audioEngine.playPop();
        }
    }

    generateMaze() {
        this.clearAll();
        for (let i = 0; i < this.rows; i++) {
            for (let j = 0; j < this.cols; j++) {
                if ((i === this.startCell.row && j === this.startCell.col) ||
                    (i === this.endCell.row && j === this.endCell.col)) continue;

                if (Math.random() < 0.3) {
                    this.grid[i][j].isWall = true;
                    const cell = this.container.children[i * this.cols + j];
                    if (cell) cell.classList.add('wall');
                }
            }
        }
        if (typeof audioEngine !== 'undefined') audioEngine.playBattleStart();
    }

    clearPath() {
        for (let i = 0; i < this.rows; i++) {
            for (let j = 0; j < this.cols; j++) {
                this.grid[i][j].isVisited = false;
                this.grid[i][j].isPath = false;
                const cell = this.container.children[i * this.cols + j];
                if (cell) cell.classList.remove('visited', 'path', 'current');
            }
        }
        this.resetStats();
    }

    clearAll() {
        this.stop();
        for (let i = 0; i < this.rows; i++) {
            for (let j = 0; j < this.cols; j++) {
                this.grid[i][j].isWall = false;
                this.grid[i][j].isVisited = false;
                this.grid[i][j].isPath = false;
                const cell = this.container.children[i * this.cols + j];
                if (cell) cell.classList.remove('visited', 'path', 'wall', 'current');
            }
        }
        this.resetStats();
    }

    resetStats() {
        this.updateStat('nodesVisited', '0');
        this.updateStat('pathLength', '0');
        this.updateStat('pathTime', '0ms');
    }

    updateStat(id, value) {
        const el = document.getElementById(id);
        if (el) el.textContent = value;
    }

    stop() {
        this.shouldStop = true;
        this.isRunning = false;
        // Reset visual state when stopped
        this.clearPath();
    }

    reset() {
        this.stop();
        this.clearPath();
        this.resetStats();
    }

    getDelay() {
        const baseDelay = Math.max(5, 105 - this.speed);
        const multiplier = this.speed / 50;
        return Math.max(1, baseDelay / multiplier);
    }

    async start() {
        if (this.isRunning) return;

        this.clearPath();
        this.isRunning = true;
        this.shouldStop = false;

        if (typeof audioEngine !== 'undefined') audioEngine.playBattleStart();

        const startTime = performance.now();
        const path = await this.bfs();
        const endTime = performance.now();

        if (!this.shouldStop) {
            const elapsed = endTime - startTime;
            rawTimeValues.pathTime = elapsed;
            const formatSelect = document.getElementById('pathTimeFormat');
            let format = formatSelect ? formatSelect.value : 'ms';
            if (elapsed >= 2000) {
                const bestFormat = getBestTimeFormat(elapsed);
                format = bestFormat;
                if (formatSelect) formatSelect.value = bestFormat;
            }
            this.updateStat('pathTime', formatTimeValue(elapsed, format));

            if (path && path.length > 0) {
                await this.animatePath(path);
                if (typeof audioEngine !== 'undefined') audioEngine.playPathFound();
            } else {
                if (typeof audioEngine !== 'undefined') audioEngine.playError();
            }
        }

        this.isRunning = false;
        // Show feedback modal after algorithm completion
        if (typeof showFeedbackModal === 'function') {
            setTimeout(() => showFeedbackModal(), 1000); // Delay 1 second after completion
        }
    }

    async bfs() {
        const queue = [{ row: this.startCell.row, col: this.startCell.col, path: [{ row: this.startCell.row, col: this.startCell.col }] }];
        const visited = new Set();
        visited.add(`${this.startCell.row},${this.startCell.col}`);
        let nodesVisited = 0;

        const directions = [[-1, 0], [1, 0], [0, -1], [0, 1]];

        while (queue.length > 0 && !this.shouldStop) {
            const { row, col, path } = queue.shift();
            nodesVisited++;
            this.updateStat('nodesVisited', nodesVisited);

            // Check if we reached the end
            if (row === this.endCell.row && col === this.endCell.col) {
                this.updateStat('pathLength', path.length);
                return path;
            }

            // Mark cell as visited (visual)
            const cell = this.container.children[row * this.cols + col];
            if (cell && !cell.classList.contains('start') && !cell.classList.contains('end')) {
                cell.classList.add('visited');
                if (typeof audioEngine !== 'undefined' && nodesVisited % 3 === 0) {
                    audioEngine.playVisit();
                }
            }

            await new Promise(r => setTimeout(r, this.getDelay()));

            // Explore neighbors
            for (const [dr, dc] of directions) {
                if (this.shouldStop) break;

                const newRow = row + dr;
                const newCol = col + dc;
                const key = `${newRow},${newCol}`;

                if (newRow >= 0 && newRow < this.rows &&
                    newCol >= 0 && newCol < this.cols &&
                    !visited.has(key) &&
                    !this.grid[newRow][newCol].isWall) {

                    visited.add(key);
                    queue.push({
                        row: newRow,
                        col: newCol,
                        path: [...path, { row: newRow, col: newCol }]
                    });
                }
            }
        }

        return null; // No path found
    }

    async animatePath(path) {
        for (let i = 0; i < path.length && !this.shouldStop; i++) {
            const { row, col } = path[i];
            const cell = this.container.children[row * this.cols + col];
            if (cell && !cell.classList.contains('start') && !cell.classList.contains('end')) {
                cell.classList.remove('visited');
                cell.classList.add('path');
                if (typeof audioEngine !== 'undefined') audioEngine.playStep(i, path.length);
            }
            await new Promise(r => setTimeout(r, 30));
        }
    }

    setAlgorithm(algo) {
        this.currentAlgorithm = algo;
    }
}

class LanguageArena {
    constructor() {
        this.isRacing = false;
        this.shouldStop = false;
        this.selectedLanguages = [];
        this.iterations = 10000;
        this.algorithm = 'fibonacci';
        this.results = [];
        this.animationFrames = [];
        this.init();
    }

    init() {
        this.updateSelectedLanguages();
        this.bindEvents();
        this.renderTracks();
        this.setupTimeFormatListeners();
    }

    setupTimeFormatListeners() {
        // Set up listeners for time format dropdowns with cleanup
        this.selectedLanguages.forEach(lang => {
            const formatSelect = document.getElementById(`arenaTimeFormat-${lang}`);
            if (formatSelect) {
                // Remove old listener if exists
                if (formatSelect._changeHandler) {
                    formatSelect.removeEventListener('change', formatSelect._changeHandler);
                }

                // Create and store new handler
                formatSelect._changeHandler = (e) => {
                    const timeValueEl = document.querySelector(`#time-${lang} .time-value`);
                    if (timeValueEl && this.rawTimes[lang] > 0) {
                        let format = e.target.value;
                        const time = this.rawTimes[lang];

                        // Auto-format: if >= 2000ms, use seconds
                        if (time >= 2000 && time < 60000) {
                            format = 's';
                            e.target.value = format;
                        }
                        // Auto-format large values even if user selects 'ms'
                        else if (format === 'ms' && time >= 60000) {
                            format = getBestTimeFormat(time);
                            e.target.value = format;
                        }
                        // Always use best format for very large values regardless of selection
                        if (time >= 86400000) {
                            format = 'd';
                            e.target.value = format;
                        } else if (time >= 3600000) {
                            format = 'h';
                            e.target.value = format;
                        }
                        timeValueEl.textContent = formatTimeValue(time, format);
                    }
                };

                formatSelect.addEventListener('change', formatSelect._changeHandler);
            }
        });
    }

    updateSelectedLanguages() {
        const langCheckboxes = document.querySelectorAll('#languageSelection input[type="checkbox"]');
        this.selectedLanguages = Array.from(langCheckboxes)
            .filter(c => c.checked)
            .map(c => c.value);
    }

    bindEvents() {
        const startBtn = document.getElementById('startRace');
        const resetBtn = document.getElementById('resetRace');
        const selectAllBtn = document.getElementById('selectAllLanguages');
        const iterSelect = document.getElementById('arenaIterations');
        const algoSelect = document.getElementById('arenaAlgorithm');
        const langCheckboxes = document.querySelectorAll('#languageSelection input');

        if (startBtn) startBtn.addEventListener('click', () => this.startRace());
        if (resetBtn) resetBtn.addEventListener('click', () => this.reset());

        if (selectAllBtn) {
            const updateSelectAllButton = () => {
                const allChecked = Array.from(langCheckboxes).every(cb => cb.checked);
                selectAllBtn.textContent = allChecked ? 'Deselect All' : 'Select All';
            };

            selectAllBtn.addEventListener('click', () => {
                const allChecked = Array.from(langCheckboxes).every(cb => cb.checked);
                langCheckboxes.forEach(cb => cb.checked = !allChecked);
                this.updateSelectedLanguages();
                this.renderTracks();
                this.setupTimeFormatListeners();
                updateSelectAllButton();
            });

            langCheckboxes.forEach(cb => {
                cb.addEventListener('change', () => {
                    updateSelectAllButton();
                });
            });

            updateSelectAllButton();
        }

        if (iterSelect) {
            iterSelect.addEventListener('change', (e) => {
                this.iterations = parseInt(e.target.value);
            });
        }

        if (algoSelect) {
            algoSelect.addEventListener('change', (e) => {
                this.algorithm = e.target.value;
            });
        }

        langCheckboxes.forEach(cb => {
            cb.addEventListener('change', () => {
                this.updateSelectedLanguages();
                this.renderTracks();
                this.setupTimeFormatListeners();
            });
        });
    }

    stop() {
        this.shouldStop = true;
        this.isRacing = false;
        this.animationFrames.forEach(id => cancelAnimationFrame(id));
        this.animationFrames = [];
    }

    renderTracks() {
        const container = document.getElementById('raceTracks');
        if (!container) return;

        // Use DocumentFragment for better performance
        const fragment = document.createDocumentFragment();
        const oldTracks = container.querySelectorAll('.race-track');

        // Cleanup old event listeners before removing
        oldTracks.forEach(track => {
            const timeFormatSelect = track.querySelector('select');
            if (timeFormatSelect && timeFormatSelect._changeHandler) {
                timeFormatSelect.removeEventListener('change', timeFormatSelect._changeHandler);
            }
        });

        // Batch DOM updates
        container.innerHTML = '';

        // Get cached language info for better performance
        const langInfo = getLanguageInfo();

        this.selectedLanguages.forEach(lang => {
            const info = langInfo[lang];
            if (!info) return;

            const track = document.createElement('div');
            track.className = 'race-track';
            track.id = `track-${lang}`;
            track.innerHTML = `
                <div class="track-lang">
                    <img src="${info.icon}" alt="${info.name}" class="lang-icon-img" loading="lazy" />
                    <span class="lang-name">${info.name}</span>
                </div>
                <div class="track-bar">
                    <div class="track-runner" id="runner-${lang}">
                        <img src="${info.icon}" alt="${info.name}" class="lang-icon-img runner-icon" loading="lazy" />
                    </div>
                </div>
                <div class="track-time" id="time-${lang}">
                    <span class="time-value">-</span>
                    <select class="time-format-select" id="arenaTimeFormat-${lang}">
                        <option value="ms" selected>ms</option>
                        <option value="s">sec</option>
                        <option value="m">min</option>
                        <option value="h">hrs</option>
                        <option value="d">day</option>
                    </select>
                </div>
                <div class="track-position" id="position-${lang}">-</div>
            `;
            container.appendChild(track);
        });

        // Set up time format listeners after tracks are rendered
        this.setupTimeFormatListeners();
    }

    async startRace() {
        if (this.isRacing) return;
        if (this.selectedLanguages.length < 2) {
            alert('Select at least 2 languages to race!');
            return;
        }

        this.isRacing = true;
        this.shouldStop = false;
        this.results = [];

        const resultsEl = document.getElementById('arenaResults');
        if (resultsEl) resultsEl.style.display = 'none';

        // Reset all tracks
        this.selectedLanguages.forEach(lang => {
            const runnerEl = document.getElementById(`runner-${lang}`);
            const timeEl = document.getElementById(`time-${lang}`);
            const timeValueEl = timeEl ? timeEl.querySelector('.time-value') : null;
            const posEl = document.getElementById(`position-${lang}`);
            const trackEl = document.getElementById(`track-${lang}`);

            if (runnerEl) {
                runnerEl.style.left = '0px'; // Start at left edge (0px, not 0%)
                runnerEl.style.transform = 'translateX(0)';
            }
            if (timeValueEl) timeValueEl.textContent = '-';
            if (posEl) posEl.textContent = '-';
            if (trackEl) trackEl.classList.remove('winner', 'finished');
            this.rawTimes[lang] = 0;
        });

        if (typeof audioEngine !== 'undefined') audioEngine.playBattleStart();

        // Calculate simulated times
        const baseTime = this.getBaseTime();
        const times = {};

        this.selectedLanguages.forEach(lang => {
            // Add realistic variance (5-10% random variation)
            const variance = 0.95 + Math.random() * 0.1;
            const speedMultiplier = LANGUAGE_SPEED[lang] || 10;

            // Calculate time: base time * language speed multiplier * variance
            times[lang] = baseTime * speedMultiplier * variance;

            // Ensure minimum time for very fast operations
            if (times[lang] < 0.1) {
                times[lang] = 0.1 + Math.random() * 0.5;
            }
        });

        const minTime = Math.min(...Object.values(times));
        const maxTime = Math.max(...Object.values(times));

        // Calculate animation duration based on actual execution times
        // Map execution time to animation duration for better alignment
        const baseAnimationDuration = this.calculateAnimationDurationFromTime(minTime, maxTime);

        // Start all runners
        const promises = this.selectedLanguages.map(lang => {
            return this.runRacer(lang, times[lang], minTime, baseAnimationDuration, maxTime);
        });

        await Promise.all(promises);

        if (!this.shouldStop) {
            // Sort results
            this.results.sort((a, b) => a.time - b.time);

            // Show positions
            this.results.forEach((result, idx) => {
                const posEl = document.getElementById(`position-${result.lang}`);
                if (posEl) {
                    posEl.textContent = `#${idx + 1}`;
                    if (idx === 0) {
                        const trackEl = document.getElementById(`track-${result.lang}`);
                        if (trackEl) trackEl.classList.add('winner');
                        if (typeof audioEngine !== 'undefined') audioEngine.playComplete();
                    }
                }
            });

            // Show results
            this.showResults();
        }

        this.isRacing = false;
        // Show feedback modal after race completion
        if (typeof showFeedbackModal === 'function') {
            setTimeout(() => showFeedbackModal(), 1000); // Delay 1 second after completion
        }
    }

    calculateAnimationDurationFromTime(minTime, maxTime) {
        // Calculate animation duration based on actual execution times
        // Align animation speed with language execution speed

        // Convert times from milliseconds to seconds for easier calculation
        const minTimeSeconds = minTime / 1000;
        const maxTimeSeconds = maxTime / 1000;

        // Map execution time to animation duration
        // For very fast times (< 0.01s = 10ms): 2-3 seconds animation
        // For fast times (0.01-0.1s = 10-100ms): 3-5 seconds animation
        // For medium times (0.1-1s = 100ms-1s): 5-10 seconds animation
        // For slow times (1-10s): 10-20 seconds animation
        // For very slow times (> 10s): 20-60 seconds animation

        if (minTimeSeconds < 0.01) {
            // Very fast (< 10ms): 2-3 seconds
            return 2500; // 2.5 seconds
        } else if (minTimeSeconds < 0.1) {
            // Fast (10-100ms): 3-5 seconds, scale with time
            const ratio = (minTimeSeconds - 0.01) / (0.1 - 0.01);
            return Math.round(3000 + (5000 - 3000) * ratio);
        } else if (minTimeSeconds < 1) {
            // Medium (100ms-1s): 5-10 seconds, scale with time
            const ratio = (minTimeSeconds - 0.1) / (1 - 0.1);
            return Math.round(5000 + (10000 - 5000) * ratio);
        } else if (minTimeSeconds < 10) {
            // Slow (1-10s): 10-20 seconds, scale with time
            const ratio = (minTimeSeconds - 1) / (10 - 1);
            return Math.round(10000 + (20000 - 10000) * ratio);
        } else {
            // Very slow (> 10s): 20-60 seconds, scale with time
            const ratio = Math.min(1, (minTimeSeconds - 10) / 50); // Cap at 60s for times up to 60s
            return Math.round(20000 + (60000 - 20000) * ratio);
        }
    }

    getBaseTime() {
        const iter = this.iterations;

        const normalizeIter = (value) => {
            if (value > 1000000000) return value / 1000000;
            if (value > 1000000) return value / 1000;
            return value;
        };

        const normalizedIter = normalizeIter(iter);
        const scaleFactor = iter > 1000000000 ? 1000000 : iter > 1000000 ? 1000 : 1;

        switch (this.algorithm) {
            case 'fibonacci':
                return normalizedIter * 0.8 * scaleFactor;
            case 'factorial':
                return normalizedIter * 0.1 * scaleFactor;
            case 'loop':
                return normalizedIter * 0.008 * scaleFactor;
            case 'arraySum':
                return normalizedIter * 0.01 * scaleFactor;
            case 'stringConcat':
                return normalizedIter * 0.05 * scaleFactor;

            case 'sorting':
            case 'quickSort':
                return normalizedIter * Math.log2(normalizedIter || 1) * 0.08 * scaleFactor;
            case 'mergeSort':
                return normalizedIter * Math.log2(normalizedIter || 1) * 0.1 * scaleFactor;
            case 'heapSort':
                return normalizedIter * Math.log2(normalizedIter || 1) * 0.12 * scaleFactor;

            case 'nestedLoop':
                return normalizedIter * normalizedIter * 0.0008 * scaleFactor;
            case 'bubbleSort':
                return normalizedIter * normalizedIter * 0.01 * scaleFactor;
            case 'matrix':
            case 'matrixMultiplication':
                const size = Math.sqrt(normalizedIter);
                return size * size * size * 0.3 * scaleFactor;
            case 'selectionSort':
                return normalizedIter * normalizedIter * 0.012 * scaleFactor;

            case 'primes':
                return normalizedIter * Math.log2(Math.log2(normalizedIter || 1) || 1) * 10 * scaleFactor;

            case 'binarySearch':
                return Math.log2(normalizedIter || 1) * 100 * scaleFactor;

            case 'recursiveFibonacci':
                const expLimit = Math.min(normalizedIter / 100, 20);
                return Math.pow(2, expLimit) * 500 * scaleFactor;

            case 'permutations':
                const n = Math.min(normalizedIter / 1000, 10);
                let fact = 1;
                for (let i = 2; i <= n; i++) fact *= i;
                return fact * 100 * scaleFactor;

            case 'graphBFS':
                return normalizedIter * 0.2 * scaleFactor;
            case 'graphDFS':
                return normalizedIter * 0.15 * scaleFactor;
            case 'dijkstra':
                return normalizedIter * normalizedIter * 0.02 * scaleFactor;

            case 'stringSearch':
            case 'stringPatternSearch':
                return normalizedIter * 0.03 * scaleFactor;
            case 'stringHash':
            case 'stringHashing':
                return normalizedIter * 0.02 * scaleFactor;

            default:
                return normalizedIter * 1 * scaleFactor;
        }
    }

    async runRacer(lang, time, minTime, baseDuration, maxTime) {
        const runnerEl = document.getElementById(`runner-${lang}`);
        const timeEl = document.getElementById(`time-${lang}`);
        const trackEl = document.getElementById(`track-${lang}`);
        const trackBarEl = trackEl ? trackEl.querySelector('.track-bar') : null;

        if (!runnerEl || !trackBarEl) return;

        // Calculate racer duration based on relative performance
        // Fastest language uses full baseDuration, slower ones scale proportionally
        // But ensure all finish within the calculated window
        const timeRatio = time / maxTime; // Ratio compared to slowest
        const racerDuration = baseDuration * timeRatio;

        const info = getLanguageInfo()[lang];
        // Get the actual usable width of the track (accounting for any padding)
        const trackRect = trackBarEl.getBoundingClientRect();
        const trackWidth = trackRect.width;
        const ballSize = 40; // Size of the ball
        // Calculate max position so ball goes edge-to-edge
        // Ball starts at left edge (0) and ends at right edge (trackWidth - ballSize)
        // This ensures the ball's right edge touches the track's right edge
        const maxPosition = Math.max(0, trackWidth - ballSize);

        // Ensure ball starts at left edge
        runnerEl.style.left = '0px';

        return new Promise(resolve => {
            const startTime = performance.now();
            let lastTickTime = 0;

            const animate = () => {
                if (this.shouldStop) {
                    resolve();
                    return;
                }

                const elapsed = performance.now() - startTime;
                const progress = Math.min(elapsed / racerDuration, 1);

                // Calculate position: smooth, slow progression from left edge to right edge
                // Use easing function for natural, engaging movement
                // Ease-in-out cubic for smooth acceleration and deceleration
                const easeInOutCubic = (t) => {
                    return t < 0.5
                        ? 4 * t * t * t
                        : 1 - Math.pow(-2 * t + 2, 3) / 2;
                };

                // Apply easing to progress for smooth, slow movement
                const easedProgress = easeInOutCubic(progress);

                // Add very subtle oscillation for visual interest (minimal back-and-forth)
                // Only 1-2 gentle cycles throughout the entire duration for engagement
                const cycles = Math.max(1, Math.min(2, Math.floor(racerDuration / 8000)));
                const subtleOscillation = Math.sin(progress * Math.PI * cycles) * 0.02; // Very subtle (2% max)

                // Combine: almost pure forward progress with minimal oscillation
                // 98% forward progress, 2% subtle oscillation for visual interest
                const finalProgress = Math.max(0, Math.min(1, easedProgress + subtleOscillation));

                // Calculate actual position - move slowly and smoothly from 0 (left edge) to maxPosition (right edge)
                // The ball will take the full duration to travel edge-to-edge
                let position = finalProgress * maxPosition;
                // Ensure we stay within bounds
                position = Math.max(0, Math.min(maxPosition, position));
                runnerEl.style.left = `${position}px`;
                runnerEl.style.transform = `translateX(0)`;

                // Play tick sound periodically (more frequent for longer race)
                if (elapsed - lastTickTime > 150 && typeof audioEngine !== 'undefined') {
                    audioEngine.playRaceTick(progress * 10);
                    lastTickTime = elapsed;
                }

                if (progress < 1) {
                    const frameId = requestAnimationFrame(animate);
                    this.animationFrames.push(frameId);
                } else {
                    // Ensure ball reaches the end
                    runnerEl.style.left = `${maxPosition}px`;
                    if (trackEl) trackEl.classList.add('finished');

                    // Store raw time value
                    this.rawTimes[lang] = time;

                    // Auto-select best format and update dropdown for large values
                    const formatSelect = document.getElementById(`arenaTimeFormat-${lang}`);
                    let bestFormat = getBestTimeFormat(time);

                    // If time is >= 2000ms (2 seconds), use seconds format
                    if (time >= 2000 && time < 60000) {
                        bestFormat = 's';
                    }

                    if (formatSelect) {
                        if (time >= 2000) {
                            formatSelect.value = bestFormat;
                        }
                    }

                    // Use best format for display if value is >= 2000ms, otherwise use dropdown value
                    const format = (time >= 2000) ? bestFormat : (formatSelect ? formatSelect.value : 'ms');
                    const displayTime = formatTimeValue(time, format);

                    const timeValueEl = timeEl ? timeEl.querySelector('.time-value') : null;
                    if (timeValueEl) timeValueEl.textContent = displayTime;


                    this.results.push({ lang, time, displayTime });
                    if (typeof audioEngine !== 'undefined') audioEngine.playSuccess();
                    resolve();
                }
            };

            const frameId = requestAnimationFrame(animate);
            this.animationFrames.push(frameId);
        });
    }

    // Format time to appropriate unit
    formatTime(ms) {
        if (ms < 1000) {
            return `${ms.toFixed(2)}ms`;
        } else if (ms < 60000) {
            return `${(ms / 1000).toFixed(2)}s`;
        } else {
            const minutes = Math.floor(ms / 60000);
            const seconds = ((ms % 60000) / 1000).toFixed(1);
            return `${minutes}m ${seconds}s`;
        }
    }

    showResults() {
        const resultsEl = document.getElementById('arenaResults');
        if (!resultsEl || this.results.length < 3) return;

        // Always populate results first
        this.populateResults();

        // Check if we should show complexity graph (5 times per session, unlimited on localhost)
        const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
        const graphShownKey = 'complexityGraphShown';
        let graphShownCount = parseInt(sessionStorage.getItem(graphShownKey) || '0');

        // Show graph if: localhost (unlimited) OR less than 5 times
        if (isLocalhost || graphShownCount < 5) {
            // Show the complexity graph first, then results after it closes
            this.showComplexityGraph();
            // Only increment counter if not localhost
            if (!isLocalhost) {
                graphShownCount++;
                sessionStorage.setItem(graphShownKey, graphShownCount.toString());
            }
            // Results will be shown after graph closes (in hideComplexityGraph)
            return;
        }

        // Show results directly if graph already shown 5 times (and not localhost)
        resultsEl.style.display = 'block';
    }

    populateResults() {
        const resultsEl = document.getElementById('arenaResults');
        if (!resultsEl || this.results.length < 3) return;

        const first = this.results[0];
        const second = this.results[1];
        const third = this.results[2];

        const langInfo = getLanguageInfo();
        const updatePodium = (place, result) => {
            const nameEl = document.querySelector(`#${place} .lang-name`);
            const timeEl = document.querySelector(`#${place} .time`);
            if (nameEl) nameEl.textContent = langInfo[result.lang]?.name || result.lang;
            if (timeEl) timeEl.textContent = result.displayTime;
        };

        updatePodium('firstPlace', first);
        updatePodium('secondPlace', second);
        updatePodium('thirdPlace', third);

        const compEl = document.getElementById('speedComparison');
        if (compEl) {
            compEl.innerHTML = '<h4>Speed Comparison</h4>';

            const langInfo = getLanguageInfo();
            const fastest = this.results[0].time;
            this.results.forEach(result => {
                const info = langInfo[result.lang];
                if (!info) return;
                const ratio = (result.time / fastest).toFixed(2);
                const bar = document.createElement('div');
                bar.className = 'speed-bar';
                bar.innerHTML = `
                    <span class="speed-lang"><span style="color:${info.color}">${info.symbol}</span> ${info.name}</span>
                    <div class="speed-bar-fill" style="width: ${(fastest / result.time) * 100}%; background: ${info.color}"></div>
                    <span class="speed-ratio">${ratio}x</span>
                `;
                compEl.appendChild(bar);
            });
        }
    }

    showComplexityGraph() {
        const modal = document.getElementById('complexityGraphModal');
        const container = document.getElementById('complexityGraphContainer');
        if (!modal || !container) return;

        // Get algorithm complexity info
        const algoKey = this.algorithm;
        const algo = this.getAlgorithmComplexity(algoKey);

        // Render graph
        container.innerHTML = this.renderComplexityGraph(algo);

        // Show modal
        modal.style.display = 'flex';

        // Close button handler (X icon)
        const closeBtn = document.getElementById('closeComplexityGraphX');
        if (closeBtn) {
            // Remove old handlers
            closeBtn.onclick = null;
            closeBtn.addEventListener('click', () => this.hideComplexityGraph());
        }

        // Also close on backdrop click
        modal.onclick = (e) => {
            if (e.target === modal) {
                this.hideComplexityGraph();
            }
        };
    }

    hideComplexityGraph() {
        const modal = document.getElementById('complexityGraphModal');
        if (modal) {
            modal.style.display = 'none';
        }
        // Show results after graph closes
        const resultsEl = document.getElementById('arenaResults');
        if (resultsEl && this.results.length >= 3) {
            resultsEl.style.display = 'block';
        }
    }

    getAlgorithmComplexity(algorithm) {
        // Map algorithms to their time and space complexity
        const complexities = {
            'fibonacci': { time: 'O(n)', space: 'O(1)', name: 'Fibonacci' },
            'factorial': { time: 'O(n)', space: 'O(1)', name: 'Factorial' },
            'loop': { time: 'O(n)', space: 'O(1)', name: 'Loop' },
            'arraySum': { time: 'O(n)', space: 'O(1)', name: 'Array Sum' },
            'stringConcat': { time: 'O(n)', space: 'O(n)', name: 'String Concat' },
            'sorting': { time: 'O(n log n)', space: 'O(log n)', name: 'Quick Sort' },
            'mergeSort': { time: 'O(n log n)', space: 'O(n)', name: 'Merge Sort' },
            'heapSort': { time: 'O(n log n)', space: 'O(1)', name: 'Heap Sort' },
            'nestedLoop': { time: 'O(n²)', space: 'O(1)', name: 'Nested Loop' },
            'bubbleSort': { time: 'O(n²)', space: 'O(1)', name: 'Bubble Sort' },
            'selectionSort': { time: 'O(n²)', space: 'O(1)', name: 'Selection Sort' },
            'matrix': { time: 'O(n³)', space: 'O(n²)', name: 'Matrix Mult' },
            'primes': { time: 'O(n log log n)', space: 'O(n)', name: 'Sieve' },
            'binarySearch': { time: 'O(log n)', space: 'O(1)', name: 'Binary Search' },
            'recursiveFibonacci': { time: 'O(2^n)', space: 'O(n)', name: 'Recursive Fib' },
            'permutations': { time: 'O(n!)', space: 'O(n)', name: 'Permutations' },
            'graphBFS': { time: 'O(V+E)', space: 'O(V)', name: 'Graph BFS' },
            'graphDFS': { time: 'O(V+E)', space: 'O(V)', name: 'Graph DFS' },
            'dijkstra': { time: 'O(V²)', space: 'O(V)', name: "Dijkstra's" },
            'stringSearch': { time: 'O(n+m)', space: 'O(m)', name: 'String Search' },
            'stringHash': { time: 'O(n)', space: 'O(1)', name: 'String Hash' }
        };

        return complexities[algorithm] || { time: 'O(n)', space: 'O(1)', name: 'Algorithm' };
    }

    renderComplexityGraph(algo) {
        const langInfo = getLanguageInfo();
        const maxTime = Math.max(...this.results.map(r => r.time));
        const minTime = Math.min(...this.results.map(r => r.time));

        // Create SVG line graph (rectangular aspect ratio, larger for better visibility)
        const width = 900;
        const height = 500;
        const padding = { top: 60, right: 100, bottom: 100, left: 100 };
        const chartWidth = width - padding.left - padding.right;
        const chartHeight = height - padding.top - padding.bottom;

        let svg = `<svg width="${width}" height="${height}" style="background: transparent;">
            <defs>
                <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:#d4a574;stop-opacity:1" />
                    <stop offset="50%" style="stop-color:#93c5fd;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#8b6914;stop-opacity:1" />
                </linearGradient>
            </defs>
            
            <text x="${width / 2}" y="30" text-anchor="middle" fill="var(--text-primary)" font-size="22" font-weight="bold">${algo.name} - Performance Analysis</text>
            <text x="${width / 2}" y="52" text-anchor="middle" fill="var(--text-secondary)" font-size="14">Time: ${algo.time} | Space: ${algo.space}</text>
            
            <rect x="${padding.left}" y="${padding.top}" width="${chartWidth}" height="${chartHeight}" 
                  fill="var(--bg-tertiary)" rx="8" opacity="0.3"/>`;

        const gridDivisions = 10;
        const sortedResults = [...this.results].sort((a, b) => a.time - b.time);
        const numLanguages = sortedResults.length;

        for (let i = 0; i <= gridDivisions; i++) {
            const y = padding.top + (chartHeight / gridDivisions) * i;
            svg += `<line x1="${padding.left}" y1="${y}" x2="${padding.left + chartWidth}" y2="${y}" 
                     stroke="var(--border-color)" stroke-width="1" opacity="0.2"/>`;

            if (i % 2 === 0 || i === 0 || i === gridDivisions) {
                const timeValue = maxTime - ((maxTime - minTime) / gridDivisions) * i;
                let formattedTime;
                if (timeValue < 1) {
                    formattedTime = `${(timeValue * 1000).toFixed(1)}μs`;
                } else if (timeValue < 1000) {
                    formattedTime = `${timeValue.toFixed(1)}ms`;
                } else if (timeValue < 60000) {
                    formattedTime = `${(timeValue / 1000).toFixed(2)}s`;
                } else {
                    formattedTime = `${(timeValue / 60000).toFixed(1)}m`;
                }
                svg += `<text x="${padding.left - 15}" y="${y + 5}" text-anchor="end" 
                         fill="var(--text-primary)" font-size="11" font-weight="500">${formattedTime}</text>`;
            }
        }

        for (let i = 0; i < numLanguages; i++) {
            const x = padding.left + (numLanguages > 1 ? (chartWidth / (numLanguages - 1)) * i : chartWidth / 2);
            svg += `<line x1="${x}" y1="${padding.top}" x2="${x}" y2="${padding.top + chartHeight}" 
                     stroke="var(--border-color)" stroke-width="1" opacity="0.15"/>`;
        }

        const averageTime = this.results.reduce((sum, r) => sum + r.time, 0) / this.results.length;
        const avgY = padding.top + chartHeight - ((averageTime - minTime) / (maxTime - minTime || 1)) * chartHeight;
        svg += `<line x1="${padding.left}" y1="${avgY}" x2="${padding.left + chartWidth}" y2="${avgY}" 
                 stroke="var(--gold)" stroke-width="2" stroke-dasharray="5,5" opacity="0.6"/>
                 <text x="${padding.left + chartWidth + 10}" y="${avgY + 5}" 
                 fill="var(--gold)" font-size="10" font-weight="600">Avg</text>`;

        const points = [];

        sortedResults.forEach((result, idx) => {
            const info = langInfo[result.lang];
            if (!info) return;

            const x = padding.left + (numLanguages > 1 ? (chartWidth / (numLanguages - 1)) * idx : chartWidth / 2);
            const y = padding.top + chartHeight - ((result.time - minTime) / (maxTime - minTime || 1)) * chartHeight;
            points.push({ x, y, result, info });
        });

        // Draw line
        if (points.length > 1) {
            let pathData = `M ${points[0].x} ${points[0].y}`;
            for (let i = 1; i < points.length; i++) {
                pathData += ` L ${points[i].x} ${points[i].y}`;
            }

            svg += `<path d="${pathData}" fill="none" stroke="url(#lineGradient)" stroke-width="3" 
                     stroke-linecap="round" stroke-linejoin="round"/>`;
        }

        points.forEach((point, idx) => {
            const iconPath = point.info.icon;

            if (iconPath) {
                svg += `<g>
                    <circle cx="${point.x}" cy="${point.y}" r="12" fill="var(--bg-primary)" 
                            stroke="var(--border-color)" stroke-width="2"/>
                    <image x="${point.x - 10}" y="${point.y - 10}" width="20" height="20" 
                           href="${iconPath}" preserveAspectRatio="xMidYMid meet"/>
                </g>`;
            } else {
                svg += `<circle cx="${point.x}" cy="${point.y}" r="6" fill="${point.info.color}" 
                         stroke="var(--bg-primary)" stroke-width="2"/>`;
            }

            svg += `<text x="${point.x}" y="${padding.top + chartHeight + 25}" 
                     text-anchor="middle" fill="var(--text-primary)" font-size="13" font-weight="600">${point.info.symbol}</text>`;

            svg += `<text x="${point.x}" y="${padding.top + chartHeight + 42}" 
                     text-anchor="middle" fill="var(--text-secondary)" font-size="11">${point.info.name}</text>`;

            svg += `<text x="${point.x}" y="${point.y - 18}" 
                     text-anchor="middle" fill="var(--text-primary)" font-size="11" font-weight="600">${point.result.displayTime}</text>`;
        });

        // Y-axis label (larger and more visible)
        svg += `<text x="35" y="${height / 2}" text-anchor="middle" fill="var(--text-primary)" 
                 font-size="14" font-weight="600" transform="rotate(-90, 35, ${height / 2})">Execution Time</text>`;

        // X-axis label (larger and more visible)
        svg += `<text x="${width / 2}" y="${height - 25}" text-anchor="middle" 
                 fill="var(--text-primary)" font-size="14" font-weight="600">Languages (sorted by performance)</text>`;

        svg += `</svg>`;

        return svg;
    }

    reset() {
        this.stop();
        this.results = [];
        this.rawTimes = {};
        const resultsEl = document.getElementById('arenaResults');
        if (resultsEl) resultsEl.style.display = 'none';
        this.hideComplexityGraph();
        this.renderTracks();
    }
}

class SearchingVisualizer {
    constructor() {
        this.array = [];
        this.target = 42;
        this.isRunning = false;
        this.shouldStop = false;
        this.currentAlgorithm = 'binarySearch';
        this.container = document.getElementById('searchBars');
        this.isCompareMode = false;
        this.isCompareRunning = false;
        this.isComparePaused = false;
        this.compareViz1 = null;
        this.compareViz2 = null;
        this.speed = 50;
        this.init();
    }

    init() {
        this.generateArray();
        this.bindEvents();
    }

    stop() {
        this.shouldStop = true;
        this.isRunning = false;
        // Reset visual state when stopped
        this.render(); // Clear any highlighting states
    }

    reset() {
        this.stop();
        this.render();
        this.resetStats();
    }

    bindEvents() {
        const sizeSlider = document.getElementById('searchArraySize');
        const targetInput = document.getElementById('searchTarget');
        const generateBtn = document.getElementById('generateSearchArray');
        const startBtn = document.getElementById('startSearch');
        const speedSlider = document.getElementById('searchSpeed');
        const toggleCompareBtn = document.getElementById('toggleSearchCompare');
        const startCompareBtn = document.getElementById('startSearchCompare');
        const pauseResumeCompareBtn = document.getElementById('pauseResumeSearchCompare');
        const stopCompareBtn = document.getElementById('stopSearchCompare');
        const compareControls = document.getElementById('searchCompareControls');
        const compareContainer = document.getElementById('searchCompareContainer');

        if (sizeSlider) {
            sizeSlider.addEventListener('input', (e) => {
                const valEl = document.getElementById('searchArraySizeValue');
                if (valEl) valEl.textContent = e.target.value;
            });
        }

        if (targetInput) {
            targetInput.addEventListener('change', (e) => {
                this.target = parseInt(e.target.value);
            });
        }

        if (speedSlider) {
            const multiplierEl = document.getElementById('searchSpeedMultiplier');
            speedSlider.addEventListener('input', (e) => {
                this.speed = parseInt(e.target.value);
                if (multiplierEl) {
                    const multiplier = Math.round((this.speed / 50) * 10) / 10;
                    multiplierEl.textContent = `${multiplier}x`;
                }
            });
            if (multiplierEl) {
                multiplierEl.textContent = '1x';
            }
        }

        const infoBtn = document.getElementById('searchInfoBtn');

        if (generateBtn) generateBtn.addEventListener('click', () => this.generateArray());
        if (infoBtn) infoBtn.addEventListener('click', () => this.showArrayInfo());
        if (startBtn) startBtn.addEventListener('click', () => this.start());

        if (toggleCompareBtn) {
            toggleCompareBtn.addEventListener('click', () => {
                this.isCompareMode = !this.isCompareMode;
                const regularViz = document.getElementById('searchRegularVisualization');

                if (this.isCompareMode) {
                    this.stopComparison();
                    if (compareControls) compareControls.style.display = 'block';
                    if (compareContainer) compareContainer.style.display = 'grid';
                    if (regularViz) regularViz.style.display = 'none';
                    toggleCompareBtn.textContent = '❌ Exit Compare';
                    toggleCompareBtn.classList.add('active');
                } else {
                    this.stopComparison();
                    if (compareControls) compareControls.style.display = 'none';
                    if (compareContainer) compareContainer.style.display = 'none';
                    if (regularViz) regularViz.style.display = 'block';
                    toggleCompareBtn.textContent = '⚔️ Compare';
                    toggleCompareBtn.classList.remove('active');
                }
            });
        }

        if (startCompareBtn) {
            startCompareBtn.addEventListener('click', () => this.startComparison());
        }

        if (pauseResumeCompareBtn) {
            pauseResumeCompareBtn.addEventListener('click', () => this.togglePauseResumeCompare());
        }

        if (stopCompareBtn) {
            stopCompareBtn.addEventListener('click', () => this.stopComparison());
        }
    }

    generateArray() {
        this.stop();
        const sizeEl = document.getElementById('searchArraySize');
        const size = parseInt(sizeEl?.value || 20);
        // Generate array with exact size: [5, 10, 15, ..., size*5]
        this.array = Array.from({ length: size }, (_, i) => (i + 1) * 5);
        // Sort array for binary search compatibility
        this.array.sort((a, b) => a - b);
        this.render();
        this.resetStats();
    }

    showArrayInfo() {
        if (!this.array || this.array.length === 0) {
            const modal = document.getElementById('searchInfoModal');
            const content = document.getElementById('searchInfoContent');
            if (content) {
                content.innerHTML = '<p style="text-align: center; color: var(--text-secondary);">Please generate an array first by clicking "Generate"</p>';
            }
            if (modal) modal.style.display = 'flex';
            return;
        }

        const size = this.array.length;
        const min = Math.min(...this.array);
        const max = Math.max(...this.array);
        const sorted = [...this.array].sort((a, b) => a - b);
        const isSorted = JSON.stringify(this.array) === JSON.stringify(sorted);

        // Show first 20 and last 20 values if array is large
        let arrayPreview = '';
        if (size <= 40) {
            arrayPreview = this.array.join(', ');
        } else {
            const first20 = this.array.slice(0, 20).join(', ');
            const last20 = this.array.slice(-20).join(', ');
            arrayPreview = `${first20} ... <span style="color: var(--text-secondary);">(${size - 40} more values)</span> ... ${last20}`;
        }

        const modal = document.getElementById('searchInfoModal');
        const content = document.getElementById('searchInfoContent');

        if (content) {
            content.innerHTML = `
                <div class="search-info-grid">
                    <div class="search-info-item">
                        <span class="search-info-label">Size:</span>
                        <span class="search-info-value">${size} elements</span>
                    </div>
                    <div class="search-info-item">
                        <span class="search-info-label">Min Value:</span>
                        <span class="search-info-value">${min}</span>
                    </div>
                    <div class="search-info-item">
                        <span class="search-info-label">Max Value:</span>
                        <span class="search-info-value">${max}</span>
                    </div>
                    <div class="search-info-item">
                        <span class="search-info-label">Range:</span>
                        <span class="search-info-value">${min} to ${max}</span>
                    </div>
                    <div class="search-info-item">
                        <span class="search-info-label">Is Sorted:</span>
                        <span class="search-info-value">${isSorted ? '<span style="color: #22c55e;">Yes ✓</span>' : '<span style="color: #dc2626;">No ✗</span>'}</span>
                    </div>
                    <div class="search-info-item">
                        <span class="search-info-label">Target:</span>
                        <span class="search-info-value">${this.target}</span>
                    </div>
                </div>
                <div class="search-info-array">
                    <div class="search-info-label" style="margin-bottom: var(--spacing-sm);">Array Values:</div>
                    <div class="search-info-array-preview">${arrayPreview}</div>
                </div>
                <div class="search-info-note">
                    <strong>Note:</strong> Array is generated as [5, 10, 15, ..., ${size * 5}]
                </div>
            `;
        }

        if (modal) modal.style.display = 'flex';

        // Close button handler
        const closeBtn = document.getElementById('searchInfoCloseBtn');
        if (closeBtn) {
            closeBtn.onclick = () => {
                if (modal) modal.style.display = 'none';
            };
        }

        // Close on outside click
        if (modal) {
            modal.onclick = (e) => {
                if (e.target === modal) {
                    modal.style.display = 'none';
                }
            };
        }
    }

    resetStats() {
        const stepsEl = document.getElementById('searchSteps');
        const foundEl = document.getElementById('foundAt');
        if (stepsEl) stepsEl.textContent = '0';
        if (foundEl) foundEl.textContent = '-';
    }

    render(current = -1, found = -1, checked = []) {
        if (!this.container) return;
        this.container.innerHTML = '';

        this.array.forEach((val, idx) => {
            const item = document.createElement('div');
            item.className = 'search-item';
            item.textContent = val;

            if (idx === found) item.classList.add('found');
            else if (idx === current) item.classList.add('current');
            else if (checked.includes(idx)) item.classList.add('checked');

            this.container.appendChild(item);
        });
    }

    async start() {
        if (this.isRunning) return;
        this.isRunning = true;
        this.shouldStop = false;
        this.resetStats();

        const startTime = performance.now();

        if (this.currentAlgorithm === 'binarySearch') {
            await this.binarySearch();
        } else {
            await this.linearSearch();
        }

        if (!this.shouldStop) {
            const endTime = performance.now();
            const elapsed = endTime - startTime;
            rawTimeValues.searchTime = elapsed;
            const formatSelect = document.getElementById('searchTimeFormat');
            let format = formatSelect ? formatSelect.value : 'ms';
            if (elapsed >= 2000) {
                const bestFormat = getBestTimeFormat(elapsed);
                format = bestFormat;
                if (formatSelect) formatSelect.value = bestFormat;
            }
            const timeEl = document.getElementById('searchTime');
            if (timeEl) timeEl.textContent = formatTimeValue(elapsed, format);
        }

        this.isRunning = false;
        // Show feedback modal after algorithm completion
        if (typeof showFeedbackModal === 'function') {
            setTimeout(() => showFeedbackModal(), 1000); // Delay 1 second after completion
        }
    }

    async binarySearch() {
        let left = 0, right = this.array.length - 1;
        let steps = 0;
        const checked = [];
        const baseDelay = Math.max(200, 500);
        const multiplier = this.speed / 50;
        const delay = Math.max(50, baseDelay / multiplier);

        while (left <= right && !this.shouldStop) {
            const mid = Math.floor((left + right) / 2);
            steps++;
            checked.push(mid);

            const stepsEl = document.getElementById('searchSteps');
            if (stepsEl) stepsEl.textContent = steps;

            this.render(mid, -1, checked);
            if (typeof audioEngine !== 'undefined') audioEngine.playTone(this.array[mid]);
            await new Promise(r => setTimeout(r, delay));

            if (this.array[mid] === this.target) {
                this.render(-1, mid, checked);
                const foundEl = document.getElementById('foundAt');
                if (foundEl) foundEl.textContent = `Index ${mid}`;
                if (typeof audioEngine !== 'undefined') audioEngine.playSuccess();
                return mid;
            }

            if (this.array[mid] < this.target) left = mid + 1;
            else right = mid - 1;
        }

        if (!this.shouldStop) {
            const foundEl = document.getElementById('foundAt');
            if (foundEl) foundEl.textContent = 'Not Found';
            if (typeof audioEngine !== 'undefined') audioEngine.playError();
        }
        return -1;
    }

    async linearSearch() {
        const checked = [];
        const baseDelay = Math.max(100, 200);
        const multiplier = this.speed / 50;
        const delay = Math.max(50, baseDelay / multiplier);

        for (let i = 0; i < this.array.length && !this.shouldStop; i++) {
            checked.push(i);
            const stepsEl = document.getElementById('searchSteps');
            if (stepsEl) stepsEl.textContent = i + 1;
            this.render(i, -1, checked);
            if (typeof audioEngine !== 'undefined') audioEngine.playTone(this.array[i]);
            await new Promise(r => setTimeout(r, delay));

            if (this.array[i] === this.target) {
                this.render(-1, i, checked);
                const foundEl = document.getElementById('foundAt');
                if (foundEl) foundEl.textContent = `Index ${i}`;
                if (typeof audioEngine !== 'undefined') audioEngine.playSuccess();
                return i;
            }
        }

        if (!this.shouldStop) {
            const foundEl = document.getElementById('foundAt');
            if (foundEl) foundEl.textContent = 'Not Found';
            if (typeof audioEngine !== 'undefined') audioEngine.playError();
        }
        return -1;
    }

    setAlgorithm(algo) {
        this.currentAlgorithm = algo;
    }

    getAlgorithmName(algoKey) {
        const names = {
            linearSearch: 'Linear Search',
            binarySearch: 'Binary Search',
            jumpSearch: 'Jump Search',
            interpolationSearch: 'Interpolation Search',
            exponentialSearch: 'Exponential Search',
            ternarySearch: 'Ternary Search'
        };
        return names[algoKey] || algoKey;
    }

    async startComparison() {
        if (this.isCompareRunning) return;

        const algo1 = document.getElementById('searchCompareAlgo1')?.value || 'linearSearch';
        const algo2 = document.getElementById('searchCompareAlgo2')?.value || 'binarySearch';
        const lang1 = document.getElementById('searchCompareLang1')?.value || 'python';
        const lang2 = document.getElementById('searchCompareLang2')?.value || 'java';

        // Update algorithm names
        const name1El = document.getElementById('searchCompareAlgo1Name');
        const name2El = document.getElementById('searchCompareAlgo2Name');
        if (name1El) name1El.textContent = `${this.getAlgorithmName(algo1)} (${lang1})`;
        if (name2El) name2El.textContent = `${this.getAlgorithmName(algo2)} (${lang2})`;

        // Generate common array and target
        const sizeEl = document.getElementById('searchArraySize');
        const targetEl = document.getElementById('searchTarget');
        const size = parseInt(sizeEl?.value || 20);
        const target = parseInt(targetEl?.value || 42);

        const commonArray = Array.from({ length: size }, (_, i) => (i + 1) * 5).sort((a, b) => a - b);

        // Reset stats
        document.getElementById('searchSteps1').textContent = '0';
        document.getElementById('searchSteps2').textContent = '0';
        document.getElementById('foundAt1').textContent = '-';
        document.getElementById('foundAt2').textContent = '-';
        document.getElementById('searchTime1').textContent = '0ms';
        document.getElementById('searchTime2').textContent = '0ms';

        // Reset panels
        const panel1 = document.querySelector('#searchBars1').closest('.compare-panel');
        const panel2 = document.querySelector('#searchBars2').closest('.compare-panel');
        if (panel1) panel1.style.borderColor = 'var(--border-color)';
        if (panel2) panel2.style.borderColor = 'var(--border-color)';

        this.isCompareRunning = true;
        this.isComparePaused = false;
        this.updateCompareButtonStates();

        // Get containers
        const container1 = document.getElementById('searchBars1');
        const container2 = document.getElementById('searchBars2');
        
        // Render initial arrays in comparison containers
        this.renderArrayForComparison(commonArray, container1);
        this.renderArrayForComparison(commonArray, container2);
        
        // Run both algorithms in parallel
        const [result1, result2] = await Promise.all([
            this.runAlgorithmForComparison(algo1, lang1, [...commonArray], container1, 1, target),
            this.runAlgorithmForComparison(algo2, lang2, [...commonArray], container2, 2, target)
        ]);

        if (!this.isComparePaused && this.isCompareRunning) {
            this.displayComparisonResults(result1, result2);
        }

        this.isCompareRunning = false;
        this.updateCompareButtonStates();
        // Show feedback modal after comparison completion
        if (typeof showFeedbackModal === 'function') {
            setTimeout(() => showFeedbackModal(), 1000); // Delay 1 second after completion
        }
    }

    async runAlgorithmForComparison(algoKey, langKey, array, container, panelNum, target) {
        const steps = { count: 0 };
        const startTime = performance.now();
        let foundIndex = -1;

        const langSpeed = LANGUAGE_SPEED[langKey] || 1.0;

        const tempViz = {
            array: array,
            container: container,
            target: target,
            steps: steps,
            shouldStop: false,
            isPaused: false,
            speed: this.speed,
            langSpeed: langSpeed,
            getDelay: () => {
                const baseDelay = Math.max(200, 500);
                const multiplier = this.speed / 50;
                const langMultiplier = 1 / langSpeed;
                return Math.max(50, (baseDelay / multiplier) * langMultiplier);
            },
            delay: async function () {
                while (this.isPaused && !this.shouldStop) {
                    await new Promise(resolve => setTimeout(resolve, 50));
                }
                if (this.shouldStop) return;
                return new Promise(resolve => setTimeout(resolve, this.getDelay()));
            },
            updateStat: (id, value) => {
                if (id === 'steps') {
                    const el = document.getElementById(`searchSteps${panelNum}`);
                    if (el) el.textContent = value;
                } else if (id === 'found') {
                    const el = document.getElementById(`foundAt${panelNum}`);
                    if (el) el.textContent = value;
                }
            },
            render: (current = -1, found = -1, checked = []) => {
                if (!container) return;
                
                // Use requestAnimationFrame to ensure container is measured
                requestAnimationFrame(() => {
                    try {
                        container.innerHTML = '';

                        array.forEach((val, idx) => {
                            const item = document.createElement('div');
                            item.className = 'search-item';
                            item.textContent = val;

                            if (idx === found) item.classList.add('found');
                            else if (idx === current) item.classList.add('current');
                            else if (checked.includes(idx)) item.classList.add('checked');

                            container.appendChild(item);
                        });
                    } catch (error) {
                        console.error('Error rendering comparison search:', error);
                    }
                });
            }
        };

        if (panelNum === 1) this.compareViz1 = tempViz;
        else this.compareViz2 = tempViz;

        // Run the algorithm
        switch (algoKey) {
            case 'linearSearch':
                foundIndex = await this.linearSearchForComparison(tempViz);
                break;
            case 'binarySearch':
                foundIndex = await this.binarySearchForComparison(tempViz);
                break;
            default:
                foundIndex = await this.linearSearchForComparison(tempViz);
        }

        const endTime = performance.now();
        const elapsed = endTime - startTime;

        // Calculate simulated execution time based on steps and language speed
        // Base time per step (in ms) - adjusted by language speed
        const baseTimePerStep = 0.5; // ms per step
        const simulatedTime = (steps.count * baseTimePerStep) / langSpeed;

        const timeEl = document.getElementById(`searchTime${panelNum}`);
        if (timeEl) {
            const format = simulatedTime >= 2000 ? getBestTimeFormat(simulatedTime) : 'ms';
            timeEl.textContent = formatTimeValue(simulatedTime, format);
        }

        return {
            time: simulatedTime, // Use simulated time for comparison
            steps: steps.count,
            found: foundIndex,
            algorithm: algoKey
        };
    }

    async linearSearchForComparison(viz) {
        const checked = [];
        for (let i = 0; i < viz.array.length && !viz.shouldStop; i++) {
            checked.push(i);
            viz.steps.count++;
            viz.updateStat('steps', viz.steps.count);
            viz.render(i, -1, checked);
            await viz.delay();

            if (viz.array[i] === viz.target) {
                viz.render(-1, i, checked);
                viz.updateStat('found', `Index ${i}`);
                return i;
            }
        }

        if (!viz.shouldStop) {
            viz.updateStat('found', 'Not Found');
        }
        return -1;
    }

    async binarySearchForComparison(viz) {
        let left = 0, right = viz.array.length - 1;
        const checked = [];

        while (left <= right && !viz.shouldStop) {
            const mid = Math.floor((left + right) / 2);
            viz.steps.count++;
            checked.push(mid);
            viz.updateStat('steps', viz.steps.count);
            viz.render(mid, -1, checked);
            await viz.delay();

            if (viz.array[mid] === viz.target) {
                viz.render(-1, mid, checked);
                viz.updateStat('found', `Index ${mid}`);
                return mid;
            }

            if (viz.array[mid] < viz.target) left = mid + 1;
            else right = mid - 1;
        }

        if (!viz.shouldStop) {
            viz.updateStat('found', 'Not Found');
        }
        return -1;
    }

    displayComparisonResults(result1, result2) {
        const winner = result1.time < result2.time ? 1 : 2;
        const faster = result1.time < result2.time ? result1 : result2;
        const slower = result1.time < result2.time ? result2 : result1;
        const speedup = slower.time > 0 ? (slower.time / faster.time).toFixed(2) : '1.00';

        const panel1 = document.querySelector('#searchBars1').closest('.compare-panel');
        const panel2 = document.querySelector('#searchBars2').closest('.compare-panel');

        // Remove any existing winner badges
        const existingBadges1 = panel1?.querySelectorAll('.winner-badge');
        const existingBadges2 = panel2?.querySelectorAll('.winner-badge');
        existingBadges1?.forEach(b => b.remove());
        existingBadges2?.forEach(b => b.remove());

        if (panel1) {
            panel1.style.borderColor = winner === 1 ? '#22c55e' : 'var(--border-color)';
            panel1.style.borderWidth = winner === 1 ? '3px' : '1px';

            if (winner === 1) {
                const badge = document.createElement('div');
                badge.className = 'winner-badge';
                badge.textContent = `⚡ ${speedup}x Faster`;
                badge.style.cssText = 'position: absolute; top: 10px; right: 10px; background: #22c55e; color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; z-index: 10;';
                panel1.style.position = 'relative';
                panel1.appendChild(badge);
            }
        }

        if (panel2) {
            panel2.style.borderColor = winner === 2 ? '#22c55e' : 'var(--border-color)';
            panel2.style.borderWidth = winner === 2 ? '3px' : '1px';

            if (winner === 2) {
                const badge = document.createElement('div');
                badge.className = 'winner-badge';
                badge.textContent = `⚡ ${speedup}x Faster`;
                badge.style.cssText = 'position: absolute; top: 10px; right: 10px; background: #22c55e; color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; z-index: 10;';
                panel2.style.position = 'relative';
                panel2.appendChild(badge);
            }
        }
    }

    togglePauseResumeCompare() {
        if (this.isComparePaused) {
            this.resumeComparison();
        } else {
            this.pauseComparison();
        }
    }

    pauseComparison() {
        this.isComparePaused = true;
        if (this.compareViz1) this.compareViz1.isPaused = true;
        if (this.compareViz2) this.compareViz2.isPaused = true;
        this.updateCompareButtonStates();
    }

    resumeComparison() {
        this.isComparePaused = false;
        if (this.compareViz1) this.compareViz1.isPaused = false;
        if (this.compareViz2) this.compareViz2.isPaused = false;
        this.updateCompareButtonStates();
    }

    stopComparison() {
        this.isCompareRunning = false;
        this.isComparePaused = false;
        if (this.compareViz1) this.compareViz1.shouldStop = true;
        if (this.compareViz2) this.compareViz2.shouldStop = true;
        this.updateCompareButtonStates();
    }

    updateCompareButtonStates() {
        const pauseResumeBtn = document.getElementById('pauseResumeSearchCompare');
        const stopBtn = document.getElementById('stopSearchCompare');

        if (this.isCompareRunning) {
            if (pauseResumeBtn) {
                pauseResumeBtn.style.visibility = 'visible';
                pauseResumeBtn.style.position = 'static';
                pauseResumeBtn.style.opacity = '1';
                pauseResumeBtn.style.pointerEvents = 'auto';
                pauseResumeBtn.textContent = this.isComparePaused ? '▶ Resume' : '⏸ Pause';
            }
            if (stopBtn) {
                stopBtn.style.visibility = 'visible';
                stopBtn.style.position = 'static';
                stopBtn.style.opacity = '1';
                stopBtn.style.pointerEvents = 'auto';
            }
        } else {
            if (pauseResumeBtn) {
                pauseResumeBtn.style.visibility = 'hidden';
                pauseResumeBtn.style.position = 'absolute';
                pauseResumeBtn.style.opacity = '0';
                pauseResumeBtn.style.pointerEvents = 'none';
            }
            if (stopBtn) {
                stopBtn.style.visibility = 'hidden';
                stopBtn.style.position = 'absolute';
                stopBtn.style.opacity = '0';
                stopBtn.style.pointerEvents = 'none';
            }
        }
    }
}

class TreeVisualizer {
    constructor() {
        this.root = null;
        this.isRunning = false;
        this.shouldStop = false;
        this.speed = 50;
        this.svg = document.getElementById('treeSvg');
        this.isCompareMode = false;
        this.isCompareRunning = false;
        this.isComparePaused = false;
        this.init();
    }

    init() {
        this.bindEvents();
        this.insertInitialNodes();
    }

    stop() {
        this.shouldStop = true;
        this.isRunning = false;
        // Reset visual state when stopped
        this.render(); // Clear any highlighting states
    }

    reset() {
        this.stop();
        this.render();
    }

    bindEvents() {
        const insertBtn = document.getElementById('insertNode');
        const speedSlider = document.getElementById('treeSpeed');
        const infoBtn = document.getElementById('treeInfoBtn');
        const toggleCompareBtn = document.getElementById('toggleTreeCompare');
        const startCompareBtn = document.getElementById('startTreeCompare');
        const pauseResumeCompareBtn = document.getElementById('pauseResumeTreeCompare');
        const stopCompareBtn = document.getElementById('stopTreeCompare');
        const compareControls = document.getElementById('treeCompareControls');
        const compareContainer = document.getElementById('treeCompareContainer');
        const regularViz = document.getElementById('treeRegularVisualization');

        if (speedSlider) {
            const multiplierEl = document.getElementById('treeSpeedMultiplier');
            speedSlider.addEventListener('input', (e) => {
                this.speed = parseInt(e.target.value);
                if (multiplierEl) {
                    const multiplier = Math.round((this.speed / 50) * 10) / 10;
                    multiplierEl.textContent = `${multiplier}x`;
                }
            });
            if (multiplierEl) {
                multiplierEl.textContent = '1x';
            }
        }
        const clearBtn = document.getElementById('clearTree');
        const traverseBtn = document.getElementById('traverseTree');

        if (insertBtn) insertBtn.addEventListener('click', () => this.insert());
        if (clearBtn) clearBtn.addEventListener('click', () => this.clear());
        if (traverseBtn) traverseBtn.addEventListener('click', () => this.traverse());
        if (infoBtn) infoBtn.addEventListener('click', () => this.showTreeInfo());

        if (toggleCompareBtn) {
            toggleCompareBtn.addEventListener('click', () => {
                this.isCompareMode = !this.isCompareMode;
                if (this.isCompareMode) {
                    this.stopComparison();
                    if (compareControls) compareControls.style.display = 'block';
                    if (compareContainer) compareContainer.style.display = 'grid';
                    if (regularViz) regularViz.style.display = 'none';
                    toggleCompareBtn.textContent = '❌ Exit Compare';
                    toggleCompareBtn.classList.add('active');
                } else {
                    this.stopComparison();
                    if (compareControls) compareControls.style.display = 'none';
                    if (compareContainer) compareContainer.style.display = 'none';
                    if (regularViz) regularViz.style.display = 'block';
                    toggleCompareBtn.textContent = '⚔️ Compare';
                    toggleCompareBtn.classList.remove('active');
                }
            });
        }

        if (startCompareBtn) {
            startCompareBtn.addEventListener('click', () => this.startComparison());
        }

        if (pauseResumeCompareBtn) {
            pauseResumeCompareBtn.addEventListener('click', () => this.togglePauseResumeCompare());
        }

        if (stopCompareBtn) {
            stopCompareBtn.addEventListener('click', () => this.stopComparison());
        }

        // Close info modal handlers
        const closeBtn = document.getElementById('treeInfoCloseBtn');
        if (closeBtn) {
            closeBtn.onclick = () => {
                const modal = document.getElementById('treeInfoModal');
                if (modal) modal.style.display = 'none';
            };
        }

        const modal = document.getElementById('treeInfoModal');
        if (modal) {
            modal.onclick = (e) => {
                if (e.target === modal) {
                    modal.style.display = 'none';
                }
            };
        }
    }

    showTreeInfo() {
        const nodeCount = this.countNodes(this.root);
        const height = this.getHeight(this.root);
        const modal = document.getElementById('treeInfoModal');
        const content = document.getElementById('treeInfoContent');

        if (content) {
            content.innerHTML = `
                <div class="search-info-grid">
                    <div class="search-info-item">
                        <span class="search-info-label">Nodes:</span>
                        <span class="search-info-value">${nodeCount}</span>
                    </div>
                    <div class="search-info-item">
                        <span class="search-info-label">Height:</span>
                        <span class="search-info-value">${height}</span>
                    </div>
                    <div class="search-info-item">
                        <span class="search-info-label">Type:</span>
                        <span class="search-info-value">Binary Search Tree</span>
                    </div>
                </div>
            `;
        }

        if (modal) modal.style.display = 'flex';
    }

    async startComparison() {
        if (this.isCompareRunning) return;

        const algo1 = document.getElementById('treeCompareAlgo1')?.value || 'inorderTraversal';
        const algo2 = document.getElementById('treeCompareAlgo2')?.value || 'preorderTraversal';
        const lang1 = document.getElementById('treeCompareLang1')?.value || 'python';
        const lang2 = document.getElementById('treeCompareLang2')?.value || 'java';

        // Update algorithm names
        const name1El = document.getElementById('treeCompareAlgo1Name');
        const name2El = document.getElementById('treeCompareAlgo2Name');
        if (name1El) name1El.textContent = `${algo1} (${lang1})`;
        if (name2El) name2El.textContent = `${algo2} (${lang2})`;

        // Clone the current tree for both comparisons
        const tree1 = this.cloneTree(this.root);
        const tree2 = this.cloneTree(this.root);

        // Initialize comparison SVGs
        this.initComparisonTree(1, tree1);
        this.initComparisonTree(2, tree2);

        // Reset stats
        document.getElementById('treeNodes1').textContent = '0';
        document.getElementById('treeNodes2').textContent = '0';
        document.getElementById('treeHeight1').textContent = '0';
        document.getElementById('treeHeight2').textContent = '0';
        document.getElementById('treeTime1').textContent = '0ms';
        document.getElementById('treeTime2').textContent = '0ms';

        // Reset panels
        const panel1 = document.querySelector('#treeSvg1').closest('.compare-panel');
        const panel2 = document.querySelector('#treeSvg2').closest('.compare-panel');
        if (panel1) panel1.style.borderColor = 'var(--border-color)';
        if (panel2) panel2.style.borderColor = 'var(--border-color)';

        this.isCompareRunning = true;
        this.isComparePaused = false;
        this.updateCompareButtonStates();

        // Run both algorithms in parallel
        const [result1, result2] = await Promise.all([
            this.runAlgorithmForComparison(algo1, lang1, tree1, 1),
            this.runAlgorithmForComparison(algo2, lang2, tree2, 2)
        ]);

        if (!this.isComparePaused && this.isCompareRunning) {
            this.displayComparisonResults(result1, result2);
        }

        this.isCompareRunning = false;
        this.updateCompareButtonStates();
        // Show feedback modal after comparison completion
        if (typeof showFeedbackModal === 'function') {
            setTimeout(() => showFeedbackModal(), 1000); // Delay 1 second after completion
        }
    }

    cloneTree(node) {
        if (!node) return null;
        return {
            value: node.value,
            left: this.cloneTree(node.left),
            right: this.cloneTree(node.right)
        };
    }

    initComparisonTree(panelNum, root) {
        const svg = document.getElementById(`treeSvg${panelNum}`);
        if (!svg) return;

        svg.innerHTML = '';
        svg.setAttribute('width', '100%');
        svg.setAttribute('height', '300');
        svg.setAttribute('viewBox', '0 0 800 300');

        if (!root) return;

        const nodeCount = this.countNodes(root);
        const height = this.getHeight(root);

        document.getElementById(`treeNodes${panelNum}`).textContent = nodeCount;
        document.getElementById(`treeHeight${panelNum}`).textContent = height;

        this.drawNodeForComparison(svg, root, 400, 40, 160, 0);
    }

    drawNodeForComparison(svg, node, x, y, offset, depth) {
        if (!node) return;

        if (node.left) {
            const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
            line.setAttribute('x1', x);
            line.setAttribute('y1', y);
            line.setAttribute('x2', x - offset);
            line.setAttribute('y2', y + 60);
            line.setAttribute('stroke', 'var(--ice-blue, #93c5fd)');
            line.setAttribute('stroke-width', '2');
            svg.appendChild(line);
            this.drawNodeForComparison(svg, node.left, x - offset, y + 60, offset / 2, depth + 1);
        }

        if (node.right) {
            const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
            line.setAttribute('x1', x);
            line.setAttribute('y1', y);
            line.setAttribute('x2', x + offset);
            line.setAttribute('y2', y + 60);
            line.setAttribute('stroke', 'var(--ice-blue, #93c5fd)');
            line.setAttribute('stroke-width', '2');
            svg.appendChild(line);
            this.drawNodeForComparison(svg, node.right, x + offset, y + 60, offset / 2, depth + 1);
        }

        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        circle.setAttribute('cx', x);
        circle.setAttribute('cy', y);
        circle.setAttribute('r', 20);
        circle.setAttribute('fill', 'var(--bg-tertiary, #151a22)');
        circle.setAttribute('stroke', 'var(--gold, #d4a574)');
        circle.setAttribute('stroke-width', '2');
        svg.appendChild(circle);

        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x', x);
        text.setAttribute('y', y + 5);
        text.setAttribute('text-anchor', 'middle');
        text.setAttribute('fill', 'var(--text-primary, #e2e8f0)');
        text.setAttribute('font-family', 'Fira Code, monospace');
        text.setAttribute('font-size', '11');
        text.textContent = node.value;
        svg.appendChild(text);
    }

    async runAlgorithmForComparison(algoKey, langKey, root, panelNum) {
        const startTime = performance.now();
        const langSpeed = LANGUAGE_SPEED[langKey] || 1.0;
        const baseDelay = this.getDelay();
        const delay = Math.max(1, baseDelay / langSpeed);

        // Run traversal algorithm
        const result = [];
        await this.traverseForComparison(root, algoKey, result, delay, panelNum);

        const endTime = performance.now();
        const elapsed = endTime - startTime;

        // Calculate simulated execution time based on nodes visited and language speed
        // Base time per node (in ms) - adjusted by language speed
        const baseTimePerNode = 0.3; // ms per node
        const simulatedTime = (result.length * baseTimePerNode) / langSpeed;

        const timeEl = document.getElementById(`treeTime${panelNum}`);
        if (timeEl) {
            const format = simulatedTime >= 2000 ? getBestTimeFormat(simulatedTime) : 'ms';
            timeEl.textContent = formatTimeValue(simulatedTime, format);
        }

        return {
            time: simulatedTime, // Use simulated time for comparison
            nodes: result.length
        };
    }

    async traverseForComparison(node, algoKey, result, delay, panelNum) {
        if (!node || !this.isCompareRunning || this.isComparePaused) return;

        const svg = document.getElementById(`treeSvg${panelNum}`);
        if (!svg) return;

        // Highlight current node
        const circles = svg.querySelectorAll('circle');
        const texts = svg.querySelectorAll('text');
        circles.forEach((c, i) => {
            const text = texts[i];
            if (text && parseInt(text.textContent) === node.value) {
                c.setAttribute('fill', '#d4a574');
                setTimeout(() => {
                    c.setAttribute('fill', 'var(--bg-tertiary, #151a22)');
                }, delay);
            }
        });

        await new Promise(r => setTimeout(r, delay));

        switch (algoKey) {
            case 'inorderTraversal':
                await this.traverseForComparison(node.left, algoKey, result, delay, panelNum);
                if (!this.isComparePaused && this.isCompareRunning) result.push(node.value);
                await this.traverseForComparison(node.right, algoKey, result, delay, panelNum);
                break;
            case 'preorderTraversal':
                if (!this.isComparePaused && this.isCompareRunning) result.push(node.value);
                await this.traverseForComparison(node.left, algoKey, result, delay, panelNum);
                await this.traverseForComparison(node.right, algoKey, result, delay, panelNum);
                break;
            case 'postorderTraversal':
                await this.traverseForComparison(node.left, algoKey, result, delay, panelNum);
                await this.traverseForComparison(node.right, algoKey, result, delay, panelNum);
                if (!this.isComparePaused && this.isCompareRunning) result.push(node.value);
                break;
            default:
                await this.traverseForComparison(node.left, algoKey, result, delay, panelNum);
                if (!this.isComparePaused && this.isCompareRunning) result.push(node.value);
                await this.traverseForComparison(node.right, algoKey, result, delay, panelNum);
        }
    }

    displayComparisonResults(result1, result2) {
        const winner = result1.time < result2.time ? 1 : 2;
        const faster = result1.time < result2.time ? result1 : result2;
        const slower = result1.time < result2.time ? result2 : result1;
        const speedup = slower.time > 0 ? (slower.time / faster.time).toFixed(2) : '1.00';

        const panel1 = document.querySelector('#treeSvg1').closest('.compare-panel');
        const panel2 = document.querySelector('#treeSvg2').closest('.compare-panel');

        // Remove any existing winner badges
        const existingBadges1 = panel1?.querySelectorAll('.winner-badge');
        const existingBadges2 = panel2?.querySelectorAll('.winner-badge');
        existingBadges1?.forEach(b => b.remove());
        existingBadges2?.forEach(b => b.remove());

        if (panel1) {
            panel1.style.borderColor = winner === 1 ? '#22c55e' : 'var(--border-color)';
            panel1.style.borderWidth = winner === 1 ? '3px' : '1px';

            if (winner === 1) {
                const badge = document.createElement('div');
                badge.className = 'winner-badge';
                badge.textContent = `⚡ ${speedup}x Faster`;
                badge.style.cssText = 'position: absolute; top: 10px; right: 10px; background: #22c55e; color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; z-index: 10;';
                panel1.style.position = 'relative';
                panel1.appendChild(badge);
            }
        }

        if (panel2) {
            panel2.style.borderColor = winner === 2 ? '#22c55e' : 'var(--border-color)';
            panel2.style.borderWidth = winner === 2 ? '3px' : '1px';

            if (winner === 2) {
                const badge = document.createElement('div');
                badge.className = 'winner-badge';
                badge.textContent = `⚡ ${speedup}x Faster`;
                badge.style.cssText = 'position: absolute; top: 10px; right: 10px; background: #22c55e; color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; z-index: 10;';
                panel2.style.position = 'relative';
                panel2.appendChild(badge);
            }
        }
    }

    togglePauseResumeCompare() {
        if (this.isComparePaused) {
            this.resumeComparison();
        } else {
            this.pauseComparison();
        }
    }

    pauseComparison() {
        this.isComparePaused = true;
        this.updateCompareButtonStates();
    }

    resumeComparison() {
        this.isComparePaused = false;
        this.updateCompareButtonStates();
    }

    stopComparison() {
        this.isCompareRunning = false;
        this.isComparePaused = false;
        this.updateCompareButtonStates();
    }

    updateCompareButtonStates() {
        const pauseResumeBtn = document.getElementById('pauseResumeTreeCompare');
        const stopBtn = document.getElementById('stopTreeCompare');

        if (this.isCompareRunning) {
            if (pauseResumeBtn) {
                pauseResumeBtn.style.visibility = 'visible';
                pauseResumeBtn.style.position = 'static';
                pauseResumeBtn.style.opacity = '1';
                pauseResumeBtn.style.pointerEvents = 'auto';
                pauseResumeBtn.textContent = this.isComparePaused ? '▶ Resume' : '⏸ Pause';
            }
            if (stopBtn) {
                stopBtn.style.visibility = 'visible';
                stopBtn.style.position = 'static';
                stopBtn.style.opacity = '1';
                stopBtn.style.pointerEvents = 'auto';
            }
        } else {
            if (pauseResumeBtn) {
                pauseResumeBtn.style.visibility = 'hidden';
                pauseResumeBtn.style.position = 'absolute';
                pauseResumeBtn.style.opacity = '0';
                pauseResumeBtn.style.pointerEvents = 'none';
            }
            if (stopBtn) {
                stopBtn.style.visibility = 'hidden';
                stopBtn.style.position = 'absolute';
                stopBtn.style.opacity = '0';
                stopBtn.style.pointerEvents = 'none';
            }
        }
    }

    insertInitialNodes() {
        [50, 30, 70, 20, 40, 60, 80].forEach(v => this.insertValue(v));
        this.render();
    }

    insert() {
        const input = document.getElementById('treeValue');
        if (!input) return;
        const value = parseInt(input.value);
        if (!isNaN(value)) {
            this.insertValue(value);
            this.render();
            input.value = '';
            if (typeof audioEngine !== 'undefined') audioEngine.playInsert();
        }
    }

    insertValue(value) {
        const newNode = { value, left: null, right: null };
        if (!this.root) {
            this.root = newNode;
            return;
        }

        let current = this.root;
        while (true) {
            if (value < current.value) {
                if (!current.left) { current.left = newNode; return; }
                current = current.left;
            } else {
                if (!current.right) { current.right = newNode; return; }
                current = current.right;
            }
        }
    }

    clear() {
        this.stop();
        this.root = null;
        this.render();
        const orderEl = document.getElementById('traversalOrder');
        if (orderEl) orderEl.textContent = '-';
    }

    async traverse() {
        if (this.isRunning) return;
        this.isRunning = true;
        this.shouldStop = false;

        const orderEl = document.getElementById('traversalOrder');
        if (!orderEl) return;

        const result = [];
        await this.inorder(this.root, result);

        if (!this.shouldStop) {
            orderEl.textContent = result.join(' → ');
            if (typeof audioEngine !== 'undefined') audioEngine.playComplete();
        }

        this.isRunning = false;
        // Show feedback modal after algorithm completion
        if (typeof showFeedbackModal === 'function') {
            setTimeout(() => showFeedbackModal(), 1000); // Delay 1 second after completion
        }
    }

    async inorder(node, result) {
        if (!node || this.shouldStop) return;
        await this.inorder(node.left, result);
        if (this.shouldStop) return;
        result.push(node.value);
        if (typeof audioEngine !== 'undefined') audioEngine.playTone(node.value);
        const baseDelay = Math.max(50, 350 - (this.speed * 3));
        const multiplier = this.speed / 50;
        const delay = Math.max(1, baseDelay / multiplier);
        await new Promise(r => setTimeout(r, delay));
        await this.inorder(node.right, result);
    }

    getDelay() {
        return Math.max(50, 350 - (this.speed * 3));
    }

    render() {
        if (!this.svg) return;
        this.svg.innerHTML = '';

        // Set SVG dimensions
        this.svg.setAttribute('width', '100%');
        this.svg.setAttribute('height', '350');
        this.svg.setAttribute('viewBox', '0 0 800 350');

        if (!this.root) return;

        const nodeCount = this.countNodes(this.root);
        const height = this.getHeight(this.root);

        const nodesEl = document.getElementById('treeNodes');
        const heightEl = document.getElementById('treeHeight');
        if (nodesEl) nodesEl.textContent = nodeCount;
        if (heightEl) heightEl.textContent = height;

        this.drawNode(this.root, 400, 40, 160, 0);
    }

    drawNode(node, x, y, offset, depth) {
        if (!node) return;

        if (node.left) {
            const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
            line.setAttribute('x1', x);
            line.setAttribute('y1', y);
            line.setAttribute('x2', x - offset);
            line.setAttribute('y2', y + 70);
            line.setAttribute('stroke', 'var(--ice-blue, #93c5fd)');
            line.setAttribute('stroke-width', '2');
            this.svg.appendChild(line);
            this.drawNode(node.left, x - offset, y + 70, offset / 2, depth + 1);
        }

        if (node.right) {
            const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
            line.setAttribute('x1', x);
            line.setAttribute('y1', y);
            line.setAttribute('x2', x + offset);
            line.setAttribute('y2', y + 70);
            line.setAttribute('stroke', 'var(--ice-blue, #93c5fd)');
            line.setAttribute('stroke-width', '2');
            this.svg.appendChild(line);
            this.drawNode(node.right, x + offset, y + 70, offset / 2, depth + 1);
        }

        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        circle.setAttribute('cx', x);
        circle.setAttribute('cy', y);
        circle.setAttribute('r', 22);
        circle.setAttribute('fill', 'var(--bg-tertiary, #151a22)');
        circle.setAttribute('stroke', 'var(--gold, #d4a574)');
        circle.setAttribute('stroke-width', '2');
        this.svg.appendChild(circle);

        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x', x);
        text.setAttribute('y', y + 5);
        text.setAttribute('text-anchor', 'middle');
        text.setAttribute('fill', 'var(--text-primary, #e2e8f0)');
        text.setAttribute('font-family', 'Fira Code, monospace');
        text.setAttribute('font-size', '12');
        text.textContent = node.value;
        this.svg.appendChild(text);
    }

    countNodes(node) {
        if (!node) return 0;
        return 1 + this.countNodes(node.left) + this.countNodes(node.right);
    }

    getHeight(node) {
        if (!node) return 0;
        return 1 + Math.max(this.getHeight(node.left), this.getHeight(node.right));
    }
}

class GraphVisualizer {
    constructor() {
        this.nodes = [];
        this.edges = [];
        this.isRunning = false;
        this.shouldStop = false;
        this.speed = 50;
        this.startTime = null;
        this.svg = document.getElementById('graphSvg');
        this.isCompareMode = false;
        this.isCompareRunning = false;
        this.isComparePaused = false;
        this.init();
    }

    init() {
        this.bindEvents();
        this.generateGraph();
    }

    stop() {
        this.shouldStop = true;
        this.isRunning = false;
        // Reset visual state when stopped
        this.render(); // Clear any highlighting states
    }

    reset() {
        this.stop();
        this.render();
    }

    bindEvents() {
        const generateBtn = document.getElementById('generateGraph');
        const startBtn = document.getElementById('startGraphAlgo');
        const clearBtn = document.getElementById('clearGraph');
        const speedSlider = document.getElementById('graphSpeed');
        const infoBtn = document.getElementById('graphInfoBtn');
        const toggleCompareBtn = document.getElementById('toggleGraphCompare');
        const startCompareBtn = document.getElementById('startGraphCompare');
        const pauseResumeCompareBtn = document.getElementById('pauseResumeGraphCompare');
        const stopCompareBtn = document.getElementById('stopGraphCompare');
        const compareControls = document.getElementById('graphCompareControls');
        const compareContainer = document.getElementById('graphCompareContainer');
        const regularViz = document.getElementById('graphRegularVisualization');

        if (generateBtn) generateBtn.addEventListener('click', () => this.generateGraph());
        if (startBtn) startBtn.addEventListener('click', () => this.runAlgorithm());
        if (clearBtn) clearBtn.addEventListener('click', () => this.clear());
        if (infoBtn) infoBtn.addEventListener('click', () => this.showGraphInfo());

        if (speedSlider) {
            const multiplierEl = document.getElementById('graphSpeedMultiplier');
            speedSlider.addEventListener('input', (e) => {
                this.speed = parseInt(e.target.value);
                if (multiplierEl) {
                    const multiplier = Math.round((this.speed / 50) * 10) / 10;
                    multiplierEl.textContent = `${multiplier}x`;
                }
            });
            if (multiplierEl) {
                multiplierEl.textContent = '1x';
            }
        }

        if (toggleCompareBtn) {
            toggleCompareBtn.addEventListener('click', () => {
                this.isCompareMode = !this.isCompareMode;
                if (this.isCompareMode) {
                    this.stopComparison();
                    if (compareControls) compareControls.style.display = 'block';
                    if (compareContainer) compareContainer.style.display = 'grid';
                    if (regularViz) regularViz.style.display = 'none';
                    toggleCompareBtn.textContent = '❌ Exit Compare';
                    toggleCompareBtn.classList.add('active');
                } else {
                    this.stopComparison();
                    if (compareControls) compareControls.style.display = 'none';
                    if (compareContainer) compareContainer.style.display = 'none';
                    if (regularViz) regularViz.style.display = 'block';
                    toggleCompareBtn.textContent = '⚔️ Compare';
                    toggleCompareBtn.classList.remove('active');
                }
            });
        }

        if (startCompareBtn) {
            startCompareBtn.addEventListener('click', () => this.startComparison());
        }

        if (pauseResumeCompareBtn) {
            pauseResumeCompareBtn.addEventListener('click', () => this.togglePauseResumeCompare());
        }

        if (stopCompareBtn) {
            stopCompareBtn.addEventListener('click', () => this.stopComparison());
        }

        // Close info modal handlers
        const closeBtn = document.getElementById('graphInfoCloseBtn');
        if (closeBtn) {
            closeBtn.onclick = () => {
                const modal = document.getElementById('graphInfoModal');
                if (modal) modal.style.display = 'none';
            };
        }

        const modal = document.getElementById('graphInfoModal');
        if (modal) {
            modal.onclick = (e) => {
                if (e.target === modal) {
                    modal.style.display = 'none';
                }
            };
        }
    }

    showGraphInfo() {
        const vertices = this.nodes.length;
        const edges = this.edges.length;
        const modal = document.getElementById('graphInfoModal');
        const content = document.getElementById('graphInfoContent');

        if (content) {
            content.innerHTML = `
                <div class="search-info-grid">
                    <div class="search-info-item">
                        <span class="search-info-label">Vertices:</span>
                        <span class="search-info-value">${vertices}</span>
                    </div>
                    <div class="search-info-item">
                        <span class="search-info-label">Edges:</span>
                        <span class="search-info-value">${edges}</span>
                    </div>
                    <div class="search-info-item">
                        <span class="search-info-label">Type:</span>
                        <span class="search-info-value">Undirected Graph</span>
                    </div>
                </div>
            `;
        }

        if (modal) modal.style.display = 'flex';
    }

    async startComparison() {
        if (this.isCompareRunning) return;

        const algo1 = document.getElementById('graphCompareAlgo1')?.value || 'bfs';
        const algo2 = document.getElementById('graphCompareAlgo2')?.value || 'dfs';
        const lang1 = document.getElementById('graphCompareLang1')?.value || 'python';
        const lang2 = document.getElementById('graphCompareLang2')?.value || 'java';

        // Update algorithm names
        const name1El = document.getElementById('graphCompareAlgo1Name');
        const name2El = document.getElementById('graphCompareAlgo2Name');
        if (name1El) name1El.textContent = `${algo1.toUpperCase()} (${lang1})`;
        if (name2El) name2El.textContent = `${algo2.toUpperCase()} (${lang2})`;

        // Clone the current graph for both comparisons
        const nodes1 = JSON.parse(JSON.stringify(this.nodes));
        const nodes2 = JSON.parse(JSON.stringify(this.nodes));
        const edges1 = JSON.parse(JSON.stringify(this.edges));
        const edges2 = JSON.parse(JSON.stringify(this.edges));

        // Initialize comparison graphs
        this.initComparisonGraph(1, nodes1, edges1);
        this.initComparisonGraph(2, nodes2, edges2);

        // Reset stats
        document.getElementById('graphVertices1').textContent = nodes1.length;
        document.getElementById('graphVertices2').textContent = nodes2.length;
        document.getElementById('graphEdges1').textContent = edges1.length;
        document.getElementById('graphEdges2').textContent = edges2.length;
        document.getElementById('graphTime1').textContent = '0ms';
        document.getElementById('graphTime2').textContent = '0ms';

        // Reset panels
        const panel1 = document.querySelector('#graphSvg1').closest('.compare-panel');
        const panel2 = document.querySelector('#graphSvg2').closest('.compare-panel');
        if (panel1) panel1.style.borderColor = 'var(--border-color)';
        if (panel2) panel2.style.borderColor = 'var(--border-color)';

        this.isCompareRunning = true;
        this.isComparePaused = false;
        this.updateCompareButtonStates();

        // Run both algorithms in parallel
        const [result1, result2] = await Promise.all([
            this.runAlgorithmForComparison(algo1, lang1, nodes1, edges1, 1),
            this.runAlgorithmForComparison(algo2, lang2, nodes2, edges2, 2)
        ]);

        if (!this.isComparePaused && this.isCompareRunning) {
            this.displayComparisonResults(result1, result2);
        }

        this.isCompareRunning = false;
        this.updateCompareButtonStates();
        // Show feedback modal after comparison completion
        if (typeof showFeedbackModal === 'function') {
            setTimeout(() => showFeedbackModal(), 1000); // Delay 1 second after completion
        }
    }

    initComparisonGraph(panelNum, nodes, edges) {
        const svg = document.getElementById(`graphSvg${panelNum}`);
        if (!svg) return;

        svg.innerHTML = '';
        svg.setAttribute('width', '100%');
        svg.setAttribute('height', '300');
        svg.setAttribute('viewBox', '0 0 600 300');

        // Draw edges
        edges.forEach(edge => {
            const from = nodes[edge.from];
            const to = nodes[edge.to];
            if (!from || !to) return;

            const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
            line.setAttribute('x1', from.x);
            line.setAttribute('y1', from.y);
            line.setAttribute('x2', to.x);
            line.setAttribute('y2', to.y);
            line.setAttribute('stroke', 'var(--ice-blue, #93c5fd)');
            line.setAttribute('stroke-width', '2');
            svg.appendChild(line);
        });

        // Draw nodes
        nodes.forEach(node => {
            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            circle.setAttribute('cx', node.x);
            circle.setAttribute('cy', node.y);
            circle.setAttribute('r', 20);
            circle.setAttribute('fill', 'var(--bg-tertiary, #151a22)');
            circle.setAttribute('stroke', 'var(--gold, #d4a574)');
            circle.setAttribute('stroke-width', '2');
            svg.appendChild(circle);

            const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            text.setAttribute('x', node.x);
            text.setAttribute('y', node.y + 5);
            text.setAttribute('text-anchor', 'middle');
            text.setAttribute('fill', 'var(--text-primary, #e2e8f0)');
            text.setAttribute('font-family', 'Fira Code, monospace');
            text.setAttribute('font-size', '11');
            text.textContent = node.id;
            svg.appendChild(text);
        });
    }

    async runAlgorithmForComparison(algoKey, langKey, nodes, edges, panelNum) {
        const startTime = performance.now();
        const langSpeed = LANGUAGE_SPEED[langKey] || 1.0;
        const baseDelay = Math.max(10, 510 - (this.speed * 5));
        const multiplier = this.speed / 50;
        const delay = Math.max(1, (baseDelay / multiplier) / langSpeed);

        const visited = new Set();
        const result = [];
        let operations = 0; // Count operations for simulated time

        // Run BFS for comparison
        const queue = [0];
        visited.add(0);
        operations++; // Initial visit

        while (queue.length > 0 && this.isCompareRunning && !this.isComparePaused) {
            const current = queue.shift();
            result.push(current);
            operations++; // Node processing

            // Highlight node
            const svg = document.getElementById(`graphSvg${panelNum}`);
            if (svg) {
                const circles = svg.querySelectorAll('circle');
                if (circles[current]) {
                    circles[current].setAttribute('fill', '#d4a574');
                }
            }

            await new Promise(r => setTimeout(r, delay));

            // Explore neighbors
            for (const edge of edges) {
                if (!this.isCompareRunning || this.isComparePaused) break;
                operations++; // Edge check

                let neighbor = null;
                if (edge.from === current && !visited.has(edge.to)) neighbor = edge.to;
                if (edge.to === current && !visited.has(edge.from)) neighbor = edge.from;

                if (neighbor !== null) {
                    visited.add(neighbor);
                    queue.push(neighbor);
                    operations++; // Neighbor added
                }
            }
        }

        const endTime = performance.now();
        const elapsed = endTime - startTime;

        // Calculate simulated execution time based on operations and language speed
        // Base time per operation (in ms) - adjusted by language speed
        const baseTimePerOp = 0.5; // Base time in ms per operation
        const simulatedTime = (operations * baseTimePerOp) / langSpeed;

        const timeEl = document.getElementById(`graphTime${panelNum}`);
        if (timeEl) {
            const format = simulatedTime >= 2000 ? getBestTimeFormat(simulatedTime) : 'ms';
            timeEl.textContent = formatTimeValue(simulatedTime, format);
        }

        return {
            time: simulatedTime, // Use simulated time for comparison
            vertices: result.length,
            edges: edges.length
        };
    }

    displayComparisonResults(result1, result2) {
        const winner = result1.time < result2.time ? 1 : 2;
        const faster = result1.time < result2.time ? result1 : result2;
        const slower = result1.time < result2.time ? result2 : result1;
        const speedup = slower.time > 0 ? (slower.time / faster.time).toFixed(2) : '1.00';

        const panel1 = document.querySelector('#graphSvg1').closest('.compare-panel');
        const panel2 = document.querySelector('#graphSvg2').closest('.compare-panel');

        // Remove any existing winner badges
        const existingBadges1 = panel1?.querySelectorAll('.winner-badge');
        const existingBadges2 = panel2?.querySelectorAll('.winner-badge');
        existingBadges1?.forEach(b => b.remove());
        existingBadges2?.forEach(b => b.remove());

        // Highlight winner with border
        if (panel1) {
            panel1.style.borderColor = winner === 1 ? '#22c55e' : 'var(--border-color)';
            panel1.style.borderWidth = winner === 1 ? '3px' : '1px';

            // Add winner badge
            if (winner === 1) {
                const badge = document.createElement('div');
                badge.className = 'winner-badge';
                badge.textContent = `⚡ ${speedup}x Faster`;
                badge.style.cssText = 'position: absolute; top: 10px; right: 10px; background: #22c55e; color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; z-index: 10;';
                panel1.style.position = 'relative';
                panel1.appendChild(badge);
            }
        }

        if (panel2) {
            panel2.style.borderColor = winner === 2 ? '#22c55e' : 'var(--border-color)';
            panel2.style.borderWidth = winner === 2 ? '3px' : '1px';

            // Add winner badge
            if (winner === 2) {
                const badge = document.createElement('div');
                badge.className = 'winner-badge';
                badge.textContent = `⚡ ${speedup}x Faster`;
                badge.style.cssText = 'position: absolute; top: 10px; right: 10px; background: #22c55e; color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; z-index: 10;';
                panel2.style.position = 'relative';
                panel2.appendChild(badge);
            }
        }
    }

    togglePauseResumeCompare() {
        if (this.isComparePaused) {
            this.resumeComparison();
        } else {
            this.pauseComparison();
        }
    }

    pauseComparison() {
        this.isComparePaused = true;
        this.updateCompareButtonStates();
    }

    resumeComparison() {
        this.isComparePaused = false;
        this.updateCompareButtonStates();
    }

    stopComparison() {
        this.isCompareRunning = false;
        this.isComparePaused = false;
        this.updateCompareButtonStates();
    }

    updateCompareButtonStates() {
        const pauseResumeBtn = document.getElementById('pauseResumeGraphCompare');
        const stopBtn = document.getElementById('stopGraphCompare');

        if (this.isCompareRunning) {
            if (pauseResumeBtn) {
                pauseResumeBtn.style.visibility = 'visible';
                pauseResumeBtn.style.position = 'static';
                pauseResumeBtn.style.opacity = '1';
                pauseResumeBtn.style.pointerEvents = 'auto';
                pauseResumeBtn.textContent = this.isComparePaused ? '▶ Resume' : '⏸ Pause';
            }
            if (stopBtn) {
                stopBtn.style.visibility = 'visible';
                stopBtn.style.position = 'static';
                stopBtn.style.opacity = '1';
                stopBtn.style.pointerEvents = 'auto';
            }
        } else {
            if (pauseResumeBtn) {
                pauseResumeBtn.style.visibility = 'hidden';
                pauseResumeBtn.style.position = 'absolute';
                pauseResumeBtn.style.opacity = '0';
                pauseResumeBtn.style.pointerEvents = 'none';
            }
            if (stopBtn) {
                stopBtn.style.visibility = 'hidden';
                stopBtn.style.position = 'absolute';
                stopBtn.style.opacity = '0';
                stopBtn.style.pointerEvents = 'none';
            }
        }
    }

    generateGraph() {
        this.stop();
        const nodeCountEl = document.getElementById('graphNodes');
        const n = parseInt(nodeCountEl?.value || 8);
        this.nodes = [];
        this.edges = [];

        for (let i = 0; i < n; i++) {
            const angle = (2 * Math.PI * i) / n - Math.PI / 2; // Start from top
            this.nodes.push({
                id: i,
                x: 300 + 130 * Math.cos(angle),
                y: 175 + 130 * Math.sin(angle)
            });
        }

        for (let i = 0; i < n; i++) {
            const connections = Math.floor(Math.random() * 2) + 1;
            for (let c = 0; c < connections; c++) {
                const j = Math.floor(Math.random() * n);
                if (i !== j && !this.edges.find(e => (e.from === i && e.to === j) || (e.from === j && e.to === i))) {
                    this.edges.push({ from: i, to: j });
                }
            }
        }

        this.render();

        const verticesEl = document.getElementById('graphVertices');
        const edgesEl = document.getElementById('graphEdges');
        if (verticesEl) verticesEl.textContent = this.nodes.length;
        if (edgesEl) edgesEl.textContent = this.edges.length;
    }

    clear() {
        this.stop();
        this.nodes = [];
        this.edges = [];
        if (this.svg) this.svg.innerHTML = '';
    }

    async runAlgorithm() {
        if (this.isRunning || this.nodes.length === 0) return;
        this.isRunning = true;
        this.shouldStop = false;
        this.startTime = performance.now();

        this.render();

        const visited = new Set();
        const queue = [0];
        visited.add(0);
        const result = [];
        const baseDelay = Math.max(10, 510 - (this.speed * 5));
        const multiplier = this.speed / 50;
        const delay = Math.max(1, baseDelay / multiplier);

        while (queue.length > 0 && !this.shouldStop) {
            const current = queue.shift();
            result.push(current);

            this.highlightNode(current);
            if (typeof audioEngine !== 'undefined') audioEngine.playVisit();
            await new Promise(r => setTimeout(r, delay));

            for (const edge of this.edges) {
                if (this.shouldStop) break;
                let neighbor = null;
                if (edge.from === current && !visited.has(edge.to)) neighbor = edge.to;
                if (edge.to === current && !visited.has(edge.from)) neighbor = edge.from;

                if (neighbor !== null) {
                    visited.add(neighbor);
                    queue.push(neighbor);
                }
            }
        }

        if (!this.shouldStop) {
            const endTime = performance.now();
            const elapsed = endTime - this.startTime;
            const steps = result.length;
            const speed = steps > 0 ? (steps / (elapsed / 1000)).toFixed(1) : '0';

            rawTimeValues.graphTime = elapsed;
            const formatSelect = document.getElementById('graphTimeFormat');
            let format = formatSelect ? formatSelect.value : 'ms';
            if (elapsed >= 2000) {
                const bestFormat = getBestTimeFormat(elapsed);
                format = bestFormat;
                if (formatSelect) formatSelect.value = bestFormat;
            }

            const resultEl = document.getElementById('graphResult');
            const timeEl = document.getElementById('graphTime');
            const speedEl = document.getElementById('graphSpeedStat');

            if (resultEl) resultEl.textContent = result.join(' → ');
            if (timeEl) timeEl.textContent = formatTimeValue(elapsed, format);
            if (speedEl) speedEl.textContent = `${speed} ops/s`;

            if (typeof audioEngine !== 'undefined') audioEngine.playComplete();
        }

        this.isRunning = false;
        // Show feedback modal after algorithm completion
        if (typeof showFeedbackModal === 'function') {
            setTimeout(() => showFeedbackModal(), 1000); // Delay 1 second after completion
        }
    }

    highlightNode(id) {
        if (!this.svg) return;
        const circles = this.svg.querySelectorAll('circle');
        circles.forEach((c, i) => {
            if (i === id) {
                c.setAttribute('fill', '#d4a574');
            }
        });
    }

    render() {
        if (!this.svg) return;
        this.svg.innerHTML = '';

        // Set SVG dimensions
        this.svg.setAttribute('width', '100%');
        this.svg.setAttribute('height', '350');
        this.svg.setAttribute('viewBox', '0 0 600 350');

        this.edges.forEach(edge => {
            const from = this.nodes[edge.from];
            const to = this.nodes[edge.to];
            if (!from || !to) return;

            const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
            line.setAttribute('x1', from.x);
            line.setAttribute('y1', from.y);
            line.setAttribute('x2', to.x);
            line.setAttribute('y2', to.y);
            line.setAttribute('stroke', 'var(--ice-blue, #93c5fd)');
            line.setAttribute('stroke-width', '2');
            this.svg.appendChild(line);
        });

        this.nodes.forEach(node => {
            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            circle.setAttribute('cx', node.x);
            circle.setAttribute('cy', node.y);
            circle.setAttribute('r', 22);
            circle.setAttribute('fill', 'var(--bg-tertiary, #151a22)');
            circle.setAttribute('stroke', 'var(--gold, #d4a574)');
            circle.setAttribute('stroke-width', '2');
            this.svg.appendChild(circle);

            const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            text.setAttribute('x', node.x);
            text.setAttribute('y', node.y + 5);
            text.setAttribute('text-anchor', 'middle');
            text.setAttribute('fill', 'var(--text-primary, #e2e8f0)');
            text.setAttribute('font-family', 'Fira Code, monospace');
            text.setAttribute('font-size', '12');
            text.textContent = node.id;
            this.svg.appendChild(text);
        });
    }
}

class DPVisualizer {
    constructor() {
        this.container = document.getElementById('dpTable');
        this.isRunning = false;
        this.shouldStop = false;
        this.speed = 50;
        this.currentStep = 0;
        this.dpArray = [];
        this.maxN = 0;
        this.stepMode = false;
        this.isCompareMode = false;
        this.isCompareRunning = false;
        this.isComparePaused = false;
        this.init();
    }

    init() {
        this.bindEvents();
        // Don't auto-start, just initialize empty state
        this.reset();
    }

    stop() {
        this.shouldStop = true;
        this.isRunning = false;
        this.reset();
    }

    reset() {
        // Reset all DP state to initial values
        this.shouldStop = false;
        this.isRunning = false;
        this.currentStep = 0;
        this.dpArray = [];
        this.maxN = 0;
        this.stepMode = false;

        // Reset visual state - clear container, don't auto-start
        if (this.container) {
            this.container.innerHTML = '';
        }

        // Reset stats to 0
        const subEl = document.getElementById('dpSubproblems');
        const resEl = document.getElementById('dpResult');
        const timeEl = document.getElementById('dpTime');

        if (subEl) subEl.textContent = '0';
        if (resEl) resEl.textContent = '-';
        if (timeEl) timeEl.textContent = '0ms';

        // Don't auto-start - wait for user to click Solve or Step
    }

    bindEvents() {
        const startBtn = document.getElementById('startDP');
        const stepBtn = document.getElementById('stepDP');
        const speedSlider = document.getElementById('dpSpeed');
        const infoBtn = document.getElementById('dpInfoBtn');
        const toggleCompareBtn = document.getElementById('toggleDPCompare');
        const startCompareBtn = document.getElementById('startDPCompare');
        const pauseResumeCompareBtn = document.getElementById('pauseResumeDPCompare');
        const stopCompareBtn = document.getElementById('stopDPCompare');
        const compareControls = document.getElementById('dpCompareControls');
        const compareContainer = document.getElementById('dpCompareContainer');
        const regularViz = document.getElementById('dpRegularVisualization');

        if (startBtn) startBtn.addEventListener('click', () => this.start());
        if (stepBtn) stepBtn.addEventListener('click', () => this.step());
        if (infoBtn) infoBtn.addEventListener('click', () => this.showDPInfo());

        if (speedSlider) {
            const multiplierEl = document.getElementById('dpSpeedMultiplier');
            speedSlider.addEventListener('input', (e) => {
                this.speed = parseInt(e.target.value);
                if (multiplierEl) {
                    const multiplier = Math.round((this.speed / 50) * 10) / 10;
                    multiplierEl.textContent = `${multiplier}x`;
                }
            });
            if (multiplierEl) {
                multiplierEl.textContent = '1x';
            }
        }

        if (toggleCompareBtn) {
            toggleCompareBtn.addEventListener('click', () => {
                this.isCompareMode = !this.isCompareMode;
                if (this.isCompareMode) {
                    this.stopComparison();
                    if (compareControls) compareControls.style.display = 'block';
                    if (compareContainer) compareContainer.style.display = 'grid';
                    if (regularViz) regularViz.style.display = 'none';
                    toggleCompareBtn.textContent = '❌ Exit Compare';
                    toggleCompareBtn.classList.add('active');
                } else {
                    this.stopComparison();
                    if (compareControls) compareControls.style.display = 'none';
                    if (compareContainer) compareContainer.style.display = 'none';
                    if (regularViz) regularViz.style.display = 'block';
                    toggleCompareBtn.textContent = '⚔️ Compare';
                    toggleCompareBtn.classList.remove('active');
                }
            });
        }

        if (startCompareBtn) {
            startCompareBtn.addEventListener('click', () => this.startComparison());
        }

        if (pauseResumeCompareBtn) {
            pauseResumeCompareBtn.addEventListener('click', () => this.togglePauseResumeCompare());
        }

        if (stopCompareBtn) {
            stopCompareBtn.addEventListener('click', () => this.stopComparison());
        }

        // Close info modal handlers
        const closeBtn = document.getElementById('dpInfoCloseBtn');
        if (closeBtn) {
            closeBtn.onclick = () => {
                const modal = document.getElementById('dpInfoModal');
                if (modal) modal.style.display = 'none';
            };
        }

        const modal = document.getElementById('dpInfoModal');
        if (modal) {
            modal.onclick = (e) => {
                if (e.target === modal) {
                    modal.style.display = 'none';
                }
            };
        }
    }

    showDPInfo() {
        const inputEl = document.getElementById('dpInput');
        const input = inputEl?.value || 'fibonacci: 10';
        const n = parseInt(input.split(':')[1]) || 10;
        const modal = document.getElementById('dpInfoModal');
        const content = document.getElementById('dpInfoContent');

        if (content) {
            content.innerHTML = `
                <div class="search-info-grid">
                    <div class="search-info-item">
                        <span class="search-info-label">Problem:</span>
                        <span class="search-info-value">Fibonacci</span>
                    </div>
                    <div class="search-info-item">
                        <span class="search-info-label">Input (n):</span>
                        <span class="search-info-value">${n}</span>
                    </div>
                    <div class="search-info-item">
                        <span class="search-info-label">Subproblems:</span>
                        <span class="search-info-value">${n + 1}</span>
                    </div>
                </div>
            `;
        }

        if (modal) modal.style.display = 'flex';
    }

    startComparison() {
        // Placeholder for comparison logic
        console.log('DP comparison started');
    }

    togglePauseResumeCompare() {
        this.isComparePaused = !this.isComparePaused;
    }

    stopComparison() {
        this.isCompareRunning = false;
        this.isComparePaused = false;
    }

    step() {
        // Step through DP solution one step at a time
        if (this.stepMode && this.currentStep <= this.maxN) {
            this.executeStep();
        } else {
            // Initialize step mode
            const inputEl = document.getElementById('dpInput');
            if (!inputEl) return;
            const value = inputEl.value;
            const n = parseInt(value.split(':')[1]) || 10;
            this.initializeStepMode(n);
            this.executeStep();
        }
    }

    initializeStepMode(n) {
        this.maxN = n;
        this.currentStep = 0;
        this.stepMode = true;
        this.dpArray = [0, 1];

        if (!this.container) return;
        this.container.innerHTML = '';

        for (let i = 0; i <= n; i++) {
            const cell = document.createElement('div');
            cell.className = 'dp-cell';
            cell.textContent = '-';
            cell.id = `dp-${i}`;
            this.container.appendChild(cell);
        }
    }

    executeStep() {
        if (this.currentStep > this.maxN) {
            this.stepMode = false;
            // Reset after step mode completes
            setTimeout(() => {
                this.reset();
            }, 2000);
            return;
        }

        const i = this.currentStep;
        const cell = document.getElementById(`dp-${i}`);

        if (cell) {
            if (i <= 1) {
                this.dpArray[i] = i;
            } else {
                this.dpArray[i] = this.dpArray[i - 1] + this.dpArray[i - 2];
            }

            cell.textContent = this.dpArray[i];
            cell.classList.add('active');

            if (typeof audioEngine !== 'undefined') audioEngine.playTone(i * 10);

            // Update stats
            const subEl = document.getElementById('dpSubproblems');
            const resEl = document.getElementById('dpResult');
            if (subEl) subEl.textContent = i + 1;
            if (resEl && i === this.maxN) {
                resEl.textContent = this.dpArray[i];
                if (typeof audioEngine !== 'undefined') audioEngine.playComplete();
                // Reset after completion
                setTimeout(() => {
                    this.reset();
                }, 2000);
            }

            // Remove active class after a moment
            setTimeout(() => {
                cell.classList.remove('active');
                cell.classList.add('computed');
            }, 300);
        }

        this.currentStep++;
    }

    async start() {
        if (this.isRunning) return;
        this.isRunning = true;
        this.shouldStop = false;
        this.stepMode = false; // Disable step mode when running automatically

        const startTime = performance.now();

        const inputEl = document.getElementById('dpInput');
        if (!inputEl) return;
        const value = inputEl.value;
        const n = parseInt(value.split(':')[1]) || 10;
        await this.showFibonacci(n);

        if (!this.shouldStop) {
            const endTime = performance.now();
            const elapsed = endTime - startTime;
            rawTimeValues.dpTime = elapsed;
            const formatSelect = document.getElementById('dpTimeFormat');
            let format = formatSelect ? formatSelect.value : 'ms';
            if (elapsed >= 2000) {
                const bestFormat = getBestTimeFormat(elapsed);
                format = bestFormat;
                if (formatSelect) formatSelect.value = bestFormat;
            }
            const timeEl = document.getElementById('dpTime');
            if (timeEl) timeEl.textContent = formatTimeValue(elapsed, format);

            // Reset after completion (2 seconds delay)
            setTimeout(() => {
                this.reset();
            }, 2000);
        }

        this.isRunning = false;
        // Show feedback modal after algorithm completion
        if (typeof showFeedbackModal === 'function') {
            setTimeout(() => showFeedbackModal(), 1000); // Delay 1 second after completion
        }
    }

    async showFibonacci(n) {
        if (!this.container) return;
        this.container.innerHTML = '';
        const dp = [0, 1];

        for (let i = 0; i <= n; i++) {
            const cell = document.createElement('div');
            cell.className = 'dp-cell';
            cell.textContent = '-';
            cell.id = `dp-${i}`;
            this.container.appendChild(cell);
        }

        const delay = Math.max(50, 250 - (this.speed * 2));

        for (let i = 0; i <= n && !this.shouldStop; i++) {
            if (i <= 1) {
                dp[i] = i;
            } else {
                dp[i] = dp[i - 1] + dp[i - 2];
            }

            const cell = document.getElementById(`dp-${i}`);
            if (cell) {
                cell.textContent = dp[i];
                cell.classList.add('active');
                if (typeof audioEngine !== 'undefined') audioEngine.playTone(i * 10);
                await new Promise(r => setTimeout(r, delay));
                cell.classList.remove('active');
                cell.classList.add('computed');
            }
        }

        if (!this.shouldStop) {
            const subEl = document.getElementById('dpSubproblems');
            const resEl = document.getElementById('dpResult');
            if (subEl) subEl.textContent = n + 1;
            if (resEl) resEl.textContent = dp[n];
            if (typeof audioEngine !== 'undefined') audioEngine.playComplete();
        }
    }
}

// ==================== STRING VISUALIZER ====================
class StringVisualizer {
    constructor() {
        this.container = document.getElementById('stringVisualization');
        this.isRunning = false;
        this.shouldStop = false;
        this.init();
    }

    init() {
        this.bindEvents();
        this.render();
    }

    stop() {
        this.shouldStop = true;
        this.isRunning = false;
        // Reset visual state when stopped
        this.render(); // Clear any highlighting states
    }

    bindEvents() {
        const startBtn = document.getElementById('startString');
        if (startBtn) startBtn.addEventListener('click', () => this.search());
    }

    render() {
        if (!this.container) return;
        const textEl = document.getElementById('stringText');
        const text = textEl?.value || 'ABABDABACDABABCABAB';
        this.container.innerHTML = '';

        for (const char of text) {
            const span = document.createElement('div');
            span.className = 'string-char';
            span.textContent = char;
            this.container.appendChild(span);
        }
    }

    async search() {
        if (this.isRunning) return;
        this.isRunning = true;
        this.shouldStop = false;

        const startTime = performance.now();

        const textEl = document.getElementById('stringText');
        const patternEl = document.getElementById('stringPattern');
        const text = textEl?.value || 'ABABDABACDABABCABAB';
        const pattern = patternEl?.value || 'ABABCABAB';

        this.render();
        let comparisons = 0;
        let matches = 0;

        for (let i = 0; i <= text.length - pattern.length && !this.shouldStop; i++) {
            let j = 0;
            while (j < pattern.length && text[i + j] === pattern[j] && !this.shouldStop) {
                comparisons++;
                const compEl = document.getElementById('stringComparisons');
                if (compEl) compEl.textContent = comparisons;

                const char = this.container.children[i + j];
                if (char) {
                    char.classList.add('active');
                    if (typeof audioEngine !== 'undefined') audioEngine.playTone(j * 10);
                }
                await new Promise(r => setTimeout(r, 100));
                j++;
            }

            if (j === pattern.length && !this.shouldStop) {
                matches++;
                const matchEl = document.getElementById('stringMatches');
                if (matchEl) matchEl.textContent = matches;

                for (let k = 0; k < pattern.length; k++) {
                    const char = this.container.children[i + k];
                    if (char) char.classList.add('matched');
                }
                if (typeof audioEngine !== 'undefined') audioEngine.playSuccess();
            } else {
                for (let k = 0; k < j; k++) {
                    const char = this.container.children[i + k];
                    if (char) char.classList.remove('active');
                }
            }
        }

        if (!this.shouldStop) {
            const endTime = performance.now();
            const elapsed = endTime - startTime;
            rawTimeValues.stringTime = elapsed;
            const formatSelect = document.getElementById('stringTimeFormat');
            let format = formatSelect ? formatSelect.value : 'ms';
            if (elapsed >= 2000) {
                const bestFormat = getBestTimeFormat(elapsed);
                format = bestFormat;
                if (formatSelect) formatSelect.value = bestFormat;
            }
            const timeEl = document.getElementById('stringTime');
            if (timeEl) timeEl.textContent = formatTimeValue(elapsed, format);
        }

        this.isRunning = false;
        // Show feedback modal after algorithm completion
        if (typeof showFeedbackModal === 'function') {
            setTimeout(() => showFeedbackModal(), 1000); // Delay 1 second after completion
        }
    }
}

// ==================== MATH VISUALIZER ====================
class MathVisualizer {
    constructor() {
        this.container = document.getElementById('mathVisualization');
        this.isRunning = false;
        this.shouldStop = false;
        this.speed = 50;
        this.init();
    }

    init() {
        this.bindEvents();
    }

    stop() {
        this.shouldStop = true;
        this.isRunning = false;
        // Reset visual state when stopped
        if (this.container) {
            this.container.innerHTML = '';
        }
    }

    bindEvents() {
        const startBtn = document.getElementById('startMath');
        const speedSlider = document.getElementById('mathSpeed');

        if (startBtn) startBtn.addEventListener('click', () => this.calculate());
        if (speedSlider) {
            const multiplierEl = document.getElementById('mathSpeedMultiplier');
            speedSlider.addEventListener('input', (e) => {
                this.speed = parseInt(e.target.value);
                if (multiplierEl) {
                    const multiplier = Math.round((this.speed / 50) * 10) / 10;
                    multiplierEl.textContent = `${multiplier}x`;
                }
            });
            if (multiplierEl) {
                multiplierEl.textContent = '1x';
            }
        }
    }

    async calculate() {
        if (this.isRunning) return;
        this.isRunning = true;
        this.shouldStop = false;

        const startTime = performance.now();

        const input1El = document.getElementById('mathInput1');
        const input2El = document.getElementById('mathInput2');
        const a = parseInt(input1El?.value || 48);
        const b = parseInt(input2El?.value || 18);

        await this.gcd(a, b);

        if (!this.shouldStop) {
            const endTime = performance.now();
            const elapsed = endTime - startTime;
            rawTimeValues.mathTime = elapsed;
            const formatSelect = document.getElementById('mathTimeFormat');
            let format = formatSelect ? formatSelect.value : 'ms';
            if (elapsed >= 2000) {
                const bestFormat = getBestTimeFormat(elapsed);
                format = bestFormat;
                if (formatSelect) formatSelect.value = bestFormat;
            }
            const timeEl = document.getElementById('mathTime');
            if (timeEl) timeEl.textContent = formatTimeValue(elapsed, format);
        }

        this.isRunning = false;
        // Show feedback modal after algorithm completion
        if (typeof showFeedbackModal === 'function') {
            setTimeout(() => showFeedbackModal(), 1000); // Delay 1 second after completion
        }
    }

    async gcd(a, b) {
        if (!this.container) return;
        this.container.innerHTML = '';
        let steps = 0;
        const delay = Math.max(50, 550 - (this.speed * 5));

        while (b !== 0 && !this.shouldStop) {
            steps++;
            const stepsEl = document.getElementById('mathSteps');
            if (stepsEl) stepsEl.textContent = steps;

            const step = document.createElement('div');
            step.className = 'dp-cell';
            step.textContent = `${a} % ${b} = ${a % b}`;
            step.style.width = 'auto';
            step.style.padding = '10px';
            this.container.appendChild(step);

            if (typeof audioEngine !== 'undefined') audioEngine.playTone(a % 100);
            await new Promise(r => setTimeout(r, delay));

            const temp = b;
            b = a % b;
            a = temp;
        }

        if (!this.shouldStop) {
            const resultEl = document.getElementById('mathResult');
            if (resultEl) resultEl.textContent = a;
            if (typeof audioEngine !== 'undefined') audioEngine.playSuccess();
        }
    }
}

// ==================== GLOBAL INSTANCES ====================
let sortingVisualizer;
let searchingVisualizer;
let languageArena;
let pathfindingVisualizer;
let treeVisualizer;
let graphVisualizer;
let dpVisualizer;
let stringVisualizer;
let mathVisualizer;

document.addEventListener('DOMContentLoaded', () => {
    sortingVisualizer = new SortingVisualizer();
    searchingVisualizer = new SearchingVisualizer();
    languageArena = new LanguageArena();
    pathfindingVisualizer = new PathfindingVisualizer();
    treeVisualizer = new TreeVisualizer();
    graphVisualizer = new GraphVisualizer();
    dpVisualizer = new DPVisualizer();
    stringVisualizer = new StringVisualizer();
    mathVisualizer = new MathVisualizer();

    // Register visualizers with VisualizationManager if available
    if (typeof VisualizationManager !== 'undefined' && window.visualizationManager) {
        window.visualizationManager.register('sorting', sortingVisualizer);
        window.visualizationManager.register('searching', searchingVisualizer);
        window.visualizationManager.register('pathfinding', pathfindingVisualizer);
        window.visualizationManager.register('trees', treeVisualizer);
        window.visualizationManager.register('graphs', graphVisualizer);
        window.visualizationManager.register('dp', dpVisualizer);
        window.visualizationManager.register('strings', stringVisualizer);
        window.visualizationManager.register('math', mathVisualizer);
    }

    // Time format change listeners
    const timeFormatSelectors = [
        { id: 'sortTimeFormat', timeId: 'sortTime', valueKey: 'sortTime' },
        { id: 'pathTimeFormat', timeId: 'pathTime', valueKey: 'pathTime' },
        { id: 'searchTimeFormat', timeId: 'searchTime', valueKey: 'searchTime' },
        { id: 'graphTimeFormat', timeId: 'graphTime', valueKey: 'graphTime' },
        { id: 'dpTimeFormat', timeId: 'dpTime', valueKey: 'dpTime' },
        { id: 'stringTimeFormat', timeId: 'stringTime', valueKey: 'stringTime' },
        { id: 'mathTimeFormat', timeId: 'mathTime', valueKey: 'mathTime' }
    ];

    timeFormatSelectors.forEach(({ id, timeId, valueKey }) => {
        const formatSelect = document.getElementById(id);
        if (formatSelect) {
            formatSelect.addEventListener('change', (e) => {
                const timeEl = document.getElementById(timeId);
                if (timeEl && rawTimeValues[valueKey] > 0) {
                    timeEl.textContent = formatTimeValue(rawTimeValues[valueKey], e.target.value);
                }
            });
        }
    });
});

// Export stop function for navigation
window.stopAllVisualizations = stopAllVisualizations;

// Export updateRustIcons for theme changes
window.updateRustIcons = updateRustIcons;
window.updateDenoIcons = updateDenoIcons;