// Plain layout-mode spec (not Gherkin) for ShoppingListPage's own
// phone-viewport pass (issue #90) — the actual grouped-list rendering,
// aggregation and week-navigation journey is already covered end-to-end by
// shopping-list.feature; this only exercises the responsive change added
// here. Mocks the API via cy.intercept — this job doesn't run a live
// backend (see .github/workflows/ci.yml).

import { PHONE_VIEWPORT } from "../support/viewports";

const authenticatedProfile = {
  id: 1,
  firstName: "Alice",
  lastName: "Martin",
  email: "alice@example.com",
  tokenVersion: 0,
  houseId: 1,
  dietId: null,
};

/** Same minimal-fixture convention as shopping-list.ts's own `buildShoppingListItem` step-def helper — only the fields this page actually reads. */
function shoppingListItem(id: number, ingredientKey: string, icon: string, category: string) {
  return {
    ingredient: {
      id,
      key: ingredientKey,
      icon,
      category,
      subcategory: category,
      reproducible: false,
      allergens: [],
      diets: [],
    },
    quantity: 2,
    unit: { id, key: "piece", type: "COUNT", toBaseFactor: 1 },
  };
}

describe("Shopping list page (phone)", () => {
  beforeEach(() => {
    cy.setViewport("phone");
    cy.intercept("GET", "**/auth/me", { statusCode: 200, body: authenticatedProfile });
  });

  it("gives each row a taller, more legible padding than on desktop, with no horizontal body scroll", () => {
    cy.intercept("GET", /\/shopping-list\?/, {
      statusCode: 200,
      body: {
        startDate: "2026-08-17",
        finishDate: "2026-08-23",
        items: [shoppingListItem(1, "egg", "EGG", "dairyAndCheese")],
      },
    }).as("getList");

    cy.visit("/liste-de-courses");
    cy.wait("@getList");

    cy.get(".shopping-list__item").should(($el) => {
      // --space-md (16px) on phone vs. the desktop default --space-sm
      // (8px) — see shopping-list-page.scss's phone block.
      expect(getComputedStyle($el[0]).paddingTop).to.equal("16px");
    });

    cy.document()
      .its("documentElement.scrollWidth")
      .should("be.lte", PHONE_VIEWPORT.width + 1);
  });
});