import { LitElement, html, css } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { Router } from './router/router';
import { authService } from './services/auth.service';
import type { AuthLevel } from './router/router'; 
//import './components/tt/tt-nav-bar';

@customElement('app-root')
export class AppRoot extends LitElement {
  private router!: Router;
  @state() private currentPath = '/';

  static styles = css`
    :host { display: flex; flex-direction: column; min-height: 100vh; }
    main { flex: 1 0 auto; display: flex; flex-direction: column; }
  `;

  firstUpdated() {
    authService.init();
    const outlet = this.shadowRoot!.getElementById('outlet') as HTMLElement;

    this.router = new Router(outlet, [
      // ── Public ──────────────────────────────────────────
      {
        path: '/',
        auth: 'public',
        exact: true,
        view: async () => {
          await import('./pages/home-page.js');
          return document.createElement('home-page');
        },
      },
      {
        path: '/login',
        auth: 'public',
        view: async () => {
          await import('./pages/auth/login-page.js');
          return document.createElement('login-page');
        },
      },
      {
        path: '/register',
        auth: 'public',
        view: async () => {
          await import('./pages/auth/register-page.js');
          return document.createElement('register-page');
        },
      },

      // ── Dev ─────────────────────────────────────────────
      {
        path: '/dev/icons',
        auth: 'public',
        view: async () => {
          await import('./pages/dev/icons-page.js');
          return document.createElement('dev-icons-page');
        },
      },

      // ── Competition Center (User-Login) ──────────────────
      {
        path: '/cc',
        auth: 'user',
        view: async () => {
          await import('./pages/cc/cc-home-page.js');
          return document.createElement('cc-home-page');
        },
      },
    ],

    // Guard-Logik
    {
      canActivate: async (auth: AuthLevel) => {
        if (auth === 'public') return true;
        if (auth === 'code')   return authService.hasTeamCode;
        if (auth === 'user')   return authService.isLoggedIn;
        if (auth === 'admin')  return authService.isAdmin;
        return false;
      },
      onFail: (auth: AuthLevel, navigate) => {
        if (auth === 'code')  navigate('/tt/login');   // Code-Eingabe-Seite
        if (auth === 'user')  navigate('/login');
        if (auth === 'admin') navigate('/login');
      },
    });

    this.router.onRouteChange = (path) => {
      this.currentPath = path;
    };

    this.router.resolve();
    window.addEventListener('nav', (e: any) => this.router.navigate(e.detail.path));
  }

  private get section() {
    if (this.currentPath.startsWith('/cc'))    return 'cc';
    if (this.currentPath.startsWith('/admin')) return 'admin';
    if (this.currentPath.startsWith('/tt'))    return 'tt';
    return 'public';
  }

  render() {
    return html`
      ${this.section === 'cc'     ? html`<cc-nav-bar></cc-nav-bar>`
      : this.section === 'admin'  ? html`<admin-nav-bar></admin-nav-bar>`
      : this.section === 'tt'     ? html`<tt-nav-bar></tt-nav-bar>`
      :                             html`<nav-bar></nav-bar>`}
      <main id="outlet"></main>
      <footer-bar></footer-bar>
    `;
  }
}