{% extends "ops/base.html" %}
{% block content %}
<section data-playlists-page>
  <h1>Playlists</h1>

  <div class="card">
    <h2>Playlist Coverage</h2>
    <table>
      <thead>
        <tr>
          <th>Platform</th>
          <th>Pool Kind</th>
          <th>Pool Name</th>
          <th>Playlists</th>
        </tr>
      </thead>
      <tbody>
        {% for row in playlist_sources %}
        <tr>
          <td>{{ row.platform }}</td>
          <td>{{ row.pool_kind }}</td>
          <td>{{ row.pool_name }}</td>
          <td>{{ row.playlist_count }}</td>
        </tr>
        {% else %}
        <tr><td colspan="4">No playlist sources collected yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="card">
    <h2>Filters</h2>
    <form method="get" action="/playlists">
      <input type="hidden" name="sort_by" value="{{ filters.sort_by }}" />
      <input type="hidden" name="sort_dir" value="{{ filters.sort_dir }}" />
      <div class="grid">
        <label>
          Keyword
          <input type="text" name="keyword" value="{{ filters.keyword }}" placeholder="Name / remote id" />
        </label>
        <label>
          Platform
          <select name="platform">
            <option value="">All</option>
            {% for option in filter_options.platforms %}
            <option value="{{ option }}" {% if filters.platform == option %}selected{% endif %}>{{ option }}</option>
            {% endfor %}
          </select>
        </label>
        <label>
          Pool Kind
          <select name="pool_kind">
            <option value="">All</option>
            {% for option in filter_options.pool_kinds %}
            <option value="{{ option }}" {% if filters.pool_kind == option %}selected{% endif %}>{{ option }}</option>
            {% endfor %}
          </select>
        </label>
        <label>
          Status
          <select name="status">
            <option value="" {% if not filters.status %}selected{% endif %}>All</option>
            <option value="unsynced" {% if filters.status == "unsynced" %}selected{% endif %}>Unsynced</option>
            <option value="not_downloaded" {% if filters.status == "not_downloaded" %}selected{% endif %}>Not Downloaded</option>
            <option value="downloading" {% if filters.status == "downloading" %}selected{% endif %}>Downloading</option>
            <option value="partial" {% if filters.status == "partial" %}selected{% endif %}>Partial</option>
            <option value="downloaded" {% if filters.status == "downloaded" %}selected{% endif %}>Downloaded</option>
          </select>
        </label>
        <label>
          Wanted
          <select name="wanted_only">
            <option value="" {% if not filters.wanted_only %}selected{% endif %}>All</option>
            <option value="1" {% if filters.wanted_only %}selected{% endif %}>Wanted only</option>
          </select>
        </label>
        <label>
          Page Size
          <select name="page_size">
            <option value="20" {% if filters.page_size == 20 %}selected{% endif %}>20</option>
            <option value="50" {% if filters.page_size == 50 %}selected{% endif %}>50</option>
            <option value="100" {% if filters.page_size == 100 %}selected{% endif %}>100</option>
          </select>
        </label>
      </div>
      <button type="submit">Apply Filters</button>
    </form>
  </div>

  <div class="card">
    <div class="button-grid">
      <button type="button" data-playlist-select-all>Select All On Page</button>
      <button type="button" class="secondary" data-playlist-clear-selection>Clear Selection</button>
      <span>Selected: <strong data-playlist-selection-count>0</strong></span>
      <form action="/api/jobs" method="post" data-json-form data-success="reload">
        <input type="hidden" name="job_type" value="collect_only" />
        <input type="hidden" name="requested_by" value="ops-console" />
        <input type="hidden" name="sources" value="{{ default_sources }}" />
        <button type="submit" class="secondary">Collect Playlist Sources</button>
      </form>
    </div>
    <div class="button-grid" style="margin-top: 0.8rem;">
      <button type="button" data-playlist-action="sync">Sync Selected Playlists</button>
      <button type="button" data-playlist-action="download">Download Selected Playlists</button>
      <button type="button" class="secondary" data-playlist-action="export-selected">Export Selected</button>
      <button type="button" class="secondary" data-playlist-action="mark-wanted">Mark Wanted</button>
      <button type="button" class="secondary" data-playlist-action="unmark-wanted">Unmark Wanted</button>
    </div>
  </div>

  <table>
    <thead>
      <tr>
        <th>Select</th>
        <th class="playlist-sort-th">
          <a class="playlist-sort-link" data-playlist-sort-link="id" href="{{ sort_links.id.href }}">
            <span>ID</span>
            {% if sort_links.id.indicator %}
            <span class="playlist-sort-indicator" data-playlist-sort-indicator="id">{{ sort_links.id.indicator }}</span>
            {% endif %}
          </a>
        </th>
        <th class="playlist-sort-th">
          <a class="playlist-sort-link" data-playlist-sort-link="platform" href="{{ sort_links.platform.href }}">
            <span>Platform</span>
            {% if sort_links.platform.indicator %}
            <span class="playlist-sort-indicator" data-playlist-sort-indicator="platform">{{ sort_links.platform.indicator }}</span>
            {% endif %}
          </a>
        </th>
        <th>Remote ID</th>
        <th class="playlist-sort-th">
          <a class="playlist-sort-link" data-playlist-sort-link="name" href="{{ sort_links.name.href }}">
            <span>Name</span>
            {% if sort_links.name.indicator %}
            <span class="playlist-sort-indicator" data-playlist-sort-indicator="name">{{ sort_links.name.indicator }}</span>
            {% endif %}
          </a>
        </th>
        <th class="playlist-sort-th">
          <a class="playlist-sort-link" data-playlist-sort-link="play_count" href="{{ sort_links.play_count.href }}">
            <span>&#28909;&#24230;/&#25773;&#25918;&#37327;</span>
            {% if sort_links.play_count.indicator %}
            <span class="playlist-sort-indicator" data-playlist-sort-indicator="play_count">{{ sort_links.play_count.indicator }}</span>
            {% endif %}
          </a>
        </th>
        <th>Pools</th>
        <th>Songs</th>
        <th>Downloaded</th>
        <th>Progress</th>
        <th>Status</th>
        <th>Wanted</th>
        <th>Updated</th>
      </tr>
    </thead>
    <tbody>
      {% for playlist in playlists %}
      <tr>
        <td>
          <input type="checkbox" data-playlist-checkbox value="{{ playlist.id }}" />
        </td>
        <td>{{ playlist.id }}</td>
        <td>{{ playlist.platform }}</td>
        <td>{{ playlist.remote_playlist_id }}</td>
        <td>
          {% if (playlist.song_count or 0) > 0 %}
          <button
            type="button"
            class="playlist-name-button"
            data-playlist-open-songs="{{ playlist.id }}"
            data-playlist-name="{{ playlist.name }}"
            data-playlist-platform="{{ playlist.platform }}"
            data-playlist-remote-id="{{ playlist.remote_playlist_id }}"
          >{{ playlist.name }}</button>
          {% else %}
          {{ playlist.name }}
          {% endif %}
        </td>
        <td>{{ playlist.play_count if playlist.play_count is not none else "-" }}</td>
        <td>{{ playlist.pool_names or "-" }}</td>
        <td>
          <div>{{ playlist.display_song_count or 0 }}</div>
          {% if playlist.is_song_count_estimated %}
          <div class="muted">Collected {{ playlist.collected_song_count }}</div>
          {% endif %}
        </td>
        <td>{{ playlist.downloaded_song_count or 0 }}</td>
        <td class="progress-cell">
          <div class="progress-meta">
            <span>{{ playlist.downloaded_song_count or 0 }} / {{ playlist.song_count or 0 }}</span>
            <strong>{{ playlist.progress_percent or 0 }}%</strong>
          </div>
          <div class="progress-bar">
            <div class="progress-fill" style="width: {{ playlist.progress_percent or 0 }}%;"></div>
          </div>
          {% if (playlist.song_count or 0) == 0 or playlist.running_download_song_count %}
          <div class="progress-note muted">
            {% if (playlist.song_count or 0) == 0 and playlist.collected_song_count is not none %}
            Collected {{ playlist.collected_song_count }}, sync recommended
            {% elif (playlist.song_count or 0) == 0 %}
            0 songs, sync recommended
            {% elif playlist.running_download_song_count %}
            Running {{ playlist.running_download_song_count }}
            {% endif %}
          </div>
          {% endif %}
        </td>
        <td>{{ playlist.state_label or playlist.state_code or "-" }}</td>
        <td>{% if playlist.is_wanted %}Yes{% else %}No{% endif %}</td>
        <td>{{ playlist.updated_at }}</td>
      </tr>
      {% else %}
      <tr><td colspan="13">No playlists.</td></tr>
      {% endfor %}
    </tbody>
  </table>

  <div class="card" data-playlist-pagination>
    <p>
      Page {{ playlist_page.page }} / {{ playlist_page.total_pages if playlist_page.total_pages > 0 else 1 }}
      - Total {{ playlist_page.total_count }} playlists
    </p>
    <div class="button-grid">
      {% if previous_page_url %}
      <a href="{{ previous_page_url }}">Previous</a>
      {% else %}
      <span class="muted">Previous</span>
      {% endif %}
      {% if next_page_url %}
      <a href="{{ next_page_url }}">Next</a>
      {% else %}
      <span class="muted">Next</span>
      {% endif %}
    </div>
  </div>

  <div class="playlist-modal" data-playlist-songs-modal hidden>
    <div class="playlist-modal-backdrop" data-playlist-modal-close></div>
    <div class="playlist-modal-panel" role="dialog" aria-modal="true" aria-labelledby="playlist-modal-title">
      <div class="playlist-modal-header">
        <div>
          <h2 id="playlist-modal-title" data-playlist-modal-title>Playlist Songs</h2>
          <p class="playlist-modal-meta muted" data-playlist-modal-meta>-</p>
        </div>
        <div class="button-grid">
          <button type="button" class="secondary" data-playlist-export disabled>Export</button>
          <button type="button" class="secondary playlist-modal-close" data-playlist-modal-close aria-label="Close">x</button>
        </div>
      </div>
      <div class="playlist-modal-body">
        <p class="muted" data-playlist-modal-state>Select a playlist to preview songs.</p>
        <div class="playlist-modal-table-wrap" data-playlist-modal-table-wrap hidden>
          <table>
            <thead>
              <tr>
                <th>Song ID</th>
                <th>Name</th>
                <th>Singers</th>
                <th>Size</th>
                <th>Format</th>
                <th>Local</th>
                <th>Uploaded</th>
              </tr>
            </thead>
            <tbody data-playlist-songs-body>
              <tr><td colspan="7">No songs.</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}