{% extends "base.html" %}

{% block content %}
<div class="container py-4">
  <h1 class="h3 mb-4">🍳 Cook History</h1>

  <div class="row g-3 mb-4">
    <div class="col-sm-4">
      <div class="card text-center shadow-sm"><div class="card-body">
        <div class="h2 mb-0">{{ total }}</div><small class="text-muted">Total Cooks</small>
      </div></div>
    </div>
    <div class="col-sm-4">
      <div class="card text-center shadow-sm"><div class="card-body">
        <div class="h2 mb-0">{{ unique_recipes }}</div><small class="text-muted">Unique Recipes</small>
      </div></div>
    </div>
    <div class="col-sm-4">
      <div class="card text-center shadow-sm"><div class="card-body">
        <div class="h2 mb-0">{{ this_month }}</div><small class="text-muted">This Month</small>
      </div></div>
    </div>
  </div>

  {% if not logs %}
  <div class="text-center py-5 text-muted">
    <div style="font-size:3rem;">📖</div>
    <p class="mt-3">No cook logs yet. Open a recipe and log when you cook it!</p>
  </div>
  {% else %}
  <div class="list-group mb-4">
    {% for log, recipe in logs %}
    <div class="list-group-item" id="log-{{ log.id }}">
      <div class="d-flex justify-content-between align-items-start">
        <div>
          <a href="{{ url_for('view_recipe', recipe_id=recipe.id) }}" class="fw-semibold text-decoration-none">{{ recipe.title }}</a>
          {% if log.servings_made %}<span class="ms-2 badge bg-secondary">{{ log.servings_made }} servings</span>{% endif %}
          <br>
          <small class="text-muted">🗓️ {{ log.cooked_at.strftime('%B %d, %Y at %I:%M %p') if log.cooked_at else '—' }}</small>
          {% if log.notes %}<p class="mb-0 mt-1 small text-secondary">{{ log.notes }}</p>{% endif %}
        </div>
        <button class="btn btn-sm btn-outline-danger" onclick="delLog({{ log.id }})" title="Delete">✕</button>
      </div>
    </div>
    {% endfor %}
  </div>

  {% if total_pages > 1 %}
  <nav>
    <ul class="pagination justify-content-center">
      <li class="page-item {% if page <= 1 %}disabled{% endif %}">
        <a class="page-link" href="?page={{ page - 1 }}">‹ Prev</a>
      </li>
      {% for p in range(1, total_pages + 1) %}
        {% if p == page %}
        <li class="page-item active"><span class="page-link">{{ p }}</span></li>
        {% elif p <= 3 or p > total_pages - 2 or (p >= page - 1 and p <= page + 1) %}
        <li class="page-item"><a class="page-link" href="?page={{ p }}">{{ p }}</a></li>
        {% elif p == 4 or p == total_pages - 2 %}
        <li class="page-item disabled"><span class="page-link">…</span></li>
        {% endif %}
      {% endfor %}
      <li class="page-item {% if page >= total_pages %}disabled{% endif %}">
        <a class="page-link" href="?page={{ page + 1 }}">Next ›</a>
      </li>
    </ul>
  </nav>
  {% endif %}
  {% endif %}
</div>

<script>
function delLog(id) {
  kcConfirm('Delete this cook log entry?', function() {
    fetch('/api/cook-log/' + id, {method:'DELETE', headers:{'Content-Type':'application/json'}})
      .then(function(r) {
        if (r.ok) { var el=document.getElementById('log-'+id); if(el){el.style.transition='opacity 0.3s';el.style.opacity='0';setTimeout(function(){el.remove();},300);} }
      });
  }, 'Delete Entry');
}
</script>
{% endblock %}