import { describe, expect, it } from "vitest";

import { defineToolcraft } from "./define-toolcraft";
import { getProductSections } from "./define-toolcraft-test-utils";

describe("defineToolcraft panel actions", () => {
  it("preserves controls panel action sections and render metadata", () => {
    const app = defineToolcraft({
      canvas: { enabled: true },
      panels: {
        controls: {
          sections: [
            {
              actionGroup: "secondary",
              controls: {
                footer: {
                  actions: [
                    {
                      command: "controls.reset",
                      label: "Reset",
                      value: "reset",
                      variant: "outline",
                    },
                    {
                      command: "controls.apply",
                      label: "Apply",
                      value: "apply",
                      variant: "default",
                    },
                  ],
                  target: "panel.actions",
                  type: "panelActions",
                },
              },
              layout: "standalone",
            },
            {
              controls: {
                opacity: {
                  defaultValue: 75,
                  markerCount: 11,
                  max: 100,
                  min: 0,
                  step: 1,
                  target: "selectedLayer.opacity",
                  type: "slider",
                  unit: "%",
                  variant: "discrete",
                },
              },
              title: "Sliders",
            },
          ],
          title: "Controls",
        },
      },
    });

    const [slidersSection, actionsSection] = getProductSections(app);

    expect(slidersSection?.controls.opacity?.markerCount).toBe(101);
    expect(slidersSection?.controls.opacity?.variant).toBe("discrete");
    expect(actionsSection?.actionGroup).toBe("secondary");
    expect(actionsSection?.controls.footer?.actions?.[0]).toMatchObject({
      command: "controls.reset",
      value: "reset",
    });
  });

  it("hoists panel action controls into the sticky footer even without actionGroup", () => {
    const app = defineToolcraft({
      canvas: { enabled: true },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                footer: {
                  actions: [
                    {
                      command: "controls.reset",
                      label: "Reset",
                      value: "reset",
                      variant: "outline",
                    },
                    {
                      command: "controls.apply",
                      label: "Apply",
                      value: "apply",
                      variant: "default",
                    },
                  ],
                  target: "panel.actions",
                  type: "panelActions",
                },
                prompt: {
                  defaultValue: "Describe the output",
                  label: "Prompt",
                  target: "generation.prompt",
                  type: "text",
                },
              },
              title: "Export",
            },
          ],
          title: "Controls",
        },
      },
    });

    const sections = app.panels.controls?.sections ?? [];
    const promptSection = sections.find((section) => section.controls.prompt);
    const footerSection = sections.at(-1);

    expect(promptSection?.title).toBe("Prompt");
    expect(promptSection?.controls.footer).toBeUndefined();
    expect(footerSection?.actionGroup).toBe("secondary");
    expect(footerSection?.layout).toBe("standalone");
    expect(footerSection?.title).toBe("Export");
    expect(footerSection?.controls.footer?.type).toBe("panelActions");
  });

  it("merges split footer action sections into one compact footer row", () => {
    const app = defineToolcraft({
      canvas: { enabled: true },
      panels: {
        controls: {
          sections: [
            {
              actionGroup: "primary",
              controls: {
                export: {
                  actions: [
                    {
                      label: "Export PNG",
                      value: "export",
                      variant: "default",
                    },
                  ],
                  target: "panel.export",
                  type: "panelActions",
                },
              },
            },
            {
              actionGroup: "secondary",
              controls: {
                copy: {
                  actions: [
                    {
                      label: "Copy PNG",
                      value: "copy",
                      variant: "outline",
                    },
                  ],
                  target: "panel.copy",
                  type: "panelActions",
                },
              },
            },
          ],
          title: "Controls",
        },
      },
    });

    const sections = app.panels.controls?.sections ?? [];
    const footerSections = sections.filter((section) => section.actionGroup);
    const footerActions = footerSections[0]?.controls.footer?.actions ?? [];

    expect(footerSections).toHaveLength(1);
    expect(footerActions).toHaveLength(2);
    expect(footerActions[0]).toMatchObject({
      value: "copy",
      variant: "outline",
    });
    expect(footerActions[1]).toMatchObject({
      value: "export",
      variant: "default",
    });
  });
});