console.log('1');                        // Runs immediately on the call stack

setTimeout(() => console.log('2'), 0);   // Handed to Web API, callback queued
                                         // Even with 0ms delay, it must wait for
                                         // the current synchronous code to finish!

console.log('3');                        // Runs immediately on the call stack

// Output: 1, 3, 2
// The 0ms setTimeout does NOT mean "run immediately" -- it means
// "run as soon as possible AFTER the current call stack is empty."

console.log('1');                                    // Sync -- runs first

setTimeout(() => console.log('2'), 0);               // Macrotask queue

Promise.resolve().then(() => console.log('3'));       // Microtask queue

console.log('4');                                    // Sync -- runs second

// Output: 1, 4, 3, 2
// After all synchronous code finishes (1, 4), the event loop drains
// the microtask queue (3) before touching the macrotask queue (2).

function fetchData(callback) {
    setTimeout(() => {
        callback('Data loaded');
    }, 1000);
}

fetchData((result) => {
    console.log(result); // 'Data loaded' (after 1 second)
});

getUser(userId, (user) => {
    getOrders(user.id, (orders) => {
        getOrderDetails(orders[0].id, (details) => {
            getProduct(details.productId, (product) => {
                console.log(product);
                // This is "callback hell" -- also called the "pyramid of doom."
                // Error handling? You would need error callbacks at every level.
                // Testing? Nearly impossible to isolate any step.
            });
        });
    });
});
// Promises and async/await were created specifically to solve this problem.

const promise = new Promise((resolve, reject) => {
    // The executor function runs IMMEDIATELY (synchronously).
    // resolve() and reject() are callbacks provided by the Promise machinery.
    const success = true;
    
    setTimeout(() => {
        if (success) {
            resolve('Data loaded');    // Transition: pending -> fulfilled
        } else {
            reject(new Error('Failed to load')); // Transition: pending -> rejected
        }
        // Once settled (fulfilled or rejected), the state is permanent.
        // Calling resolve() or reject() again has no effect.
    }, 1000);
});

promise
    .then((result) => {
        console.log(result); // 'Data loaded'
        return result.toUpperCase();
    })
    .then((upper) => {
        console.log(upper); // 'DATA LOADED'
    })
    .catch((error) => {
        console.error(error);
    })
    .finally(() => {
        console.log('Cleanup'); // Always runs
    });

fetch('/api/user')
    .then(response => response.json())
    .then(user => fetch(`/api/orders/${user.id}`))
    .then(response => response.json())
    .then(orders => console.log(orders))
    .catch(error => console.error(error));

// Promise.all: Wait for ALL to fulfill. If ANY rejects, the whole thing rejects.
// Use when: you need all results and any failure should abort the operation.
const results = await Promise.all([
    fetch('/api/users'),
    fetch('/api/products'),
    fetch('/api/orders')
]);
// If /api/products fails, you lose the results from /api/users too!

// Promise.allSettled: Wait for ALL to settle (fulfill or reject). Never short-circuits.
// Use when: you want to know the outcome of every operation regardless of failures.
const results = await Promise.allSettled([
    Promise.resolve(1),
    Promise.reject('error'),
    Promise.resolve(3)
]);
// [{status: 'fulfilled', value: 1}, {status: 'rejected', reason: 'error'}, ...]
// You can inspect each result individually.

// Promise.race: First to SETTLE (fulfill or reject) wins. Others are ignored.
// Use when: implementing timeouts or picking the fastest source.
const first = await Promise.race([
    fetch('/api/fast'),
    fetch('/api/slow')
]);

// Promise.any: First to FULFILL wins. Rejections are ignored unless ALL reject.
// Use when: you have multiple fallback sources and want the first success.
const first = await Promise.any([
    Promise.reject('fail'),     // Ignored
    Promise.resolve('success')  // This wins
]); // 'success'

// Common pattern: implementing a timeout with Promise.race
function fetchWithTimeout(url, timeoutMs = 5000) {
    const timeout = new Promise((_, reject) =>
        setTimeout(() => reject(new Error('Request timed out')), timeoutMs)
    );
    return Promise.race([fetch(url), timeout]);
}

// Edge case: Promise.all with an empty array
await Promise.all([]);        // [] -- resolves immediately with empty array
await Promise.allSettled([]); // [] -- resolves immediately
await Promise.race([]);       // NEVER settles! Hangs forever. This is a spec requirement.
await Promise.any([]);        // Rejects with AggregateError (no promises to fulfill)

async function fetchUser() {
    try {
        const response = await fetch('/api/user');
        const user = await response.json();
        return user;
    } catch (error) {
        console.error('Failed to fetch user:', error);
        throw error;
    }
}

// Usage
const user = await fetchUser();

// Wrapping a callback API in a Promise (Node.js example)
const fs = require('fs');
const { promisify } = require('util');

// Old way: callback
fs.readFile('file.txt', 'utf8', (err, data) => {
    if (err) throw err;
    console.log(data);
});

