import { cleanup, render, screen } from "@testing-library/react";
import { afterEach, describe, expect, it } from "vitest";

import { model3dModule } from "../../modules/built-ins/model-3d/model-3d-module";
import { defineToolcraft } from "../../schema/define-toolcraft";
import { ToolcraftApp } from "./toolcraft-app";

afterEach(cleanup);

const ProductModelCanvas = () => <span data-testid="product-model-canvas" />;

function createModelCanvasSchema() {
  return defineToolcraft({
    base: {
      identity: { id: "runtime-test", title: "Toolcraft App" },
      canvas: { enabled: true, size: { height: 180, unit: "px", width: 320 } },
      panels: {
        controls: {
          sections: [
            {
              id: "test-section-1",
              controls: {
                model: {
                  applicability: { mode: "always" as const },
                  assetKind: "model",
                  target: "source.model",
                  type: "fileDrop",
                },
              },
              title: "Source",
            },
          ],
          title: "Controls",
        },
      },
    },
    modules: [model3dModule()],
  });
}

describe("Toolcraft model presentation composition", () => {
  it.each([
    ["default", undefined],
    ["explicit runtime", { mode: "runtime" as const }],
  ])(
    "keeps the %s renderer mounted when generic media is disabled",
    (_label, modelPresentation) => {
      const { container } = render(
        <ToolcraftApp
          canvasContent={<ProductModelCanvas />}
          modelPresentation={modelPresentation}
          renderDefaultCanvasMedia={false}
          schema={createModelCanvasSchema()}
        />,
      );

      expect(
        container.querySelector(
          '[data-canvas-model-prewarm-target="source.model"]',
        ),
      ).not.toBeNull();
      expect(screen.getByTestId("product-model-canvas")).toBeTruthy();
    },
  );

  it("suppresses standard layers only for declared custom targets", () => {
    const schema = defineToolcraft({
      base: {
        identity: { id: "runtime-test", title: "Toolcraft App" },
        canvas: {
          enabled: true,
          size: { height: 180, unit: "px", width: 320 },
        },
        panels: {
          controls: {
            sections: [
              {
                id: "test-section-2",
                controls: {
                  environment: {
                    applicability: { mode: "always" as const },
                    assetKind: "model",
                    target: "source.environment",
                    type: "fileDrop",
                  },
                  model: {
                    applicability: { mode: "always" as const },
                    assetKind: "model",
                    target: "source.model",
                    type: "fileDrop",
                  },
                },
                title: "Source",
              },
            ],
            title: "Controls",
          },
        },
      },
      modules: [model3dModule({ presentation: "custom" })],
    });
    const { container } = render(
      <ToolcraftApp
        canvasContent={<ProductModelCanvas />}
        modelPresentation={{
          consumers: [{ id: "product-model", sourceTarget: "source.model" }],
          mode: "custom",
        }}
        renderDefaultCanvasMedia={false}
        schema={schema}
      />,
    );

    expect(
      container.querySelector(
        '[data-canvas-model-prewarm-target="source.model"]',
      ),
    ).toBeNull();
    expect(
      container.querySelector(
        '[data-canvas-model-prewarm-target="source.environment"]',
      ),
    ).not.toBeNull();
    expect(screen.getByTestId("product-model-canvas")).toBeTruthy();
  });
});