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

describe("ControlsPanel structure", () => {
  it("renders schema sections and standalone controls through the panel visual shell", () => {
    const { container } = renderControlsPanel();

    expect(screen.getByText("Generation Controls")).toBeTruthy();
    expect(screen.getByText("Basic")).toBeTruthy();
    expect(screen.getByText("Prompt")).toBeTruthy();
    expect(screen.getByText("Enabled")).toBeTruthy();
    expect(screen.getByRole("button", { name: "Center" })).toBeTruthy();
    expect(screen.getByRole("button", { name: "Image 1" })).toBeTruthy();
    expect(
      screen
        .getByRole("button", { name: "Prompt help" })
        .closest("[data-control-field-label]"),
    ).toBeTruthy();
    expect(screen.queryByRole("button", { name: "Enabled help" })).toBeNull();
    expect(
      container.querySelector('[data-toolcraft-section-action-group="secondary"]'),
    ).toBeTruthy();
  });

  it("commits palette family and shade changes to runtime state immediately", () => {
    const schema = defineToolcraft({
      canvas: { enabled: false },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                inkPalette: {
                  defaultValue: { family: "Slate", shade: "900" },
                  label: "Palette",
                  target: "ink.palette",
                  type: "palette",
                },
              },
              title: "Ink",
            },
          ],
          title: "Controls",
        },
      },
    });

    renderControlsPanelWithSchema(schema);

    fireEvent.click(screen.getByRole("button", { name: "Primary family Red" }));
    let values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");

    expect(values["ink.palette"]).toEqual({ family: "Red", shade: "900" });

    fireEvent.click(screen.getByRole("button", { name: "Primary shade 500" }));
    values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");

    expect(values["ink.palette"]).toEqual({ family: "Red", shade: "500" });
  });
});