// Poorly performing code without proper measurement
class UnmeasuredPerformanceProblems {
    constructor() {
        this.data = [];
        this.cache = {};
        this.listeners = [];
        
        // No baseline measurements
        console.log('Application starting...');
        this.initializeData();
        this.setupEventHandlers();
        this.startPeriodicTasks();
    }
    
    // Expensive operation without timing
    initializeData() {
        console.log('Loading data...');
        
        // Synchronous operation that blocks main thread
        for (let i = 0; i < 100000; i++) {
            this.data.push({
                id: i,
                value: Math.random(),
                processed: false,
                metadata: {
                    created: new Date(),
                    category: `cat_${i % 10}`,
                    tags: this.generateTags(i)
                }
            });
        }
        
        console.log('Data loaded'); // No timing information!
    }
    
    generateTags(index) {
        // Inefficient tag generation
        const tags = [];
        for (let i = 0; i < 5; i++) {
            tags.push(`tag_${(index + i) % 20}`);
        }
        return tags;
    }
    
    // Unoptimized search function
    searchData(query) {
        console.log(`Searching for: ${query}`);
        
        // No caching, full scan every time
        const results = [];
        
        // Inefficient nested loops
        for (const item of this.data) {
            if (item.value.toString().includes(query) ||
                item.metadata.category.includes(query)) {
                
                // Expensive computation for each match
                const score = this.calculateRelevanceScore(item, query);
                results.push({ ...item, score });
            }
        }
        
        // Expensive sorting without measurement
        results.sort((a, b) => b.score - a.score);
        
        console.log(`Found ${results.length} results`); // No timing!
        return results;
    }
    
    calculateRelevanceScore(item, query) {
        // Expensive relevance calculation
        let score = 0;
        
        // Multiple string operations
        if (item.value.toString().includes(query)) score += 10;
        if (item.metadata.category.includes(query)) score += 5;
        
        // Expensive tag matching
        for (const tag of item.metadata.tags) {
            if (tag.includes(query)) {
                score += 2;
            }
        }
        
        // Unnecessary complex calculation
        score *= Math.log(item.id + 1);
        score += Math.random(); // Adds inconsistency!
        
        return score;
    }
    
    // Heavy periodic task without performance monitoring
    startPeriodicTasks() {
        setInterval(() => {
            this.performMaintenanceTasks();
        }, 5000);
        
        setInterval(() => {
            this.updateStatistics();
        }, 1000);
        
        setInterval(() => {
            this.refreshCache();
        }, 10000);
    }
    
    performMaintenanceTasks() {
        // Expensive maintenance without measurement
        console.log('Running maintenance...');
        
        // Process all data items
        for (const item of this.data) {
            if (!item.processed) {
                this.processItem(item);
            }
        }
        
        // Garbage collection triggering operations
        this.cleanupOldData();
        
        console.log('Maintenance complete');
    }
    
    processItem(item) {
        // Simulate expensive processing
        for (let i = 0; i < 1000; i++) {
            Math.sqrt(item.value * i);
        }
        item.processed = true;
        item.processedAt = new Date();
    }
    
    cleanupOldData() {
        // Inefficient cleanup
        const cutoff = Date.now() - (24 * 60 * 60 * 1000); // 24 hours
        
        this.data = this.data.filter(item => {
            return !item.processedAt || item.processedAt.getTime() > cutoff;
        });
        
        // Clear entire cache instead of selective cleanup
        this.cache = {};
    }
    
    updateStatistics() {
        // Expensive statistics calculation every second
        console.log('Updating statistics...');
        
        const stats = {
            totalItems: this.data.length,
            processedItems: this.data.filter(item => item.processed).length,
            categories: {},
            averageValue: 0
        };
        
        // Expensive aggregation
        for (const item of this.data) {
            if (!stats.categories[item.metadata.category]) {
                stats.categories[item.metadata.category] = 0;
            }
            stats.categories[item.metadata.category]++;
            stats.averageValue += item.value;
        }
        
        stats.averageValue /= this.data.length;
        
        // Store in DOM (expensive)
        document.body.setAttribute('data-stats', JSON.stringify(stats));
        
        console.log('Statistics updated');
    }
    
    refreshCache() {
        // Inefficient cache refresh
        console.log('Refreshing cache...');
        
        // Clear all cache
        this.cache = {};
        
        // Rebuild popular queries (expensive)
        const popularQueries = ['cat_1', 'cat_2', 'cat_3', 'tag_1', 'tag_2'];
        for (const query of popularQueries) {
            this.cache[query] = this.searchData(query);
        }
        
        console.log('Cache refreshed');
    }
    
