// Реализуем простой роутер на основе window.location.hash.
// Это покажет, как клиентская маршрутизация работает без перезагрузки страницы.

// --- Создаём роутер ---

function createHashRouter(routes) {
  // routes: { '/': handler, '/about': handler, '/users/:id': handler }
  const listeners = new Set()

  // Парсим шаблон маршрута: '/users/:id' -> регулярное выражение
  function parseRoute(pattern) {
    const params = []
    const regexStr = pattern.replace(/:([^/]+)/g, (_, name) => {
      params.push(name)
      return '([^/]+)'
    })
    return { regex: new RegExp(`^${regexStr}$`), params }
  }

  // Находим подходящий маршрут и извлекаем параметры
  function matchRoute(path) {
    for (const [pattern, handler] of Object.entries(routes)) {
      if (pattern === '*') continue  // 404 обрабатываем последним

      const { regex, params } = parseRoute(pattern)
      const match = path.match(regex)

      if (match) {
        const paramValues = {}
        params.forEach((name, i) => {
          paramValues[name] = match[i + 1]
        })
        return { handler, params: paramValues }
      }
    }

    // 404: если есть маршрут '*'
    if (routes['*']) {
      return { handler: routes['*'], params: {} }
    }

    return null
  }

  // Текущий path из hash
  const getPath = () => {
    const hash = window.location.hash.slice(1)  // убираем '#'
    return hash || '/'
  }

  // Рендер текущего маршрута
  function render() {
    const path = getPath()
    const match = matchRoute(path)

    console.log(`[Router] Навигация: ${path}`)

    if (match) {
      const result = match.handler({ params: match.params, path })
      listeners.forEach(fn => fn({ path, params: match.params, view: result }))
    }
  }

  // Слушаем изменения hash
  window.addEventListener('hashchange', render)

  return {
    // Программная навигация
    navigate(path) {
      window.location.hash = path
      // hashchange сработает автоматически
    },

    // Обратная навигация
    back() {
      window.history.back()
    },

    // Инициализация — рендерим текущий маршрут
    start() {
      render()
      return this
    },

    // Подписка на навигацию (как useNavigate)
    onNavigate(fn) {
      listeners.add(fn)
      return () => listeners.delete(fn)
    },

    destroy() {
      window.removeEventListener('hashchange', render)
    }
  }
}

// --- Описываем маршруты ---

const router = createHashRouter({
  '/': ({ path }) => {
    console.log('  Рендер: Главная страница')
    return 'Главная'
  },
  '/about': ({ path }) => {
    console.log('  Рендер: О нас')
    return 'О нас'
  },
  '/users': ({ path }) => {
    console.log('  Рендер: Список пользователей')
    return 'Пользователи'
  },
  '/users/:id': ({ params }) => {
    console.log(`  Рендер: Профиль пользователя #${params.id}`)
    return `Пользователь ${params.id}`
  },
  '*': ({ path }) => {
    console.log(`  Рендер: 404 — страница "${path}" не найдена`)
    return '404'
  }
})

// Подписываемся на навигацию
router.onNavigate(({ path, params, view }) => {
  console.log('  -> Текущий вид: "' + view + '", params:', params)
})

// --- Симуляция навигации ---

console.log('=== Запуск роутера ===')
// Эмулируем hashchange вручную (в браузере это делает window.location.hash = ...)
const simulateNav = (path) => {
  Object.defineProperty(window, 'location', {
    value: { hash: '#' + path, ...window.location },
    writable: true
  })
  window.dispatchEvent(new HashChangeEvent('hashchange'))
}

// В браузере просто:
// router.navigate('/')
// router.navigate('/about')
// router.navigate('/users/42')

console.log('
В реальном браузере:')
console.log('router.navigate("/")       -> рендер "Главная"')
console.log('router.navigate("/about")  -> рендер "О нас"')
console.log('router.navigate("/users/42") -> params: { id: "42" }')
console.log('router.navigate("/unknown") -> рендер 404')
console.log('
React Router делает то же самое, но через History API (без #)')