{% extends "base.html" %}
{% block title %}{% if query %}Search: {{ query }}{% else %}Browse{% endif %}{% endblock %}
{% block body_class %}catalog-page{% endblock %}

{% block content %}
<div class="catalog-header">
    <h1>{% if query %}Results for "{{ query }}"{% else %}Browse Catalog{% endif %}</h1>
    <div class="catalog-controls">
        <form class="search-form" action="/catalog/search" method="get">
            <input type="text" name="q" placeholder="Search movies & shows..." value="{{ query or '' }}">
            <button type="submit" class="btn btn-sm">Search</button>
        </form>
        <div class="category-filter">
            <select id="category-select" onchange="applyFacets()">
                <option value="">All Categories</option>
                {% for cat in categories %}
                    <option value="{{ cat.slug }}" {% if active_category == cat.slug %}selected{% endif %}>{{ cat.name }}</option>
                {% endfor %}
            </select>
            <select id="tag-select" onchange="applyFacets()">
                <option value="">All Tags</option>
                {% for tag in tags %}
                    <option value="{{ tag.name }}" {% if active_tag == tag.name %}selected{% endif %}>{{ tag.name }}</option>
                {% endfor %}
            </select>
            <select id="sort-select" onchange="applyFacets()" title="Sort order">
                {% for key, label in sort_options %}
                    <option value="{{ key }}" {% if sort == key %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
            </select>
        </div>
    </div>
    {% if is_admin %}
    <div class="admin-hidden-notice">
        <span>Certain items are hidden from results.</span>
        {% if show_hidden %}
            <a href="{{ request.url.remove_query_params('show_hidden') }}">Hide them again</a>
        {% else %}
            <a href="{{ request.url.include_query_params(show_hidden=1) }}">Show hidden items?</a>
        {% endif %}
    </div>
    <div class="admin-results-actions">
        <button class="btn btn-sm btn-admin" onclick="saveResultsToPlaylist()">Save results to playlist</button>
    </div>
    {% endif %}
</div>

<div class="catalog-grid">
    {% for item in items %}
    <div class="catalog-card" data-token="{{ item.friendly_token }}">
        <a class="card-poster" href="/catalog/item/{{ item.friendly_token }}">
            {% if item.cover_art_source in ('tmdb', 'omdb') and item.cover_art_path %}
                <img src="/images/{{ item.cover_art_path }}/400.webp"
                     srcset="/images/{{ item.cover_art_path }}/200.webp 200w,
                             /images/{{ item.cover_art_path }}/400.webp 400w,
                             /images/{{ item.cover_art_path }}/800.webp 800w"
                     sizes="(max-width: 600px) 200px, 400px"
                     alt="{{ item.title }}" loading="lazy">
            {% elif item.placeholder_art %}
                {# Branded placeholder up front; reveal the real (often poor)
                   thumbnail on hover via CSS crossfade. #}
                <div class="card-poster-art">
                    <img class="poster-branded" src="{{ item.placeholder_art }}"
                         alt="{{ item.title }}" loading="lazy">
                    {% if item.thumbnail_url %}
                    <img class="poster-real" src="{{ item.thumbnail_url }}"
                         alt="" loading="lazy" aria-hidden="true">
                    {% elif item.cover_art_path %}
                    <img class="poster-real" src="/images/{{ item.cover_art_path }}/400.webp"
                         alt="" loading="lazy" aria-hidden="true">
                    {% endif %}
                </div>
            {% elif item.cover_art_path %}
                <img src="/images/{{ item.cover_art_path }}/400.webp"
                     alt="{{ item.title }}" loading="lazy">
            {% elif item.thumbnail_url %}
                <img src="{{ item.thumbnail_url }}"
                     alt="{{ item.title }}" loading="lazy">
            {% else %}
                <div class="card-poster-placeholder">
                    <span>{{ item.title[:1] }}</span>
                </div>
            {% endif %}
        </a>
        <div class="card-info">
            <h3 class="card-title" title="{{ item.title }}">
                <a href="/catalog/item/{{ item.friendly_token }}">{{ item.title }}</a>
            </h3>
            <span class="card-duration">{{ (item.duration_sec // 60) }}m</span>
        </div>
        <div class="card-actions">
            <button class="btn btn-sm btn-queue" onclick="queueItem('{{ item.friendly_token }}')">Queue</button>
            {% if user.rank >= 3 %}
            <button class="btn btn-sm btn-admin" onclick="queueAsAdmin('{{ item.friendly_token }}')">Queue as Admin</button>
            <button class="btn btn-sm" onclick="addToPlaylist('{{ item.friendly_token }}')">Add to playlist</button>
            <button class="btn btn-sm" onclick="addToRecentPlaylist('{{ item.friendly_token }}')">+ Recent</button>
            <button class="btn btn-sm btn-danger" onclick="hideItem('{{ item.friendly_token }}')">Hide</button>
            {% endif %}
        </div>
    </div>
    {% endfor %}
</div>

{% set sort_q = ('&sort=' ~ sort) if (sort and sort != 'default') else '' %}
{% if not items %}
<div class="empty-state">
    {% if query and (active_category or active_tag) %}
        <p>No results for "{{ query }}" within the selected filter{% if active_category and active_tag %}s{% endif %}.</p>
        <p class="muted">
            Active:
            {% if active_category %}<strong>category</strong>{% endif %}
            {% if active_category and active_tag %} and {% endif %}
            {% if active_tag %}<strong>tag “{{ active_tag }}”</strong>{% endif %}.
            Try widening your search.
        </p>
        <p>
            <a class="btn btn-sm" href="/catalog/search?q={{ query | urlencode }}{{ sort_q }}">Search without filters</a>
            <a class="btn btn-sm" href="/catalog/browse">Clear search</a>
        </p>
    {% elif query %}
        <p>No results for "{{ query }}".</p>
        <p class="muted">Check the spelling or try fewer / different words.</p>
        <p><a class="btn btn-sm" href="/catalog/browse">Back to browse</a></p>
    {% elif active_category or active_tag %}
        <p>No items match the selected filter{% if active_category and active_tag %}s{% endif %}.</p>
        <p class="muted">
            Active:
            {% if active_category %}<strong>category</strong>{% endif %}
            {% if active_category and active_tag %} and {% endif %}
            {% if active_tag %}<strong>tag “{{ active_tag }}”</strong>{% endif %}.
        </p>
        <p><a class="btn btn-sm" href="/catalog/browse">Clear filters</a></p>
    {% else %}
        <p>No items found.</p>
    {% endif %}
</div>
{% endif %}

<div class="pagination">
    {% if page > 1 %}
        <a href="?page={{ page - 1 }}{% if query %}&q={{ query }}{% endif %}{% if active_category %}&category={{ active_category }}{% endif %}{% if active_tag %}&tag={{ active_tag | urlencode }}{% endif %}{{ sort_q }}" class="btn btn-sm">&larr; Prev</a>
    {% endif %}

    {% set start_page = [1, page - 2] | max %}
    {% set end_page = [total_pages, page + 2] | min %}
    {% for p in range(start_page, end_page + 1) %}
        {% if p == page %}
            <span class="page-num page-current">{{ p }}</span>
        {% else %}
            <a href="?page={{ p }}{% if query %}&q={{ query }}{% endif %}{% if active_category %}&category={{ active_category }}{% endif %}{% if active_tag %}&tag={{ active_tag | urlencode }}{% endif %}{{ sort_q }}" class="btn btn-sm btn-page">{{ p }}</a>
        {% endif %}
    {% endfor %}

    <span class="page-info">of {{ total_pages }}</span>

    {% if page < total_pages %}
        <a href="?page={{ page + 1 }}{% if query %}&q={{ query }}{% endif %}{% if active_category %}&category={{ active_category }}{% endif %}{% if active_tag %}&tag={{ active_tag | urlencode }}{% endif %}{{ sort_q }}" class="btn btn-sm">Next &rarr;</a>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
const CURRENT_QUERY = {{ (query | tojson) if query else 'null' }};

function applyFacets() {
    const cat = document.getElementById('category-select').value;
    const tag = document.getElementById('tag-select').value;
    const sort = document.getElementById('sort-select').value;
    try { localStorage.setItem('browse_sort', sort); } catch (e) { /* ignore */ }
    const params = new URLSearchParams();
    // On a search results page keep the query AND apply the facets so search
    // results are narrowed by category/tag (they AND together server-side).
    if (CURRENT_QUERY) {
        params.set('q', CURRENT_QUERY);
    }
    if (cat) params.set('category', cat);
    if (tag) params.set('tag', tag);
    if (sort && sort !== 'default') params.set('sort', sort);
    const base = CURRENT_QUERY ? '/catalog/search' : '/catalog/browse';
    const qs = params.toString();
    window.location.href = base + (qs ? '?' + qs : '');
}

// Restore the persisted sort preference when arriving without an explicit sort.
(function restoreSortPreference() {
    const sel = document.getElementById('sort-select');
    if (!sel) return;
    const url = new URL(window.location.href);
    if (url.searchParams.has('sort')) return;
    let saved = null;
    try { saved = localStorage.getItem('browse_sort'); } catch (e) { /* ignore */ }
    if (saved && saved !== 'default' && sel.value === 'default'
        && [...sel.options].some(o => o.value === saved)) {
        sel.value = saved;
        applyFacets();
    }
})();

// --- Admin tile actions (rank >= 3) ---

async function addToPlaylist(token) {
    let playlists = [];
    try {
        const resp = await fetch('/admin/playlists/', { credentials: 'same-origin' });
        if (resp.ok) playlists = await resp.json();
    } catch (e) { /* handled below */ }
    if (!playlists.length) {
        showToast('No playlists yet — create one first', 'error');
        return;
    }
    showPlaylistPickerModal(token, playlists);
}

function showPlaylistPickerModal(token, playlists) {
    closePlaylistPickerModal();
    const overlay = document.createElement('div');
    overlay.id = 'playlist-picker-modal';
    overlay.className = 'modal-overlay';
    const opts = playlists.map(p => `<option value="${p.id}">${escapeHtml(p.name)}</option>`).join('');
    overlay.innerHTML = `
        <div class="modal-box" role="dialog" aria-modal="true">
            <h3>Add to playlist</h3>
            <div class="field">
                <label for="playlist-picker-select">Playlist</label>
                <select id="playlist-picker-select">${opts}</select>
            </div>
            <div class="modal-actions">
                <button class="btn btn-secondary" data-action="cancel">Cancel</button>
                <button class="btn btn-primary" data-action="add">Add</button>
            </div>
        </div>`;
    overlay.addEventListener('click', (e) => {
        if (e.target === overlay) closePlaylistPickerModal();
        const action = e.target.getAttribute('data-action');
        if (action === 'cancel') closePlaylistPickerModal();
        if (action === 'add') {
            const pid = document.getElementById('playlist-picker-select').value;
            closePlaylistPickerModal();
            submitAddToPlaylist(pid, token);
        }
    });
    document.body.appendChild(overlay);
}

function closePlaylistPickerModal() {
    const existing = document.getElementById('playlist-picker-modal');
    if (existing) existing.remove();
}

async function submitAddToPlaylist(playlistId, token) {
    try {
        const resp = await fetch(`/admin/playlists/${playlistId}/append`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            credentials: 'same-origin',
            body: JSON.stringify({ friendly_token: token })
        });
        const data = await resp.json();
        showToast(resp.ok ? `Added (${data.count} items)` : (data.detail || `Failed (${resp.status})`),
            resp.ok ? 'success' : 'error');
    } catch (e) {
        showToast(`Network error: ${e.message}`, 'error');
    }
}

// --- Save all current results to a playlist (rank >= 3) ---

async function saveResultsToPlaylist() {
    let playlists = [];
    try {
        const resp = await fetch('/admin/playlists/', { credentials: 'same-origin' });
        if (resp.ok) playlists = await resp.json();
    } catch (e) { /* handled below */ }
    if (!playlists.length) {
        showToast('No playlists yet — create one first', 'error');
        return;
    }
    showResultsPlaylistPicker(playlists);
}

function showResultsPlaylistPicker(playlists) {
    closePlaylistPickerModal();
    const overlay = document.createElement('div');
    overlay.id = 'playlist-picker-modal';
    overlay.className = 'modal-overlay';
    const opts = playlists.map(p => `<option value="${p.id}">${escapeHtml(p.name)}</option>`).join('');
    const scope = CURRENT_QUERY ? 'search' : 'filter';
    overlay.innerHTML = `
        <div class="modal-box" role="dialog" aria-modal="true">
            <h3>Save all results to playlist</h3>
            <p class="muted">Every item matching the current ${scope} will be appended, ordered by season/episode where detected. Items already in the playlist are skipped.</p>
            <div class="field">
                <label for="playlist-picker-select">Playlist</label>
                <select id="playlist-picker-select">${opts}</select>
            </div>
            <div class="modal-actions">
                <button class="btn btn-secondary" data-action="cancel">Cancel</button>
                <button class="btn btn-primary" data-action="save">Save results</button>
            </div>
        </div>`;
    overlay.addEventListener('click', (e) => {
        if (e.target === overlay) closePlaylistPickerModal();
        const action = e.target.getAttribute('data-action');
        if (action === 'cancel') closePlaylistPickerModal();
        if (action === 'save') {
            const pid = document.getElementById('playlist-picker-select').value;
            closePlaylistPickerModal();
            submitSaveResults(pid);
        }
    });
    document.body.appendChild(overlay);
}

async function submitSaveResults(playlistId) {
    const url = new URL(window.location.href);
    const isSearch = url.pathname.indexOf('/catalog/search') !== -1;
    const body = {
        mode: isSearch ? 'search' : 'browse',
        q: url.searchParams.get('q') || '',
        category: url.searchParams.get('category') || '',
        tag: url.searchParams.get('tag') || '',
        sort: url.searchParams.get('sort') || 'default',
        show_hidden: url.searchParams.get('show_hidden') ? 1 : 0,
    };
    showToast('Saving results…');
    try {
        const resp = await fetch(`/admin/playlists/${playlistId}/append-results`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            credentials: 'same-origin',
            body: JSON.stringify(body),
        });
        const data = await resp.json();
        showToast(
            resp.ok ? `Added ${data.added} item(s) — playlist now ${data.count}`
                    : (data.detail || `Failed (${resp.status})`),
            resp.ok ? 'success' : 'error');
    } catch (e) {
        showToast(`Network error: ${e.message}`, 'error');
    }
}

async function addToRecentPlaylist(token) {
    try {
        const resp = await fetch('/admin/playlists/recent/append', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            credentials: 'same-origin',
            body: JSON.stringify({ friendly_token: token })
        });
        const data = await resp.json();
        if (resp.ok) {
            showToast(`Added to "${data.name}" (${data.count})`);
        } else {
            showToast(data.detail || `Failed (${resp.status})`, 'error');
        }
    } catch (e) {
        showToast(`Network error: ${e.message}`, 'error');
    }
}

async function hideItem(token) {
    if (!confirm('Hide this item from the catalog? It will be tagged `kryten-hidden` in MediaCMS.')) return;
    try {
        const resp = await fetch(`/admin/catalog/${encodeURIComponent(token)}/hide`, {
            method: 'POST', credentials: 'same-origin'
        });
        if (resp.ok) {
            const card = document.querySelector(`.catalog-card[data-token="${token}"]`);
            if (card) card.remove();
            showToast('Item hidden');
        } else {
            const data = await resp.json().catch(() => ({}));
            showToast(data.detail || `Failed (${resp.status})`, 'error');
        }
    } catch (e) {
        showToast(`Network error: ${e.message}`, 'error');
    }
}
// queueItem / playNext / queueAsAdmin / showToast / escapeHtml are provided by /static/js/main.js
</script>
{% endblock %}