// js/app.js - SPA loader + theme toggle + history + admin lock
document.addEventListener('DOMContentLoaded', () => {
  const content = document.getElementById('content');
  const navBtns = document.querySelectorAll('.nav-btn');
  const themeBtn = document.getElementById('themeToggle');
  const searchInput = document.getElementById('searchInput');
  const defaultPage = content.dataset.defaultPage || 'gallery';

  // --- Theme init ---
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme === 'light') document.body.classList.add('light-mode');

  function updateThemeLabel() {
    themeBtn.textContent = document.body.classList.contains('light-mode') ? '☀' : '🌙';
  }
  updateThemeLabel();

  themeBtn.addEventListener('click', () => {
    const isLight = document.body.classList.toggle('light-mode');
    localStorage.setItem('theme', isLight ? 'light' : 'dark');
    updateThemeLabel();
  });

  // --- Admin Lock Button ---
  (async function adminLockInit() {
    const lockBtn = document.getElementById('adminLock');
    if (!lockBtn) return;

    async function checkAdmin() {
      try {
        const res = await fetch('includes/admin_auth.php?action=check');
        const json = await res.json();
        if (json.logged_in) {
          lockBtn.textContent = '🔓';
          lockBtn.classList.add('unlocked');
          lockBtn.classList.remove('locked');
          lockBtn.title = 'Click to log out';
        } else {
          lockBtn.textContent = '🔒';
          lockBtn.classList.add('locked');
          lockBtn.classList.remove('unlocked');
          lockBtn.title = 'Admin Login';
        }
      } catch (err) {
        console.warn('Admin check failed', err);
      }
    }

    // On click — log out if logged in, or navigate to admin page if not
    lockBtn.addEventListener('click', async () => {
      if (lockBtn.classList.contains('unlocked')) {
        const ok = confirm('Log out of admin mode?');
        if (!ok) return;
        await fetch('includes/admin_auth.php', {
          method: 'POST',
          body: new URLSearchParams({ action: 'logout' })
        });
        await checkAdmin();
        alert('You have been logged out.');
        loadPage(defaultPage);
      } else {
        const event = new CustomEvent('navigate', { detail: { page: 'admin' } });
        window.dispatchEvent(event);
      }
    });

    await checkAdmin();
    setInterval(checkAdmin, 30000);
  })();

  // --- Page loader ---
  async function loadPage(page, push = true) {
    content.innerHTML = '<div class="center"><p class="loading">Loading…</p></div>';
    try {
      const res = await fetch(`pages/${page}.php`, { cache: 'no-store' });
      if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
      const html = await res.text();

      // Insert the page HTML
      content.innerHTML = html;

      // 🔹 Execute any inline <script> blocks from the loaded page
      content.querySelectorAll('script').forEach(oldScript => {
        const newScript = document.createElement('script');
        if (oldScript.src) newScript.src = oldScript.src;
        else newScript.textContent = oldScript.textContent;
        document.body.appendChild(newScript);
        newScript.remove();
      });

      // 🔹 Optionally load external page-specific JS if it exists
      const pageJsPath = `js/${page}.js`;
      let jsLoaded = Promise.resolve();
      try {
        const jsCheck = await fetch(pageJsPath, { method: 'HEAD' });
        if (jsCheck.ok) {
          jsLoaded = new Promise((resolve) => {
            const script = document.createElement('script');
            script.src = `${pageJsPath}?v=${Date.now()}`;
            script.onload = resolve;
            script.onerror = resolve; // resolve even if load fails gracefully
            document.body.appendChild(script);
          });
        }
      } catch (e) {
        // no external JS found – fine
      }

      // Wait for any JS to finish loading before firing event
      await jsLoaded;

      if (push) history.pushState({ page }, '', `?page=${page}`);
      setActiveNav(page);

      // ✅ Dispatch after page-specific JS and DOM are ready
      document.dispatchEvent(new CustomEvent('page-loaded', { detail: { page } }));
    } catch (err) {
      console.error(err);
      content.innerHTML = `<div class="center"><p class="error">Failed to load <strong>${page}</strong>: ${err.message}</p></div>`;
    }
  }

  // --- Nav buttons ---
  navBtns.forEach(btn => {
    btn.addEventListener('click', () => loadPage(btn.dataset.page));
  });

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

  // --- History navigation ---
  window.addEventListener('popstate', (e) => {
    const page = e.state?.page || new URLSearchParams(location.search).get('page') || defaultPage;
    loadPage(page, false);
  });

  // --- Global search event ---
  searchInput.addEventListener('input', () => {
    document.dispatchEvent(new CustomEvent('global-search', { detail: { q: searchInput.value.trim() } }));
  });

  // --- Handle "navigate" custom events ---
  window.addEventListener('navigate', e => {
    const page = e.detail?.page || defaultPage;
    loadPage(page);
  });

  // --- Initial load ---
  const initPage = new URLSearchParams(location.search).get('page') || defaultPage;
  loadPage(initPage, false);
});