import { html, LitElement } from "lit";
import { customElement, state } from "lit/decorators.js";
import "./router";
import { Routes } from "@supersoniks/concorde/core/utils/route";

import { tailwind } from "../../../../docs/tailwind";
const defaultRoute = {
  user: "#user/:id/:slug",
};
export type AppRoutes = typeof defaultRoute;

Routes.register<AppRoutes>(defaultRoute);

@customElement("sonic-router-demo")
export class RouterDemo extends LitElement {
  static styles = [tailwind];

  @state()
  private routes = {
    "#home": () => html`
      <div class="p-4 border border-gray-200 rounded-md">
        <h1 class="text-xl font-medium mb-2">Accueil</h1>
        <p class="text-gray-600">Bienvenue sur la démo du router</p>
      </div>
    `,
    [defaultRoute.user]: ({ slug, id }: { id: string; slug: string }) => html`
      <div class="p-4 border border-gray-200 rounded-md">
        <h1 class="text-xl font-medium mb-2">Profil Utilisateur ${id}</h1>
        <p class="text-gray-600">Slug: ${slug}</p>
      </div>
    `,
    "#products/(\\d+)/(\\w+)": ([id, slug]: [string, string]) => html`
      <div class="p-4 border border-gray-200 rounded-md">
        <h1 class="text-xl font-medium mb-2">Produit ${id}</h1>
        <p class="text-gray-600">Slug: ${slug}</p>
      </div>
    `,
    fallback: () => html`
      <div class="p-4 border border-red-200 bg-red-50 rounded-md">
        <h1 class="text-xl font-medium text-red-800 mb-2">404</h1>
        <p class="text-red-600">Page non trouvée</p>
      </div>
    `,
  };

  render() {
    return html`
      <div class="p-4">
        <h2 class="text-2xl font-medium mb-6">Démo du router</h2>

        <div class="flex gap-4 mb-6">
          <sonic-button href="#home"> Accueil </sonic-button>
          <sonic-button href="#user/123/mySlug"> Utilisateur 123 </sonic-button>
          <sonic-button href="#products/456/mySlug"> Produit 456 </sonic-button>
          <sonic-button href="#invalid"> 404 </sonic-button>
        </div>

        <sonic-router .routes=${this.routes}></sonic-router>
      </div>
    `;
  }
}