// ============================================================
// ИМПЕРАТИВНЫЙ ПОДХОД (jQuery / vanilla JS)
// Вручную управляем каждым элементом DOM
// ============================================================

function createImperativeCounter(container) {
  let count = 0
  let domOperations = 0  // считаем обращения к DOM

  // Создаём DOM-элементы вручную
  const wrapper = document.createElement('div')
  const display = document.createElement('h2')
  const badge = document.createElement('span')
  const btn = document.createElement('button')

  display.textContent = `Счётчик: ${count}`
  badge.textContent = count
  btn.textContent = '+1'

  wrapper.append(display, badge, btn)
  domOperations += 3  // три операции создания

  btn.addEventListener('click', () => {
    count++
    // Обновляем КАЖДЫЙ элемент вручную
    display.textContent = `Счётчик: ${count}`  // DOM операция 1
    badge.textContent = count                    // DOM операция 2
    domOperations += 2
    console.log(`[Императивно] Клик #${count}, DOM операций всего: ${domOperations}`)
  })

  return wrapper
}

// ============================================================
// ДЕКЛАРАТИВНЫЙ ПОДХОД (имитация React)
// Описываем желаемое состояние — рантайм решает что обновить
// ============================================================

function createDeclarativeCounter() {
  let count = 0
  let domOperations = 0

  // "Рендер-функция" описывает весь UI как HTML-строку
  function render(state) {
    return `
      <div>
        <h2>Счётчик: ${state.count}</h2>
        <span>${state.count}</span>
        <button id="dec-btn">+1</button>
      </div>
    `
  }

  // Простая реализация "diffing": заменяем только изменившееся
  let prevHTML = ''
  function update(container) {
    const newHTML = render({ count })
    if (newHTML !== prevHTML) {
      container.innerHTML = newHTML  // 1 DOM операция на любое изменение!
      domOperations++
      prevHTML = newHTML
      // Переподключаем обработчик после перерисовки
      container.querySelector('#dec-btn').addEventListener('click', handleClick)
    }
  }

  function handleClick() {
    count++
    console.log(`[Декларативно] Клик #${count}, DOM операций всего: ${domOperations + 1}`)
    update(document.getElementById('decl-root'))
  }

  return { render: update, initialHTML: render({ count: 0 }) }
}

// --- Вывод в консоль для демонстрации ---
console.log('Императивный подход: при каждом клике обновляем N элементов вручную')
console.log('Декларативный подход: описываем результат, рантайм минимизирует DOM-операции')
console.log('')
console.log('React делает именно это — только намного умнее:')
console.log('вместо innerHTML он точечно обновляет изменившиеся узлы через Virtual DOM')

// React эквивалент (для справки):
// function Counter() {
//   const [count, setCount] = React.useState(0)
//   return (
//     <div>
//       <h2>Счётчик: {count}</h2>
//       <span>{count}</span>
//       <button onClick={() => setCount(count + 1)}>+1</button>
//     </div>
//   )
// }