    // No performance metrics or monitoring
    getPerformanceInfo() {
        return {
            dataSize: this.data.length,
            cacheSize: Object.keys(this.cache).length,
            // No timing information
            // No memory usage
            // No operation counts
            // No performance trends
        };
    }
}

// Usage without performance monitoring
const app = new UnmeasuredPerformanceProblems();

// Trigger expensive operations without measurement
const results1 = app.searchData('cat_1');
const results2 = app.searchData('tag_5');
const results3 = app.searchData('nonexistent');

console.log('Performance info:', app.getPerformanceInfo());

// Problems with this approach:
// 1. No baseline performance measurements
// 2. No identification of bottlenecks
// 3. No monitoring of periodic task performance
// 4. No memory usage tracking
// 5. No user experience impact measurement
// 6. No data to guide optimization efforts

// Advanced Performance Monitoring and Profiling System
class PerformanceMonitor {
    constructor(options = {}) {
        this.options = {
            enableDetailedProfiling: options.enableDetailedProfiling || false,
            sampleRate: options.sampleRate || 1.0, // Sample 100% by default
            maxHistorySize: options.maxHistorySize || 1000,
            enableMemoryTracking: options.enableMemoryTracking || true,
            enableUserTiming: options.enableUserTiming || true,
            ...options
        };
        
        // Performance data storage
        this.metrics = new Map();
        this.timingHistory = [];
        this.memoryHistory = [];
        this.customMetrics = new Map();
        
        // Performance observers
        this.observers = new Map();
        
        // Initialize performance monitoring
        this.initializePerformanceObservers();
        this.startMemoryMonitoring();
        
        console.log('Performance Monitor initialized:', this.options);
    }
    
    // Initialize browser performance observers
    initializePerformanceObservers() {
        if (!window.PerformanceObserver) {
            console.warn('PerformanceObserver not supported');
            return;
        }
        
        // Observe navigation timing
        try {
            const navObserver = new PerformanceObserver((list) => {
                for (const entry of list.getEntries()) {
                    this.recordNavigationTiming(entry);
                }
            });
            navObserver.observe({ type: 'navigation', buffered: true });
            this.observers.set('navigation', navObserver);
        } catch (error) {
            console.warn('Navigation timing observer failed:', error);
        }
        
        // Observe resource loading
        try {
            const resourceObserver = new PerformanceObserver((list) => {
                for (const entry of list.getEntries()) {
                    this.recordResourceTiming(entry);
                }
            });
            resourceObserver.observe({ type: 'resource', buffered: true });
            this.observers.set('resource', resourceObserver);
        } catch (error) {
            console.warn('Resource timing observer failed:', error);
        }
        
        // Observe user timing marks and measures
        if (this.options.enableUserTiming) {
            try {
                const userTimingObserver = new PerformanceObserver((list) => {
                    for (const entry of list.getEntries()) {
                        this.recordUserTiming(entry);
                    }
                });
                userTimingObserver.observe({ entryTypes: ['mark', 'measure'] });
                this.observers.set('userTiming', userTimingObserver);
            } catch (error) {
                console.warn('User timing observer failed:', error);
            }
        }
        
        // Observe paint timing
        try {
            const paintObserver = new PerformanceObserver((list) => {
                for (const entry of list.getEntries()) {
                    this.recordPaintTiming(entry);
                }
            });
            paintObserver.observe({ type: 'paint', buffered: true });
            this.observers.set('paint', paintObserver);
        } catch (error) {
            console.warn('Paint timing observer failed:', error);
        }
    }
    
    // Record navigation timing metrics
    recordNavigationTiming(entry) {
        const metrics = {
            timestamp: Date.now(),
            type: 'navigation',
            domainLookupTime: entry.domainLookupEnd - entry.domainLookupStart,
            connectTime: entry.connectEnd - entry.connectStart,
            requestTime: entry.responseStart - entry.requestStart,
            responseTime: entry.responseEnd - entry.responseStart,
            domContentLoadedTime: entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart,
            loadEventTime: entry.loadEventEnd - entry.loadEventStart,
            totalLoadTime: entry.loadEventEnd - entry.fetchStart
        };
        
        this.metrics.set('navigation', metrics);
        console.log('Navigation timing recorded:', metrics);
    }
    
