// Problematic: Uncontrolled expensive operations
class UncontrolledEventHandling {
    constructor() {
        this.searchResults = [];
        this.apiCallCount = 0;
        this.expensiveComputationCount = 0;
        this.uiUpdateCount = 0;
        
        this.setupEventHandlers();
    }
    
    setupEventHandlers() {
        // Search input without debouncing - API spam!
        const searchInput = document.getElementById('search');
        if (searchInput) {
            searchInput.addEventListener('input', (event) => {
                this.performSearch(event.target.value);
            });
        }
        
        // Scroll handler without throttling - performance killer!
        window.addEventListener('scroll', () => {
            this.handleScroll();
        });
        
        // Mouse move handler without throttling - excessive updates!
        document.addEventListener('mousemove', (event) => {
            this.handleMouseMove(event);
        });
        
        // Resize handler without debouncing - layout thrashing!
        window.addEventListener('resize', () => {
            this.handleResize();
        });
        
        // Button click without protection - duplicate submissions!
        const submitButton = document.getElementById('submit');
        if (submitButton) {
            submitButton.addEventListener('click', () => {
                this.submitForm();
            });
        }
    }
    
    // Expensive API call triggered on every keystroke!
    async performSearch(query) {
        if (query.length === 0) return;
        
        this.apiCallCount++;
        console.log(`API call #${this.apiCallCount} for query: "${query}"`);
        
        try {
            // Simulate expensive API call
            const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
            const results = await response.json();
            
            this.searchResults = results;
            this.updateSearchUI(results);
            
        } catch (error) {
            console.error('Search failed:', error);
        }
        
        // Problems:
        // 1. User types "javascript" → 10 API calls!
        // 2. Server overwhelmed with requests
        // 3. Results arrive out of order
        // 4. Network bandwidth wasted
        // 5. API rate limits triggered
    }
    
    // Expensive scroll calculations on every pixel!
    handleScroll() {
        this.expensiveComputationCount++;
        
        const scrollTop = window.pageYOffset;
        const windowHeight = window.innerHeight;
        const documentHeight = document.documentElement.scrollHeight;
        
        // Expensive DOM queries on every scroll event!
        const sections = document.querySelectorAll('.section');
        const activeSection = Array.from(sections).find(section => {
            const rect = section.getBoundingClientRect();
            return rect.top <= 100 && rect.bottom >= 100;
        });
        
        // Complex calculations for parallax effects
        sections.forEach(section => {
            const rect = section.getBoundingClientRect();
            const parallaxSpeed = section.dataset.parallax || 0.5;
            
            // Expensive transform calculations
            const translateY = (rect.top - windowHeight / 2) * parallaxSpeed;
            section.style.transform = `translateY(${translateY}px)`;
            
            // Expensive filter effects
            const blur = Math.abs(rect.top - windowHeight / 2) / 100;
            section.style.filter = `blur(${Math.min(blur, 10)}px)`;
        });
        
        // Update navigation highlighting
        this.updateNavigationHighlight(activeSection);
        
        // Trigger analytics events
        this.trackScrollProgress(scrollTop, documentHeight);
        
        console.log(`Scroll handler executed #${this.expensiveComputationCount} times`);
        
        // Problems:
        // 1. Fires 100+ times per second during scrolling
        // 2. Complex DOM queries on every event
        // 3. Expensive CSS calculations
        // 4. UI becomes janky and unresponsive
        // 5. Battery drain on mobile devices
    }
    
    // Excessive mouse tracking
    handleMouseMove(event) {
        this.uiUpdateCount++;
        
        // Update cursor position display
        const cursor = document.getElementById('cursor-position');
        if (cursor) {
            cursor.textContent = `X: ${event.clientX}, Y: ${event.clientY}`;
        }
        
        // Complex hover effects calculations
        const elements = document.querySelectorAll('.interactive');
        elements.forEach(element => {
            const rect = element.getBoundingClientRect();
            const centerX = rect.left + rect.width / 2;
            const centerY = rect.top + rect.height / 2;
            
            // Calculate distance and apply effects
            const distance = Math.sqrt(
                Math.pow(event.clientX - centerX, 2) + 
                Math.pow(event.clientY - centerY, 2)
            );
            
            // Expensive transforms on every mouse move
            const scale = Math.max(0.8, 1 - distance / 500);
            const rotation = (event.clientX - centerX) / 10;
            
            element.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
            element.style.filter = `brightness(${1 + (1 - scale) * 0.5})`;
        });
        
        // Send analytics data
        this.trackMouseMovement(event.clientX, event.clientY);
        
        // Problems:
        // 1. Fires continuously during mouse movement
        // 2. Heavy DOM manipulation on every pixel
        // 3. Complex mathematical calculations
        // 4. Analytics spam
        // 5. Performance degradation
    }
    
