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

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

describe("defineToolcraft control section semantics", () => {
  it("preserves section visibility and resolves legacy control visibility", () => {
    const app = defineToolcraft({
      canvas: { enabled: true },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                partnerLogo: {
                  target: "coBrand.partnerLogo",
                  type: "fileDrop",
                  visibleWhen: {
                    equals: "logo",
                    target: "coBrand.identityMode",
                  },
                },
              },
              title: "Partner Logo",
              visibleWhen: {
                equals: "co-brand",
                target: "cover.templateId",
              },
            },
          ],
          title: "Controls",
        },
      },
});
    const [section] = getProductSections(app);

    expect(section?.visibleWhen).toEqual({
      equals: "co-brand",
      target: "cover.templateId",
    });
    expect(section?.controls.partnerLogo?.applicability).toEqual({
      all: [
        {
          equals: "logo",
          target: "coBrand.identityMode",
        },
      ],
      mode: "conditional",
      origin: "legacy",
    });
  });

  it("adds an implicit title while preserving standalone section layout intent", () => {
    const sections = [
      {
        controls: {
          palette: {
            target: "style.palette",
            type: "palette",
          },
        },
        layout: "standalone",
      },
    ] as const;

    const app = defineToolcraft({
      canvas: { enabled: true },
      panels: {
        controls: {
          sections,
          title: "Controls",
        },
      },
    });

    expect(getProductSections(app)[0]?.layout).toBe("standalone");
    expect(getProductSections(app)[0]?.title).toBe("Palette");
  });

  it("adds semantic implicit titles to standalone color sections", () => {
    const app = defineToolcraft({
      canvas: { enabled: true },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                fill: {
                  defaultValue: { hex: "#C1FF00" },
                  label: "Fill",
                  target: "style.fill",
                  type: "color",
                },
                stroke: {
                  defaultValue: { hex: "#FF6A00" },
                  label: "Stroke",
                  target: "style.stroke",
                  type: "color",
                },
              },
              layout: "standalone",
            },
          ],
          title: "Controls",
        },
      },
    });

    expect(getProductSections(app)[0]?.layout).toBe("standalone");
    expect(getProductSections(app)[0]?.title).toBe("Fill & Stroke");

    const inferredLayoutApp = defineToolcraft({
      canvas: { enabled: true },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                fill: {
                  defaultValue: { hex: "#C1FF00" },
                  label: "Fill",
                  target: "style.fill",
                  type: "color",
                },
              },
            },
          ],
          title: "Controls",
        },
      },
    });

    expect(getProductSections(inferredLayoutApp)[0]?.title).toBe("Fill");
  });

  it("replaces generic color section titles with a semantic fallback", () => {
    const genericColorApp = defineToolcraft({
      canvas: { enabled: true },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                color: {
                  defaultValue: { hex: "#C1FF00" },
                  label: "Color",
                  target: "style.color",
                  type: "color",
                },
              },
              layout: "standalone",
            },
          ],
          title: "Controls",
        },
      },
    });

    const genericColorsApp = defineToolcraft({
      canvas: { enabled: true },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                color: {
                  defaultValue: { hex: "#C1FF00" },
                  label: "Color",
                  target: "style.color",
                  type: "color",
                },
                colors: {
                  defaultValue: { hex: "#FF6A00" },
                  label: "Colors",
                  target: "style.colors",
                  type: "color",
                },
              },
              layout: "standalone",
            },
          ],
          title: "Controls",
        },
      },
    });
    const explicitGenericTitleApp = defineToolcraft({
      canvas: { enabled: true },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                accent: {
                  defaultValue: { hex: "#C1FF00" },
                  label: "Accent",
                  target: "style.accent",
                  type: "color",
                },
              },
              layout: "standalone",
              title: "Colors",
            },
          ],
          title: "Controls",
        },
      },
    });

    expect(getProductSections(genericColorApp)[0]?.title).toBe("Appearance");
    expect(getProductSections(genericColorsApp)[0]?.title).toBe("Appearance");
    expect(getProductSections(explicitGenericTitleApp)[0]?.title).toBe("Appearance");
  });

  it("keeps color controls inside semantic mixed sections", () => {
    const app = defineToolcraft({
      canvas: { enabled: true },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                connections: {
                  defaultValue: 10,
                  label: "Connections",
                  target: "animation.square1.connections",
                  type: "text",
                },
                hoverRadius: {
                  defaultValue: 200,
                  label: "Hover radius",
                  max: 500,
                  min: 50,
                  target: "animation.square1.hoverRadius",
                  type: "slider",
                  unit: "px",
                },
                color: {
                  defaultValue: { hex: "#DEF135" },
                  label: "Color",
                  target: "animation.square1.color",
                  type: "color",
                },
              },
              title: "Square 1 (Right)",
            },
          ],
          title: "Controls",
        },
      },
    });

    const productSections = getProductSections(app);

    expect(productSections).toHaveLength(1);
    expect(productSections[0]?.title).toBe("Square 1 (Right)");
    expect(Object.keys(productSections[0]?.controls ?? {})).toEqual([
      "connections",
      "hoverRadius",
      "color",
    ]);
  });

  it("keeps mode-gated standalone controls inside their semantic section", () => {
    const app = defineToolcraft({
      canvas: { enabled: true },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                sourceMode: {
                  defaultValue: "preset",
                  label: "Source",
                  options: [
                    { label: "Preset", value: "preset" },
                    { label: "Image", value: "image" },
                  ],
                  target: "source.mode",
                  type: "segmented",
                },
                sourceUpload: {
                  accept: "image/*",
                  assetKind: "image",
                  defaultValue: null,
                  label: "Image",
                  target: "source.upload",
                  type: "fileDrop",
                  visibleWhen: { equals: "image", target: "source.mode" },
                },
              },
              title: "Source",
            },
          ],
          title: "Controls",
        },
      },
    });

    const productSections = getProductSections(app);

    expect(productSections).toHaveLength(1);
    expect(productSections[0]?.title).toBe("Source");
    expect(productSections[0]?.layout).toBeUndefined();
    expect(Object.keys(productSections[0]?.controls ?? {})).toEqual([
      "sourceMode",
      "sourceUpload",
    ]);
  });});