Feature: Recipe form — associating ingredients
  As a signed-in user
  I want to build a recipe by picking ingredients, quantities, and steps
  So that I can save a complete recipe in one form

  Background:
    Given I am signed in as "Alice" "Martin"
    And my household id is 1
    And the ingredient and diet catalog is available

  Scenario: Adds an ingredient from the picker, fills its quantity/unit, and creates the recipe
    Given creating the recipe will succeed and return id 42
    When I visit "/recettes/nouvelle"
    And I fill in the "recipe-name" field with "Salade de tomates"
    And I search the ingredient picker for "tomat"
    And I select the ingredient "Tomate" from the picker
    Then the ingredient "Tomate" should no longer be in the picker
    And the recipe should include the ingredient "Tomate"
    When I fill in the ingredient's quantity with "3" and unit "unité"
    And I add a step
    And I fill in the step description with "Couper les tomates."
    Then the "Enregistrer" button should not be disabled
    When I click the button "Enregistrer"
    Then the recipe creation request should have included name "Salade de tomates", portions 4, and ingredient 1 with quantity 3 and unitId 1
    And the URL should include "/recettes/42"

  # Regression test for the exact bug reported: `crypto.randomUUID()` (used
  # to mint each ingredient/step draft's client-only React key) throws
  # outside a secure context — https, or literally the hostname `localhost`
  # — so a LAN IP during on-device testing or a Capacitor WebView's
  # `capacitor://` origin hit a black screen with "TypeError:
  # crypto.randomUUID is not a function" the instant an ingredient was
  # added. Cypress's own origin is secure, so this forces the same failure
  # by deleting `crypto.randomUUID` before the app boots — see
  # `apps/web/src/lib/client-key.ts`, which replaced it.
  Scenario: Still works when crypto.randomUUID is unavailable (insecure-context regression)
    When I visit the new recipe form without a secure random UUID
    And I fill in the "recipe-name" field with "Recette hors contexte sécurisé"
    And I select the ingredient "Tomate" from the picker
    And I select the ingredient "Oeuf" from the picker
    Then there should be 2 ingredient rows
    And the recipe should include the ingredient "Tomate"
    And the recipe should include the ingredient "Oeuf"
    When I add a step
    And I add a step
    Then there should be 2 step editor items

  Scenario: Excludes an already-selected ingredient from the picker, and removing it brings it back
    When I visit "/recettes/nouvelle"
    And I select the ingredient "Carotte" from the picker
    Then the ingredient "Carotte" should no longer be in the picker
    When I remove the ingredient "Carotte" from the recipe
    Then the ingredient "Carotte" should be visible in the picker
    And there should be 0 ingredient rows

  Scenario: Preloads an existing recipe's ingredients when editing, and lets you add another
    Given recipe 7 exists with an egg omelette
    And updating recipe 7 will succeed
    When I visit "/recettes/7/modifier"
    Then the recipe should include the ingredient "Oeuf"
    And the ingredient's quantity should be "3"
    When I select the ingredient "Tomate" from the picker
    Then there should be 2 ingredient rows
    When I fill in the last ingredient's quantity with "1" and unit "unité"
    And I click the button "Enregistrer"
    Then the recipe update request should have included these ingredients:
      | ingredientId | quantity | unitId |
      | 2            | 3        | 1      |
      | 1            | 1        | 1      |