import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { Router } from '@lit-labs/router';

import './app-nav.js';
import '../pages/home-page.js';
import '../pages/about-page.js';
import '../pages/not-found-page.js';

/**
 * Root application shell.
 *
 * `Router` is the top-level routing controller. On connect it intercepts
 * same-origin link clicks and popstate, so plain `<a href="/about">` elements
 * navigate without a full page load — no custom link component required.
 *
 * Nested routes inside a page should use `Routes` (not `Router`) so they
 * cooperate with this controller instead of fighting it over the URL.
 */
@customElement('app-root')
export class AppRoot extends LitElement {
  static override styles = css`
    :host {
      display: block;
      max-width: var(--app-max-width, 46rem);
      margin: 0 auto;
      padding: calc(var(--app-space, 1rem) * 2) var(--app-space, 1rem);
    }
  `;

  /**
   * `path` uses URLPattern syntax, so `/users/:id` and `/files/*` work.
   * Matched groups are handed to `render()` as `params`.
   */
  private readonly router = new Router(
    this,
    [
      { path: '/', render: () => html`<home-page></home-page>` },
      { path: '/about', render: () => html`<about-page></about-page>` },
    ],
    {
      fallback: { render: () => html`<not-found-page></not-found-page>` },
    },
  );

  override render() {
    return html`
      <app-nav></app-nav>
      ${this.router.outlet()}
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'app-root': AppRoot;
  }
}