app.js

document.addEventListener('DOMContentLoaded', () => {
  const contentHost = document.getElementById('content-host');
  const pageCache = new Map();

  const navPane = document.getElementById('nav-pane');
  const navToggleBtn = document.getElementById('nav-toggle-btn');

  if (navToggleBtn && navPane) {
    const isCollapsed = localStorage.getItem('nav-collapsed') === 'true';
    if (isCollapsed) {
      navPane.classList.add('collapsed');
    }

    navToggleBtn.addEventListener('click', () => {
      navPane.classList.toggle('collapsed');
      localStorage.setItem('nav-collapsed', navPane.classList.contains('collapsed'));
      setTimeout(updateActiveIndicator, 50);
    });
  }

  function updateActiveIndicator() {
    const activeLink = document.querySelector('.nav-link.active');
    const indicator = document.getElementById('nav-active-indicator');
    const wrapper = document.querySelector('.nav-links-wrapper');

    if (activeLink && indicator && wrapper) {
      const activeRect = activeLink.getBoundingClientRect();
      const wrapperRect = wrapper.getBoundingClientRect();
      
      const targetY = (activeRect.top - wrapperRect.top) + (activeRect.height - 18) / 2;
      indicator.style.transform = `translateY(${targetY}px)`;
      indicator.style.opacity = '1';
    }
  }

  window.addEventListener('resize', updateActiveIndicator);

  window.LyricsStudioState = window.LyricsStudioState || {
    audioFile: null,
    yamlText: null
  };

  async function loadPage(pageName) {
    const validPages = ['home', 'sync', 'timeline', 'preview', 'convert', 'upload', 'docs'];
    if (!validPages.includes(pageName)) pageName = 'home';

    document.querySelectorAll('.nav-link').forEach(link => {
      link.classList.toggle('active', link.dataset.page === pageName);
    });

    updateActiveIndicator();

    contentHost.querySelectorAll('.page-view').forEach(view => {
      view.classList.add('hidden');
      view.classList.remove('active');
      view.dispatchEvent(new CustomEvent('page-hide', { bubbles: true }));
    });

    try {
      let pageContainer = pageCache.get(pageName);

      if (!pageContainer) {
        const response = await fetch(`pages/${pageName}.html`);
        if (!response.ok) throw new Error(`Failed to load pages/${pageName}.html`);
        const html = await response.text();

        pageContainer = document.createElement('div');
        pageContainer.className = 'page-view';
        pageContainer.dataset.page = pageName;
        pageContainer.innerHTML = html;

        contentHost.appendChild(pageContainer);

        const script = document.createElement('script');
        script.src = `js/${pageName}.js`;
        script.dataset.dynamicScript = 'true';
        document.body.appendChild(script);

        pageCache.set(pageName, pageContainer);
      }

      pageContainer.classList.remove('hidden');
      pageContainer.classList.add('active');
      pageContainer.dispatchEvent(new CustomEvent('page-show', { bubbles: true }));

    } catch (err) {
      contentHost.innerHTML = `
        <div class="win-card">
          <h2>Page Loading Error</h2>
          <p>${err.message}</p>
        </div>
      `;
    }
  }

  function handleRoute() {
    let hash = window.location.hash.replace('#', '');
    loadPage(hash || 'home');
  }

  window.addEventListener('hashchange', handleRoute);
  handleRoute();
});