    // Record resource loading timing
    recordResourceTiming(entry) {
        if (!this.metrics.has('resources')) {
            this.metrics.set('resources', []);
        }
        
        const resourceMetrics = {
            name: entry.name,
            type: entry.initiatorType,
            duration: entry.duration,
            size: entry.transferSize || 0,
            startTime: entry.startTime,
            endTime: entry.responseEnd
        };
        
        this.metrics.get('resources').push(resourceMetrics);
        
        // Keep only recent resources
        const resources = this.metrics.get('resources');
        if (resources.length > this.options.maxHistorySize) {
            resources.splice(0, resources.length - this.options.maxHistorySize);
        }
    }
    
    // Record user timing marks and measures
    recordUserTiming(entry) {
        if (!this.metrics.has('userTiming')) {
            this.metrics.set('userTiming', []);
        }
        
        const timingData = {
            name: entry.name,
            type: entry.entryType,
            startTime: entry.startTime,
            duration: entry.duration || 0,
            timestamp: Date.now()
        };
        
        this.metrics.get('userTiming').push(timingData);
        console.log(`User timing ${entry.entryType}:`, timingData);
    }
    
    // Record paint timing metrics
    recordPaintTiming(entry) {
        if (!this.metrics.has('paint')) {
            this.metrics.set('paint', {});
        }
        
        this.metrics.get('paint')[entry.name] = {
            time: entry.startTime,
            timestamp: Date.now()
        };
        
        console.log(`Paint timing - ${entry.name}:`, entry.startTime);
    }
    
    // Start memory monitoring
    startMemoryMonitoring() {
        if (!this.options.enableMemoryTracking) return;
        
        const collectMemoryStats = () => {
            const memoryStats = this.getMemoryStats();
            this.memoryHistory.push({
                ...memoryStats,
                timestamp: Date.now()
            });
            
            // Keep memory history bounded
            if (this.memoryHistory.length > this.options.maxHistorySize) {
                this.memoryHistory.shift();
            }
        };
        
        // Collect memory stats every 5 seconds
        setInterval(collectMemoryStats, 5000);
        
        // Initial collection
        collectMemoryStats();
    }
    
    // Get current memory statistics
    getMemoryStats() {
        const stats = {
            timestamp: Date.now()
        };
        
        // Performance memory API
        if (performance.memory) {
            stats.jsHeapSizeLimit = performance.memory.jsHeapSizeLimit;
            stats.totalJSHeapSize = performance.memory.totalJSHeapSize;
            stats.usedJSHeapSize = performance.memory.usedJSHeapSize;
            stats.memoryUsagePercent = (performance.memory.usedJSHeapSize / performance.memory.jsHeapSizeLimit) * 100;
        }
        
        return stats;
    }
    
    // High-precision timing function
    time(label) {
        const startTime = performance.now();
        
        if (this.options.enableUserTiming) {
            performance.mark(`${label}-start`);
        }
        
        return {
            end: () => {
                const endTime = performance.now();
                const duration = endTime - startTime;
                
                if (this.options.enableUserTiming) {
                    performance.mark(`${label}-end`);
                    performance.measure(label, `${label}-start`, `${label}-end`);
                }
                
                // Record in timing history
                this.timingHistory.push({
                    label,
                    duration,
                    startTime,
                    endTime,
                    timestamp: Date.now()
                });
                
                // Keep history bounded
                if (this.timingHistory.length > this.options.maxHistorySize) {
                    this.timingHistory.shift();
                }
                
                console.log(`⏱️ ${label}: ${duration.toFixed(2)}ms`);
                return duration;
            }
        };
    }
    
    // Measure function execution time
    measureFunction(fn, label = 'function') {
        const timer = this.time(label);
        
        try {
            const result = fn();
            
            // Handle both sync and async functions
            if (result && typeof result.then === 'function') {
                return result.finally(() => timer.end());
            } else {
                timer.end();
                return result;
            }
        } catch (error) {
            timer.end();
            throw error;
        }
    }
    
    // Measure async function execution time
    async measureAsync(asyncFn, label = 'async-function') {
        const timer = this.time(label);
        
        try {
            const result = await asyncFn();
            timer.end();
            return result;
        } catch (error) {
            timer.end();
            throw error;
        }
    }
    
