import { describe, expect, it } from "vitest";
import {
  defineToolcraft,
  fireEvent,
  renderControlsPanelWithSchema,
  screen,
  waitFor,
} from "../testing/controls-panel-test-utils";
describe("ControlsPanel help policy", () => {
  it("suppresses obvious help icons in sequential color sections", () => {
    const schema = defineToolcraft({
      base: {
        identity: { id: "runtime-test", title: "Toolcraft App" },
        canvas: { enabled: false },
        panels: {
          controls: {
            sections: [
              {
                id: "test-section-1",
                controls: {
                  color1: {
                    applicability: { mode: "always" as const },
                    defaultValue: "#DFFF1A",
                    description: "Sets the first bead color.",
                    label: "Color 1",
                    target: "palette.accent1",
                    type: "color",
                  },
                  color2: {
                    applicability: { mode: "always" as const },
                    defaultValue: "#8CFF3A",
                    description: "Sets the second bead color.",
                    label: "Color 2",
                    target: "palette.accent2",
                    type: "color",
                  },
                  color3: {
                    applicability: { mode: "always" as const },
                    defaultValue: "#F4FF5A",
                    description: "Sets the third bead color.",
                    label: "Color 3",
                    target: "palette.accent3",
                    type: "color",
                  },
                  color4: {
                    applicability: { mode: "always" as const },
                    defaultValue: "#B8FF2E",
                    description: "Sets the fourth bead color.",
                    label: "Color 4",
                    target: "palette.accent4",
                    type: "color",
                  },
                  color5: {
                    applicability: { mode: "always" as const },
                    defaultValue: "#ECFF68",
                    description: "Sets the fifth bead color.",
                    label: "Color 5",
                    target: "palette.accent5",
                    type: "color",
                  },
                  colorSpread: {
                    applicability: { mode: "always" as const },
                    defaultValue: 34,
                    description:
                      "Controls how often beads use colors 2-5 instead of Color 1.",
                    label: "Spread",
                    max: 100,
                    min: 0,
                    target: "palette.spread",
                    type: "slider",
                    unit: "%",
                  },
                },
                layoutGroups: [
                  {
                    columns: 2,
                    controls: ["color1", "color2"],
                    layout: "inline",
                  },
                  {
                    columns: 2,
                    controls: ["color3", "color4"],
                    layout: "inline",
                  },
                ],
                title: "Accent Shades",
              },
              {
                id: "test-section-2",
                controls: {
                  includeBackground: {
                    applicability: { mode: "always" as const },
                    defaultValue: true,
                    description:
                      "Controls PNG background transparency while preview and video keep the background.",
                    label: "Include",
                    target: "export.includeBackground",
                    type: "switch",
                  },
                },
                title: "Background",
              },
            ],
            title: "Controls",
          },
        },
      },
      modules: [],
    });
    renderControlsPanelWithSchema(schema);
    expect(screen.queryByRole("button", { name: "Color 5 help" })).toBeNull();
    expect(screen.queryByRole("button", { name: "Spread help" })).toBeNull();
    expect(screen.getByRole("button", { name: "Include help" })).toBeTruthy();
  });
  it("shows exact section descriptions only in the section help tooltip", async () => {
    const description =
      "Controls the point population and popup shown for Tab 3.";
    const schema = defineToolcraft({
      base: {
        identity: {
          id: "runtime-test",
          title: "Toolcraft fixture",
        },
        canvas: { enabled: false },
        panels: {
          controls: {
            sections: [
              {
                id: "fixture-section-3",
                controls: {
                  population: {
                    applicability: { mode: "always" as const },
                    defaultValue: 24,
                    label: "Population",
                    max: 100,
                    min: 1,
                    target: "points.population",
                    type: "slider",
                  },
                },
                description,
                title: "Incremental Revenue",
              },
            ],
            title: "Controls",
          },
        },
      },
      modules: [],
    });
    renderControlsPanelWithSchema(schema);
    const help = screen.getByRole("button", {
      name: "Incremental Revenue help",
    });
    const section = help.closest("section");
    expect(section?.textContent).not.toContain(description);
    expect(screen.queryByText(description)).toBeNull();
    fireEvent.focus(help);
    const tooltipDescription = await screen.findByText(description);
    expect(
      tooltipDescription.closest('[data-slot="tooltip-content"]'),
    ).toBeTruthy();
    expect(screen.getAllByText(description)).toHaveLength(1);
    expect(section?.textContent).not.toContain(description);
    fireEvent.blur(help);
    await waitFor(() => expect(screen.queryByText(description)).toBeNull());
  });
});