import { apiPost } from '../api.js';
import { esc } from './utils.js';

function navDisplayName(user) {
  if (!user) return '';
  const a = [user.firstName, user.lastName].filter(
    (x) => x != null && String(x).trim() !== '',
  );
  return a.length ? a.map((x) => String(x).trim()).join(' ') : user.username;
}

/**
 * @param {string} [activeNav] 'start' | 'machines' | 'tickets' | 'options' | 'users'
 */
export function updateNav(st, activeNav = '') {
  const nav = document.getElementById('main-nav');
  if (!nav) return;
  if (!st.loggedIn) {
    nav.innerHTML = '';
    return;
  }
  const isAdmin = st.user?.role === 'admin';
  const na = (key) => (activeNav === key ? 'nav-active' : '');
  nav.innerHTML = `
    <a href="/start.html" class="${na('start')}">Start</a>
    <a href="/machines.html" class="${na('machines')}">Maschinen</a>
    <a href="/tickets.html" class="${na('tickets')}">Tickets</a>
    ${
      isAdmin
        ? `<a href="/options.html" class="${na('options')}">Optionen</a><a href="/users.html" class="${na('users')}">Benutzer</a>`
        : ''
    }
    <div class="nav-user-area">
      <span class="nav-user muted">${esc(navDisplayName(st.user))}</span>
      <button type="button" class="danger btn-nav-logout" id="btn-logout">Abmelden</button>
    </div>`;
  const btn = document.getElementById('btn-logout');
  if (btn) {
    btn.onclick = async () => {
      try {
        await apiPost('/auth/logout', {});
      } catch {
        /* ignore */
      }
      updateNav({ loggedIn: false });
      location.href = '/login.html';
    };
  }
}