---
export interface Props {
  title?: string;
  toggleLabel?: string;
  targetSelector?: string;
  headingSelector?: string;
  minLevel?: number;
  maxLevel?: number;
  defaultOpenBreakpoint?: string;
}

const {
  title = '页面导航',
  toggleLabel = '导航',
  targetSelector = '[data-report-content]',
  headingSelector,
  minLevel = 2,
  maxLevel = 3,
  defaultOpenBreakpoint = '(min-width: 1280px)'
} = Astro.props;

const sidebarId = `report-sidebar-${Math.random().toString(36).slice(2, 10)}`;
const navListId = `${sidebarId}-list`;
const config = {
  sidebarId,
  navListId,
  title,
  toggleLabel,
  targetSelector,
  headingSelector: headingSelector ?? '',
  minLevel,
  maxLevel,
  breakpoint: defaultOpenBreakpoint
};
---

<aside
  id={sidebarId}
  class="report-sidebar collapsed"
  data-report-sidebar
  data-breakpoint={defaultOpenBreakpoint}
>
  <button
    class="report-sidebar__toggle"
    type="button"
    aria-expanded="false"
    aria-controls={navListId}
  >
    <span class="report-sidebar__toggle-icon" aria-hidden="true">☰</span>
    <span class="report-sidebar__toggle-label">{toggleLabel}</span>
  </button>

  <div class="report-sidebar__panel" role="dialog" aria-modal="false">
    <div class="report-sidebar__header">
      <h2 class="report-sidebar__title">{title}</h2>
      <button class="report-sidebar__close" type="button" aria-label="收起导航">
        ×
      </button>
    </div>
    <nav class="report-sidebar__nav" aria-label={title}>
      <ul id={navListId} class="report-sidebar__list"></ul>
    </nav>
  </div>
</aside>

