import { defineModuleUi } from "@ekklesia/module-ui-sdk";
import { EKKLESIA_UI_STYLESHEET } from "@ekklesia/ui";
import { createRoot } from "react-dom/client";
import { SignageDashboard } from "./SignageDashboard.js";
import ownStyles from "./styles.css";

/**
 * Signage's compiled management-UI artifact. `pnpm build` bundles this file and everything it
 * imports into the single browser artifact `entrypoints.ui` declares.
 *
 * `styles` is this artifact's complete stylesheet — the shared elements' rules plus Signage's own —
 * compiled in as text and installed by the host into this artifact's isolated root at mount
 * (ADR 0040). The design tokens both stylesheets reference are inherited from the host's own root
 * rather than bundled (ADR 0039).
 */
export default defineModuleUi({
	id: "signage",
	version: "0.1.3",
	styles: `${EKKLESIA_UI_STYLESHEET}\n${ownStyles}`,
	mount(container, context) {
		const root = createRoot(container);
		root.render(
			<SignageDashboard
				context={context}
				copyText={async (value) => {
					if (globalThis.navigator.clipboard === undefined) {
						throw new Error(
							"Clipboard access is not available in this browser.",
						);
					}
					await globalThis.navigator.clipboard.writeText(value);
				}}
			/>,
		);
		return () => root.unmount();
	},
});