import { describe, it, expect } from "vitest";
import {
  CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
  CREATE_FLOW_MD_UP_GRID_CELL_CLASS,
  CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
  CREATE_FLOW_WIDE_MAX_CLASS,
  CREATE_FLOW_MD_CENTERED_MAIN_CLASS,
  CREATE_FLOW_MD_CENTERED_SHELL_CLASS,
  CREATE_FLOW_PAGE_GUTTER_CLASS,
  CREATE_FLOW_VIEWPORT_FRAME_CLASS,
  getCreateFlowContentMaxClass,
} from "../../app/(app)/create/components/createFlowLayoutTokens";

describe("createFlowLayoutTokens", () => {
  it("exports create-flow column and two-column max class strings", () => {
    expect(CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS).toBe(
      "w-full min-w-0 lg:max-w-[640px]",
    );
    expect(CREATE_FLOW_MD_UP_GRID_CELL_CLASS).toBe(
      "w-full min-w-0 lg:mx-auto lg:max-w-[640px]",
    );
    expect(CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS).toBe(
      "w-full min-w-0 lg:max-w-[1328px]",
    );
    expect(CREATE_FLOW_WIDE_MAX_CLASS).toBe("w-full min-w-0 lg:max-w-[1440px]");
  });

  it("uses one gutter scale across the six viewport bands", () => {
    expect(CREATE_FLOW_PAGE_GUTTER_CLASS).toBe("px-5 md:px-12 lg:px-16");
  });

  it("sizes the wizard frame with dynamic viewport height", () => {
    expect(CREATE_FLOW_VIEWPORT_FRAME_CLASS).toContain("h-dvh");
    expect(CREATE_FLOW_VIEWPORT_FRAME_CLASS).toContain("max-h-dvh");
  });

  it("centers lockup+card and card-stack steps in the nav–footer band from md", () => {
    expect(CREATE_FLOW_MD_CENTERED_MAIN_CLASS).toBe(
      "items-start justify-center overflow-y-auto",
    );
    expect(CREATE_FLOW_MD_CENTERED_SHELL_CLASS).toBe("md:my-auto md:pt-0");
  });

  it("aligns the action bar max-width with the step content column", () => {
    expect(
      getCreateFlowContentMaxClass({ step: "community-name" }),
    ).toBe(CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS);
    expect(
      getCreateFlowContentMaxClass({ step: "community-structure" }),
    ).toBe(CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS);
    expect(
      getCreateFlowContentMaxClass({ step: "communication-methods" }),
    ).toBe(CREATE_FLOW_WIDE_MAX_CLASS);
    expect(
      getCreateFlowContentMaxClass({ step: "final-review" }),
    ).toBe(CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS);
    expect(
      getCreateFlowContentMaxClass({
        step: "informational",
        isTemplateReview: true,
      }),
    ).toBe(CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS);
    expect(
      getCreateFlowContentMaxClass({
        step: null,
        isTemplatesPicker: true,
      }),
    ).toBe(CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS);
  });
});