import { getState, setState } from '../state/store.js';

export interface NavItem {
  id: string;
  label: string;
  icon?: string;
  requiresAdmin?: boolean;
}

const defaultNav: NavItem[] = [
  { id: 'overview', label: 'Uebersicht', icon: '[*]' },
  { id: 'tickets', label: 'Ticketsystem', icon: '[*]' },
  { id: 'modules', label: 'Module', icon: '[*]' },
  { id: 'settings', label: 'Einstellungen', icon: '[*]' },
  { id: 'events', label: 'Events', icon: '[*]' },
  { id: 'admin', label: 'Admin', icon: '[*]', requiresAdmin: true }
];

export function renderSidebar(container: HTMLElement, isAdmin: boolean) {
  container.innerHTML = '';
  const brand = document.createElement('div');
  brand.className = 'brand';
  brand.textContent = 'Papo Control';
  const nav = document.createElement('div');
  nav.className = 'nav';

  defaultNav.forEach((item) => {
    if (item.requiresAdmin && !isAdmin) return;
    const a = document.createElement('a');
    a.href = `#${item.id}`;
    a.dataset.target = item.id;
    a.innerHTML = `<span class="icon">${item.icon || ''}</span>${item.label}`;
    nav.appendChild(a);
  });

  container.appendChild(brand);
  container.appendChild(nav);
}

export function initNavigation(onChange: (section: string) => void) {
  const navLinks = Array.from(document.querySelectorAll<HTMLAnchorElement>('.nav a'));
  const activate = (section: string) => {
    navLinks.forEach((link) => link.classList.toggle('active', link.dataset.target === section));
    document.querySelectorAll<HTMLElement>('.section').forEach((sec) => {
      sec.classList.toggle('active', sec.id === `section-${section}`);
    });
    setState({}); // trigger listeners for potential observers
    onChange(section);
  };

  navLinks.forEach((link) => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      const target = link.dataset.target || 'overview';
      history.replaceState(null, '', `#${target}`);
      activate(target);
    });
  });

  const initial = (location.hash || '#overview').replace('#', '');
  activate(initial);

  window.addEventListener('hashchange', () => {
    const section = (location.hash || '#overview').replace('#', '');
    activate(section);
  });
}