// Симулируем React.lazy() и Suspense на чистом JavaScript.
// Показываем как динамическая загрузка модулей работает под капотом.

// --- Симуляция "тяжёлых" модулей ---

const fakeModules = {
  './HeavyChart': {
    size: '180KB',
    loadTime: 800,
    default: function HeavyChart(props) {
      return '[Chart: ' + props.title + ']'
    }
  },
  './pages/Dashboard': {
    size: '250KB',
    loadTime: 1200,
    default: function Dashboard() {
      return '[Dashboard Page]'
    }
  },
  './pages/Settings': {
    size: '90KB',
    loadTime: 400,
    default: function Settings() {
      return '[Settings Page]'
    }
  },
}

// --- Симуляция динамического import() ---

function dynamicImport(path) {
  return new Promise((resolve, reject) => {
    const module = fakeModules[path]
    if (!module) {
      reject(new Error('Модуль не найден: ' + path))
      return
    }

    console.log('  Начинаем загрузку ' + path + ' (' + module.size + ')...')

    setTimeout(() => {
      console.log('  Загружен ' + path + ' за ' + module.loadTime + 'мс')
      resolve({ default: module.default })
    }, module.loadTime)
  })
}

// --- Реализация React.lazy() ---

function lazy(importFn) {
  let status = 'idle'
  let result = null
  let promise = null
  let cachedModule = null

  return {
    _getStatus: () => status,
    _getModule: () => cachedModule,

    load() {
      if (status === 'success') return Promise.resolve(cachedModule)
      if (promise) return promise  // дедупликация: не загружаем дважды

      status = 'pending'
      promise = importFn().then(
        (module) => {
          status = 'success'
          cachedModule = module.default
          return module.default
        },
        (error) => {
          status = 'error'
          result = error
          throw error
        }
      )
      return promise
    },

    render(props) {
      if (status === 'idle' || status === 'pending') {
        throw promise || this.load()  // Suspense поймает!
      }
      if (status === 'error') throw result
      return cachedModule(props)
    }
  }
}

// --- Симуляция Suspense ---

async function Suspense(fallback, renderFn) {
  console.log('Suspense: начинаем рендер')

  while (true) {
    try {
      const result = renderFn()
      console.log('Suspense: компонент готов →', result)
      return result
    } catch (promise) {
      if (promise instanceof Promise) {
        console.log('Suspense: компонент ещё загружается, показываем:', fallback)
        await promise  // ждём загрузки
        console.log('Suspense: загрузка завершена, повторяем рендер...')
      } else {
        throw promise  // настоящая ошибка — пробрасываем
      }
    }
  }
}

// --- Тест 1: Ленивая загрузка одного компонента ---

async function test1() {
  console.log('=== Тест 1: Ленивая загрузка HeavyChart ===')

  const HeavyChart = lazy(() => dynamicImport('./HeavyChart'))

  HeavyChart.load()  // начинаем загрузку

  const output = await Suspense(
    '[Загрузка графика...]',
    () => HeavyChart.render({ title: 'Продажи за месяц' })
  )

  console.log('Итог:', output)
}

// --- Тест 2: Кэширование (не загружает дважды) ---

async function test2() {
  console.log('
=== Тест 2: Кэширование чанков ===')

  const Settings = lazy(() => dynamicImport('./pages/Settings'))

  console.log('Первая загрузка:')
  await Settings.load()
  console.log('Статус:', Settings._getStatus())  // success

  console.log('
Вторая "загрузка" (должна использовать кэш):')
  const start = performance.now()
  await Settings.load()
  const elapsed = Math.round(performance.now() - start)
  console.log('Время:', elapsed + 'мс (из кэша, почти 0мс)')
  console.log('Загрузка из кэша:', elapsed < 10)
}

// --- Тест 3: Параллельная загрузка нескольких страниц ---

async function test3() {
  console.log('
=== Тест 3: Параллельная загрузка страниц ===')

  const pages = {
    dashboard: lazy(() => dynamicImport('./pages/Dashboard')),
    settings: lazy(() => dynamicImport('./pages/Settings')),
  }

  const startAll = performance.now()

  // Загружаем параллельно (как при preload)
  await Promise.all([
    pages.dashboard.load(),
    pages.settings.load(),
  ])

  console.log('Все страницы загружены параллельно за', Math.round(performance.now() - startAll) + 'мс')
  console.log('(вместо последовательных', 1200 + 400, 'мс = 1600мс)')
  console.log('Dashboard:', pages.dashboard.render({}))
  console.log('Settings:', pages.settings.render({}))
}

async function runAll() {
  await test1()
  await test2()
  await test3()
}

runAll()