interface AuthUser {
  id: number;
  username: string;
}

class AppNav extends HTMLElement {
  async connectedCallback(): Promise<void> {
    const res = await fetch('/api/auth/me');
    if (!res.ok) { location.href = '/login.html'; return; }
    const user = await res.json() as AuthUser;

    this.innerHTML = `
      <nav>
        <span class="nav-brand">Roject</span>
        <div class="nav-links">
          <a href="/dashboard.html">Dashboard</a>
          <a href="/groups.html">Groups</a>
          <a href="/projects.html">Projects</a>
        </div>
        <div class="nav-user">
          <span>${user.username}</span>
          <button class="btn-logout">Logout</button>
          <button class="btn-delete">Delete Account</button>
        </div>
      </nav>
    `;

    this.querySelector('.btn-logout')!.addEventListener('click', async () => {
      await fetch('/api/auth/logout', { method: 'POST' });
      location.href = '/login.html';
    });

    this.querySelector('.btn-delete')!.addEventListener('click', async () => {
      if (!confirm('Delete your account? This cannot be undone.')) return;
      await fetch('/api/auth/me', { method: 'DELETE' });
      location.href = '/login.html';
    });
  }
}
customElements.define('app-nav', AppNav);