import { describe, expect, it } from "vitest";
import {
  defineToolcraft,
  renderControlsPanelWithSchema,
  screen,
} from "../testing/controls-panel-test-utils";

describe("ControlsPanel inline layout", () => {
  it("renders compact switch pairs inline", () => {
    const schema = defineToolcraft({
      canvas: { enabled: false },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                glow: {
                  defaultValue: true,
                  label: "Glow",
                  target: "style.glow",
                  type: "switch",
                },
                loop: {
                  defaultValue: false,
                  label: "Loop",
                  target: "animation.loop",
                  type: "switch",
                },
              },
              layoutGroups: [
                {
                  columns: 2,
                  controls: ["glow", "loop"],
                  layout: "inline",
                },
              ],
              title: "Style",
            },
          ],
          title: "Controls",
        },
      },
    });

    const { container } = renderControlsPanelWithSchema(schema);

    expect(screen.getByText("Glow")).toBeTruthy();
    expect(screen.getByText("Loop")).toBeTruthy();
    expect(
      container.querySelector('[data-control-layout="inline"][data-control-layout-columns="2"]'),
    ).toBeTruthy();
  });

  it("automatically renders adjacent short switches for one entity inline", () => {
    const schema = defineToolcraft({
      canvas: { enabled: false },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                snapX: {
                  defaultValue: true,
                  label: "Snap X",
                  target: "icon.snapX",
                  type: "switch",
                },
                snapY: {
                  defaultValue: true,
                  label: "Snap Y",
                  target: "icon.snapY",
                  type: "switch",
                },
              },
              title: "Icon",
            },
          ],
          title: "Controls",
        },
      },
    });

    const { container } = renderControlsPanelWithSchema(schema);
    const inlineGroup = container.querySelector(
      '[data-control-layout="inline"][data-control-layout-columns="2"]',
    );

    expect(screen.getByText("Snap X")).toBeTruthy();
    expect(screen.getByText("Snap Y")).toBeTruthy();
    expect(inlineGroup).toBeTruthy();
    expect(inlineGroup?.textContent).toContain("Snap X");
    expect(inlineGroup?.textContent).toContain("Snap Y");
  });

  it("renders Background and Infinity inline with Background color below in runtime Setup", () => {
    const schema = defineToolcraft({
      canvas: {
        enabled: true,
        sizing: { mode: "editable-output" },
      },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                includeBackground: {
                  defaultValue: true,
                  description:
                    "Controls PNG background transparency while preview and video keep the background.",
                  label: "Include",
                  target: "export.includeBackground",
                  type: "switch",
                },
                background: {
                  defaultValue: { hex: "#0F0F0F" },
                  label: false,
                  target: "appearance.background",
                  type: "color",
                },
              },
              layoutGroups: [
                {
                  columns: 2,
                  controls: ["includeBackground", "background"],
                  layout: "inline",
                },
              ],
              title: "Background",
            },
          ],
          title: "Controls",
        },
      },
    });

    const { container } = renderControlsPanelWithSchema(schema);
    const backgroundField = screen.getByText("Background").closest('[role="group"]');
    const infinityField = screen
      .getByText("Infinity canvas")
      .closest('[role="group"]');
    const modeGroup = backgroundField?.closest(
      '[data-control-layout="inline"][data-control-layout-columns="2"]',
    );

    expect(screen.getAllByText("Background")).toHaveLength(1);
    expect(screen.getByText("Background color")).toBeTruthy();
    expect(
      screen.queryByRole("button", { name: "Background help" }),
    ).toBeNull();
    expect(screen.getAllByRole("switch")).toHaveLength(2);
    expect(modeGroup).toBeTruthy();
    expect(infinityField?.closest('[data-control-layout="inline"]')).toBe(modeGroup);
    expect(modeGroup?.className).toContain("gap-x-2.5");
    expect(modeGroup?.getAttribute("style")).toContain(
      "repeat(2, minmax(0, 1fr))",
    );
    expect(
      container.querySelector(
        '[data-control-layout="inline"][data-control-layout-kind="toggleParameter"]',
      ),
    ).toBeNull();
  });

  it("renders short visible toggle plus parameter rows as equal-width toggle-parameter rows", () => {
    const schema = defineToolcraft({
      canvas: { enabled: false },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                loop: {
                  defaultValue: true,
                  label: "Loop",
                  target: "animation.loop",
                  type: "switch",
                },
                duration: {
                  defaultValue: "8",
                  label: "Duration",
                  target: "animation.duration",
                  type: "text",
                },
              },
              layoutGroups: [
                {
                  columns: 2,
                  controls: ["loop", "duration"],
                  layout: "inline",
                },
              ],
              title: "Playback",
            },
          ],
          title: "Controls",
        },
      },
    });

    const { container } = renderControlsPanelWithSchema(schema);
    const toggleParameterGroup = container.querySelector(
      '[data-control-layout="inline"][data-control-layout-kind="toggleParameter"]',
    );

    expect(screen.getByText("Loop")).toBeTruthy();
    expect(screen.queryByText("Duration")).toBeNull();
    expect(toggleParameterGroup).toBeTruthy();
    expect(toggleParameterGroup?.className).toContain("gap-x-2.5");
    expect(toggleParameterGroup?.getAttribute("style")).toContain(
      "repeat(2, minmax(0, 1fr))",
    );
  });

  it("keeps segmented controls full-width even when an inline row is requested", () => {
    const schema = defineToolcraft({
      canvas: { enabled: false },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                includeText: {
                  defaultValue: true,
                  label: "Include",
                  target: "text.enabled",
                  type: "switch",
                },
                dragTarget: {
                  defaultValue: "glass",
                  label: "Drag",
                  options: [
                    { label: "Glass", value: "glass" },
                    { label: "Text", value: "text" },
                  ],
                  target: "text.dragTarget",
                  type: "segmented",
                },
              },
              layoutGroups: [
                {
                  columns: 2,
                  controls: ["includeText", "dragTarget"],
                  layout: "inline",
                },
              ],
              title: "Glass Text",
            },
          ],
          title: "Controls",
        },
      },
    });

    const { container } = renderControlsPanelWithSchema(schema);

    expect(screen.getByText("Include")).toBeTruthy();
    expect(screen.getByText("Drag")).toBeTruthy();
    expect(container.querySelector('[data-control-layout="inline"]')).toBeNull();
    expect(container.querySelector('[data-slot="toggle-group"]')).toBeTruthy();
  });

  it("stacks switch pairs when an inline label would truncate", () => {
    const schema = defineToolcraft({
      canvas: { enabled: false },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                background: {
                  defaultValue: true,
                  label: "Background",
                  target: "output.background",
                  type: "switch",
                },
                diagnosticOverlay: {
                  defaultValue: false,
                  label: "Diagnostic overlay",
                  target: "debug.diagnosticOverlay",
                  type: "switch",
                },
              },
              layoutGroups: [
                {
                  columns: 2,
                  controls: ["background", "diagnosticOverlay"],
                  layout: "inline",
                },
              ],
              title: "Output",
            },
          ],
          title: "Controls",
        },
      },
    });

    const { container } = renderControlsPanelWithSchema(schema);

    expect(screen.getByText("Background")).toBeTruthy();
    expect(screen.getByText("Diagnostic overlay")).toBeTruthy();
    expect(
      container.querySelector('[data-control-layout="inline"][data-control-layout-columns="2"]'),
    ).toBeNull();
  });
});