{% extends "base.html" %}

{% block content %}
<div class="container py-4">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0">❤️ My Favorites <span class="badge bg-secondary">{{ favorites|length }}</span></h1>
    <a href="{{ url_for('recipes') }}" class="btn btn-outline-primary btn-sm">Browse Recipes</a>
  </div>

  {% if not favorites %}
  <div class="text-center py-5 text-muted">
    <div style="font-size:3rem;">💔</div>
    <p class="mt-3">No favorites yet. Browse recipes and tap the heart to save them!</p>
  </div>
  {% else %}
  <div class="row g-3" id="favorites-grid">
    {% for item in favorites %}
    <div class="col-sm-6 col-lg-4 col-xl-3 favorite-card" data-recipe-id="{{ item.recipe.id }}" id="fav-{{ item.recipe.id }}">
      <div class="card h-100 shadow-sm">
        {% if item.recipe.image_filename %}
        <img src="{{ url_for('static', filename=media_path(item.recipe.image_filename)) }}"
             class="card-img-top" style="height:160px; object-fit:cover;"
             alt="{{ item.recipe.title }}">
        {% endif %}
        <div class="card-body d-flex flex-column">
          <div class="d-flex justify-content-between align-items-start mb-2">
            <h5 class="card-title mb-0">
              <a href="{{ url_for('view_recipe', recipe_id=item.recipe.id) }}" class="text-decoration-none">
                {{ item.recipe.title }}
              </a>
            </h5>
            <button class="btn btn-sm btn-link text-danger p-0" title="Remove"
                    onclick="unfavorite({{ item.recipe.id }})">❤️</button>
          </div>
          {% if item.recipe.cuisine %}
          <span class="badge bg-info text-dark mb-2" style="width:fit-content;">{{ item.recipe.cuisine }}</span>
          {% endif %}
          {% if item.recipe.description %}
          <p class="card-text text-muted small flex-grow-1">{{ item.recipe.description[:120] }}{% if item.recipe.description|length > 120 %}…{% endif %}</p>
          {% endif %}
          <div class="d-flex justify-content-between align-items-center mt-auto pt-2 border-top">
            <small class="text-muted">❤️ {{ item.fav_count }}</small>
            <small class="text-muted">{{ item.fav_date.strftime('%b %d, %Y') if item.fav_date else '' }}</small>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
  {% endif %}
</div>

<script>
function unfavorite(recipeId) {
  fetch('/api/recipe/' + recipeId + '/favorite', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'}
  })
  .then(function(r) { return r.json(); })
  .then(function(data) {
    if (data.status === 'unfavorited') {
      var card = document.getElementById('fav-' + recipeId);
      if (card) {
        card.style.transition = 'opacity 0.3s';
        card.style.opacity = '0';
        setTimeout(function() { card.remove(); updateCount(); }, 300);
      }
    }
  });
}
function updateCount() {
  var remaining = document.querySelectorAll('.favorite-card').length;
  var badge = document.querySelector('h1 .badge');
  if (badge) badge.textContent = remaining;
  if (remaining === 0) location.reload();
}
</script>
{% endblock %}