---
import config from 'virtual:starlight/user-config';

import LanguageSelect from 'virtual:starlight/components/LanguageSelect';
import Search from 'virtual:starlight/components/Search';
import SiteTitle from 'virtual:starlight/components/SiteTitle';
import SocialIcons from 'virtual:starlight/components/SocialIcons';

const shouldRenderSearch =
  config.pagefind || config.components.Search !== '@astrojs/starlight/components/Search.astro';

const topLinks = [
  { label: 'Старт', href: '/getting-started/' },
  { label: 'Гайды', href: '/guides/' },
  { label: 'Механики', href: '/mechanics/' },
  { label: 'FAQ', href: '/faq/' },
  { label: 'Правила', href: '/rules/' }
];
---

<div class="wiki-header-shell">
  <div class="header wiki-header">
    <div class="title-wrapper sl-flex">
      <SiteTitle />
      <nav class="wiki-top-nav" aria-label="Быстрая навигация">
        {
          topLinks.map((link) => (
            <a href={link.href} class="wiki-top-nav__link">
              {link.label}
            </a>
          ))
        }
      </nav>
    </div>

    <div class="sl-flex print:hidden">
      {shouldRenderSearch && <Search />}
    </div>

  <div class="sl-hidden md:sl-flex print:hidden right-group">
    <div class="sl-flex social-icons">
      <SocialIcons />
    </div>
    <button class="theme-toggle-btn" type="button" aria-label="Переключить тему" data-theme-toggle>
      <svg class="icon-sun" aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none">
        <circle cx="12" cy="12" r="4" />
        <line x1="12" y1="2.5" x2="12" y2="5.5" />
        <line x1="12" y1="18.5" x2="12" y2="21.5" />
        <line x1="2.5" y1="12" x2="5.5" y2="12" />
        <line x1="18.5" y1="12" x2="21.5" y2="12" />
        <line x1="5" y1="5" x2="7.3" y2="7.3" />
        <line x1="16.7" y1="16.7" x2="19" y2="19" />
        <line x1="5" y1="19" x2="7.3" y2="16.7" />
        <line x1="16.7" y1="7.3" x2="19" y2="5" />
      </svg>
      <svg class="icon-moon" aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none">
        <path d="M15.3 3.8A8.9 8.9 0 1 0 20.2 16a7.4 7.4 0 1 1-4.9-12.2Z" />
        <path d="m19.9 4.4.7 1.6 1.6.7-1.6.7-.7 1.6-.7-1.6-1.6-.7 1.6-.7.7-1.6Z" />
      </svg>
    </button>
    <LanguageSelect />
  </div>
</div>
  <div class="wiki-read-progress" aria-hidden="true">
    <div class="wiki-read-progress__fill" data-read-progress></div>
  </div>
</div>

<button class="wiki-back-to-top" type="button" aria-label="Прокрутить в начало" data-back-to-top>
  <span aria-hidden="true">↑</span>
</button>

<script>
  const setReadProgress = () => {
    const progressEl = document.querySelector('[data-read-progress]');
    const backToTopBtn = document.querySelector('[data-back-to-top]');
    if (!(progressEl instanceof HTMLElement)) return;

    const doc = document.documentElement;
    const scrollTop = window.scrollY || doc.scrollTop;
    const scrollable = doc.scrollHeight - window.innerHeight;
    const ratio = scrollable > 0 ? Math.min(1, Math.max(0, scrollTop / scrollable)) : 0;

    progressEl.style.transform = `scaleX(${ratio})`;

    if (backToTopBtn instanceof HTMLElement) {
      backToTopBtn.classList.toggle('is-visible', scrollTop > 420);
    }
  };

  const bindReadProgress = () => {
    const backToTopBtn = document.querySelector('[data-back-to-top]');
    const themeToggleBtn = document.querySelector('[data-theme-toggle]');

    if (backToTopBtn instanceof HTMLElement) {
      if (backToTopBtn.parentElement !== document.body) {
        document.body.appendChild(backToTopBtn);
      }

      backToTopBtn.addEventListener('click', () => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
      });
    }

    if (themeToggleBtn instanceof HTMLButtonElement) {
      themeToggleBtn.addEventListener('click', () => {
        const root = document.documentElement;
        const current = root.dataset.theme === 'light' ? 'light' : 'dark';
        const next = current === 'dark' ? 'light' : 'dark';
        root.dataset.theme = next;
        localStorage.setItem('starlight-theme', next);
      });
    }

    setReadProgress();
    window.addEventListener('scroll', setReadProgress, { passive: true });
    window.addEventListener('resize', setReadProgress);
  };

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', bindReadProgress, { once: true });
  } else {
    bindReadProgress();
  }

  document.addEventListener('astro:page-load', setReadProgress);
</script>

