{% extends 'backlogger/base.html' %}

{% block title %}Library — Kill My Backlog{% endblock %}

{% block styles %}
<style>
  .container { max-width: 1100px; margin: 0 auto; padding: 2rem; }

  .top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
  .top-bar h1 { font-size: 1.75rem; letter-spacing: -0.03em; }
  .top-bar .count { color: #64748b; font-size: 1rem; font-weight: 400; margin-left: 0.5rem; }

  .filter-bar { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid #1e293b; margin-bottom: 1.5rem; }
  .tabs { display: flex; gap: 0; }
  .tab { padding: 0.6rem 1rem; font-size: 0.85rem; color: #64748b; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
  .tab:hover { color: #e2e8f0; }
  .tab.active { color: #38bdf8; border-bottom-color: #38bdf8; }
  .tab-sep { width: 1px; background: #1e293b; margin: 0.5rem 0.25rem; align-self: stretch; }

  .sort-wrap { padding-bottom: 0.75rem; }
  .sort-wrap select { background: #1e293b; color: #e2e8f0; border: 1px solid #334155; border-radius: 6px; padding: 0.3rem 0.65rem; font-size: 0.8rem; cursor: pointer; }

  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }

  .card { background: #0a0f1e; border: 1px solid #1e293b; border-radius: 10px; padding: 1.1rem 1.25rem; display: flex; flex-direction: column; }
  .card-top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
  .badge { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.18rem 0.45rem; border-radius: 4px; }
  .badge-games { background: #3b2f6a; color: #a78bfa; }
  .badge-books { background: #064e3b; color: #34d399; }
  .badge-films { background: #431407; color: #fb923c; }
  .badge-other { background: #1e293b; color: #94a3b8; }
  .star { color: #fbbf24; font-size: 0.9rem; margin-left: auto; }

  .card-name { font-size: 1rem; font-weight: 600; margin-bottom: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .progress-bar { height: 4px; background: #1e293b; border-radius: 2px; margin-bottom: 0.3rem; }
  .progress-fill { height: 100%; background: #38bdf8; border-radius: 2px; min-width: 0; }
  .card-stat { font-size: 0.78rem; color: #38bdf8; font-variant-numeric: tabular-nums; margin-bottom: 0.3rem; }
  .card-info { font-size: 0.76rem; color: #64748b; min-height: 1.1em; margin-bottom: 0.85rem; flex: 1; }
  .card-actions { display: flex; gap: 0.4rem; }
  .card-actions form { display: inline; }

  .empty { text-align: center; padding: 5rem 2rem; color: #64748b; }
  .empty a { color: #38bdf8; }

  @keyframes complete-glow {
    0%   { box-shadow: 0 0 0px 0px rgba(255,255,255,0);   transform: scale(1); }
    30%  { box-shadow: 0 0 18px 6px rgba(255,255,255,0.55); transform: scale(1.03); }
    70%  { box-shadow: 0 0 24px 8px rgba(255,255,255,0.35); transform: scale(1.03); }
    100% { box-shadow: 0 0 0px 0px rgba(255,255,255,0);   transform: scale(1); opacity: 0; }
  }
  .card.completing { animation: complete-glow 0.7s ease-out forwards; pointer-events: none; }

  body[data-theme="light"] .card { background: #ffffff; border-color: #e2e8f0; }
  body[data-theme="light"] .progress-bar { background: #e2e8f0; }
  body[data-theme="light"] .progress-fill { background: #0284c7; }
  body[data-theme="light"] .card-stat { color: #0284c7; }
  body[data-theme="light"] .filter-bar { border-color: #e2e8f0; }
  body[data-theme="light"] .tab-sep { background: #e2e8f0; }
  body[data-theme="light"] .tab.active { color: #0284c7; border-bottom-color: #0284c7; }
  body[data-theme="light"] .sort-wrap select { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; }
  body[data-theme="light"] .empty a { color: #0284c7; }
</style>
{% endblock %}

{% block nav %}
<a href="{% url 'backlogger:profile' %}">{{ request.user.profile.display_name|default:request.user.username }}</a>
<form method="post" action="{% url 'logout' %}" style="display:inline">{% csrf_token %}<button type="submit" style="background:none;border:none;color:#64748b;font-size:0.85rem;cursor:pointer;padding:0">Log out</button></form>
{% endblock %}

{% block content %}
<div class="container">
  <div class="top-bar">
    <h1>Library <span class="count">{{ items|length }}</span></h1>
    <div style="display:flex;gap:0.5rem;align-items:center">
      {% if request.GET.imported %}
      <span style="font-size:0.82rem;color:#34d399">&#10003; {{ request.GET.imported }} game{{ request.GET.imported|pluralize }} imported</span>
      {% endif %}
      {% if request.GET.synced %}
      <span style="font-size:0.82rem;color:#34d399">&#10003; {{ request.GET.synced }} game{{ request.GET.synced|pluralize }} synced</span>
      {% endif %}
      {% if request.GET.sync_error %}
      <span style="font-size:0.82rem;color:#f87171">Steam sync failed</span>
      {% endif %}
      <a href="{% url 'backlogger:steam_sync_login' %}" class="btn btn-outline" style="font-size:0.82rem" title="Sync hours played from Steam">&#8635; Sync</a>
      <a href="{% url 'backlogger:steam_login' %}" class="btn btn-outline" style="font-size:0.82rem">&#9654; Import</a>
      {% if debug %}
      <form method="post" action="{% url 'backlogger:debug_delete_all' %}" onsubmit="return confirm('Delete ALL items?')">
        {% csrf_token %}
        <button type="submit" class="btn btn-danger" style="font-size:0.82rem">&#128465; Delete all</button>
      </form>
      {% endif %}
      <a href="{% url 'backlogger:add' %}" class="btn btn-primary">+ Add item</a>
    </div>
  </div>

  <div class="filter-bar">
    <div class="tabs">
      <a href="?sort={{ sort }}" class="tab {% if shelf == 'active' %}active{% endif %}">Active</a>
      <a href="?shelf=completed&sort={{ sort }}" class="tab {% if shelf == 'completed' %}active{% endif %}">Completed</a>
      <a href="?shelf=abandoned&sort={{ sort }}" class="tab {% if shelf == 'abandoned' %}active{% endif %}">Abandoned</a>
      <a href="?shelf=unending&sort={{ sort }}" class="tab {% if shelf == 'unending' %}active{% endif %}">Unending</a>
      {% if shelf == 'active' %}
      <span class="tab-sep"></span>
      <a href="?sort={{ sort }}" class="tab {% if not category %}active{% endif %}">All</a>
      {% for val, label in categories %}
      <a href="?category={{ val }}&sort={{ sort }}" class="tab {% if category == val %}active{% endif %}">{{ label }}</a>
      {% endfor %}
      {% endif %}
    </div>
    <div class="sort-wrap">
      <select onchange="location='?shelf={{ shelf }}&category={{ category }}&sort='+this.value">
        <option value="fav"      {% if sort == 'fav'      %}selected{% endif %}>Favorites first</option>
        <option value="az"       {% if sort == 'az'       %}selected{% endif %}>A → Z</option>
        <option value="za"       {% if sort == 'za'       %}selected{% endif %}>Z → A</option>
        <option value="newest"   {% if sort == 'newest'   %}selected{% endif %}>Newest first</option>
        <option value="oldest"   {% if sort == 'oldest'   %}selected{% endif %}>Oldest first</option>
        <option value="progress" {% if sort == 'progress' %}selected{% endif %}>Most complete</option>
        <option value="updated"  {% if sort == 'updated'  %}selected{% endif %}>Recently updated</option>
      </select>
    </div>
  </div>

  {% if items %}
  <div class="grid">
    {% for item in items %}
    <div class="card">
      <div class="card-top">
        <span class="badge badge-{{ item.category }}">{{ item.get_category_display }}</span>
        {% if item.favorite %}<span class="star">★</span>{% endif %}
      </div>

      <div class="card-name" title="{{ item.name }}">{{ item.name }}</div>

      <div class="progress-bar">
        <div class="progress-fill" style="width: {{ item.progress_percent }}%"></div>
      </div>
      <div class="card-stat">{{ item.progress_percent|floatformat:0 }}%</div>

      <div class="card-info">
        {% if item.category == 'games' %}
          {% if item.hours_played is not None %}
            {{ item.hours_played|floatformat:1 }}h played{% if item.total_hours %} / {{ item.total_hours|floatformat:0 }}h total{% endif %}
          {% endif %}
          {% if item.hltb_main or item.hltb_extra or item.hltb_complete %}
          <div style="margin-top:0.3rem;font-size:0.72rem;color:#475569">
            HLTB:{% if item.hltb_main %} {{ item.hltb_main|floatformat:0 }}h{% endif %}{% if item.hltb_extra %} · +extra {{ item.hltb_extra|floatformat:0 }}h{% endif %}{% if item.hltb_complete %} · 100% {{ item.hltb_complete|floatformat:0 }}h{% endif %}
          </div>
          {% endif %}
        {% elif item.category == 'books' %}
          {% if item.pages_read is not None %}
            {{ item.pages_read }} pages{% if item.total_pages %} / {{ item.total_pages }} total{% endif %}
          {% endif %}
        {% elif item.category == 'films' %}
          {% if item.watched %}&#10003; Watched{% else %}&#9675; Not watched{% endif %}{% if item.duration_minutes %}  &middot;  {{ item.duration_minutes }} min{% endif %}
        {% endif %}
      </div>

      <div class="card-actions">
        <a href="{% url 'backlogger:edit' item.pk %}" class="btn btn-sm btn-outline">Edit</a>
        {% if shelf == 'active' %}
        <form method="post" action="{% url 'backlogger:set_status' item.pk %}" data-complete>
          {% csrf_token %}
          <input type="hidden" name="status" value="completed">
          <input type="hidden" name="next" value="{{ request.get_full_path }}">
          <button type="submit" class="btn btn-done">Done</button>
        </form>
        {% if item.category == 'games' %}
        <form method="post" action="{% url 'backlogger:set_status' item.pk %}">
          {% csrf_token %}
          <input type="hidden" name="status" value="unending">
          <input type="hidden" name="next" value="{{ request.get_full_path }}">
          <button type="submit" class="btn btn-sm btn-outline" style="color:#38bdf8;border-color:#38bdf8" title="Unending">∞</button>
        </form>
        {% endif %}
        <form method="post" action="{% url 'backlogger:set_status' item.pk %}">
          {% csrf_token %}
          <input type="hidden" name="status" value="abandoned">
          <input type="hidden" name="next" value="{{ request.get_full_path }}">
          <button type="submit" class="btn btn-abandon">Abandon</button>
        </form>
        {% else %}
        <form method="post" action="{% url 'backlogger:set_status' item.pk %}">
          {% csrf_token %}
          <input type="hidden" name="status" value="active">
          <input type="hidden" name="next" value="{{ request.get_full_path }}">
          <button type="submit" class="btn btn-sm btn-outline">Restore</button>
        </form>
        {% endif %}
        <form method="post" action="{% url 'backlogger:delete' item.pk %}" onsubmit="return confirm('Delete &quot;{{ item.name }}&quot;?')">
          {% csrf_token %}
          <button type="submit" class="btn btn-danger">Delete</button>
        </form>
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="empty">
    No items here yet. <a href="{% url 'backlogger:add' %}">Add your first one.</a>
  </div>
  {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
  function playDing() {
    try {
      const ctx = new (window.AudioContext || window.webkitAudioContext)();
      [[880, 0, 0.15], [1320, 0.12, 0.28]].forEach(([freq, start, end]) => {
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.type = 'sine';
        osc.frequency.value = freq;
        gain.gain.setValueAtTime(0, ctx.currentTime + start);
        gain.gain.linearRampToValueAtTime(0.25, ctx.currentTime + start + 0.02);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + end);
        osc.start(ctx.currentTime + start);
        osc.stop(ctx.currentTime + end);
      });
    } catch (e) {}
  }

  document.querySelectorAll('form[data-complete]').forEach(form => {
    form.addEventListener('submit', function(e) {
      e.preventDefault();
      const card = form.closest('.card');
      playDing();
      card.classList.add('completing');
      setTimeout(() => form.submit(), 680);
    });
  });
</script>
{% endblock %}