{% extends "base.html" %}
{% block title %}Catalog — Pitchkit{% endblock %}
{% block content %}

<div class="page-header">
  <h1>Catalog</h1>
  <p class="page-subtitle">{{ total }} song{% if total != 1 %}s{% endif %} in your library.</p>
</div>

<form method="GET" action="/catalog" class="filter-bar">
  <div class="search-wrap">
    <svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
    <input type="text" name="q" value="{{ search }}" placeholder="Search title, artist, tags…" class="form-input search-input">
  </div>
  <select name="genre" class="form-select">
    <option value="">All Genres</option>
    {% set fallback_genres = ["acoustic", "anthemic", "ballad", "cinematic", "country", "dance/edm", "folk/americana", "hip hop", "pop", "r&b/soul", "rock"] %}
    {% set genre_list = all_genres if all_genres else fallback_genres %}
    {% for g in genre_list %}<option value="{{ g }}" {% if g == genre %}selected{% endif %}>{{ g|title }}</option>{% endfor %}
  </select>
  <select name="mood" class="form-select">
    <option value="">All Moods</option>
    {% set fallback_moods = ["atmospheric", "chill", "dark", "energetic", "groovy", "melancholic", "mid-tempo", "powerful", "slow", "upbeat", "uplifting"] %}
    {% set mood_list = all_moods if all_moods else fallback_moods %}
    {% for m in mood_list %}<option value="{{ m }}" {% if m == mood %}selected{% endif %}>{{ m|title }}</option>{% endfor %}
  </select>
  <button type="submit" class="btn btn-primary">Filter</button>
  {% if search or genre or mood %}
  <a href="/catalog" class="btn btn-ghost">Clear</a>
  {% endif %}
</form>

{% if songs %}
<div class="catalog-table-wrap">
<table class="catalog-table">
  <thead>
    <tr>
      <th>Title</th>
      <th>Artist</th>
      <th>BPM</th>
      <th>Key</th>
      <th>Genre</th>
      <th style="min-width:120px">Mood</th>
      <th>Duration</th>
      <th style="min-width:110px"></th>
    </tr>
  </thead>
  <tbody>
    {% for song in songs %}
    {% set id, filename, title, artist, album, bpm, key_, duration, genre_tags, mood_tags, themes, energy, danceability = song %}
    <tr>
      <td class="song-title-cell">
        <div class="song-title">{{ title or filename|replace('.mp3','')|replace('.wav','')|replace('.aif','')|replace('.aiff','') }}</div>
        {% if album %}<div class="song-album">{{ album }}</div>{% endif %}
      </td>
      <td class="song-artist">{{ artist or "—" }}</td>
      <td class="song-bpm">{% if bpm %}{{ bpm|int }}{% else %}—{% endif %}</td>
      <td class="song-key">{{ key_ or "—" }}</td>
      <td class="song-tags">
        {% if genre_tags %}
          {% for t in genre_tags.split(',')[:2] %}<span class="tag tag-genre tag-sm">{{ t.strip() }}</span>{% endfor %}
        {% else %}—{% endif %}
      </td>
      <td class="song-tags">
        {% if mood_tags %}
          {% for t in mood_tags.split(',')[:2] %}<span class="tag tag-mood tag-sm">{{ t.strip() }}</span>{% endfor %}
        {% else %}—{% endif %}
      </td>
      <td class="song-duration">
        {% if duration %}
          {% set m = (duration|int) // 60 %}{% set s = (duration|int) % 60 %}{{ m }}:{{ "%02d"|format(s) }}
        {% else %}—{% endif %}
      </td>
      <td class="song-actions-cell">
        <button class="play-btn" data-song-id="{{ id }}" title="Play preview">
          <svg class="icon-play" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="5,3 19,12 5,21"/></svg>
          <svg class="icon-pause" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none" style="display:none"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
        </button>
        <a href="/song/{{ id }}" class="song-detail-link" title="View details &amp; lyrics">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
          <span style="font-size:11px;margin-left:3px;">Details&nbsp;&amp;&nbsp;Lyrics</span>
        </a>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
</div>

{% if pages > 1 %}
<div class="pagination">
  {% if page > 1 %}<a href="?q={{ search }}&genre={{ genre }}&mood={{ mood }}&page={{ page-1 }}" class="page-btn">← Prev</a>{% endif %}
  <span class="page-info">Page {{ page }} of {{ pages }}</span>
  {% if page < pages %}<a href="?q={{ search }}&genre={{ genre }}&mood={{ mood }}&page={{ page+1 }}" class="page-btn">Next →</a>{% endif %}
</div>
{% endif %}

{% else %}
<div class="empty-state">
  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#555570" stroke-width="1.5"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
  <p>No songs found{% if search or genre or mood %} matching your filters{% endif %}.</p>
  {% if search or genre or mood %}<a href="/catalog" class="btn btn-ghost">Clear Filters</a>{% endif %}
</div>
{% endif %}

{% endblock %}

{% block scripts %}
<audio id="global-audio" preload="none"></audio>
<script>
(function() {
  var audio = document.getElementById('global-audio');
  var currentBtn = null;

  function setPlaying(btn, playing) {
    btn.querySelector('.icon-play').style.display  = playing ? 'none' : '';
    btn.querySelector('.icon-pause').style.display = playing ? ''     : 'none';
    if (playing) btn.classList.add('playing');
    else         btn.classList.remove('playing');
  }

  document.querySelectorAll('.play-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var songId = this.dataset.songId;
      if (currentBtn === this && !audio.paused) {
        audio.pause();
        setPlaying(this, false);
        return;
      }
      if (currentBtn && currentBtn !== this) { setPlaying(currentBtn, false); }
      audio.src = '/audio/' + songId;
      audio.play().catch(function(){});
      setPlaying(btn, true);
      currentBtn = btn;
    });
  });

  audio.addEventListener('ended', function() {
    if (currentBtn) { setPlaying(currentBtn, false); currentBtn = null; }
  });
  audio.addEventListener('error', function() {
    if (currentBtn) { setPlaying(currentBtn, false); currentBtn = null; }
  });
})();
</script>
{% endblock %}