// --- Example 1: Static Import (Problematic for large modules) ---
// Imagine 'heavyUtility.js' is a large file only needed on rare occasions.
// This import loads it immediately when the app starts, regardless of use.
import { performHeavyCalculation } from './heavyUtility.js';

function initializeApp() {
  console.log('Application initialized.');
  // performHeavyCalculation(); // Called immediately or later
}

initializeApp();

// --- Example 2: Dynamic Import (Solution for on-demand loading) ---
// This function will only load 'heavyUtility.js' when it's explicitly called.
// It returns a Promise, allowing asynchronous loading and execution.
async function handleClickOrRouteNavigation() {
  console.log('Attempting to load heavy utility...');
  try {
    const module = await import('./heavyUtility.js');
    module.performHeavyCalculation();
    console.log('Heavy utility loaded and executed successfully.');
  } catch (error) {
    console.error('Failed to load heavy utility:', error);
  }
}

// Simulate an event that triggers the dynamic import
// For a real application, this could be a button click, route change, etc.
setTimeout(() => {
  console.log('\nSimulating user interaction...');
  handleClickOrRouteNavigation();
}, 2000);

// --- heavyUtility.js (example content) ---
// export function performHeavyCalculation() {
//   console.log('Performing a very complex and resource-intensive calculation...');
//   // Simulate a long-running task
//   let result = 0;
//   for (let i = 0; i < 1000000000; i++) {
//     result += i;
//   }
//   console.log('Calculation complete. Result:', result);
// }

// --- Example 1: Route-Based Code Splitting with React (Conceptual) ---
// This pattern is common in React applications using React.lazy and Suspense.
// It ensures that component code is only loaded when its route is active.
import React, { Suspense, lazy } from 'react';

// Dynamically import the 'AboutPage' component.
// Webpack will create a separate chunk for AboutPage.js.
const AboutPage = lazy(() => import('./AboutPage'));
const HomePage = lazy(() => import('./HomePage'));

// In a real application, you'd have a router (e.g., React Router)
// and conditionally render components based on the current URL.
function AppRouter() {
  const [currentPage, setCurrentPage] = React.useState('home');

  return (
    <div>
      <nav>
        <button onClick={() => setCurrentPage('home')}>Home</button>
        <button onClick={() => setCurrentPage('about')}>About</button>
      </nav>
      <Suspense fallback={<div>Loading page...</div>}>
        {currentPage === 'home' ? <HomePage /> : <AboutPage />}
      </Suspense>
    </div>
  );
}

// --- AboutPage.js (example content) ---
// import React from 'react';
// const AboutPage = () => <div><h1>About Us</h1><p>Learn more about our mission.</p></div>;
// export default AboutPage;

// --- HomePage.js (example content) ---
// import React from 'react';
// const HomePage = () => <div><h1>Welcome Home</h1><p>This is the main page content.</p></div>;
// export default HomePage;

// --- Example 2: Conditional Feature Loading ---
// Load a feature-specific module only when a user interacts with it.
// This prevents loading code for features not used by all users.
async function loadAdminPanel() {
  const userIsAdmin = Math.random() > 0.5; // Simulate admin check
  if (userIsAdmin) {
    console.log('User is admin, loading admin panel...');
    try {
      const adminModule = await import('./adminPanel.js');
      adminModule.initAdminInterface();
      console.log('Admin panel initialized.');
    } catch (error) {
      console.error('Failed to load admin panel:', error);
    }
  } else {
    console.log('User is not admin. Admin panel not loaded.');
  }
}

// Trigger the admin panel loading (e.g., on login or specific button click)
setTimeout(() => {
  console.log('\nSimulating user login...');
  loadAdminPanel();
}, 3000);

// --- adminPanel.js (example content) ---
// export function initAdminInterface() {
//   console.log('Admin interface components rendered.');
//   // Code to display admin-specific UI, data tables, etc.
// }

// --- Example 1: Naming Chunks with Webpack Magic Comments ---
// Naming chunks improves readability in dev tools and helps with caching.
const loadDashboard = () => import(/* webpackChunkName: "dashboard" */ './Dashboard');
const loadAnalytics = () => import(/* webpackChunkName: "analytics" */ './Analytics');

// --- Example 2: Preloading/Prefetching Strategies ---
// Preload: Fetch a chunk with high priority for immediate use.
// Prefetch: Fetch a chunk with low priority for future use.
// These are typically configured at the bundler level (Webpack).
// For React/Next.js, this often happens implicitly with Link components.

