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 ProjectHome 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 = `
        <div class="ph-hero">
          <h1 class="ph-brand">Roject</h1>
          <a class="ph-login" href="${ loginHref }">Log in</a>
        </div>
      `;
      return;
    }

    const user = await res.json() as JwtUser;
    const settingsRes = await fetch( '/api/user/settings' );
    const settings = settingsRes.ok ? await settingsRes.json() as Record<string, unknown> : {};

    const theme = ( settings[ 'theme' ] as string | undefined ) ?? 'default';
    await this.loadTheme( theme, user );
  }

  private async loadTheme( theme: string, user: JwtUser ): Promise<void> {
    if ( theme === 'italic-neon' ) {
      const italicNeonPath = '../project-list-italic-neon/project-list-italic-neon.js';
      await import( italicNeonPath );
      const el = document.createElement( 'project-list-italic-neon' ) as HTMLElement & { user: JwtUser };
      el.user = user;
      this.appendChild( el );
    } else {
      await import( '../project-list-default/project-list-default.js' );
      const el = document.createElement( 'project-list-default' ) as HTMLElement & { user: JwtUser };
      el.user = user;
      this.appendChild( el );
    }
  }
}

customElements.define( 'project-home', ProjectHome );

export {};