app.js

/* ==========================================
   UITS_Dev_Lab Application Core Controller
   Vanilla JavaScript SPA State & Event Logic
   ========================================== */

(function () {
  'use strict';

  // State Container
  const state = {
    data: {
      roadmap: [],
      guides: [],
      resources: [],
      leaderboard: []
    },
    currentRoute: 'home',
    theme: 'dark',
    guidesFilter: 'All',
    guidesSearch: '',
    resourcesFilter: 'All',
    resourcesSearch: ''
  };

  // DOM Cache
  const DOM = {
    themeToggleBtn: document.getElementById('theme-toggle-btn'),
    themeToggleText: document.getElementById('theme-toggle-text'),
    mobileHamburgerBtn: document.getElementById('mobile-hamburger-btn'),
    mobileSidebarOverlay: document.getElementById('mobile-sidebar-overlay'),
    mobileSidebar: document.getElementById('mobile-sidebar'),
    mobileCloseBtn: document.getElementById('mobile-close-btn'),
    navLinks: document.querySelectorAll('.nav-link, .mobile-nav-link'),
    sections: document.querySelectorAll('.page-section'),
    
    // Containers
    roadmapContainer: document.getElementById('roadmap-container'),
    guidesContainer: document.getElementById('guides-container'),
    guidesFilterGroup: document.getElementById('guides-filter-group'),
    guidesSearchInput: document.getElementById('guides-search-input'),
    
    resourcesContainer: document.getElementById('resources-container'),
    resourcesFilterGroup: document.getElementById('resources-filter-group'),
    resourcesSearchInput: document.getElementById('resources-search-input'),
    
    leaderboardContainer: document.getElementById('leaderboard-container'),

    // Modal
    modalOverlay: document.getElementById('app-modal'),
    modalCloseBtn: document.getElementById('modal-close-btn')
  };

  // Init Function
  async function init() {
    initTheme();
    bindEvents();
    await fetchData();
    handleRouting();
  }

  // 1. Theme Controller
  function initTheme() {
    const savedTheme = localStorage.getItem('uits_theme') || 'dark';
    setTheme(savedTheme);
  }

  function setTheme(newTheme) {
    state.theme = newTheme;
    document.documentElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('uits_theme', newTheme);

    if (DOM.themeToggleText) {
      DOM.themeToggleText.textContent = newTheme === 'dark' ? 'Light Mode' : 'Dark Mode';
    }
  }

  function toggleTheme() {
    const nextTheme = state.theme === 'dark' ? 'light' : 'dark';
    setTheme(nextTheme);
  }

  // 2. Fetch Data dynamically from data.json
  async function fetchData() {
    try {
      const response = await fetch('data.json');
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      const data = await response.json();
      state.data.roadmap = data.roadmap || [];
      state.data.guides = data.guides || [];
      state.data.resources = data.resources || [];
      state.data.leaderboard = data.leaderboard || [];

      // Initial Renders
      renderAllComponents();
    } catch (error) {
      console.error('Failed to load application data:', error);
      if (DOM.guidesContainer) {
        DOM.guidesContainer.innerHTML =
          '<div class="empty-state">Unable to load data.json. Please ensure you are running on a web server.</div>';
      }
    }
  }

  // Render all active views
  function renderAllComponents() {
    // Render Home Roadmap
    RenderModule.renderRoadmap(DOM.roadmapContainer, state.data.roadmap, (stepObj) => {
      const resourceLinks = (stepObj.resources || [])
        .map((r) => `- ${r.name}: ${r.url}`)
        .join('\n');
      const content = `Objective:\n${stepObj.objective}\n\nRecommended Resources:\n${resourceLinks}`;
      RenderModule.openModal(stepObj.title, `Step ${stepObj.stepNumber}`, stepObj.summary, content);
    });

    // Render Setup Guides
    RenderModule.renderGuides(
      DOM.guidesContainer,
      state.data.guides,
      state.guidesFilter,
      state.guidesSearch,
      (guideObj) => {
        const meta = `Category: ${guideObj.category} | Difficulty: ${guideObj.difficulty}\nPrerequisites: ${guideObj.prerequisites}`;
        RenderModule.openModal(guideObj.title, guideObj.category, meta, guideObj.steps);
      }
    );

    // Render Vault Resources
    RenderModule.renderResources(
      DOM.resourcesContainer,
      state.data.resources,
      state.resourcesFilter,
      state.resourcesSearch
    );

    // Render Grindset Leaderboard
    if (RenderModule.renderLeaderboard) {
      RenderModule.renderLeaderboard(DOM.leaderboardContainer, state.data.leaderboard);
    }
  }

  // 3. Router logic
  function handleRouting() {
    let hash = window.location.hash.substring(1);
    if (!hash || !document.getElementById(hash)) {
      hash = 'home';
    }
    state.currentRoute = hash;

    // Toggle Section Visibility
    DOM.sections.forEach((section) => {
      if (section.id === hash) {
        section.classList.add('active');
      } else {
        section.classList.remove('active');
      }
    });

    // Update Nav Active States
    DOM.navLinks.forEach((link) => {
      const targetHash = link.getAttribute('href').replace('#', '');
      if (targetHash === hash) {
        link.classList.add('active');
      } else {
        link.classList.remove('active');
      }
    });

    // Scroll to top of viewport
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }

  // Mobile Menu Controls
  function openMobileSidebar() {
    if (DOM.mobileSidebar && DOM.mobileSidebarOverlay) {
      DOM.mobileSidebar.classList.add('active');
      DOM.mobileSidebarOverlay.classList.add('active');
    }
  }

  function closeMobileSidebar() {
    if (DOM.mobileSidebar && DOM.mobileSidebarOverlay) {
      DOM.mobileSidebar.classList.remove('active');
      DOM.mobileSidebarOverlay.classList.remove('active');
    }
  }

  // Event Listeners
  function bindEvents() {
    // Hash Change
    window.addEventListener('hashchange', handleRouting);

    // Theme Toggle Button
    if (DOM.themeToggleBtn) {
      DOM.themeToggleBtn.addEventListener('click', toggleTheme);
    }

    // Mobile Hamburger
    if (DOM.mobileHamburgerBtn) {
      DOM.mobileHamburgerBtn.addEventListener('click', openMobileSidebar);
    }
    if (DOM.mobileCloseBtn) {
      DOM.mobileCloseBtn.addEventListener('click', closeMobileSidebar);
    }
    if (DOM.mobileSidebarOverlay) {
      DOM.mobileSidebarOverlay.addEventListener('click', closeMobileSidebar);
    }

    // Close mobile menu on nav link click
    DOM.navLinks.forEach((link) => {
      link.addEventListener('click', () => {
        closeMobileSidebar();
      });
    });

    // Setup Guides Category Filter Buttons
    if (DOM.guidesFilterGroup) {
      DOM.guidesFilterGroup.querySelectorAll('.filter-btn').forEach((btn) => {
        btn.addEventListener('click', (e) => {
          DOM.guidesFilterGroup.querySelectorAll('.filter-btn').forEach((b) => b.classList.remove('active'));
          e.target.classList.add('active');
          state.guidesFilter = e.target.getAttribute('data-category');
          RenderModule.renderGuides(
            DOM.guidesContainer,
            state.data.guides,
            state.guidesFilter,
            state.guidesSearch,
            (guideObj) => {
              const meta = `Category: ${guideObj.category} | Difficulty: ${guideObj.difficulty}\nPrerequisites: ${guideObj.prerequisites}`;
              RenderModule.openModal(guideObj.title, guideObj.category, meta, guideObj.steps);
            }
          );
        });
      });
    }

    // Setup Guides Search Input
    if (DOM.guidesSearchInput) {
      DOM.guidesSearchInput.addEventListener('input', (e) => {
        state.guidesSearch = e.target.value;
        RenderModule.renderGuides(
          DOM.guidesContainer,
          state.data.guides,
          state.guidesFilter,
          state.guidesSearch,
          (guideObj) => {
            const meta = `Category: ${guideObj.category} | Difficulty: ${guideObj.difficulty}\nPrerequisites: ${guideObj.prerequisites}`;
            RenderModule.openModal(guideObj.title, guideObj.category, meta, guideObj.steps);
          }
        );
      });
    }

    // Vault Resources Category Filter Buttons
    if (DOM.resourcesFilterGroup) {
      DOM.resourcesFilterGroup.querySelectorAll('.filter-btn').forEach((btn) => {
        btn.addEventListener('click', (e) => {
          DOM.resourcesFilterGroup.querySelectorAll('.filter-btn').forEach((b) => b.classList.remove('active'));
          e.target.classList.add('active');
          state.resourcesFilter = e.target.getAttribute('data-category');
          RenderModule.renderResources(
            DOM.resourcesContainer,
            state.data.resources,
            state.resourcesFilter,
            state.resourcesSearch
          );
        });
      });
    }

    // Vault Resources Search Input
    if (DOM.resourcesSearchInput) {
      DOM.resourcesSearchInput.addEventListener('input', (e) => {
        state.resourcesSearch = e.target.value;
        RenderModule.renderResources(
          DOM.resourcesContainer,
          state.data.resources,
          state.resourcesFilter,
          state.resourcesSearch
        );
      });
    }

    // Modal Close Listeners
    if (DOM.modalCloseBtn) {
      DOM.modalCloseBtn.addEventListener('click', RenderModule.closeModal);
    }
    if (DOM.modalOverlay) {
      DOM.modalOverlay.addEventListener('click', (e) => {
        if (e.target === DOM.modalOverlay) {
          RenderModule.closeModal();
        }
      });
    }
    window.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') {
        RenderModule.closeModal();
        closeMobileSidebar();
      }
    });
  }

  // Launch on DOMContentLoaded
  document.addEventListener('DOMContentLoaded', init);
})();