<script is:inline define:vars={{ CONFIG: config }}>
const script = document.currentScript;
(function () {
  if (!script) return;
  const sidebar = document.getElementById(CONFIG.sidebarId);
  if (!sidebar || sidebar.dataset.initialized === 'true') return;
  sidebar.dataset.initialized = 'true';

  const navList = sidebar.querySelector('.report-sidebar__list');
  const toggleBtn = sidebar.querySelector('.report-sidebar__toggle');
  const closeBtn = sidebar.querySelector('.report-sidebar__close');
  if (!navList || !toggleBtn || !closeBtn) return;

  const matchBreakpoint = window.matchMedia(CONFIG.breakpoint);
  const headingLevels = Array.from({ length: CONFIG.maxLevel - CONFIG.minLevel + 1 }, (_, idx) => `h${CONFIG.minLevel + idx}`);
  const selector = CONFIG.headingSelector && CONFIG.headingSelector.trim().length > 0
    ? CONFIG.headingSelector
    : headingLevels.join(',');

  const slugify = (text) => {
    if (!text) return 'section';
    return text
      .toLowerCase()
      .replace(/[\p{Extended_Pictographic}\p{Emoji_Presentation}\p{Emoji_Component}\p{Emoji}\p{Symbol}\p{Open_Punctuation}\p{Close_Punctuation}]/gu, '')
      .replace(/[^a-z0-9\u4e00-\u9fa5\-\s]/g, '')
      .replace(/\s+/g, '-')
      .replace(/-+/g, '-')
      .replace(/^-|-$/g, '') || 'section';
  };

  const buildNavigation = () => {
    const targetRoot = document.querySelector(CONFIG.targetSelector) ?? document.body;
    const headings = Array.from(targetRoot.querySelectorAll(selector))
      .filter((heading) => heading instanceof HTMLElement);

    if (!headings.length) {
      sidebar.classList.add('report-sidebar--empty');
      return;
    }

    sidebar.classList.remove('report-sidebar--empty');

    const existingIds = new Set(headings.filter((h) => h.id).map((h) => h.id));

    headings.forEach((heading) => {
      if (!heading.id) {
        const base = slugify(heading.textContent ?? 'section');
        let candidate = base;
        let counter = 1;
        while (existingIds.has(candidate) || document.getElementById(candidate)) {
          candidate = `${base}-${counter++}`;
        }
        heading.id = candidate;
        existingIds.add(candidate);
      }
    });

    // 清空并重建导航
    navList.innerHTML = '';

    headings.forEach((heading) => {
      const level = parseInt(heading.tagName.replace('H', ''), 10) || CONFIG.minLevel;
      const text = heading.textContent?.trim() ?? '';
      if (!text) return;

      // 计算缩进层级（相对于最小层级）
      const depth = Math.max(0, level - CONFIG.minLevel);

      const listItem = document.createElement('li');
      listItem.className = `nav-item nav-item--level-${level} nav-item--depth-${depth}`;
      
      const link = document.createElement('a');
      link.className = `nav-link nav-link--level-${level}`;
      link.href = `#${heading.id}`;
      link.textContent = text;
      link.dataset.targetId = heading.id;
      link.dataset.level = String(level);
      link.dataset.depth = String(depth);
      
      // 设置内联样式
      const indentPx = depth * 20; // 每层20px缩进
      let fontSize, fontWeight, color;
      
      switch(level) {
        case 2:
          fontSize = '18px';
          fontWeight = '700';
          color = '#0f172a';
          break;
        case 3:
          fontSize = '16px';
          fontWeight = '600';
          color = '#1e293b';
          break;
        default:
          fontSize = '13px';
          fontWeight = '400';
          color = '#475569';
      }
      
      link.style.cssText = `
        margin-left: ${indentPx}px;
        font-size: ${fontSize};
        font-weight: ${fontWeight};
        color: ${color};
        padding: ${level === 2 ? '12px 16px' : level === 3 ? '10px 14px' : '8px 12px'};
        display: block;
        text-decoration: none;
        border-radius: 8px;
        transition: all 0.2s ease;
      `;
      
      listItem.appendChild(link);
      navList.appendChild(listItem);
    });

    setupScrollSpy(headings);
  };

  const setCollapsed = (collapsed) => {
    sidebar.classList.toggle('collapsed', collapsed);
    toggleBtn.setAttribute('aria-expanded', String(!collapsed));
  };

  const handleToggle = () => {
    setCollapsed(!sidebar.classList.contains('collapsed'));
  };

  toggleBtn.addEventListener('click', handleToggle);
  closeBtn.addEventListener('click', () => setCollapsed(true));

  const handleLinkClick = (event) => {
    const link = event.target.closest('.nav-link');
    if (!link) return;
    event.preventDefault();
    const targetId = link.dataset.targetId;
    const target = targetId ? document.getElementById(targetId) : null;
    if (target) {
      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
      history.replaceState(null, '', `#${targetId}`);
    }
    if (!matchBreakpoint.matches) {
      setCollapsed(true);
    }
  };

  navList.addEventListener('click', handleLinkClick);

  const applyBreakpointState = () => {
    setCollapsed(!matchBreakpoint.matches);
  };

  matchBreakpoint.addEventListener('change', applyBreakpointState);

  let activeLink = null;
  let observer = null;

  const setActiveLink = (id) => {
    if (activeLink) {
      activeLink.classList.remove('nav-link--active');
    }
    const next = navList.querySelector(`.nav-link[data-target-id="${id}"]`);
    if (next) {
      next.classList.add('nav-link--active');
      activeLink = next;
    } else {
      activeLink = null;
    }
  };

  const setupScrollSpy = (headings) => {
    if (observer) {
      observer.disconnect();
    }

    observer = new IntersectionObserver((entries) => {
      const visible = entries
        .filter((entry) => entry.isIntersecting)
        .sort((a, b) => b.intersectionRatio - a.intersectionRatio);
      if (visible.length > 0) {
        setActiveLink(visible[0].target.id);
        return;
      }
      const sorted = entries
        .slice()
        .sort((a, b) => a.target.offsetTop - b.target.offsetTop);
      const current = sorted.find((entry) => window.scrollY + 120 <= entry.target.offsetTop + entry.target.offsetHeight);
      if (current) {
        setActiveLink(current.target.id);
      }
    }, {
      rootMargin: '-35% 0px -55% 0px',
      threshold: [0, 0.25, 0.5, 0.75, 1]
    });

    headings.forEach((heading) => observer.observe(heading));
  };

  const initialize = () => {
    buildNavigation();
    applyBreakpointState();
  };

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

  document.addEventListener('astro:after-swap', () => {
    buildNavigation();
    applyBreakpointState();
  });
})();
</script>

