// Example of measuring initial load
const startTime = performance.now();
// Your app initialization
const endTime = performance.now();
console.log(`Load time: ${endTime - startTime}ms`);

// Example calculation
const bundleSize = 500; // KB
const downloadTime = bundleSize / (internetSpeed / 8); // seconds
// 500KB / (5Mbps / 8) = 0.8 seconds

// Bad: Memory leak
class Component {
  constructor() {
    this.data = new Array(1000000);
    window.addEventListener("resize", this.handleResize);
  }
  // Missing cleanup!
}

// Good: Proper cleanup
class Component {
  constructor() {
    this.data = new Array(1000000);
    this.handleResize = this.handleResize.bind(this);
    window.addEventListener("resize", this.handleResize);
  }

  destroy() {
    window.removeEventListener("resize", this.handleResize);
    this.data = null;
  }
}

// Bad: Unnecessary re-renders
function BadComponent() {
  const [count, setCount] = useState(0);
  const [unrelated, setUnrelated] = useState(0);

  // Re-renders on every state change
  return <div>{count}</div>;
}

// Good: Memoized component
const GoodComponent = React.memo(function GoodComponent({ count }) {
  return <div>{count}</div>;
});

// Example performance budget
const performanceBudget = {
  bundleSize: 500, // KB
  loadTime: 3000, // ms
  memoryUsage: 50, // MB
};

// Example calculation
const componentMemory = 100; // KB per component
const totalComponents = 1000;
const totalMemory = componentMemory * totalComponents; // 100MB

// Example calculation
const usersPerSecond = 100;
const memoryPerUser = 50; // MB
const totalMemory = usersPerSecond * memoryPerUser; // 5GB

// Performance recording
console.time("operation");
// Your code here
console.timeEnd("operation");

// Memory snapshot
console.memory; // Shows heap size

// Performance monitoring setup
const performanceMonitor = {
  metrics: {
    renderTime: [],
    memoryUsage: [],
    bundleSize: 0,
  },

  startMonitoring() {
    // Monitor render times
    setInterval(() => {
      const start = performance.now();
      // Your app's render cycle
      const end = performance.now();
      this.metrics.renderTime.push(end - start);
    }, 1000);

    // Monitor memory
    setInterval(() => {
      this.metrics.memoryUsage.push(performance.memory.usedJSHeapSize);
    }, 5000);
  },

  getAverageRenderTime() {
    return (
      this.metrics.renderTime.reduce((a, b) => a + b) /
      this.metrics.renderTime.length
    );
  },
};