const AUTH_HOST = 'https://account.rokojori.com';
const APP_URL   = 'https://roject.rokojori.com';

interface JwtUser {
  userId:   string;
  email:    string;
  roles:    string[];
  products: string[];
}

class AppNav extends HTMLElement {
  async connectedCallback(): Promise<void> {
    const res = await fetch( '/api/auth/me' );

    if ( !res.ok ) {
      const loginHref = `${AUTH_HOST}/login.html?redirect=${encodeURIComponent( APP_URL )}`;
      this.innerHTML = `
        <nav>
          <span class="nav-brand">Roject</span>
          <div class="nav-links"></div>
          <div class="nav-user">
            <a href="${loginHref}">Log in</a>
          </div>
        </nav>
      `;
      return;
    }

    const user = await res.json() as JwtUser;
    const logoutHref = `${AUTH_HOST}/api/auth/logout?redirect=${encodeURIComponent( APP_URL )}`;

    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.email}</span>
          <a href="${logoutHref}">Log out</a>
        </div>
      </nav>
    `;
  }
}
customElements.define( 'app-nav', AppNav );