import { designToken, installEkklesiaDesignTokens } from "@ekklesia/design-tokens";
import { EkklesiaUiStyles } from "@ekklesia/ui";
import { createRoot } from "react-dom/client";
import type { EkklesiaHostConfig } from "../host-protocol.js";
import { parseDisplayRoute } from "../host-protocol.js";
import { DisplayApp } from "./DisplayApp.js";
import { type DisplayConnectivitySource, registerDisplayServiceWorker } from "./offline-status.js";

/**
 * The display host is always served from the API's own origin, in either topology (ADR 0045): its
 * device cookies, pairing, descriptors, module requests, and realtime are all same-origin, and its
 * offline cache stores only same-origin responses (ADR 0043).
 */
const config: EkklesiaHostConfig = {
  apiBaseUrl: window.location.origin,
};

const container = document.getElementById("ekklesia-display");
if (!container) {
  throw new Error("The Ekklesia display host requires a #ekklesia-display element.");
}

/**
 * Offline resilience is registered as an enhancement and never as a prerequisite (ADR 0043): a
 * browser without service workers, or a policy that refuses the registration, leaves a display that
 * works exactly as it did before. The promise is deliberately not awaited — a screen must render
 * while its worker is still installing.
 */
void registerDisplayServiceWorker(
  typeof navigator === "undefined" ? undefined : navigator.serviceWorker,
);

/** The two real browser sources the connectivity monitor reads. Passed as data so nothing below the
 * entry point touches a global. */
const connectivity: DisplayConnectivitySource = {
  addEventListener: (type, listener) => window.addEventListener(type, listener),
  initialOnline: navigator.onLine,
  removeEventListener: (type, listener) => window.removeEventListener(type, listener),
  ...(typeof navigator === "undefined" || !navigator.serviceWorker
    ? {}
    : { serviceWorkerMessages: navigator.serviceWorker }),
};

let moduleId: string | undefined;
try {
  moduleId = parseDisplayRoute(window.location.pathname);
} catch {
  moduleId = undefined;
}

/** The display is its own host root, so it installs the same default theme the Dashboard does; a
 * module's display artifact then inherits the tokens into its isolated root (ADR 0039). */
installEkklesiaDesignTokens(document);

createRoot(container).render(
  <>
    <EkklesiaUiStyles />
    {moduleId ? (
      <DisplayApp config={config} connectivity={connectivity} moduleId={moduleId} />
    ) : (
      <div
        data-testid="display-route-invalid"
        style={{
          alignItems: "center",
          color: designToken("text.secondary"),
          display: "flex",
          fontFamily: designToken("typography.family-sans"),
          height: "100%",
          justifyContent: "center",
          minHeight: "100dvh",
          padding: designToken("spacing.lg"),
          textAlign: "center",
        }}
      >
        This display is unavailable.
      </div>
    )}
  </>,
);