// ============================================================
// frontend/assets/js/layout.js — Injects navbar + footer on every page
// ============================================================

function getNavLinks() {
  const user = Auth.getUser();
  const authLinks = user
    ? `<li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
            <i class="bi bi-person-circle me-1"></i>${user.name.split(' ')[0]}
          </a>
          <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="/healthagency/frontend/pages/dashboard.html"><i class="bi bi-grid me-2"></i>Dashboard</a></li>
            ${user.role === 'admin' ? `<li><a class="dropdown-item" href="/healthagency/frontend/pages/admin/index.html"><i class="bi bi-shield-check me-2"></i>Admin Panel</a></li>` : ''}
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item text-danger" href="#" id="logout-btn"><i class="bi bi-box-arrow-right me-2"></i>Logout</a></li>
          </ul>
       </li>`
    : `<li class="nav-item"><a class="nav-link" href="/healthagency/frontend/pages/login.html">Login</a></li>
       <li class="nav-item"><a class="btn btn-ha-primary ms-2 px-3 py-2" href="/healthagency/frontend/pages/register.html">Get Started</a></li>`;

  return authLinks;
}

function injectNavbar() {
  const path = window.location.pathname;
  const isActive = (href) => path.includes(href) ? 'active' : '';

  const nav = `
  <nav class="navbar navbar-expand-lg ha-navbar">
    <div class="container">
      <a class="navbar-brand" href="/healthagency/frontend/index.html">
        <i class="bi bi-heart-pulse-fill me-2"></i>DHI-LM
      </a>
      <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navMenu">
        <ul class="navbar-nav ms-auto align-items-center gap-1">
          <li class="nav-item"><a class="nav-link ${isActive('index')}" href="/healthagency/frontend/index.html">Home</a></li>
          <li class="nav-item"><a class="nav-link ${isActive('about')}" href="/healthagency/frontend/pages/about.html">About</a></li>
          <li class="nav-item"><a class="nav-link ${isActive('events')}" href="/healthagency/frontend/pages/events.html">Events</a></li>
          <li class="nav-item"><a class="nav-link ${isActive('classes')}" href="/healthagency/frontend/pages/classes.html">Classes</a></li>
          <li class="nav-item"><a class="nav-link ${isActive('shop')}" href="/healthagency/frontend/pages/shop.html">Shop</a></li>
          <li class="nav-item">
            <a class="nav-link cart-wrapper position-relative" href="/healthagency/frontend/pages/cart.html">
              <i class="bi bi-bag"></i>
              <span id="cart-badge"></span>
            </a>
          </li>
          ${getNavLinks()}
        </ul>
      </div>
    </div>
  </nav>`;

  document.body.insertAdjacentHTML('afterbegin', nav);

  // logout handler
  const logoutBtn = document.getElementById('logout-btn');
  if (logoutBtn) {
    logoutBtn.addEventListener('click', (e) => {
      e.preventDefault();
      Auth.logout();
      window.location.href = '/healthagency/frontend/index.html';
    });
  }

  Cart.updateBadge();
}

function injectFooter() {
  const footer = `
  <footer class="ha-footer">
    <div class="container">
      <div class="row g-4">
        <div class="col-lg-4">
          <h5><i class="bi bi-heart-pulse-fill me-2 text-primary-ha"></i>DIET AND HEALTH INSTITUTE OF LIFESTYLE MEDICINE(DHI-LM)</h5>
          <p class="small" style="color:rgba(255,255,255,.55);max-width:280px;">
            Empowering lives through health education, wellness classes, and premium health products.
          </p>
        </div>
        <div class="col-6 col-lg-2">
          <h5>Company</h5>
          <a href="/healthagency/frontend/pages/about.html">About Us</a>
          <a href="/healthagency/frontend/pages/about.html#mission">Mission</a>
          <a href="/healthagency/frontend/pages/about.html#values">Core Values</a>
          <a href="/healthagency/frontend/pages/about.html#vision">Our Vision</a>
        </div>
        <div class="col-6 col-lg-2">
          <h5>Services</h5>
          <a href="/healthagency/frontend/pages/classes.html">Online Classes</a>
          <a href="/healthagency/frontend/pages/shop.html">Health Shop</a>
          <a href="/healthagency/frontend/pages/events.html">Events</a>
        </div>
        <div class="col-6 col-lg-2">
          <h5>Account</h5>
          <a href="/healthagency/frontend/pages/login.html">Login</a>
          <a href="/healthagency/frontend/pages/register.html">Register</a>
          <a href="/healthagency/frontend/pages/dashboard.html">Dashboard</a>
        </div>
        <div class="col-6 col-lg-2">
          <h5>Contact</h5>
          <a href="mailto:info@healthvibe.com">info@diet&health.com</a>
          <a href="tel:+2348000000000">+234 800 000 0000</a>
          <div class="d-flex gap-3 mt-2">
            <a href="#"><i class="bi bi-facebook fs-5"></i></a>
            <a href="#"><i class="bi bi-instagram fs-5"></i></a>
            <a href="#"><i class="bi bi-twitter-x fs-5"></i></a>
            <a href="#"><i class="bi bi-whatsapp fs-5"></i></a>
          </div>
        </div>
      </div>
      <div class="ha-footer-bottom">
        <p>&copy; ${new Date().getFullYear()} DIET AND HEALTH INSTITUTE OF LIFESTYLE MEDICINE(DHI-LM). All rights reserved.</p>
      </div>
    </div>
  </footer>`;

  document.body.insertAdjacentHTML('beforeend', footer);
}

document.addEventListener('DOMContentLoaded', () => {
  injectNavbar();
  injectFooter();
});