// Modern way: promisify + await
const readFile = promisify(fs.readFile);
const data = await readFile('file.txt', 'utf8');
// Or just use fs.promises (Node.js 10+):
const data2 = await fs.promises.readFile('file.txt', 'utf8');

async function riskyOperation() {
    try {
        const result = await mightFail();
        return result;
    } catch (error) {
        console.error('Operation failed:', error);
        return null; // Graceful fallback
    } finally {
        console.log('Cleanup');
    }
}

// Each await PAUSES execution until the previous call finishes.
// These three calls happen one after another, like standing in three lines.
const user = await fetchUser();       // Wait 1 second
const orders = await fetchOrders();   // Wait 1 second
const products = await fetchProducts(); // Wait 1 second
// Total time: 3 seconds (1 + 1 + 1)

// All three fetches START simultaneously. We only wait for the slowest one.
// Like ordering food, drinks, and dessert at the same time from different stations.
const [user, orders, products] = await Promise.all([
    fetchUser(),      // All three start at the same time
    fetchOrders(),
    fetchProducts()
]);
// Total time: ~1 second (max of the three)

// Edge case 1: Forgetting to await -- the "floating Promise" bug
async function saveThenRedirect() {
    saveData();     // BUG: no await! This fires and is immediately forgotten.
                    // If it rejects, nothing catches it. If it fails, you
                    // already redirected before it finished.
    redirect('/home');

    // Fix:
    await saveData();
    redirect('/home');
}

// Edge case 2: Unhandled Promise rejections crash Node.js (v15+)
// In browsers they log a warning; in Node they terminate the process.
Promise.reject('oops'); // No .catch() -- unhandled rejection!

// Always handle: add a .catch(), use try/catch with await, or add a global handler:
process.on('unhandledRejection', (reason, promise) => {
    console.error('Unhandled rejection:', reason);
    // Log, alert, but DO NOT swallow silently in production
});

// Edge case 3: try/catch does NOT catch errors in unawaited Promises
async function example() {
    try {
        const p = riskyFetch(); // No await -- returns a Promise, does not throw
        doSomethingElse();
    } catch (err) {
        // This NEVER catches errors from riskyFetch!
        // The Promise rejects asynchronously, outside this try block.
    }
}

// Edge case 4: async functions ALWAYS return a Promise
async function getValue() { return 42; }
getValue();          // Promise (resolved with 42), NOT 42
await getValue();    // 42

// In an ES module (.mjs or type="module")
const config = await fetch('/config.json').then(r => r.json());
console.log(config);

async function fetchWithRetry(url, retries = 3) {
    for (let i = 0; i < retries; i++) {
        try {
            return await fetch(url);
        } catch (error) {
            if (i === retries - 1) throw error;   // Final attempt failed, give up
            const delay = 2 ** i * 1000;           // Exponential: 1s, 2s, 4s
            console.warn(`Attempt ${i + 1} failed, retrying in ${delay}ms...`);
            await sleep(delay);
        }
    }
}

// sleep() is the standard way to "pause" in async code.
// It wraps setTimeout in a Promise so you can await it.
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

function debounce(fn, delay) {
    let timeoutId;
    return (...args) => {
        clearTimeout(timeoutId);  // Cancel the previous timer
        timeoutId = setTimeout(() => fn(...args), delay); // Start a new one
    };
    // The closure keeps timeoutId alive between calls -- this is closures in action!
}

// Practical use: search-as-you-type without flooding the server
const search = debounce((query) => {
    fetch(`/api/search?q=${query}`);
}, 300); // Only fires 300ms after the user STOPS typing

input.addEventListener('input', (e) => search(e.target.value));

function throttle(fn, limit) {
    let inThrottle;
    return (...args) => {
        if (!inThrottle) {
            fn(...args);            // Execute immediately
            inThrottle = true;      // Lock the gate
            setTimeout(() => inThrottle = false, limit); // Unlock after 'limit' ms
        }
        // Calls during the throttle window are silently dropped
    };
}

// Practical use: scroll position tracking without killing performance
const handleScroll = throttle(() => {
    console.log('Scrolled at', window.scrollY);
}, 100); // At most 10 times per second, even if scroll fires 60+ times/sec

class AsyncQueue {
    constructor() {
        this.queue = [];
        this.processing = false;
    }
    
    add(task) {
        this.queue.push(task);
        this.process();
    }
    
    async process() {
        if (this.processing) return;
        this.processing = true;
        
        while (this.queue.length > 0) {
            const task = this.queue.shift();
            await task();
        }
        
        this.processing = false;
    }
}

// GET request
const response = await fetch('/api/users');
const users = await response.json();  // .json() is also async -- it returns a Promise!

// POST request
const response = await fetch('/api/users', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'  // Always set this for JSON bodies
    },
    body: JSON.stringify({ name: 'Alice', email: 'alice@example.com' })
});

// CRITICAL GOTCHA: fetch does NOT throw on HTTP errors (4xx/5xx).
// It only throws on network failures (DNS errors, server unreachable, etc.).
// A 404 or 500 response is still a "successful" fetch -- you must check manually.
if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
}

const newUser = await response.json();