    // Layout calculations on every resize event
    handleResize() {
        console.log('Resize event triggered');
        
        // Expensive layout recalculations
        this.recalculateLayout();
        this.adjustResponsiveElements();
        this.repositionModal();
        this.updateCanvasSize();
        
        // Save layout state
        this.saveLayoutState();
        
        // Problems:
        // 1. Triggered rapidly during window dragging
        // 2. Multiple expensive layout calculations
        // 3. Synchronous DOM operations
        // 4. Layout thrashing
        // 5. Poor user experience during resize
    }
    
    recalculateLayout() {
        // Expensive synchronous DOM operations
        const containers = document.querySelectorAll('.container');
        containers.forEach(container => {
            const width = container.offsetWidth;
            const height = container.offsetHeight;
            
            // Force layout recalculation
            container.style.width = `${width}px`;
            container.style.height = `${height}px`;
            
            // More expensive calculations
            const children = container.children;
            Array.from(children).forEach((child, index) => {
                child.style.left = `${index * (width / children.length)}px`;
            });
        });
    }
    
    adjustResponsiveElements() {
        // Simulate expensive responsive calculations
        const elements = document.querySelectorAll('.responsive');
        elements.forEach(element => {
            const screenWidth = window.innerWidth;
            
            if (screenWidth < 768) {
                element.classList.add('mobile');
                element.classList.remove('desktop');
            } else {
                element.classList.add('desktop');
                element.classList.remove('mobile');
            }
            
            // Expensive calculations for each element
            const fontSize = Math.max(12, screenWidth / 100);
            element.style.fontSize = `${fontSize}px`;
        });
    }
    
    // Form submission without protection
    async submitForm() {
        console.log('Form submission attempted');
        
        // No protection against double-clicks!
        try {
            const formData = this.gatherFormData();
            
            // Expensive validation
            const isValid = await this.validateFormData(formData);
            if (!isValid) {
                throw new Error('Form validation failed');
            }
            
            // API call without duplicate protection
            const response = await fetch('/api/submit', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(formData)
            });
            
            if (!response.ok) {
                throw new Error('Submission failed');
            }
            
            console.log('Form submitted successfully');
            
        } catch (error) {
            console.error('Submission error:', error);
        }
        
        // Problems:
        // 1. Double-click creates duplicate submissions
        // 2. No visual feedback during processing
        // 3. Server receives multiple identical requests
        // 4. Poor error handling for duplicate submissions
        // 5. User confusion about submission status
    }
    
    gatherFormData() {
        // Simulate expensive form data gathering
        const inputs = document.querySelectorAll('input, select, textarea');
        const data = {};
        
        inputs.forEach(input => {
            data[input.name] = input.value;
        });
        
        return data;
    }
    
    async validateFormData(data) {
        // Simulate expensive async validation
        await new Promise(resolve => setTimeout(resolve, 500));
        return Object.keys(data).length > 0;
    }
    
    updateSearchUI(results) {
        // Expensive DOM updates
        const container = document.getElementById('search-results');
        if (container) {
            container.innerHTML = '';
            
            results.forEach(result => {
                const item = document.createElement('div');
                item.className = 'search-result';
                item.innerHTML = `
                    <h3>${result.title}</h3>
                    <p>${result.description}</p>
                `;
                container.appendChild(item);
            });
        }
    }
    
    updateNavigationHighlight(activeSection) {
        // Expensive navigation updates
        document.querySelectorAll('.nav-item').forEach(item => {
            item.classList.remove('active');
        });
        
        if (activeSection) {
            const navItem = document.querySelector(`[href="#${activeSection.id}"]`);
            if (navItem) {
                navItem.classList.add('active');
            }
        }
    }
    
    trackScrollProgress(scrollTop, documentHeight) {
        // Expensive analytics tracking
        const progress = (scrollTop / (documentHeight - window.innerHeight)) * 100;
        
        // Send analytics event (expensive!)
        console.log(`Scroll progress: ${progress.toFixed(2)}%`);
    }
    
    trackMouseMovement(x, y) {
        // Expensive analytics tracking
        console.log(`Mouse position: ${x}, ${y}`);
    }
    
    repositionModal() {
        // Expensive modal positioning
        const modal = document.querySelector('.modal');
        if (modal) {
            const rect = modal.getBoundingClientRect();
            modal.style.top = `${(window.innerHeight - rect.height) / 2}px`;
            modal.style.left = `${(window.innerWidth - rect.width) / 2}px`;
        }
    }
    
    updateCanvasSize() {
        // Expensive canvas operations
        const canvas = document.querySelector('canvas');
        if (canvas) {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            
            // Expensive redraw
            this.redrawCanvas(canvas);
        }
    }
    
    redrawCanvas(canvas) {
        const ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // Expensive drawing operations
        for (let i = 0; i < 1000; i++) {
            ctx.fillRect(
                Math.random() * canvas.width,
                Math.random() * canvas.height,
                10, 10
            );
        }
    }
    
    saveLayoutState() {
        // Expensive state serialization
        const state = {
            windowWidth: window.innerWidth,
            windowHeight: window.innerHeight,
            timestamp: Date.now()
        };
        
        localStorage.setItem('layoutState', JSON.stringify(state));
    }
    
    getStats() {
        return {
            apiCalls: this.apiCallCount,
            expensiveComputations: this.expensiveComputationCount,
            uiUpdates: this.uiUpdateCount
        };
    }
}