    // Profile code execution with sampling
    profile(fn, options = {}) {
        const {
            iterations = 100,
            warmupIterations = 10,
            label = 'profile'
        } = options;
        
        console.log(`🔍 Profiling ${label} (${warmupIterations} warmup + ${iterations} iterations)`);
        
        // Warmup phase
        for (let i = 0; i < warmupIterations; i++) {
            fn();
        }
        
        // Force garbage collection if available
        if (global.gc) {
            global.gc();
        }
        
        // Actual profiling
        const durations = [];
        const startMemory = this.getMemoryStats();
        
        for (let i = 0; i < iterations; i++) {
            const timer = this.time(`${label}-iteration-${i}`);
            fn();
            durations.push(timer.end());
        }
        
        const endMemory = this.getMemoryStats();
        
        // Calculate statistics
        const stats = this.calculateStatistics(durations, label);
        
        // Memory impact
        const memoryDelta = endMemory.usedJSHeapSize - startMemory.usedJSHeapSize;
        
        const profileResults = {
            label,
            iterations,
            warmupIterations,
            ...stats,
            memoryImpact: {
                delta: memoryDelta,
                perIteration: memoryDelta / iterations,
                startMemory: startMemory.usedJSHeapSize,
                endMemory: endMemory.usedJSHeapSize
            },
            timestamp: Date.now()
        };
        
        console.log(`📊 Profile results for ${label}:`, profileResults);
        return profileResults;
    }
    
    // Calculate statistical measures
    calculateStatistics(durations, label) {
        const sorted = [...durations].sort((a, b) => a - b);
        const sum = durations.reduce((a, b) => a + b, 0);
        const mean = sum / durations.length;
        
        // Calculate variance and standard deviation
        const variance = durations.reduce((acc, val) => acc + Math.pow(val - mean, 2), 0) / durations.length;
        const stdDev = Math.sqrt(variance);
        
        // Percentiles
        const p50 = sorted[Math.floor(sorted.length * 0.5)];
        const p90 = sorted[Math.floor(sorted.length * 0.9)];
        const p95 = sorted[Math.floor(sorted.length * 0.95)];
        const p99 = sorted[Math.floor(sorted.length * 0.99)];
        
        return {
            count: durations.length,
            sum: sum,
            mean: mean,
            median: p50,
            min: sorted[0],
            max: sorted[sorted.length - 1],
            stdDev: stdDev,
            variance: variance,
            percentiles: {
                p50: p50,
                p90: p90,
                p95: p95,
                p99: p99
            }
        };
    }
    
    // Track custom metrics
    recordCustomMetric(name, value, unit = '', metadata = {}) {
        if (!this.customMetrics.has(name)) {
            this.customMetrics.set(name, []);
        }
        
        this.customMetrics.get(name).push({
            value,
            unit,
            metadata,
            timestamp: Date.now()
        });
        
        // Keep history bounded
        const history = this.customMetrics.get(name);
        if (history.length > this.options.maxHistorySize) {
            history.shift();
        }
        
        console.log(`📈 Custom metric ${name}: ${value}${unit}`);
    }
    
    // Generate comprehensive performance report
    generateReport() {
        const report = {
            timestamp: Date.now(),
            navigation: this.metrics.get('navigation'),
            paint: this.metrics.get('paint'),
            resources: this.getResourcesSummary(),
            timing: this.getTimingSummary(),
            memory: this.getMemorySummary(),
            customMetrics: this.getCustomMetricsSummary(),
            recommendations: this.generateRecommendations()
        };
        
        console.log('📋 Performance Report Generated:', report);
        return report;
    }
    
    getResourcesSummary() {
        const resources = this.metrics.get('resources') || [];
        
        if (resources.length === 0) return null;
        
        const totalSize = resources.reduce((sum, r) => sum + r.size, 0);
        const totalDuration = resources.reduce((sum, r) => sum + r.duration, 0);
        
        return {
            count: resources.length,
            totalSize: totalSize,
            totalDuration: totalDuration,
            averageDuration: totalDuration / resources.length,
            largestResource: resources.reduce((max, r) => r.size > max.size ? r : max),
            slowestResource: resources.reduce((max, r) => r.duration > max.duration ? r : max)
        };
    }
    
    getTimingSummary() {
        if (this.timingHistory.length === 0) return null;
        
        const recent = this.timingHistory.slice(-50); // Last 50 measurements
        const durations = recent.map(t => t.duration);
        
        return this.calculateStatistics(durations, 'timing-summary');
    }
    