<style>
  @layer starlight.core {
    .wiki-header-shell {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .wiki-header {
      display: flex;
      gap: var(--sl-nav-gap);
      justify-content: space-between;
      align-items: center;
      height: 100%;
      padding-block: 0.34rem;
    }

    .title-wrapper {
      overflow: clip;
      padding: 0.25rem;
      margin: -0.25rem;
      min-width: 0;
      gap: 1rem;
      align-items: center;
    }

    .wiki-top-nav {
      display: none;
      gap: 0.45rem;
      align-items: center;
    }

    .wiki-top-nav__link {
      border: 1px solid transparent;
      border-radius: 0.18rem;
      padding: 0.36rem 0.74rem;
      text-decoration: none;
      color: var(--sl-color-gray-2);
      font-size: 0.82rem;
      font-family: 'Sora', sans-serif;
      font-weight: 600;
      letter-spacing: 0.01em;
      transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
    }

    .wiki-top-nav__link:hover {
      border-color: color-mix(in srgb, var(--sl-color-accent) 28%, transparent);
      background: color-mix(in srgb, var(--sl-color-accent-low) 65%, transparent);
      color: var(--sl-color-white);
    }

    .right-group,
    .social-icons {
      gap: 1rem;
      align-items: center;
    }

    .theme-toggle-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.25rem;
      height: 2.25rem;
      border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 78%, transparent);
      border-radius: 50%;
      background: color-mix(in srgb, var(--sl-color-bg-nav) 88%, transparent);
      color: #2a5f4d;
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--sl-color-hairline) 28%, transparent);
      transition: color 160ms ease, transform 160ms ease, background 160ms ease, border-color 160ms ease,
        box-shadow 160ms ease;
    }

    .theme-toggle-btn:hover {
      transform: translateY(-1px) scale(1.02);
      border-color: color-mix(in srgb, var(--sl-color-accent) 46%, transparent);
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--sl-color-accent) 24%, transparent),
        0 6px 14px color-mix(in srgb, var(--sl-color-accent) 22%, transparent);
    }

    .theme-toggle-btn svg {
      width: 1.15rem;
      height: 1.15rem;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .theme-toggle-btn .icon-sun,
    .theme-toggle-btn .icon-moon {
      display: none;
    }

    :global(:root[data-theme='dark']) .theme-toggle-btn .icon-moon {
      display: block;
    }

    :global(:root[data-theme='light']) .theme-toggle-btn .icon-sun {
      display: block;
    }

    :global(:root[data-theme='dark']) .theme-toggle-btn {
      color: #66f5df;
      background: color-mix(in srgb, #0f1b2a 86%, transparent);
      border-color: color-mix(in srgb, #2b4c5a 65%, transparent);
    }

    :global(:root[data-theme='light']) .theme-toggle-btn {
      color: #2e6b57;
      background: color-mix(in srgb, #f2f7ff 92%, transparent);
      border-color: color-mix(in srgb, #b4c5db 72%, transparent);
    }

    .wiki-read-progress {
      position: fixed;
      inset-inline: 0;
      top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
      height: 2px;
      z-index: calc(var(--sl-z-index-navbar) - 1);
      pointer-events: none;
      background: color-mix(in srgb, var(--sl-color-hairline) 65%, transparent);
      overflow: hidden;
    }

    .wiki-read-progress__fill {
      height: 100%;
      width: 100%;
      transform-origin: left center;
      transform: scaleX(0);
      background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--wiki-purple-2) 88%, #ffffff),
        color-mix(in srgb, var(--wiki-blue-2) 90%, #ffffff)
      );
      transition: transform 90ms linear;
    }

    .wiki-back-to-top {
      position: fixed;
      top: auto;
      right: max(0.75rem, env(safe-area-inset-right));
      bottom: max(1.1rem, env(safe-area-inset-bottom));
      z-index: 30;
      border: 1px solid color-mix(in srgb, var(--sl-color-accent) 70%, transparent);
      border-radius: 999px;
      background: linear-gradient(
        140deg,
        color-mix(in srgb, var(--wiki-purple-2) 78%, #101522),
        color-mix(in srgb, var(--wiki-blue-2) 82%, #101522)
      );
      color: #f6f9ff;
      font-family: 'Sora', sans-serif;
      font-size: 1.1rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      width: 2.6rem;
      height: 2.6rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      line-height: 1;
      box-shadow:
        0 10px 24px hsl(220 95% 62% / 0.24),
        0 0 0 1px hsl(214 88% 70% / 0.22);
      opacity: 0;
      visibility: hidden;
      transform: translateY(6px);
      pointer-events: none;
      transition: opacity 160ms ease, transform 160ms ease, border-color 160ms ease;
    }

    .wiki-back-to-top.is-visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }

    .wiki-back-to-top:hover {
      border-color: color-mix(in srgb, #9ec4ff 80%, transparent);
      box-shadow:
        0 14px 28px hsl(220 95% 62% / 0.32),
        0 0 0 1px hsl(214 88% 70% / 0.35),
        0 0 18px hsl(220 96% 68% / 0.34);
    }

    .social-icons::after {
      content: '';
      height: 2rem;
      border-inline-end: 1px solid var(--sl-color-gray-5);
    }

    @media (min-width: 64rem) {
      .wiki-top-nav {
        display: inline-flex;
      }
    }

    @media (min-width: 50rem) {
      :global(:root[data-has-sidebar]) {
        --__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
      }

      :global(:root:not([data-has-toc])) {
        --__toc-width: 0rem;
      }

      .wiki-header {
        --__sidebar-width: max(0rem, var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x));
        --__main-column-fr: calc(
          (
              100% + var(--__sidebar-pad, 0rem) - var(--__toc-width, var(--sl-sidebar-width)) -
                (2 * var(--__toc-width, var(--sl-nav-pad-x))) - var(--sl-content-inline-start, 0rem) -
                var(--sl-content-width)
            ) / 2
        );
        display: grid;
        grid-template-columns: minmax(
            calc(var(--__sidebar-width) + max(0rem, var(--__main-column-fr) - var(--sl-nav-gap))),
            auto
          )
          1fr auto;
        align-content: center;
      }
    }

    @media (max-width: 50rem) {
      .wiki-back-to-top {
        top: auto;
        right: max(0.62rem, env(safe-area-inset-right));
        bottom: max(1rem, env(safe-area-inset-bottom));
        width: 2.5rem;
        height: 2.5rem;
      }
    }
  }
</style>
