// Реализуем анимации добавления/удаления элементов без библиотек.
// Это концепция AnimatePresence из Framer Motion, реализованная вручную.

// --- Менеджер анимаций ---

class AnimationManager {
  constructor(options = {}) {
    this.duration = options.duration || 300   // мс
    this.entering = new Map()  // элементы в процессе входа
    this.exiting  = new Map()  // элементы в процессе выхода
    this.callbacks = []
  }

  // Анимация входа: opacity 0 → 1, translateY 10px → 0
  animateEnter(item) {
    return new Promise(resolve => {
      const animState = { progress: 0, item }
      this.entering.set(item.id, animState)

      const start = performance.now()
      const animate = (now) => {
        const elapsed = now - start
        const raw = Math.min(elapsed / this.duration, 1)
        // easeOutCubic: быстрый старт, мягкое завершение
        const progress = 1 - Math.pow(1 - raw, 3)

        animState.progress = progress
        animState.style = {
          opacity: progress,
          transform: 'translateY(' + (10 * (1 - progress)) + 'px)',
        }

        this.notify()

        if (raw < 1) {
          requestAnimationFrame(animate)
        } else {
          this.entering.delete(item.id)
          resolve()
        }
      }

      requestAnimationFrame(animate)
    })
  }

  // Анимация выхода: opacity 1 → 0, translateX 0 → 20px
  animateExit(item) {
    return new Promise(resolve => {
      const animState = { progress: 1, item }
      this.exiting.set(item.id, animState)

      const start = performance.now()
      const animate = (now) => {
        const elapsed = now - start
        const raw = Math.min(elapsed / this.duration, 1)
        // easeInCubic: медленный старт, быстрое завершение
        const progress = 1 - Math.pow(raw, 3)

        animState.progress = progress
        animState.style = {
          opacity: progress,
          transform: 'translateX(' + (20 * (1 - progress)) + 'px)',
        }

        this.notify()

        if (raw < 1) {
          requestAnimationFrame(animate)
        } else {
          this.exiting.delete(item.id)
          resolve()
        }
      }

      requestAnimationFrame(animate)
    })
  }

  notify() {
    this.callbacks.forEach(fn => fn())
  }

  subscribe(fn) {
    this.callbacks.push(fn)
  }
}

// --- AnimatedList ---

class AnimatedList {
  constructor() {
    this.items = []
    this.animMgr = new AnimationManager({ duration: 200 })  // быстрее для теста
    this.nextId = 1
  }

  async add(text) {
    const item = { id: this.nextId++, text }
    this.items.push(item)
    console.log('
+ Добавляем:', item.text)
    await this.animMgr.animateEnter(item)
    console.log('✓ Анимация входа завершена для:', item.text)
    return item
  }

  async remove(id) {
    const item = this.items.find(i => i.id === id)
    if (!item) return

    console.log('
- Удаляем:', item.text)
    await this.animMgr.animateExit(item)
    this.items = this.items.filter(i => i.id !== id)
    console.log('✓ Анимация выхода завершена, элемент удалён')
  }

  render() {
    return this.items.map(item => {
      const enterAnim = this.animMgr.entering.get(item.id)
      const exitAnim  = this.animMgr.exiting.get(item.id)
      const anim = enterAnim || exitAnim

      return {
        id: item.id,
        text: item.text,
        style: anim?.style || { opacity: 1, transform: 'none' },
        state: enterAnim ? 'entering' : exitAnim ? 'exiting' : 'stable',
      }
    })
  }
}

// --- CSS-классы подход (без RAF) ---

function createCSSAnimationHelper() {
  // Паттерн: добавить класс → дать время для transition → убрать из DOM

  const transitions = new Map()

  function enter(id, onFinish) {
    // Сначала элемент невидим
    transitions.set(id, { phase: 'entering', opacity: 0 })

    // Следующий фрейм: добавляем класс для transition
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        transitions.set(id, { phase: 'visible', opacity: 1 })
        setTimeout(() => {
          transitions.delete(id)
          onFinish?.()
        }, 300)
      })
    })
  }

  function exit(id, onFinish) {
    transitions.set(id, { phase: 'exiting', opacity: 0 })
    setTimeout(() => {
      transitions.delete(id)
      onFinish?.()
    }, 300)
  }

  return { enter, exit, getState: (id) => transitions.get(id) }
}

// --- Тест ---

async function runDemo() {
  console.log('=== AnimatedList Demo ===')
  const list = new AnimatedList()

  const item1 = await list.add('React')
  const item2 = await list.add('TypeScript')
  const item3 = await list.add('Framer Motion')

  console.log('
Список после добавления:', list.items.map(i => i.text).join(', '))

  await list.remove(item2.id)
  console.log('После удаления TypeScript:', list.items.map(i => i.text).join(', '))

  // CSS классы подход
  console.log('
=== CSS Animation Helper ===')
  const cssAnim = createCSSAnimationHelper()
  cssAnim.enter('modal', () => console.log('Modal: анимация входа завершена'))
  cssAnim.exit('tooltip', () => console.log('Tooltip: анимация выхода завершена — удаляем из DOM'))
}

runDemo()