{% 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 Collections</h1>
    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#createModal">+ New Collection</button>
  </div>

  {% if not collections %}
  <div class="text-center py-5 text-muted">
    <div style="font-size:3rem;">📂</div>
    <p class="mt-3">No collections yet. Create one to organize your recipes!</p>
  </div>
  {% else %}
  <div class="row g-3">
    {% for c in collections %}
    <div class="col-sm-6 col-lg-4" id="coll-{{ c.id }}">
      <div class="card h-100 shadow-sm">
        <div class="card-body d-flex flex-column">
          <div class="d-flex justify-content-between align-items-start mb-1">
            <h5 class="card-title mb-0">
              <a href="{{ url_for('social.collection_detail', collection_id=c.id) }}" class="text-decoration-none">{{ c.name }}</a>
            </h5>
            <div class="dropdown">
              <button class="btn btn-sm btn-link text-muted p-0" data-bs-toggle="dropdown">⋮</button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href="#" onclick="renameColl({{ c.id }}, '{{ c.name|e }}'); return false;">Rename</a></li>
                <li><a class="dropdown-item text-danger" href="#" onclick="deleteColl({{ c.id }}); return false;">Delete</a></li>
              </ul>
            </div>
          </div>
          {% if c.description %}
          <p class="text-muted small mb-2">{{ c.description[:100] }}{% if c.description|length > 100 %}…{% endif %}</p>
          {% endif %}
          <div class="flex-grow-1">
            {% if c.preview_titles %}
            <ul class="list-unstyled small text-muted mb-0">
              {% for t in c.preview_titles %}
              <li>• {{ t }}</li>
              {% endfor %}
              {% if c.recipe_count > 4 %}
              <li class="fst-italic">… and {{ c.recipe_count - 4 }} more</li>
              {% endif %}
            </ul>
            {% endif %}
          </div>
          <div class="mt-auto pt-2 border-top">
            <small class="text-muted">{{ c.recipe_count }} recipe{{ 's' if c.recipe_count != 1 else '' }}</small>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
  {% endif %}
</div>

<!-- Create Modal -->
<div class="modal fade" id="createModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">New Collection</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label class="form-label">Name *</label>
          <input type="text" id="new-name" class="form-control" maxlength="100">
        </div>
        <div class="mb-3">
          <label class="form-label">Description</label>
          <textarea id="new-desc" class="form-control" rows="2" maxlength="500"></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-primary" onclick="createColl()">Create</button>
      </div>
    </div>
  </div>
</div>

<script>
var H = {'Content-Type': 'application/json'};

function createColl() {
  var name = document.getElementById('new-name').value.trim();
  var desc = document.getElementById('new-desc').value.trim();
  if (!name) return;
  fetch('/api/social/collection', {method:'POST', headers:H, body:JSON.stringify({name:name, description:desc})})
    .then(function(r) { if (r.ok) location.reload(); });
}

function renameColl(id, cur) {
  var n = prompt('Rename collection:', cur);
  if (!n || n.trim() === cur) return;
  fetch('/api/social/collection/' + id, {method:'PUT', headers:H, body:JSON.stringify({name:n.trim()})})
    .then(function(r) { if (r.ok) location.reload(); });
}

function deleteColl(id) {
  kcConfirm('Delete this collection? Recipes will not be deleted.', function() {
    fetch('/api/social/collection/' + id, {method:'DELETE', headers:H})
      .then(function(r) {
        if (r.ok) {
          var el = document.getElementById('coll-' + id);
          if (el) { el.style.opacity='0'; setTimeout(function(){el.remove();}, 300); }
        }
      });
  }, 'Delete Collection');
}
</script>
{% endblock %}