Feature: Planning page — sidebar navigation and weekly grid
  As a signed-in user
  I want to navigate between sections and see my household's weekly planning
  So that I know what meals are planned this week

  Background:
    Given I am signed in as "Alice" "Martin"
    And my household id is 1

  # The Foyer/Compte/Préférences links — behind the sidebar's "Paramètres"
  # toggle, not the main nav tested here — are covered by sidebar.feature.
  Scenario: Highlights the current section and navigates between stub pages
    Given the planning request returns nothing
    When I visit "/"
    Then the nav link "Planning" should be active
    When I click the nav link "Recettes"
    Then the URL should include "/recettes"
    And I should see the heading "Recettes"
    And the nav link "Recettes" should be active
    And the nav link "Planning" should not be active
    When I click the nav link "Liste de courses"
    Then the URL should include "/liste-de-courses"
    And I should see the heading "Liste de courses"
    When I click the nav link "Planning"
    Then the URL should be the home page
    And I should see the heading "Planning de la semaine"

  Scenario: Shows the signed-in user's name and lets them log out from the account menu
    Given the planning request returns nothing
    And the logout request will succeed
    When I visit "/"
    And I open the account menu
    And I click the button "Se déconnecter"
    Then the logout request should have been made
    And the URL should include "/login"

  # Desktop-only design (see the plan/PR description) — wider than Cypress's
  # default 1000×660 so all 7 day columns fit without the grid's horizontal
  # scroll hiding the later ones from visibility assertions.
  Scenario: Shows an empty grid when the household has no planning yet
    Given the viewport is 1600 by 900
    And today is frozen at "2026-08-17T09:00:00Z"
    And the current planning is empty
    When I visit "/"
    Then the planning request should have been made for the week of "2026-08-17"
    And I should see the heading "Planning de la semaine"
    And the grid should have 35 empty slots
    And no recipe chips should be shown

  Scenario: Renders each recipe in its (day, meal) cell, and highlights today's column
    Given the viewport is 1600 by 900
    And today is frozen at "2026-08-17T09:00:00Z"
    And the current planning includes:
      | day      | meal     | recipe             |
      | mardi    | diner    | Ratatouille         |
      | mercredi | dejeuner | Curry de lentilles  |
    When I visit "/"
    Then the day column "Lundi" should be visible
    And the day column "Dimanche" should be visible
    And the recipe chip "Ratatouille" should be visible
    And the recipe chip "Curry de lentilles" should be visible
    And today's column should show the date "17"

  Scenario: Shows a loading state, then an error state when the request fails
    Given the viewport is 1600 by 900
    And today is frozen at "2026-08-17T09:00:00Z"
    And the current planning request fails
    When I visit "/"
    Then I should see "Impossible de charger le planning, réessayez plus tard"

  # Assertions below check the rendered week label/badge, not the intercepted
  # request count — React StrictMode (see main.tsx) double-invokes effects in
  # dev, so the `GET /planning` mount effect can fire twice per navigation;
  # counting exact `cy.wait` calls against that would be flaky, but the
  # rendered result is the same either way.
  Scenario: Navigates to the next/previous week, re-fetching each time
    Given the viewport is 1600 by 900
    And today is frozen at "2026-08-17T09:00:00Z"
    And the current planning is empty
    When I visit "/"
    Then the planning request should have been made for the week of "2026-08-17"
    And I should see "Semaine du 17 au 23 août 2026"
    And I should see "Cette semaine"
    When I click the next week arrow
    Then I should see "Semaine du 24 au 30 août 2026"
    And I should not see "Cette semaine"
    When I click the previous week arrow
    Then I should see "Semaine du 17 au 23 août 2026"
    When I click the previous week arrow
    Then I should see "Semaine du 10 au 16 août 2026"

  Scenario: Jumps to an arbitrary week by picking a day in the calendar popover
    Given the viewport is 1600 by 900
    And today is frozen at "2026-08-17T09:00:00Z"
    And the current planning is empty
    When I visit "/"
    Then the planning request should have been made for the week of "2026-08-17"
    When I open the week calendar
    Then the calendar popover should be visible
    When I pick day 25 in the calendar
    Then I should see "Semaine du 24 au 30 août 2026"
    And the calendar popover should be closed