// Usage that demonstrates the problems
const handler = new UncontrolledEventHandling();

// Simulate user typing in search box
setTimeout(() => {
    const searchInput = document.getElementById('search');
    if (searchInput) {
        'javascript'.split('').forEach((char, index) => {
            setTimeout(() => {
                searchInput.value += char;
                searchInput.dispatchEvent(new Event('input'));
            }, index * 100);
        });
        
        setTimeout(() => {
            console.log('\nAfter typing "javascript":');
            console.log(handler.getStats());
            // Shows: 10+ API calls for a single search!
        }, 1500);
    }
}, 1000);

// Problems this creates:
// 1. 10+ API calls for typing "javascript"
// 2. 100+ scroll events per second
// 3. Continuous mouse tracking spam
// 4. Multiple resize calculations during window drag
// 5. Duplicate form submissions on double-click
// 6. Poor performance and user experience
// 7. Server overload and API rate limiting
// 8. Excessive battery usage on mobile

// Advanced Debouncing Implementation
class AdvancedDebouncer {
    constructor(options = {}) {
        this.options = {
            strategy: options.strategy || 'trailing', // 'leading', 'trailing', 'both'
            maxWait: options.maxWait || null, // Maximum time to wait before forcing execution
            immediate: options.immediate || false, // Execute immediately on first call
            ...options
        };
        
        this.timers = new Map();
        this.lastCall = new Map();
        this.callCount = new Map();
        this.stats = {
            totalCalls: 0,
            executedCalls: 0,
            cancelledCalls: 0
        };
    }
    
    // Main debounce method with multiple strategies
    debounce(func, delay, key = 'default') {
        const startTime = performance.now();
        
        return (...args) => {
            const currentTime = performance.now();
            this.stats.totalCalls++;
            
            // Track call count for this key
            this.callCount.set(key, (this.callCount.get(key) || 0) + 1);
            
            // Get existing timer for this key
            const existingTimer = this.timers.get(key);
            const lastCallTime = this.lastCall.get(key) || 0;
            
            // Strategy: Leading
            if (this.options.strategy === 'leading') {
                if (!existingTimer) {
                    // Execute immediately on first call
                    this.executeFunction(func, args, key);
                    
                    // Set timer to prevent execution until delay passes
                    const timer = setTimeout(() => {
                        this.timers.delete(key);
                    }, delay);
                    
                    this.timers.set(key, timer);
                }
                return;
            }
            
            // Strategy: Both (leading + trailing)
            if (this.options.strategy === 'both') {
                if (!existingTimer) {
                    // Execute immediately (leading)
                    this.executeFunction(func, args, key);
                }
                
                // Clear existing timer
                if (existingTimer) {
                    clearTimeout(existingTimer);
                    this.stats.cancelledCalls++;
                }
                
                // Set new timer for trailing execution
                const timer = setTimeout(() => {
                    this.executeFunction(func, args, key);
                    this.timers.delete(key);
                }, delay);
                
                this.timers.set(key, timer);
                this.lastCall.set(key, currentTime);
                return;
            }
            
            // Strategy: Trailing (default)
            // Clear existing timer
            if (existingTimer) {
                clearTimeout(existingTimer);
                this.stats.cancelledCalls++;
            }
            
            // Check maxWait constraint
            if (this.options.maxWait && 
                currentTime - lastCallTime >= this.options.maxWait) {
                
                // Force execution due to maxWait
                this.executeFunction(func, args, key);
                this.lastCall.set(key, currentTime);
                
                // Set new timer
                const timer = setTimeout(() => {
                    this.timers.delete(key);
                }, delay);
                
                this.timers.set(key, timer);
                return;
            }
            
            // Set new timer for trailing execution
            const timer = setTimeout(() => {
                this.executeFunction(func, args, key);
                this.timers.delete(key);
            }, delay);
            
            this.timers.set(key, timer);
            this.lastCall.set(key, currentTime);
        };
    }
    
