import { defineModuleUi, type ModuleUiHostContext } from "@ekklesia/module-ui-sdk";
import { createRoot } from "react-dom/client";
import displayStyles from "./styles.css";

function ExampleDisplay(props: { readonly context: ModuleUiHostContext }) {
  const mayView = props.context.permissions.has("example.display.view");

  return (
    <main className="example-display" data-testid="example-display">
      <h1 className="example-display__headline">
        {mayView
          ? `Example full-screen display (${props.context.moduleId})`
          : "Display unavailable"}
      </h1>
    </main>
  );
}

/**
 * A display uses the same role-neutral ABI as the primary UI. Its separate manifest entrypoint —
 * not a mode flag in `ModuleUiHostContext` — tells a host which artifact it is mounting.
 *
 * It declares its own stylesheet, isolated from the primary UI's exactly as it is from the
 * Dashboard's: two artifacts of the same module share no styles unless they share a source file
 * (ADR 0040).
 */
export default defineModuleUi({
  id: "example",
  version: "0.1.0",
  styles: displayStyles,
  mount(container, context) {
    const root = createRoot(container);
    root.render(<ExampleDisplay context={context} />);
    return () => root.unmount();
  },
});