// In a React component, you might trigger prefetch on mouse hover for a link.
const LinkToAnalytics = () => {
  const handleMouseEnter = () => {
    // Simulate prefetching 'analytics' chunk on hover
    console.log('Prefetching analytics chunk...');
    import(/* webpackPrefetch: true */ './Analytics');
  };

  return (
    <a href="/analytics" onMouseEnter={handleMouseEnter}>
      Go to Analytics
    </a>
  );
};

// --- Example 3: Robust Error Handling with Fallbacks ---
// Implement error boundaries for React components or general catch blocks.
async function loadCriticalModule() {
  try {
    const module = await import('./criticalModule.js');
    module.init();
  } catch (error) {
    console.error('Failed to load critical module:', error);
    // Provide a fallback UI or functionality.
    displayErrorMessage('Could not load essential features. Please try again.');
  }
}

function displayErrorMessage(message) {
  const errorDiv = document.createElement('div');
  errorDiv.textContent = message;
  errorDiv.style.color = 'red';
  document.body.appendChild(errorDiv);
}

// --- criticalModule.js (example content) ---
// export function init() {
//   console.log('Critical module initialized.');
//   // Simulate an error if needed for testing error handling
//   // throw new Error('Simulated load failure');
// }

// Simulate loading a critical module, potentially failing.
setTimeout(() => {
    console.log('\nAttempting to load critical module...');
    loadCriticalModule();
}, 4000);

// --- Example 1: Avoiding Over-Splitting (Conceptual) ---
// While code splitting is beneficial, too many small chunks can introduce overhead.
// We aim for a balance.

// BAD: Splitting every tiny utility function into its own chunk.
// const loadUtilA = () => import('./utils/utilA'); // Each might be ~1KB
// const loadUtilB = () => import('./utils/utilB');
// const loadUtilC = () => import('./utils/utilC');

// GOOD: Grouping related, larger components or features.
// const loadFeatureModule = () => import('./features/largeFeatureModule');
// This 'largeFeatureModule' might contain multiple related components/utilities.

// --- Example 2: Implementing a Loading Fallback UI ---
// Crucial for a smooth user experience during chunk loading.
// This example is conceptual, frameworks provide better solutions (e.g., React Suspense).

function FeatureComponent() {
  const [moduleLoaded, setModuleLoaded] = React.useState(false);
  const [error, setError] = React.useState(null);
  const moduleRef = React.useRef(null);

  React.useEffect(() => {
    const loadModule = async () => {
      try {
        // Simulate network delay
        await new Promise(resolve => setTimeout(resolve, 1500));
        moduleRef.current = await import('./lazyFeature.js');
        setModuleLoaded(true);
      } catch (err) {
        console.error('Failed to load lazy feature:', err);
        setError('Failed to load feature. Please refresh.');
      }
    };
    loadModule();
  }, []);

  if (error) {
    return <div style={{ color: 'red' }}>{error}</div>;
  }

  if (!moduleLoaded) {
    return <div>Loading feature...</div>; // Fallback UI
  }

  // Assuming lazyFeature.js exports a default React component
  const LoadedComponent = moduleRef.current.default;
  return <LoadedComponent />;
}

// --- lazyFeature.js (example content) ---
// import React from 'react';
// const LazyFeature = () => <div><h2>Loaded Dynamic Feature!</h2><p>Content from the lazy-loaded module.</p></div>;
// export default LazyFeature;

// --- Example: Conceptual use of Webpack Bundle Analyzer ---
// This is not executable code, but a representation of how you would configure
// or run the analyzer. The output is typically a visualization.

// In your webpack.config.js:
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// module.exports = {
//   plugins: [
//     new BundleAnalyzerPlugin({
//       analyzerMode: 'static', // Generates an HTML file with the report
//       openAnalyzer: true,     // Opens the report in your browser after build
//     })
//   ]
// };

// --- Example: Conceptual use of Lighthouse (browser-based tool) ---
// This involves running Lighthouse from Chrome DevTools or a CLI.
// The output is a report with performance metrics.

// Open Chrome DevTools (F12 or Cmd+Option+I)
// Go to the 'Lighthouse' tab.
// Select 'Performance' category.
// Click 'Analyze page load'.
// Review metrics like FCP, LCP, TBT, and opportunities.

// --- Example: Simulating a performance measurement (simplified) ---
// In a real scenario, this would involve integrating with a monitoring tool.
function measureInitialLoadTime() {
  const navigationTiming = window.performance.getEntriesByType("navigation")[0];
  if (navigationTiming) {
    const initialLoad = navigationTiming.loadEventEnd - navigationTiming.startTime;
    console.log(`Initial page load time: ${initialLoad}ms`);
    // More advanced metrics like FCP, LCP require browser APIs or monitoring tools.
  } else {
    console.log('Navigation timing data not available.');
  }
}

// Run after the page is fully loaded
window.addEventListener('load', measureInitialLoadTime);