{% extends "base.html" %}

{% block content %}
<div class="container py-4">
  <nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="{{ url_for('social.collections_page') }}">Collections</a></li>
      <li class="breadcrumb-item active">{{ collection.name }}</li>
    </ol>
  </nav>

  <div class="d-flex justify-content-between align-items-start mb-3">
    <div>
      <h1 class="h3 mb-1" id="c-name">{{ collection.name }}</h1>
      {% if collection.description %}
      <p class="text-muted mb-0" id="c-desc">{{ collection.description }}</p>
      {% endif %}
    </div>
    <div class="d-flex gap-2">
      <button class="btn btn-outline-secondary btn-sm" onclick="editHeader()">✏️ Edit</button>
      <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addModal">+ Add Recipe</button>
    </div>
  </div>
  <hr>

  {% if not items %}
  <div class="text-center py-5 text-muted">
    <div style="font-size:3rem;">📭</div>
    <p class="mt-3">This collection is empty.</p>
  </div>
  {% else %}
  <div class="list-group" id="recipe-list">
    {% for recipe, item in items %}
    <div class="list-group-item d-flex align-items-center gap-3" data-rid="{{ recipe.id }}" id="item-{{ recipe.id }}">
      <span class="text-muted fw-bold pos-num" style="min-width:1.5rem;">{{ loop.index }}</span>
      <div class="flex-grow-1">
        <a href="{{ url_for('view_recipe', recipe_id=recipe.id) }}" class="text-decoration-none fw-semibold">{{ recipe.title }}</a>
        {% if recipe.cuisine %}<span class="badge bg-info text-dark ms-2">{{ recipe.cuisine }}</span>{% endif %}
        <br><small class="text-muted">Added {{ item.added_at.strftime('%b %d, %Y') if item.added_at else '—' }}</small>
      </div>
      <div class="d-flex gap-1">
        <button class="btn btn-sm btn-outline-secondary" onclick="moveItem({{ recipe.id }}, 'up')" title="Up">↑</button>
        <button class="btn btn-sm btn-outline-secondary" onclick="moveItem({{ recipe.id }}, 'down')" title="Down">↓</button>
        <button class="btn btn-sm btn-outline-danger" onclick="removeItem({{ recipe.id }})" title="Remove">✕</button>
      </div>
    </div>
    {% endfor %}
  </div>
  {% endif %}
</div>

<!-- Add Recipe Modal -->
<div class="modal fade" id="addModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Add Recipe</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <input type="text" id="r-search" class="form-control mb-3" placeholder="Search recipes…" oninput="filterR()">
        <div id="r-opts" style="max-height:300px; overflow-y:auto;">
          {% for r in available_recipes %}
          <div class="r-opt d-flex justify-content-between align-items-center p-2 border-bottom" data-t="{{ r.title|lower }}">
            <span>{{ r.title }}{% if r.cuisine %} <small class="text-muted">({{ r.cuisine }})</small>{% endif %}</span>
            <button class="btn btn-sm btn-outline-primary" onclick="addR({{ r.id }}, this)">Add</button>
          </div>
          {% endfor %}
          {% if not available_recipes %}
          <p class="text-muted text-center py-3">All recipes are already in this collection.</p>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

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

function editHeader() {
  var name = prompt('Collection name:', document.getElementById('c-name').textContent.trim());
  if (!name) return;
  var desc = prompt('Description:', (document.getElementById('c-desc') || {}).textContent || '');
  fetch('/api/social/collection/' + CID, {method:'PUT', headers:H, body:JSON.stringify({name:name.trim(), description:(desc||'').trim()})})
    .then(function(r) { if (r.ok) location.reload(); });
}

function addR(rid, btn) {
  fetch('/api/social/collection/' + CID + '/recipes', {method:'POST', headers:H, body:JSON.stringify({recipe_id:rid})})
    .then(function(r) {
      if (r.ok) { btn.textContent='✓'; btn.disabled=true; btn.className='btn btn-sm btn-success'; setTimeout(function(){location.reload();}, 500); }
      else r.json().then(function(d) { btn.textContent = d.error || 'Error'; });
    });
}

function removeItem(rid) {
  kcConfirm('Remove from collection?', function() {
    fetch('/api/social/collection/' + CID + '/recipes/' + rid, {method:'DELETE', headers:H})
      .then(function(r) {
        if (r.ok) { var el=document.getElementById('item-'+rid); if(el){el.style.opacity='0';setTimeout(function(){el.remove();renumber();},300);} }
      });
  }, 'Remove Recipe');
}

function getIds() {
  return Array.from(document.querySelectorAll('#recipe-list .list-group-item')).map(function(el){return parseInt(el.dataset.rid);});
}

function moveItem(rid, dir) {
  var ids = getIds(); var idx = ids.indexOf(rid); if(idx<0) return;
  var ni = dir==='up' ? idx-1 : idx+1; if(ni<0||ni>=ids.length) return;
  var list = document.getElementById('recipe-list');
  var items = list.querySelectorAll('.list-group-item');
  if (dir==='up') list.insertBefore(items[idx], items[ni]);
  else list.insertBefore(items[ni], items[idx]);
  renumber();
  fetch('/api/social/collection/' + CID + '/reorder', {method:'PUT', headers:H, body:JSON.stringify({recipe_ids:getIds()})});
}

function renumber() {
  document.querySelectorAll('#recipe-list .pos-num').forEach(function(el,i){el.textContent=i+1;});
}

function filterR() {
  var q = document.getElementById('r-search').value.toLowerCase();
  document.querySelectorAll('.r-opt').forEach(function(el){el.style.display=el.dataset.t.indexOf(q)>=0?'':'none';});
}
</script>
{% endblock %}