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';
import { tailwind } from '../styles/tailwind.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 = [
    tailwind,
    css`
      :host {
        display: block;
      }
    `,
  ];

  /**
   * `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`
      <div class="mx-auto max-w-2xl px-4 py-8">
        <app-nav></app-nav>
        ${this.router.outlet()}
      </div>
    `;
  }
}

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