import { renderToString } from "react-dom/server";
import { describe, expect, test } from "vitest";
import { genericDashboardFixture } from "@dimensionlab/dashboard-model/fixtures";
import { dimensionLabDashboardFixture } from "$lib/dashboard-seed/dimensionlab";
import { AppStateView, dashboardHydrationTiles } from "./App";

describe("React app dashboard state view", () => {
  test("renders loading dashboard state", () => {
    const html = renderToString(
      <AppStateView
        dashboard={{
          state: "loading",
          title: "Loading Dashboard",
          subtitle: "Fetching active model",
          message: "Waiting for the active dashboard document.",
        }}
      />,
    );

    expect(html).toContain("Loading Dashboard");
    expect(html).toContain("Fetching active model");
  });

  test("renders an accessible theme toggle with the active theme", () => {
    const html = renderToString(
      <AppStateView
        dashboard={{
          state: "loading",
          title: "Loading Dashboard",
          subtitle: "Fetching active model",
          message: "Waiting for the active dashboard document.",
        }}
        theme="dark"
        onThemeChange={() => undefined}
      />,
    );

    expect(html).toContain('data-ui-theme-toggle="true"');
    expect(html).toContain('data-ui-theme-current="dark"');
    expect(html).toContain('aria-label="Light theme"');
    expect(html).toContain('aria-pressed="false"');
    expect(html).toContain("Theme");
    expect(html).toContain("Dark");
    expect(html).toContain("Light");
  });

  test("renders the dashboard shell while individual items hydrate", () => {
    const html = renderToString(
      <AppStateView
        dashboard={{
          state: "ready",
          document: genericDashboardFixture,
          schemaVersion: "dashboard.v1",
          currentRevisionId: "revision-1234567890",
        }}
        hydratingItemIds={new Set([
          "telemetry:service-uptime",
          "service:core-services:identity",
          "module:ambient",
          "status:runtime:status",
        ])}
      />,
    );

    expect(html).toContain("Operations Console");
    expect(html).toContain("Service Uptime");
    expect(html).toContain("Identity");
    expect(html).toContain("Environment");
    expect(html).not.toContain("Loading Dashboard");
    expect(html).toContain(
      'data-severity="loading" data-model-id="service-uptime"',
    );
    expect(html).toContain('data-severity="loading" data-model-id="identity"');
    expect(html).toContain('data-severity="loading" data-model-id="ambient"');
    expect(html).toContain('data-severity="loading" data-model-id="runtime:status"');
  });

  test("hydrates every status cell from the Dimension Lab shell", () => {
    expect(dashboardHydrationTiles(dimensionLabDashboardFixture)).toContainEqual({
      kind: "status",
      stripId: "footer-status",
      id: "auto-refresh",
    });
  });
});