/*
 * Step 1: Initialize a new Node.js project
 * This command creates a package.json file to manage project dependencies.
 */
// mkdir my-esbuild-project
// cd my-esbuild-project
// npm init -y

/*
 * Step 2: Install Esbuild as a development dependency
 * The --save-dev flag ensures it's only installed for development purposes.
 */
// npm install esbuild --save-dev

/*
 * Step 3: Create a sample JavaScript file to demonstrate minification
 * This file contains comments and verbose code for minification testing.
 */
// src/index.js

// A simple function to calculate the sum of two numbers
function add(a, b) {
    // Ensure inputs are numbers before proceeding
    if (typeof a !== 'number' || typeof b !== 'number') {
        console.error('Inputs must be numbers!');
        return 0; // Return a default value or throw an error
    }
    const result = a + b; // Perform the addition
    return result; // Return the computed sum
}

// Another function to greet a user
const greetUser = (name) => {
    // Check if a name is provided
    if (!name) {
        console.warn('No name provided, using default.');
        return 'Hello, Guest!';
    }
    return `Hello, ${name}!`; // Greet the user with their name
};

// Usage examples
console.log(add(5, 10)); // Expected: 15
console.log(greetUser('Developer')); // Expected: Hello, Developer!

// A complex object to illustrate more data
const projectConfig = {
    appName: 'Esbuild Demo',
    version: '1.0.0',
    environment: 'development', // This might change to 'production' later
    features: [
        'fast-builds',
        'minification',
        'tree-shaking'
    ],
    // This is an unused variable, useful for demonstrating tree-shaking later.
    _internalKey: 'do_not_bundle_this_in_production'
};

console.log('Project config:', projectConfig.appName, projectConfig.version);

/*
 * Step 4: Minify src/index.js using Esbuild CLI
 * This command takes the input file, bundles it (even if just one file),
 * minifies the output, and writes it to dist/bundle.min.js.
 */
// npx esbuild src/index.js --bundle --minify --outfile=dist/bundle.min.js

/*
 * Step 5: Create a basic Esbuild configuration file for more control
 * This file allows defining multiple entry points, output formats,
 * and advanced minification options programmatically.
 */
// esbuild.config.js

const esbuild = require('esbuild');
const path = require('path');

esbuild.build({
    entryPoints: [path.resolve(__dirname, 'src/index.js')],
    bundle: true,
    minify: true, // Activate core minification
    sourcemap: false, // Optional: Set to true for debugging production builds
    target: ['es2020', 'chrome58', 'firefox57', 'safari11', 'edge16'], // Target specific browsers for compatibility
    outfile: path.resolve(__dirname, 'dist/bundle.min.js'),
    // Minification options for fine-grained control:
    // minifyIdentifiers: true, // Shorten variable and function names
    // minifySyntax: true,    // Remove whitespace and unnecessary punctuation
    // minifyWhitespace: true, // Remove extra whitespace

    // Define replacement environment variables (example for development vs. production)
    define: { 'process.env.NODE_ENV': '"production"' },

    // Plugins can extend Esbuild's functionality, e.g., for specific optimizations
    // plugins: [
    //     {
    //         name: 'custom-minification-plugin',
    //         setup(build) {
    //             build.onEnd(result => {
    //                 // Post-processing or reporting can happen here
    //                 console.log('Build finished with minification.');
    //             });
    //         },
    //     },
    // ],

    logLevel: 'info' // Display build information
}).catch(() => process.exit(1));

/*
 * Step 6: Add a script to package.json to run the config file
 */
// package.json (add this to the "scripts" section)
// "scripts": {
//   "build": "node esbuild.config.js"
// }

/*
 * Step 7: Run the build script
 */
// npm run build

/*
 * Step 8: Demonstrate integrating Esbuild as a minification step for pre-bundled code
 * Imagine you have a large project using Webpack for bundling, but want to use
 * Esbuild purely for its speed in minification. This example shows how to do that.
 * This assumes 'dist/webpack-bundle.js' is an output from another bundler.
 */
// post-minify-with-esbuild.js

const esbuild = require('esbuild');
const path = require('path');
const fs = require('fs');

const inputFilePath = path.resolve(__dirname, 'dist/webpack-bundle.js');
const outputFilePath = path.resolve(__dirname, 'dist/webpack-bundle.min.js');

