'use strict';

(function () {
  // Захватываем ссылку на текущий <script> сейчас, пока выполняется
  // синхронный код при парсинге. Позже (внутри DOMContentLoaded)
  // document.currentScript будет null, и теряю  контекст.
  const SELF = document.currentScript;

  function detectBase() {
    const src = (SELF && SELF.getAttribute('src')) || '';
    // src: "./js/header.js", "../js/header.js", "../../js/header.js"
    const idx = src.lastIndexOf('js/header.js');
    if (idx < 0) return './';
    const prefix = src.slice(0, idx); // "", "./", "../", "../../"
    return prefix || './';
  }

  function detectActiveKey() {
    const path = window.location.pathname.toLowerCase();
    // TO DO: переделать в словарь
    if (path.includes('/sosedi/')) return 'sosedi';
    if (path.includes('/basy/')) return 'basy';
    if (path.includes('ege-video')) return 'ege';
    // TO DO: придумать префикс и перейти на него
    if (path.includes('haffman') || path.includes('lzw')) return 'practice';
    if (path.includes('/tests/')) return 'tests';
    if (path.includes('/backlog/')) return 'backlog';
    return 'classes';
  }

  function render() {
    const base = detectBase();
    const active = detectActiveKey();

    const html = ` 
<header class="site-header">
  <div class="container header-inner">
    <a class="logo" href="${base}index.html">
      <div class="logo-mark">И</div>
      <div class="logo-text">
        <span class="logo-title">Кабинет информатики.</span>МОУ «СОШ №49, г.Саратов 
        <span class="logo-sub"></span>
      </div>
    </a>
    <button class="burger" id="burger" aria-label="Открыть меню"
            aria-expanded="false" aria-controls="nav">
     
    </button>
    <nav class="nav" id="nav">
      <a class="nav-link${active === 'classes'  ? ' active' : ''}" href="${base}index.html#classes">Уроки</a>
      <a class="nav-link${active === 'practice' ? ' active' : ''}" href="${base}index.html#interactive">Интерактив</a>
      <a class="nav-link${active === 'ege'      ? ' active' : ''}" href="${base}EGE-video.html">ЕГЭ</a>
      <a class="nav-link${active === 'tests' ? ' active' : ''}"
         href="${base}tests/index.html">Самоконтроль</a> 
      <a class="nav-link${active === 'backlog' ? ' active' : ''}"
         href="${base}backlog/index.html"
         style="font-weight: 700">Бэклог</a>
      </nav>
  </div>
</header>`.trim();

    const host = document.getElementById('site-header');
    if (host) host.innerHTML = html;
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', render);
  } else {
    render();
  }
})();