{% extends "base.html" %}
{% block content %}
<div class="p-4 max-w-6xl mx-auto" x-data="triageApp('{{ album_id }}')"
     @keydown.j.window="tagFocused('journal')"
     @keydown.s.window="tagFocused('story')"
     @keydown.x.window="tagFocused('skip')"
     @keydown.space.prevent.window="tagFocused('skip')">

  <div class="flex items-center justify-between mb-4">
    <h1 class="text-xl font-bold">Triage</h1>
    <div class="flex items-center gap-3">
      <span class="text-sm opacity-60" id="tagged-count">
        {{ state.photos | selectattr('tag', 'ne', 'untagged') | list | length }}
        / {{ state.photos | length }} tagged
      </span>
      <button id="done-btn"
              class="btn btn-primary btn-sm"
              {% if not all_tagged %}disabled{% endif %}
              @click="done()">
        Done triaging &rarr;
      </button>
    </div>
  </div>

  {% for day, photos in photos_by_day.items() %}
  <div class="day-group mb-6">
    <h2 class="sticky top-16 z-20 bg-base-200 py-1 text-sm font-semibold opacity-70">{{ day }}</h2>
    <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2 mt-2">
      {% for photo in photos %}
      <div class="photo-card relative cursor-pointer rounded-lg overflow-hidden border-4
                  {% if photo.tag == 'journal' %}border-success
                  {% elif photo.tag == 'story' %}border-info
                  {% elif photo.tag == 'skip' %}border-base-300 opacity-40
                  {% else %}border-transparent{% endif %}"
           data-asset-id="{{ photo.id }}"
           data-tag="{{ photo.tag }}"
           tabindex="0"
           @click="select($el)"
           @focus="select($el)">
        <img src="/proxy/thumb/{{ photo.id }}"
             class="w-full aspect-square object-cover" loading="lazy" alt="">
        <div class="absolute bottom-0 left-0 right-0 text-[10px] text-white bg-black/40 px-1">
          {{ photo.local_datetime[11:16] }}
        </div>
        {% if photo.tag != 'untagged' and photo.tag != 'skip' %}
        <div class="absolute top-1 right-1 badge badge-xs
                    {% if photo.tag == 'journal' %}badge-success{% else %}badge-info{% endif %}">
          {{ photo.tag[0] | upper }}
        </div>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </div>
  {% endfor %}
</div>
{% endblock %}

{% block extra_scripts %}
<script>
function triageApp(albumId) {
  return {
    focused: null,

    select(el) {
      this.focused = el;
    },

    async tagFocused(tag) {
      const el = this.focused || document.querySelector('.photo-card');
      if (!el) return;
      const assetId = el.dataset.assetId;
      await fetch('/triage/tag', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ album_id: albumId, asset_id: assetId, tag }),
      });
      el.dataset.tag = tag;
      // Remove any existing border/opacity classes before adding new ones
      el.className = el.className
        .split(' ')
        .filter(c => !c.startsWith('border-') && c !== 'opacity-40')
        .join(' ');
      if (tag === 'journal') {
        el.classList.add('border-success');
      } else if (tag === 'story') {
        el.classList.add('border-info');
      } else {
        el.classList.add('border-base-300', 'opacity-40');
      }
      this.updateCount();
    },

    updateCount() {
      const total = document.querySelectorAll('.photo-card').length;
      const tagged = document.querySelectorAll('.photo-card:not([data-tag="untagged"])').length;
      document.getElementById('tagged-count').textContent = `${tagged} / ${total} tagged`;
      document.getElementById('done-btn').disabled = tagged < total;
    },

    async done() {
      const res = await fetch('/triage/done', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ album_id: albumId }),
      });
      const data = await res.json();
      if (data.redirect) window.location = data.redirect;
    },
  };
}
</script>
{% endblock %}