import { defineModuleUi } from "@ekklesia/module-ui-sdk";
import styles from "./styles.css";

/**
 * A real module UI compiled by the canonical pipeline. It imports the public SDK so the built
 * artifact proves the whole loop closes: SDK source -> esbuild bundle -> browser URL -> host loader.
 *
 * React is deliberately absent — the module template already proves the React path end to end, and
 * omitting it keeps this artifact small enough to serve as a `data:` URL. It does import a local
 * stylesheet, so the built artifact also proves the CSS half of that loop: `.css` source -> compiled
 * text inside the declared artifact -> installed in the isolated root at mount (ADR 0040).
 */
export default defineModuleUi({
  id: "example",
  version: "0.1.0",
  styles,
  async mount(container, context) {
    const response = await context.api.request("records");
    const label = context.principal.kind === "authenticated" ? context.principal.userId : "guest";
    container.textContent = `${context.moduleId}:${response.status}:${label}`;
    return () => {
      container.textContent = "";
    };
  },
});