    executeFunction(func, args, key) {
        this.stats.executedCalls++;
        
        console.log(`🚀 Executing debounced function (${key}) - Call #${this.callCount.get(key)}`);
        
        try {
            const result = func.apply(this, args);
            
            // Handle async functions
            if (result && typeof result.then === 'function') {
                result.catch(error => {
                    console.error(`Error in debounced function (${key}):`, error);
                });
            }
            
            return result;
        } catch (error) {
            console.error(`Error in debounced function (${key}):`, error);
            throw error;
        }
    }
    
    // Cancel pending execution for a specific key
    cancel(key = 'default') {
        const timer = this.timers.get(key);
        if (timer) {
            clearTimeout(timer);
            this.timers.delete(key);
            this.stats.cancelledCalls++;
            console.log(`⏹️ Cancelled debounced execution (${key})`);
            return true;
        }
        return false;
    }
    
    // Cancel all pending executions
    cancelAll() {
        let cancelledCount = 0;
        for (const [key, timer] of this.timers) {
            clearTimeout(timer);
            cancelledCount++;
        }
        
        this.timers.clear();
        this.stats.cancelledCalls += cancelledCount;
        console.log(`⏹️ Cancelled ${cancelledCount} pending executions`);
    }
    
    // Flush - execute all pending functions immediately
    flush() {
        const pendingKeys = [...this.timers.keys()];
        
        for (const key of pendingKeys) {
            this.cancel(key);
            console.log(`⚡ Flushed execution (${key})`);
        }
        
        return pendingKeys.length;
    }
    
    // Check if function is pending execution
    isPending(key = 'default') {
        return this.timers.has(key);
    }
    
    // Get debouncer statistics
    getStats() {
        return {
            ...this.stats,
            pendingExecutions: this.timers.size,
            savedExecutions: this.stats.totalCalls - this.stats.executedCalls,
            executionRate: (this.stats.executedCalls / this.stats.totalCalls * 100).toFixed(2) + '%'
        };
    }
    
    // Reset statistics
    resetStats() {
        this.stats = {
            totalCalls: 0,
            executedCalls: 0,
            cancelledCalls: 0
        };
        this.callCount.clear();
    }
    
    // Cleanup
    cleanup() {
        this.cancelAll();
        this.resetStats();
        this.lastCall.clear();
    }
}

// Specialized Search Debouncer
class SearchDebouncer extends AdvancedDebouncer {
    constructor(options = {}) {
        super({
            strategy: 'trailing',
            maxWait: 1000, // Force search after 1 second max
            ...options
        });
        
        this.searchHistory = [];
        this.activeRequests = new Map();
        this.cache = new Map();
        this.cacheExpiry = options.cacheExpiry || 60000; // 1 minute
    }
    
    createSearchFunction(searchHandler, options = {}) {
        const {
            minLength = 2,
            cacheEnabled = true,
            requestTimeout = 5000
        } = options;
        
        return this.debounce(async (query, ...args) => {
            // Validate query
            if (!query || query.length < minLength) {
                console.log(`⏭️ Skipping search - query too short: "${query}"`);
                return { results: [], skipped: true };
            }
            
            // Check cache
            if (cacheEnabled) {
                const cached = this.getCachedResult(query);
                if (cached) {
                    console.log(`💾 Cache hit for query: "${query}"`);
                    return cached;
                }
            }
            
            // Cancel previous request for same query
            this.cancelPreviousRequest(query);
            
            // Track search history
            this.searchHistory.push({
                query,
                timestamp: Date.now(),
                args: args
            });
            
            // Keep history bounded
            if (this.searchHistory.length > 100) {
                this.searchHistory.shift();
            }
            
            console.log(`🔍 Executing search for: "${query}"`);
            
            try {
                // Create abort controller for request cancellation
                const controller = new AbortController();
                const timeoutId = setTimeout(() => controller.abort(), requestTimeout);
                
                // Store active request
                this.activeRequests.set(query, { controller, timeoutId });
                
                // Execute search with timeout
                const result = await Promise.race([
                    searchHandler(query, ...args),
                    new Promise((_, reject) => {
                        controller.signal.addEventListener('abort', () => {
                            reject(new Error('Search request aborted'));
                        });
                    })
                ]);
                
                // Clear timeout and active request
                clearTimeout(timeoutId);
                this.activeRequests.delete(query);
                
                // Cache result
                if (cacheEnabled && result) {
                    this.setCachedResult(query, result);
                }
                
                console.log(`✅ Search completed for: "${query}" - ${result?.results?.length || 0} results`);
                return result;
                
            } catch (error) {
                // Clean up on error
                this.activeRequests.delete(query);
                
                if (error.message === 'Search request aborted') {
                    console.log(`⏹️ Search cancelled for: "${query}"`);
                    return { results: [], cancelled: true };
                }
                
                console.error(`❌ Search failed for: "${query}"`, error);
                throw error;
            }
            
        }, options.delay || 300, `search-${query}`);
    }
    
