---
import { NAV_SECTIONS, STANDALONE_PAGES } from '../navigation';

interface Props {
  currentSlug?: string;
}

const { currentSlug = '' } = Astro.props;
const base = import.meta.env.BASE_URL;
---

<aside
  id="sidebar"
  class="fixed inset-y-0 left-0 z-50 w-72 bg-white dark:bg-surface-950 border-r border-surface-200 dark:border-surface-800 transform -translate-x-full lg:translate-x-0 lg:static lg:z-auto transition-transform duration-200 ease-in-out overflow-y-auto pt-14 lg:pt-0 lg:h-[calc(100vh-3.5rem)] lg:sticky lg:top-14 lg:shrink-0"
  data-pagefind-ignore
>
  <div class="p-4 space-y-6">
    {NAV_SECTIONS.map((section) => (
      <div>
        <h3 class="text-sm font-bold uppercase tracking-wider text-surface-600 dark:text-surface-300 mb-2 px-3">
          {section.title}
        </h3>
        <ul class="space-y-0.5">
          {section.items.map((item) => (
            <li>
              <a
                href={`${base}docs/${item.slug}/`}
                class:list={[
                  'sidebar-link',
                  { active: currentSlug === item.slug },
                ]}
              >
                {item.title}
              </a>
            </li>
          ))}
        </ul>
      </div>
    ))}

    <div class="border-t border-surface-200 dark:border-surface-800 pt-4">
      <ul class="space-y-0.5">
        {STANDALONE_PAGES.map((page) => (
          <li>
            <a
              href={`${base}docs/${page.slug}/`}
              class:list={[
                'sidebar-link',
                { active: currentSlug === page.slug },
              ]}
            >
              {page.title}
            </a>
          </li>
        ))}
      </ul>
    </div>
  </div>
</aside>

<!-- Overlay for mobile -->
<div id="sidebar-overlay" class="fixed inset-0 z-40 bg-black/50 hidden lg:hidden"></div>

<script>
  const SIDEBAR_SCROLL_KEY = 'squad-docs-sidebar-scroll';

  function getSidebarElements() {
    return {
      sidebar: document.getElementById('sidebar'),
      overlay: document.getElementById('sidebar-overlay'),
    };
  }

  function closeSidebar() {
    const { sidebar, overlay } = getSidebarElements();
    sidebar?.classList.add('-translate-x-full');
    overlay?.classList.add('hidden');
  }

  let lastScrollTop = 0;
  let rafPending = false;

  function trackSidebarScroll() {
    const { sidebar } = getSidebarElements();
    if (!sidebar) return;

    if (!rafPending) {
      rafPending = true;
      requestAnimationFrame(() => {
        lastScrollTop = sidebar.scrollTop;
        rafPending = false;
      });
    }
  }

  function flushSidebarScroll() {
    sessionStorage.setItem(SIDEBAR_SCROLL_KEY, String(lastScrollTop));
  }

  function restoreSidebarScroll() {
    const { sidebar } = getSidebarElements();
    if (!sidebar) return false;

    const savedScrollTop = sessionStorage.getItem(SIDEBAR_SCROLL_KEY);
    if (savedScrollTop === null) return false;

    const scrollTop = Number(savedScrollTop);
    if (Number.isNaN(scrollTop)) return false;

    sidebar.scrollTop = scrollTop;
    lastScrollTop = scrollTop;
    return true;
  }

  function initSidebar() {
    const { sidebar, overlay } = getSidebarElements();
    if (!sidebar) return;

    if (!sidebar.dataset.scrollPersistenceBound) {
      sidebar.addEventListener('scroll', trackSidebarScroll, { passive: true });
      sidebar.dataset.scrollPersistenceBound = 'true';
    }

    if (overlay && !overlay.dataset.closeHandlerBound) {
      overlay.addEventListener('click', closeSidebar);
      overlay.dataset.closeHandlerBound = 'true';
    }

    requestAnimationFrame(() => {
      const restoredScroll = restoreSidebarScroll();
      if (restoredScroll) return;

      const activeLink = sidebar.querySelector('.sidebar-link.active');
      activeLink?.scrollIntoView({ block: 'center', behavior: 'instant' });
    });
  }

  if (!window.__squadDocsSidebarStateSetup) {
    document.addEventListener('astro:before-swap', flushSidebarScroll);
    document.addEventListener('astro:after-swap', initSidebar);
    document.addEventListener('astro:page-load', initSidebar);
    window.addEventListener('pagehide', flushSidebarScroll);
    window.__squadDocsSidebarStateSetup = true;
  }

  initSidebar();
</script>
