render.js

/* ==========================================
   UITS_Dev_Lab DOM Rendering Module
   Vanilla JavaScript UI Component Functions
   ========================================== */

const RenderModule = (function () {
  'use strict';

  // Helper to escape HTML characters safely
  function escapeHTML(str) {
    if (!str) return '';
    return String(str)
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#039;');
  }

  // 1. Render Interactive Roadmap Steps (Home Section)
  function renderRoadmap(container, roadmapData, onSelectStep) {
    if (!container) return;
    if (!roadmapData || !roadmapData.length) {
      container.innerHTML = '<div class="empty-state">No roadmap data available.</div>';
      return;
    }

    container.innerHTML = roadmapData
      .map(
        (step) => `
        <article class="roadmap-card" data-step-id="${escapeHTML(step.id)}">
          <div class="roadmap-step-badge">${step.stepNumber}</div>
          <h3 class="roadmap-card-title">${escapeHTML(step.title)}</h3>
          <p class="roadmap-card-desc">${escapeHTML(step.summary)}</p>
          <span class="roadmap-action-link">View Objective &amp; Details &rarr;</span>
        </article>
      `
      )
      .join('');

    // Attach Click Handlers
    container.querySelectorAll('.roadmap-card').forEach((card) => {
      card.addEventListener('click', () => {
        const stepId = card.getAttribute('data-step-id');
        const stepData = roadmapData.find((s) => s.id === stepId);
        if (stepData && typeof onSelectStep === 'function') {
          onSelectStep(stepData);
        }
      });
    });
  }

  // 2. Render Setup Guides Grid (Setup Guides Section)
  function renderGuides(container, guidesData, activeCategory, searchQuery, onSelectGuide) {
    if (!container) return;

    // Filter Logic
    let filtered = guidesData || [];
    if (activeCategory && activeCategory !== 'All') {
      filtered = filtered.filter(
        (g) => g.category.toLowerCase() === activeCategory.toLowerCase()
      );
    }
    if (searchQuery && searchQuery.trim() !== '') {
      const q = searchQuery.toLowerCase().trim();
      filtered = filtered.filter(
        (g) =>
          g.title.toLowerCase().includes(q) ||
          g.category.toLowerCase().includes(q) ||
          (g.prerequisites && g.prerequisites.toLowerCase().includes(q))
      );
    }

    if (!filtered.length) {
      container.innerHTML =
        '<div class="empty-state">No setup guides found matching your current filter or search criteria.</div>';
      return;
    }

    container.innerHTML = filtered
      .map((guide) => {
        const tagClass = `tag-${(guide.category || 'default').toLowerCase().replace(/[^a-z0-9]/g, '')}`;
        return `
        <article class="guide-card" data-guide-id="${escapeHTML(guide.id)}">
          <div class="guide-header">
            <div class="card-meta-row">
              <span class="category-tag ${tagClass}">${escapeHTML(guide.category)}</span>
              <span class="difficulty-badge">${escapeHTML(guide.difficulty)}</span>
            </div>
            <h3 class="guide-title">${escapeHTML(guide.title)}</h3>
            <div class="guide-prereqs">
              <strong>Prerequisites:</strong> ${escapeHTML(guide.prerequisites)}
            </div>
          </div>
          <button class="btn-primary view-guide-btn" type="button">View Instructions</button>
        </article>
      `;
      })
      .join('');

    // Attach Click Handlers for Guide View
    container.querySelectorAll('.guide-card').forEach((card) => {
      const viewBtn = card.querySelector('.view-guide-btn');
      if (viewBtn) {
        viewBtn.addEventListener('click', () => {
          const guideId = card.getAttribute('data-guide-id');
          const guideObj = guidesData.find((g) => g.id === guideId);
          if (guideObj && typeof onSelectGuide === 'function') {
            onSelectGuide(guideObj);
          }
        });
      }
    });
  }

  // 3. Render Vault Resources Dashboard (Vault Resources Section)
  function renderResources(container, resourcesData, activeCategory, searchQuery) {
    if (!container) return;

    let filtered = resourcesData || [];
    if (activeCategory && activeCategory !== 'All') {
      filtered = filtered.filter(
        (r) => r.category.toLowerCase() === activeCategory.toLowerCase()
      );
    }
    if (searchQuery && searchQuery.trim() !== '') {
      const q = searchQuery.toLowerCase().trim();
      filtered = filtered.filter(
        (r) =>
          r.title.toLowerCase().includes(q) ||
          r.description.toLowerCase().includes(q) ||
          (r.tags && r.tags.some((t) => t.toLowerCase().includes(q)))
      );
    }

    if (!filtered.length) {
      container.innerHTML =
        '<div class="empty-state">No vault resources found for the selected category.</div>';
      return;
    }

    container.innerHTML = filtered
      .map(
        (res) => `
        <article class="resource-card">
          <div>
            <div class="card-meta-row">
              <span class="category-tag tag-default">${escapeHTML(res.category)}</span>
              <span class="difficulty-badge">By ${escapeHTML(res.author)}</span>
            </div>
            <h3 class="resource-title">${escapeHTML(res.title)}</h3>
            <p class="resource-desc">${escapeHTML(res.description)}</p>
            <div class="tags-wrapper">
              ${(res.tags || []).map((t) => `<span class="tag-item">#${escapeHTML(t)}</span>`).join('')}
            </div>
          </div>
          <a class="btn-secondary" href="${escapeHTML(res.url)}" target="_blank" rel="noopener noreferrer">
            Access Resource &rarr;
          </a>
        </article>
      `
      )
      .join('');
  }

  // 4. Render Grindset Leaderboard (Grindset Section)
  function renderLeaderboard(container, leaderboardData) {
    if (!container) return;

    if (!leaderboardData || !leaderboardData.length) {
      container.innerHTML = '<div class="empty-state">No leaderboard entries available.</div>';
      return;
    }

    const sorted = [...leaderboardData].sort((a, b) => b.score - a.score);

    let html = `
      <div style="width: 100%; overflow-x: auto; background-color: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 8px;">
        <table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 0.95rem;">
          <thead>
            <tr style="background-color: var(--bg-subtle, rgba(255,255,255,0.05)); border-bottom: 1px solid var(--border-color);">
              <th style="padding: 14px 16px; font-weight: 700;">Rank</th>
              <th style="padding: 14px 16px; font-weight: 700;">Member</th>
              <th style="padding: 14px 16px; font-weight: 700;">GitHub Handle</th>
              <th style="padding: 14px 16px; font-weight: 700;">Target Role</th>
              <th style="padding: 14px 16px; font-weight: 700;">Streak / Score</th>
              <th style="padding: 14px 16px; font-weight: 700;">Tech Stack</th>
              <th style="padding: 14px 16px; font-weight: 700;">Action</th>
            </tr>
          </thead>
          <tbody>
    `;

    sorted.forEach((member, index) => {
      const rank = index + 1;
      const rankBadgeColor = rank === 1 ? 'color: #eab308; font-weight: 800;' : rank === 2 ? 'color: #94a3b8; font-weight: 800;' : rank === 3 ? 'color: #f97316; font-weight: 800;' : 'color: var(--text-muted);';
      const techTags = (member.techStack || [])
        .map((t) => `<span style="font-size: 0.75rem; padding: 2px 8px; background: var(--bg-subtle, rgba(255,255,255,0.05)); border: 1px solid var(--border-color); border-radius: 4px; margin-right: 4px; margin-bottom: 4px; display: inline-block;">${escapeHTML(t)}</span>`)
        .join('');

      html += `
        <tr style="border-bottom: 1px solid var(--border-color);">
          <td style="padding: 14px 16px;"><span style="${rankBadgeColor}">#${rank}</span></td>
          <td style="padding: 14px 16px; font-weight: 700;">${escapeHTML(member.name)}</td>
          <td style="padding: 14px 16px; color: var(--text-muted);">@${escapeHTML(member.username)}</td>
          <td style="padding: 14px 16px;">${escapeHTML(member.role)}</td>
          <td style="padding: 14px 16px;">
            <div style="font-weight: 700; color: var(--accent-primary, #38bdf8);">${member.score} pts</div>
            <div style="font-size: 0.75rem; color: var(--text-muted);">${member.streakDays} day streak</div>
          </td>
          <td style="padding: 14px 16px;">${techTags}</td>
          <td style="padding: 14px 16px;">
            <a href="${escapeHTML(member.githubUrl)}" target="_blank" rel="noopener noreferrer" class="btn-secondary" style="font-size: 0.8rem; padding: 4px 10px; display: inline-block;">
              GitHub &rarr;
            </a>
          </td>
        </tr>
      `;
    });

    html += `
          </tbody>
        </table>
      </div>
    `;

    container.innerHTML = html;
  }

  // 5. Render Centralized Modal Window Content
  function openModal(title, categoryTag, metaInfo, stepsContentText) {
    const modalOverlay = document.getElementById('app-modal');
    const modalTitle = document.getElementById('modal-title-elem');
    const modalBody = document.getElementById('modal-body-elem');

    if (!modalOverlay || !modalTitle || !modalBody) return;

    modalTitle.textContent = title;

    let html = '';
    if (categoryTag) {
      html += `<div style="margin-bottom: 0.75rem;"><span class="category-tag tag-cli">${escapeHTML(categoryTag)}</span></div>`;
    }
    if (metaInfo) {
      html += `<p style="margin-bottom: 1rem; color: var(--text-muted); font-size: 0.9rem;">${escapeHTML(metaInfo)}</p>`;
    }
    if (stepsContentText) {
      html += `<div class="guide-instructions">${escapeHTML(stepsContentText)}</div>`;
    }

    modalBody.innerHTML = html;
    modalOverlay.classList.add('active');
    modalOverlay.setAttribute('aria-hidden', 'false');
  }

  function closeModal() {
    const modalOverlay = document.getElementById('app-modal');
    if (modalOverlay) {
      modalOverlay.classList.remove('active');
      modalOverlay.setAttribute('aria-hidden', 'true');
    }
  }

  return {
    renderRoadmap,
    renderGuides,
    renderResources,
    renderLeaderboard,
    openModal,
    closeModal
  };
})();