{% extends "layout.html" %}
{% block title %}
  {%- if active_kind == 'artist' -%}Artists
  {%- elif active_kind == 'character' -%}Characters
  {%- elif active_kind == 'series' -%}Series
  {%- elif active_kind == 'fandom' -%}Fandoms
  {%- elif active_kind == 'rating' -%}Ratings
  {%- elif active_kind == 'archive' -%}Archives
  {%- elif active_kind == 'source' -%}Sources
  {%- elif active_kind == 'post' -%}Posts
  {%- elif active_kind == 'user' -%}User Tags
  {%- else -%}Tags{%- endif -%}
{% endblock %}

{% block content %}
<h1>
  {%- if active_kind == 'artist' -%}Artists
  {%- elif active_kind == 'character' -%}Characters
  {%- elif active_kind == 'series' -%}Series
  {%- elif active_kind == 'fandom' -%}Fandoms
  {%- elif active_kind == 'rating' -%}Ratings
  {%- elif active_kind == 'archive' -%}Archives
  {%- elif active_kind == 'source' -%}Sources
  {%- elif active_kind == 'post' -%}Posts
  {%- elif active_kind == 'user' -%}User Tags
  {%- else -%}All Tags{%- endif -%}
</h1>

<!-- Search bar -->
<div class="tag-search-bar">
  <input type="text"
         id="tagSearchInput"
         class="tag-search-input"
         placeholder="Search tags..."
         value="{{ search_query }}"
         autocomplete="off">
  <span id="tagSearchCount" class="tag-search-count">{{ total_count }} tags</span>
</div>

<!-- Tag kind filter -->
<div class="filter-bar" role="tablist" aria-label="Filter tags by kind">
  <a class="filter-btn {{ 'is-active' if not active_kind }}"
     href="{{ url_for('main.tag_list') }}"
     aria-current="{{ 'page' if not active_kind else 'false' }}">🏷️ All</a>

  <a class="filter-btn {{ 'is-active' if active_kind=='artist' }}"
     href="{{ url_for('main.tag_list', kind='artist') }}"
     aria-current="{{ 'page' if active_kind=='artist' else 'false' }}">🎨 Artists</a>

  <a class="filter-btn {{ 'is-active' if active_kind=='character' }}"
     href="{{ url_for('main.tag_list', kind='character') }}"
     aria-current="{{ 'page' if active_kind=='character' else 'false' }}">👤 Characters</a>

  <a class="filter-btn {{ 'is-active' if active_kind=='series' }}"
     href="{{ url_for('main.tag_list', kind='series') }}"
     aria-current="{{ 'page' if active_kind=='series' else 'false' }}">📺 Series</a>

  <a class="filter-btn {{ 'is-active' if active_kind=='fandom' }}"
     href="{{ url_for('main.tag_list', kind='fandom') }}"
     aria-current="{{ 'page' if active_kind=='fandom' else 'false' }}">🎭 Fandoms</a>

  <a class="filter-btn {{ 'is-active' if active_kind=='rating' }}"
     href="{{ url_for('main.tag_list', kind='rating') }}"
     aria-current="{{ 'page' if active_kind=='rating' else 'false' }}">⚠️ Ratings</a>

  <a class="filter-btn {{ 'is-active' if active_kind=='archive' }}"
     href="{{ url_for('main.tag_list', kind='archive') }}"
     aria-current="{{ 'page' if active_kind=='archive' else 'false' }}">🗜️ Archives</a>

  <a class="filter-btn {{ 'is-active' if active_kind=='source' }}"
     href="{{ url_for('main.tag_list', kind='source') }}"
     aria-current="{{ 'page' if active_kind=='source' else 'false' }}">🌐 Sources</a>

  <a class="filter-btn {{ 'is-active' if active_kind=='post' }}"
     href="{{ url_for('main.tag_list', kind='post') }}"
     aria-current="{{ 'page' if active_kind=='post' else 'false' }}">📌 Posts</a>

  <a class="filter-btn {{ 'is-active' if active_kind=='user' }}"
     href="{{ url_for('main.tag_list', kind='user') }}"
     aria-current="{{ 'page' if active_kind=='user' else 'false' }}"># User</a>
</div>

{% if null_fandom_character_count > 0 and not show_null_fandom_filter %}
<a href="{{ url_for('main.tag_list', kind='character', null_fandom=1) }}"
   class="null-fandom-counter-link">
  ⚠ {{ null_fandom_character_count }} character{{ 's' if null_fandom_character_count != 1 }} need a fandom
</a>
{% endif %}

{% if show_null_fandom_filter %}
<div class="null-fandom-filter-active">
  Showing characters without a fandom.
  <a href="{{ url_for('main.tag_list', kind='character') }}">Clear filter</a>
</div>
{% endif %}

{% if tag_data %}
<div class="tag-grid" id="tagGrid">
  {% include '_tag_cards.html' %}
</div>

<!-- Infinite scroll sentinel and loading indicator -->
<div id="tagScrollSentinel" class="scroll-sentinel" {% if not has_more %}style="display: none;"{% endif %}></div>
<div id="tagLoadingIndicator" class="loading-indicator" style="display: none;">
  <span class="spinner"></span> Loading more tags...
</div>

<!-- Infinite scroll state -->
<script>
  window.tagListState = {
    kind: {{ (active_kind | tojson) if active_kind else 'null' }},
    search: {{ (search_query | tojson) if search_query else 'null' }},
    offset: {{ tag_data | length }},
    pageSize: {{ page_size }},
    hasMore: {{ 'true' if has_more else 'false' }},
    loading: false,
    total: {{ total_count }}
  };