    getCachedResult(query) {
        const cached = this.cache.get(query);
        if (cached && Date.now() - cached.timestamp < this.cacheExpiry) {
            return cached.result;
        }
        
        // Remove expired cache entry
        if (cached) {
            this.cache.delete(query);
        }
        
        return null;
    }
    
    setCachedResult(query, result) {
        this.cache.set(query, {
            result,
            timestamp: Date.now()
        });
        
        // Keep cache size bounded
        if (this.cache.size > 50) {
            const oldestKey = this.cache.keys().next().value;
            this.cache.delete(oldestKey);
        }
    }
    
    cancelPreviousRequest(query) {
        const activeRequest = this.activeRequests.get(query);
        if (activeRequest) {
            activeRequest.controller.abort();
            clearTimeout(activeRequest.timeoutId);
            this.activeRequests.delete(query);
        }
    }
    
    getSearchStats() {
        return {
            ...this.getStats(),
            searchHistory: this.searchHistory.length,
            cacheSize: this.cache.size,
            activeRequests: this.activeRequests.size,
            recentSearches: this.searchHistory.slice(-5).map(s => s.query)
        };
    }
    
    clearCache() {
        this.cache.clear();
        console.log('Search cache cleared');
    }
    
    cancelAllRequests() {
        for (const [query, request] of this.activeRequests) {
            request.controller.abort();
            clearTimeout(request.timeoutId);
        }
        this.activeRequests.clear();
        console.log('All active search requests cancelled');
    }
    
    cleanup() {
        super.cleanup();
        this.cancelAllRequests();
        this.clearCache();
        this.searchHistory = [];
    }
}

// Usage demonstration
console.log('=== Advanced Debouncing Demo ===');

// Create search debouncer
const searchDebouncer = new SearchDebouncer({
    cacheEnabled: true,
    cacheExpiry: 30000 // 30 seconds
});

// Mock search API
async function mockSearchAPI(query) {
    // Simulate network delay
    await new Promise(resolve => setTimeout(resolve, Math.random() * 500 + 200));
    
    // Simulate search results
    const results = Array.from({ length: Math.floor(Math.random() * 10) + 1 }, (_, i) => ({
        id: i,
        title: `Result ${i + 1} for "${query}"`,
        score: Math.random()
    }));
    
    return { results, query, timestamp: Date.now() };
}

// Create debounced search function
const debouncedSearch = searchDebouncer.createSearchFunction(mockSearchAPI, {
    delay: 300,
    minLength: 2,
    cacheEnabled: true,
    requestTimeout: 3000
});

// Simulate rapid typing
console.log('\n--- Simulating typing "javascript" ---');
const query = 'javascript';
let currentQuery = '';

query.split('').forEach((char, index) => {
    setTimeout(async () => {
        currentQuery += char;
        console.log(`Typing: "${currentQuery}"`);
        
        try {
            const result = await debouncedSearch(currentQuery);
            if (result && !result.skipped && !result.cancelled) {
                console.log(`Search result for "${currentQuery}":`, result.results.length, 'items');
            }
        } catch (error) {
            console.error('Search error:', error.message);
        }
        
        // Show stats after last character
        if (index === query.length - 1) {
            setTimeout(() => {
                console.log('\n📊 Search Stats:', searchDebouncer.getSearchStats());
            }, 1000);
        }
        
    }, index * 150); // 150ms between keystrokes
});

// Cleanup demo
setTimeout(() => {
    searchDebouncer.cleanup();
    console.log('\n🧹 Search debouncer cleaned up');
}, 5000);