// Демонстрируем концепцию "конкурентных" обновлений через JS-примитивы.
// В React это startTransition/useTransition/useDeferredValue.

// --- Симуляция "тяжёлого" рендера ---

function heavyComputation(query, itemCount = 5000) {
  const start = performance.now()
  const items = []
  // Имитация дорогой фильтрации большого списка
  for (let i = 0; i < itemCount; i++) {
    const item = 'Товар ' + i
    if (item.toLowerCase().includes(query.toLowerCase())) {
      items.push(item)
    }
  }
  const elapsed = Math.round(performance.now() - start)
  return { items: items.slice(0, 10), time: elapsed, total: items.length }
}

// --- Паттерн 1: Синхронный (React 17 стиль) ---
// Каждое нажатие клавиши -> немедленный тяжёлый рендер

function syncSearch(query) {
  const start = performance.now()
  const result = heavyComputation(query)
  const uiUpdateTime = Math.round(performance.now() - start)

  console.log('Синхронный поиск "' + query + '":')
  console.log('  UI заблокирован на:', uiUpdateTime + 'мс')
  console.log('  Найдено:', result.total, 'результатов')
  console.log('  ⚠️  Пользователь не может нажать кнопки во время поиска!')
  return result
}

// --- Паттерн 2: startTransition (React 18 стиль) ---
// Срочное обновление (input) немедленно, тяжёлое (список) — позже

function createTransitionSearch() {
  let pendingQuery = null
  let isPending = false
  let transitionId = 0

  function startTransition(callback) {
    isPending = true
    const currentId = ++transitionId

    // Переносим выполнение за пределы текущего стека вызовов
    // (в React это делается через планировщик — Scheduler)
    setTimeout(() => {
      if (currentId !== transitionId) {
        console.log('  [Transition] Прерван устаревший переход #' + currentId)
        return
      }
      callback()
      isPending = false
    }, 0)
  }

  function handleInput(query) {
    // 1. Срочное: обновить поле ввода НЕМЕДЛЕННО
    pendingQuery = query
    console.log('
Ввод "' + query + '": поле обновлено мгновенно ✓')
    console.log('isPending:', true, '(идёт отложенное обновление)')

    // 2. Несрочное: тяжёлая фильтрация — через transition
    startTransition(() => {
      const result = heavyComputation(query)
      console.log('Transition завершён для "' + query + '":')
      console.log('  Найдено:', result.total, 'за', result.time + 'мс')
      console.log('  isPending:', false)
    })
  }

  return { handleInput, getIsPending: () => isPending }
}

// --- Паттерн 3: useDeferredValue (отложенное значение) ---

function createDeferredValue(delay = 0) {
  let currentValue = ''
  let deferredValue = ''
  let deferredUpdateTimer = null

  function update(newValue) {
    currentValue = newValue
    const isStale = currentValue !== deferredValue

    console.log('
Обновление: "' + newValue + '"')
    console.log('  currentValue:', currentValue, '(срочное, обновлено сразу)')
    console.log('  deferredValue:', deferredValue, '(устаревшее, пока не обновлено)')
    console.log('  isStale:', isStale)

    if (deferredUpdateTimer) clearTimeout(deferredUpdateTimer)

    // Откладываем обновление deferredValue
    deferredUpdateTimer = setTimeout(() => {
      deferredValue = currentValue
      const result = heavyComputation(deferredValue)
      console.log('  deferredValue обновлён: "' + deferredValue + '"')
      console.log('  Список перерендерен, найдено:', result.total)
    }, delay)
  }

  return { update }
}

// --- Демонстрация автоматического batching ---

function demonstrateBatching() {
  console.log('
=== Автоматический Batching ===')

  let renderCount = 0
  const state = { count: 0, flag: false, name: '' }

  function setState(updates) {
    Object.assign(state, updates)
  }

  function scheduleRender() {
    renderCount++
    console.log('Рендер #' + renderCount, '| Состояние:', JSON.stringify(state))
  }

  // React 17: setTimeout без batching — 3 рендера
  console.log('React 17 (без batching в async):')
  // Симулируем отдельные рендеры
  setState({ count: state.count + 1 })
  scheduleRender()
  setState({ flag: !state.flag })
  scheduleRender()
  setState({ name: 'Алексей' })
  scheduleRender()

  // React 18: автоматический batching — 1 рендер
  console.log('
React 18 (автоматический batching):')
  renderCount = 0
  // Все обновления сгруппированы в один рендер
  setState({ count: state.count + 1, flag: !state.flag, name: 'Мария' })
  scheduleRender()  // только один рендер!
  console.log('Рендеров:', renderCount, '(вместо 3)')
}

// --- Запуск демонстраций ---

console.log('=== Синхронный поиск (React 17) ===')
syncSearch('товар 10')

console.log('
=== Конкурентный поиск (React 18) ===')
const search = createTransitionSearch()
search.handleInput('то')
search.handleInput('тов')
search.handleInput('товар')  // только этот transition завершится

console.log('
=== useDeferredValue ===')
const deferred = createDeferredValue(50)
deferred.update('т')
deferred.update('то')
deferred.update('товар 5')  // быстрый ввод

demonstrateBatching()