</script>
{% else %}
<p class="empty-state">No tags found in this category.</p>
{% endif %}

<!-- Tag Edit Modal -->
<div id="tagEditModal" class="modal">
  <div class="modal-content tag-edit-modal-content">
    <button id="tagEditClose" class="modal-close-btn" title="Close">×</button>
    <h2>Edit Tag</h2>
    <form id="tagEditForm" class="tag-edit-form">
      <input type="hidden" id="editTagId" name="tag_id">

      <div class="form-group">
        <label class="form-label" for="editTagName">Tag Name</label>
        <input type="text" id="editTagName" name="name" class="form-input" required>
      </div>

      <div class="form-group">
        <label class="form-label" for="editTagKind">Category</label>
        <select id="editTagKind" name="kind" class="form-input">
          <option value="user"># User Tag</option>
          <option value="artist">🎨 Artist</option>
          <option value="character">👤 Character</option>
          <option value="series">📺 Series</option>
          <option value="fandom">🎭 Fandom</option>
          <option value="rating">⚠️ Rating</option>
          <option value="archive">🗜️ Archive</option>
          <option value="source">🌐 Source</option>
          <option value="post">📌 Post</option>
        </select>
      </div>

      <div class="form-group" id="fandomGroup" style="display: none;">
        <label class="form-label" for="editTagFandom">Fandom</label>
        <div style="position: relative;">
          <input type="text"
                 id="editTagFandom"
                 class="form-input"
                 placeholder="Type to search fandoms..."
                 autocomplete="off">
          <input type="hidden" id="editTagFandomId">
          <div id="fandomAutocomplete" class="tag-autocomplete" style="display: none;"></div>
        </div>
        <small class="form-hint">Select an existing fandom or type a new one. Leave empty to remove fandom.</small>
      </div>

      <div class="form-actions">
        <button type="submit" class="btn primary-btn">Save Changes</button>
        <button type="button" id="tagDeleteBtn" class="btn danger-btn">Delete Tag</button>
      </div>
    </form>
  </div>
</div>

<script src="{{ url_for('static', filename='js/tag-editor.js') }}"></script>
<script>
// Tag list infinite scroll and search
(function() {
  const state = window.tagListState;
  if (!state) return;

  const grid = document.getElementById('tagGrid');
  const sentinel = document.getElementById('tagScrollSentinel');
  const loading = document.getElementById('tagLoadingIndicator');
  const searchInput = document.getElementById('tagSearchInput');
  const searchCount = document.getElementById('tagSearchCount');
  if (!grid || !sentinel) return;

  let searchTimeout = null;

  async function loadMoreTags() {
    if (state.loading || !state.hasMore) return;

    state.loading = true;
    loading.style.display = 'flex';

    try {
      const params = new URLSearchParams({
        offset: state.offset,
        limit: state.pageSize
      });
      if (state.kind) {
        params.set('kind', state.kind);
      }
      if (state.search) {
        params.set('search', state.search);
      }

      const response = await fetch(`/api/tags/list?${params}`);
      const data = await response.json();

      if (data.ok && data.html) {
        // Append new cards to grid
        grid.insertAdjacentHTML('beforeend', data.html);

        // Update state
        state.offset = data.offset;
        state.hasMore = data.has_more;

        // Hide sentinel if no more data
        if (!state.hasMore) {
          sentinel.style.display = 'none';
        }
      }
    } catch (error) {
      console.error('Failed to load more tags:', error);
    } finally {
      state.loading = false;
      loading.style.display = 'none';
    }
  }

  async function performSearch(query) {
    state.loading = true;
    loading.style.display = 'flex';
    state.search = query || null;
    state.offset = 0;

    try {
      const params = new URLSearchParams({
        offset: 0,
        limit: state.pageSize
      });
      if (state.kind) {
        params.set('kind', state.kind);
      }
      if (state.search) {
        params.set('search', state.search);
      }

      const response = await fetch(`/api/tags/list?${params}`);
      const data = await response.json();

      if (data.ok) {
        // Replace grid contents
        grid.innerHTML = data.html || '';

        // Update state
        state.offset = data.offset;
        state.hasMore = data.has_more;
        state.total = data.total;

        // Update count display
        if (searchCount) {
          searchCount.textContent = `${data.total} tag${data.total !== 1 ? 's' : ''}`;
        }

        // Show/hide sentinel
        sentinel.style.display = state.hasMore ? '' : 'none';
      }
    } catch (error) {
      console.error('Failed to search tags:', error);
    } finally {
      state.loading = false;
      loading.style.display = 'none';
    }
  }

  // Live search with debounce
  if (searchInput) {
    searchInput.addEventListener('input', (e) => {
      clearTimeout(searchTimeout);
      searchTimeout = setTimeout(() => {
        performSearch(e.target.value.trim());
      }, 300);
    });
  }

  // Set up IntersectionObserver for infinite scroll
  if ('IntersectionObserver' in window) {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && state.hasMore && !state.loading) {
          loadMoreTags();
        }
      },
      { rootMargin: '200px' }
    );
    observer.observe(sentinel);
  } else {
    // Fallback for older browsers: use scroll event
    let scrollTimeout;
    window.addEventListener('scroll', () => {
      clearTimeout(scrollTimeout);
      scrollTimeout = setTimeout(() => {
        const scrollY = window.scrollY + window.innerHeight;
        const docHeight = document.documentElement.scrollHeight;
        if (scrollY >= docHeight - 500 && state.hasMore && !state.loading) {
          loadMoreTags();
        }
      }, 100);
    });
  }
})();
</script>
{% endblock %}