// Create a dummy Webpack bundle file if it doesn't exist for demonstration
if (!fs.existsSync(inputFilePath)) {
    console.log(`Creating dummy file: ${inputFilePath}`);
    fs.writeFileSync(inputFilePath, `
// This is a simulated output from Webpack or another bundler.
var MyLibrary = (function() {
    var privateVar = 'secret';
    function PublicAPI(msg) {
        console.log('Message from library:', msg, privateVar);
    }
    return { init: PublicAPI };
})();
MyLibrary.init('Hello from simulated Webpack bundle!');
`)
}

console.log(`Starting Esbuild minification for: ${inputFilePath}`);

esbuild.build({
    entryPoints: [inputFilePath],
    bundle: false, // Do not bundle, just minify the single input file
    minify: true,
    outfile: outputFilePath,
    logLevel: 'info'
}).then(() => {
    console.log(`Successfully minified to: ${outputFilePath}`);
    const originalSize = fs.statSync(inputFilePath).size;
    const minifiedSize = fs.statSync(outputFilePath).size;
    console.log(`Original size: ${originalSize} bytes, Minified size: ${minifiedSize} bytes.`);
}).catch((error) => {
    console.error('Esbuild minification failed:', error);
    process.exit(1);
});

/*
 * Step 9: Add a script to package.json to run the post-minification step
 */
// package.json (add this to the "scripts" section)
// "scripts": {
//   "webpack-build": "some-webpack-command", // Placeholder for your actual Webpack build
//   "minify-bundle": "node post-minify-with-esbuild.js"
// }

/*
 * Step 10: Execute the combined steps (conceptually)
 */
// npm run webpack-build && npm run minify-bundle

/*
 * Step 11: Create an advanced Esbuild configuration for production
 * This configuration demonstrates advanced features like code splitting, external dependencies,
 * and a more specific target environment.
 */
// esbuild.prod.config.js

const esbuild = require('esbuild');
const path = require('path');

esbuild.build({
    entryPoints: {
        app: path.resolve(__dirname, 'src/index.js'),
        // Simulate another entry point for code splitting
        // vendor: path.resolve(__dirname, 'src/vendor.js')
    },
    // If you have multiple entry points and want to split common code
    // entryPoints: [
    //     path.resolve(__dirname, 'src/app.js'),
    //     path.resolve(__dirname, 'src/admin.js')
    // ],
    // chunkNames: 'chunks/[name]-[hash]', // For better cache invalidation with code splitting

    bundle: true,
    minify: true,
    sourcemap: true, // Always include source maps for production debugging
    target: ['es2018', 'node14'], // Target specific JS syntax and Node.js version
    format: 'esm', // Or 'cjs' for CommonJS, 'iife' for IIFE
    outdir: path.resolve(__dirname, 'dist-prod'), // Output directory for multiple files
    // external: ['react', 'react-dom'], // Mark these as external to prevent bundling

    // Define replacements for environment variables, crucial for build-time optimizations
    define: {
        'process.env.NODE_ENV': '"production"',
        '__APP_VERSION__': JSON.stringify(require('./package.json').version)
    },

    // Tree-shaking is enabled by default with 'bundle: true' and 'format: esm/cjs'
    // Ensure your source code uses ES Modules for optimal tree-shaking.

    logLevel: 'info',
    // Enable metafile generation for bundle analysis (requires a viewer like esbuild-visualizer)
    // metafile: true,

    // Add a custom plugin for build-time logging or specific transformations
    plugins: [
        {
            name: 'production-banner',
            setup(build) {
                build.onEnd(result => {
                    if (result.errors.length === 0) {
                        console.log('Production build completed successfully with Esbuild!');
                        // Example: Append a banner to the main output file
                        // fs.appendFileSync(path.join(build.initialOptions.outdir, 'app.js'), '\n/* Built with Esbuild */');
                    }
                });
            },
        },
    ],
}).catch(() => process.exit(1));

/*
 * Step 12: Add a script to package.json to run the production build
 */
// package.json (add this to the "scripts" section)
// "scripts": {
//   "build:prod": "node esbuild.prod.config.js"
// }

/*
 * Step 13: Run the production build
 */
// npm run build:prod