<style>
  .report-sidebar {
    --sidebar-width: var(--report-sidebar-width, clamp(260px, 24vw, 320px));
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: var(--sidebar-width);
    z-index: 40;
  }

  .report-sidebar__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(91, 119, 142, 0.35);
    background: rgba(255, 255, 255, 0.18);
    color: #0f172a;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    backdrop-filter: blur(12px);
  }

  .report-sidebar__toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
    background: rgba(255, 255, 255, 0.28);
  }

  .report-sidebar__toggle-icon {
    font-size: 1.1rem;
  }

  .report-sidebar__panel {
    width: var(--sidebar-width);
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(91, 119, 142, 0.25);
    border-radius: 1.25rem;
    padding: 1.25rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.15);
    backdrop-filter: blur(18px);
    transition: transform 0.35s ease, opacity 0.35s ease, visibility 0.35s ease;
    position: sticky;
    top: 6.5rem;
    max-height: calc(100vh - 7.5rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .collapsed .report-sidebar__panel {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-12px);
    pointer-events: none;
  }

  .report-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
  }

  .report-sidebar__title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    color: #0f172a;
  }

  .report-sidebar__close {
    border: none;
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
  }

  .report-sidebar__close:hover {
    background: rgba(15, 23, 42, 0.12);
    transform: scale(1.05);
  }

  .report-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    margin-right: -8px;
  }

  /* 自定义滚动条样式 */
  .report-sidebar__nav::-webkit-scrollbar {
    width: 6px;
  }

  .report-sidebar__nav::-webkit-scrollbar-track {
    background: rgba(148, 163, 184, 0.1);
    border-radius: 3px;
  }

  .report-sidebar__nav::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
    border-radius: 3px;
  }

  .report-sidebar__nav::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.6);
  }

  .report-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  /* 导航项基础样式 */
  .nav-item {
    position: relative;
    margin: 2px 0;
  }

  .nav-link:hover {
    background: rgba(59, 130, 246, 0.1) !important;
    transform: translateX(4px);
  }

  /* 激活状态 */
  .nav-link--active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(29, 78, 216, 0.15)) !important;
    color: #1d4ed8 !important;
    font-weight: 700 !important;
    border-left: 4px solid #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
  }

  @media (min-width: 1280px) {
    .report-sidebar {
      --sidebar-width: var(--report-sidebar-width, clamp(260px, 22vw, 320px));
      --sidebar-inline-offset: clamp(1rem, 2.5vw, 3rem);
      position: fixed;
      top: 6rem;
      left: calc(env(safe-area-inset-left) + var(--sidebar-inline-offset));
      height: calc(100vh - 7rem);
      align-items: stretch;
      gap: 1rem;
    }

    .report-sidebar__toggle {
      justify-content: center;
      width: 100%;
    }

    .report-sidebar__panel {
      position: relative;
      top: auto;
      width: var(--sidebar-width);
      max-height: 100%;
      height: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .report-sidebar__nav {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .collapsed .report-sidebar__panel {
      transform: translateX(-16px);
    }
  }

  @media (max-width: 1279px) {
    .report-sidebar {
      position: fixed;
      bottom: 1.5rem;
      right: 1.5rem;
      width: auto;
      gap: 0.5rem;
      align-items: flex-end;
      z-index: 55;
    }

    .report-sidebar__toggle {
      background: rgba(15, 23, 42, 0.8);
      color: #f8fafc;
      box-shadow: 0 15px 30px rgba(15, 23, 42, 0.35);
    }

    .report-sidebar__panel {
      position: fixed;
      bottom: 0;
      right: 0;
      top: auto;
      left: 0;
      width: 100%;
      max-height: min(520px, 85vh);
      border-radius: 1.5rem 1.5rem 0 0;
      padding: 1.5rem;
      transform: translateY(100%);
    }

    .collapsed .report-sidebar__panel {
      transform: translateY(110%);
    }

    .report-sidebar__panel,
    .collapsed .report-sidebar__panel {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .report-sidebar__panel,
    .report-sidebar__toggle,
    .nav-link {
      transition: none;
    }
  }
</style>