while (eventLoop.isRunning) {
    // Фаза 1: Чекаємо на порожній Call Stack
    if (!callStack.isEmpty()) {
        continue // Повертаємося на початок циклу
    }

    // Фаза 2: Microtask Checkpoint
    while (microtaskQueue.hasTasks()) {
        const microtask = microtaskQueue.dequeue()
        callStack.execute(microtask)

        // Якщо під час виконання додалися нові мікрозавдання — виконуємо їх теж
    }

    // Фаза 3: Рендеринг (тільки браузер)
    if (browser.needsRendering()) {
        browser.performRender()
    }

    // Фаза 4: Одне макрозавдання
    if (macrotaskQueue.hasTasks()) {
        const macrotask = macrotaskQueue.dequeue()
        callStack.execute(macrotask)
    } else {
        // Немає завдань — очікуємо нових подій
        eventLoop.waitForEvents()
    }
}

console.log('Start')

setTimeout(() => {
    console.log('Timeout 1')

    Promise.resolve().then(() => {
        console.log('Promise inside Timeout 1')
    })

    setTimeout(() => {
        console.log('Timeout 2')
    }, 0)
}, 0)

Promise.resolve()
    .then(() => {
        console.log('Promise 1')

        setTimeout(() => {
            console.log('Timeout 3')
        }, 0)
    })
    .then(() => {
        console.log('Promise 2')
    })

console.log('End')

console.log('1: Start')

async function asyncFunc() {
    console.log('2: Async function start')

    await Promise.resolve()

    console.log('3: After await')

    return 'Result'
}

asyncFunc().then((result) => {
    console.log('4: Then -', result)
})

Promise.resolve().then(() => {
    console.log('5: Promise 1')
})

console.log('6: End')

console.log('Start')

setTimeout(() => {
    console.log('setTimeout')
}, 0)

Promise.resolve().then(() => {
    console.log('Promise')
})

process.nextTick(() => {
    console.log('nextTick')
})

console.log('End')

async function processLargeArray(array, processItem) {
    const chunkSize = 100 // Обробляємо по 100 елементів за раз
    let index = 0

    while (index < array.length) {
        // Обробляємо шматок даних
        const chunk = array.slice(index, index + chunkSize)

        for (const item of chunk) {
            processItem(item)
        }

        index += chunkSize

        // Даємо Event Loop обробити інші завдання
        await new Promise((resolve) => setTimeout(resolve, 0))

        // Оновлюємо прогрес-бар (якщо є)
        updateProgressBar((index / array.length) * 100)
    }

    console.log('Обробка завершена')
}

// Використання
const data = Array.from({ length: 10000 }, (_, i) => i)

processLargeArray(data, (item) => {
    // Складна операція з кожним елементом
    Math.sqrt(item) * Math.PI
})

class DataStore {
    constructor() {
        this.data = []
        this.listeners = []
    }

    add(item) {
        this.data.push(item)

        // Сповіщаємо підписників через мікрозавдання
        // Це гарантує, що всі синхронні операції завершилися
        queueMicrotask(() => {
            this.listeners.forEach((listener) => listener(item))
        })
    }

    subscribe(callback) {
        this.listeners.push(callback)
    }
}

// Використання
const store = new DataStore()

store.subscribe((item) => {
    console.log('Додано:', item)
})

store.add('Item 1')
store.add('Item 2')
store.add('Item 3')

console.log('Всі додавання завершені')

// Вивід:
// Всі додавання завершені
// Додано: Item 1
// Додано: Item 2
// Додано: Item 3

function debounce(fn, delay) {
    let timeoutId
    let pendingPromise

    return function debounced(...args) {
        // Скасовуємо попередній виклик
        clearTimeout(timeoutId)

        // Створюємо новий проміс, якщо немає активного
        if (!pendingPromise) {
            pendingPromise = new Promise((resolve) => {
                timeoutId = setTimeout(async () => {
                    const result = await fn.apply(this, args)
                    resolve(result)
                    pendingPromise = null
                }, delay)
            })
        }

        return pendingPromise
    }
}

// Використання
const searchAPI = debounce(async (query) => {
    const response = await fetch(`/api/search?q=${query}`)
    return response.json()
}, 300)

// У обробнику input
input.addEventListener('input', async (e) => {
    const results = await searchAPI(e.target.value)
    displayResults(results)
})

// ❌ НЕПРАВИЛЬНО — безкінечний цикл
let counter = 0

function infiniteMicrotasks() {
    queueMicrotask(() => {
        console.log(counter++)
        infiniteMicrotasks() // Додає нове мікрозавдання
    })
}

infiniteMicrotasks()

setTimeout(() => {
    console.log('Це НІКОЛИ не виконається')
}, 0)

// ✅ ПРАВИЛЬНО — додаємо умову виходу
let counter = 0
const MAX_ITERATIONS = 1000

function safeMicrotasks() {
    queueMicrotask(() => {
        console.log(counter++)

        if (counter < MAX_ITERATIONS) {
            safeMicrotasks()
        }
    })
}

let value = 0

setTimeout(() => {
    value = 100
}, 0)

console.log(value) // 0, а не 100!

let value = 0

Promise.resolve().then(() => {
    value = 100
    console.log(value) // 100
})

// Або async/await
async function updateValue() {
    await Promise.resolve()
    value = 100
    console.log(value)
}

// ❌ НЕПРАВИЛЬНО
button.addEventListener('click', () => {
    loadingSpinner.style.display = 'block'

    // Важкі обчислення
    for (let i = 0; i < 1e9; i++) {}

    loadingSpinner.style.display = 'none'
})

// Користувач НІКОЛИ не побачить спінер, бо рендеринг відбувається після завершення обробника

// ✅ ПРАВИЛЬНО
button.addEventListener('click', async () => {
    loadingSpinner.style.display = 'block'

    // Даємо браузеру час відрендерити спінер
    await new Promise((resolve) => setTimeout(resolve, 0))

    // Важкі обчислення
    for (let i = 0; i < 1e9; i++) {}

    loadingSpinner.style.display = 'none'
})

node --trace-events-enabled --trace-event-categories v8,node.async_hooks script.js