<div class="form-page">
  <div class="form-header">
    <a routerLink="/recipes" class="back-link">← Back to Recipes</a>
    <h1>{{ isEditMode ? 'Edit Recipe' : 'Add New Recipe' }}</h1>
  </div>

  <div *ngIf="errorMessage" class="error-banner">{{ errorMessage }}</div>

  <form class="recipe-form" (ngSubmit)="onSubmit()">

    <div class="form-group">
      <label for="title">Title *</label>
      <input
        id="title"
        type="text"
        class="form-control"
        [(ngModel)]="recipe.title"
        name="title"
        placeholder="e.g. Classic Spaghetti Bolognese"
        required
      />
    </div>

    <div class="form-group">
      <label for="description">Description</label>
      <textarea
        id="description"
        class="form-control"
        [(ngModel)]="recipe.description"
        name="description"
        rows="2"
        placeholder="A short description of the dish..."
      ></textarea>
    </div>

    <div class="form-row">
      <div class="form-group">
        <label for="category">Category *</label>
        <select id="category" class="form-control" [(ngModel)]="recipe.category" name="category">
          <option *ngFor="let cat of categories" [value]="cat">{{ cat }}</option>
        </select>
      </div>

      <div class="form-group">
        <label for="rating">Rating (1–5)</label>
        <input
          id="rating"
          type="number"
          class="form-control"
          [(ngModel)]="recipe.rating"
          name="rating"
          min="1"
          max="5"
        />
      </div>

      <div class="form-group">
        <label for="prepTime">Prep Time (min)</label>
        <input
          id="prepTime"
          type="number"
          class="form-control"
          [(ngModel)]="recipe.prepTime"
          name="prepTime"
          min="0"
        />
      </div>

      <div class="form-group">
        <label for="cookTime">Cook Time (min)</label>
        <input
          id="cookTime"
          type="number"
          class="form-control"
          [(ngModel)]="recipe.cookTime"
          name="cookTime"
          min="0"
        />
      </div>
    </div>

    <div class="form-group">
      <label>Ingredients *</label>
      <div class="ingredient-input-row">
        <input
          type="text"
          class="form-control"
          [(ngModel)]="ingredientInput"
          name="ingredientInput"
          placeholder="e.g. 2 cups flour"
          (keydown)="onIngredientKeydown($event)"
        />
        <button type="button" class="btn btn-add" (click)="addIngredient()">Add</button>
      </div>
      <ul class="ingredient-list" *ngIf="recipe.ingredients.length > 0">
        <li *ngFor="let item of recipe.ingredients; let i = index" class="ingredient-item">
          <span>{{ item }}</span>
          <button type="button" class="remove-btn" (click)="removeIngredient(i)" title="Remove">✕</button>
        </li>
      </ul>
      <p class="hint" *ngIf="recipe.ingredients.length === 0">Add at least one ingredient.</p>
    </div>

    <div class="form-group">
      <label for="instructions">Instructions *</label>
      <textarea
        id="instructions"
        class="form-control"
        [(ngModel)]="recipe.instructions"
        name="instructions"
        rows="6"
        placeholder="Step-by-step cooking instructions..."
        required
      ></textarea>
    </div>

    <div class="form-actions">
      <a routerLink="/recipes" class="btn btn-cancel">Cancel</a>
      <button type="submit" class="btn btn-submit" [disabled]="!isFormValid() || submitting">
        {{ submitting ? 'Saving...' : (isEditMode ? 'Update Recipe' : 'Save Recipe') }}
      </button>
    </div>

  </form>
</div>