    getMemorySummary() {
        if (this.memoryHistory.length === 0) return null;
        
        const latest = this.memoryHistory[this.memoryHistory.length - 1];
        const trend = this.calculateMemoryTrend();
        
        return {
            current: latest,
            trend: trend,
            peak: this.memoryHistory.reduce((max, m) => m.usedJSHeapSize > max.usedJSHeapSize ? m : max),
            historyLength: this.memoryHistory.length
        };
    }
    
    calculateMemoryTrend() {
        if (this.memoryHistory.length < 2) return 'insufficient-data';
        
        const recent = this.memoryHistory.slice(-10); // Last 10 measurements
        const first = recent[0].usedJSHeapSize;
        const last = recent[recent.length - 1].usedJSHeapSize;
        
        const percentChange = ((last - first) / first) * 100;
        
        if (percentChange > 10) return 'increasing';
        if (percentChange < -10) return 'decreasing';
        return 'stable';
    }
    
    getCustomMetricsSummary() {
        const summary = {};
        
        for (const [name, history] of this.customMetrics) {
            if (history.length > 0) {
                const values = history.map(h => h.value);
                summary[name] = {
                    current: history[history.length - 1].value,
                    count: history.length,
                    ...this.calculateStatistics(values, name)
                };
            }
        }
        
        return summary;
    }
    
    generateRecommendations() {
        const recommendations = [];
        
        // Memory recommendations
        const memoryStats = this.getMemoryStats();
        if (memoryStats.memoryUsagePercent > 80) {
            recommendations.push({
                type: 'memory',
                severity: 'high',
                message: 'High memory usage detected. Consider optimizing object lifecycle and garbage collection.',
                metric: `${memoryStats.memoryUsagePercent.toFixed(1)}% memory usage`
            });
        }
        
        // Timing recommendations
        const timingSummary = this.getTimingSummary();
        if (timingSummary && timingSummary.p95 > 16.67) { // 60fps threshold
            recommendations.push({
                type: 'timing',
                severity: 'medium',
                message: 'Slow operations detected. Consider optimizing code paths or using async processing.',
                metric: `P95: ${timingSummary.p95.toFixed(2)}ms`
            });
        }
        
        // Resource recommendations
        const resourcesSummary = this.getResourcesSummary();
        if (resourcesSummary && resourcesSummary.totalSize > 1024 * 1024) { // 1MB
            recommendations.push({
                type: 'resources',
                severity: 'medium',
                message: 'Large resource usage detected. Consider code splitting or lazy loading.',
                metric: `${(resourcesSummary.totalSize / 1024 / 1024).toFixed(2)}MB total resources`
            });
        }
        
        return recommendations;
    }
    
    // Clean up observers
    cleanup() {
        for (const observer of this.observers.values()) {
            observer.disconnect();
        }
        this.observers.clear();
        
        console.log('Performance Monitor cleanup completed');
    }
}

// Usage demonstration
console.log('=== Performance Profiling Demo ===');

const perfMonitor = new PerformanceMonitor({
    enableDetailedProfiling: true,
    enableMemoryTracking: true,
    enableUserTiming: true
});

// Example: Profile a data processing function
function expensiveDataProcessing(size = 10000) {
    const data = [];
    
    // Simulate expensive processing
    for (let i = 0; i < size; i++) {
        data.push({
            id: i,
            value: Math.random() * 100,
            computed: Math.sqrt(i) * Math.sin(i)
        });
    }
    
    // Simulate sorting
    data.sort((a, b) => a.computed - b.computed);
    
    return data;
}

// Profile the function
const profileResults = perfMonitor.profile(
    () => expensiveDataProcessing(5000),
    {
        iterations: 20,
        warmupIterations: 5,
        label: 'data-processing'
    }
);

// Time individual operations
const timer1 = perfMonitor.time('database-query');
// Simulate async operation
setTimeout(() => {
    timer1.end();
    
    // Record custom metrics
    perfMonitor.recordCustomMetric('query-results', 150, 'records');
    perfMonitor.recordCustomMetric('cache-hit-rate', 85.5, '%');
    
    // Generate and display report
    const report = perfMonitor.generateReport();
    
    console.log('\n📊 Final Performance Report:');
    console.log('Navigation timing:', report.navigation);
    console.log('Memory summary:', report.memory);
    console.log('Recommendations:', report.recommendations);
    
    // Cleanup
    setTimeout(() => {
        perfMonitor.cleanup();
    }, 1000);
    
}, 500);