{% extends "base.html" %}
{% block title %}{{ item.title }}{% endblock %}
{% block body_class %}item-detail-page{% endblock %}

{% block content %}
<div class="item-detail">
    <a href="javascript:history.back()" class="btn btn-sm btn-back">&larr; Back</a>

    <div class="item-detail-layout">
        <div class="item-detail-poster">
            {% if item.cover_art_path %}
                <img src="/images/{{ item.cover_art_path }}/800.webp"
                     srcset="/images/{{ item.cover_art_path }}/400.webp 400w,
                             /images/{{ item.cover_art_path }}/800.webp 800w"
                     sizes="(max-width: 600px) 100vw, 400px"
                     alt="{{ item.title }}">
            {% elif item.thumbnail_url %}
                <img src="{{ item.thumbnail_url }}" alt="{{ item.title }}">
            {% else %}
                <div class="card-poster-placeholder"><span>{{ item.title[:1] }}</span></div>
            {% endif %}

            <div class="card-actions item-detail-actions">
                <button class="btn btn-queue" onclick="queueItem('{{ item.friendly_token }}')">Queue</button>
                <button class="btn btn-watchlist"
                        data-token="{{ item.friendly_token }}"
                        onclick="toggleWatchlist(this, '{{ item.friendly_token }}')">+ My List</button>
                {% if user.rank >= 3 %}
                <button class="btn btn-admin" onclick="queueAsAdmin('{{ item.friendly_token }}')">Queue as Admin</button>
                <button class="btn" onclick="reEnrichItem('{{ item.friendly_token }}')" title="Force re-run classify, title, meta, art, and tags for this item">Re-enrich</button>
                {% endif %}
            </div>
        </div>

        <div class="item-detail-info">
            <h1 class="item-detail-title">{{ item.title }}</h1>
            <div class="item-detail-meta">
                {% if item.duration_sec %}
                    <span class="item-duration">{{ (item.duration_sec // 60) }}m</span>
                {% endif %}
            </div>

            {% if item.description %}
                <p class="item-detail-description">{{ item.description }}</p>
            {% else %}
                <p class="item-detail-description empty-state">No description available.</p>
            {% endif %}

            {% if categories %}
            <div class="item-detail-facet">
                <span class="item-detail-facet-label">Category</span>
                <div class="item-detail-chips">
                    {% for cat in categories %}
                        <a class="np-chip np-chip-cat" href="/catalog/browse?category={{ cat.slug }}">{{ cat.name }}</a>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            {% if tags %}
            <div class="item-detail-facet">
                <span class="item-detail-facet-label">Tags</span>
                <div class="item-detail-chips">
                    {% for tag in tags %}
                        <a class="np-chip np-chip-tag" href="/catalog/browse?tag={{ tag | urlencode }}">{{ tag }}</a>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            {% if people.director %}
            <div class="item-detail-facet">
                <span class="item-detail-facet-label">Director</span>
                <div class="item-detail-chips">
                    {% for name in people.director %}
                        <a class="np-chip np-chip-person np-chip-director" href="/catalog/browse?person={{ name | urlencode }}">{{ name }}</a>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            {% if people.cast %}
            <div class="item-detail-facet">
                <span class="item-detail-facet-label">Cast</span>
                <div class="item-detail-chips">
                    {% for name in people.cast %}
                        <a class="np-chip np-chip-person np-chip-cast" href="/catalog/browse?person={{ name | urlencode }}">{{ name }}</a>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            {% if people.producer %}
            <div class="item-detail-facet">
                <span class="item-detail-facet-label">Producers</span>
                <div class="item-detail-chips">
                    {% for name in people.producer %}
                        <a class="np-chip np-chip-person np-chip-producer" href="/catalog/browse?person={{ name | urlencode }}">{{ name }}</a>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            {% if people.writer %}
            <div class="item-detail-facet">
                <span class="item-detail-facet-label">Writer</span>
                <div class="item-detail-chips">
                    {% for name in people.writer %}
                        <a class="np-chip np-chip-person np-chip-writer" href="/catalog/browse?person={{ name | urlencode }}">{{ name }}</a>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            {% if studios %}
            <div class="item-detail-facet">
                <span class="item-detail-facet-label">Studio</span>
                <div class="item-detail-chips">
                    {% for name in studios %}
                        <a class="np-chip np-chip-studio" href="/catalog/browse?studio={{ name | urlencode }}">{{ name }}</a>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
initWatchlistButtons();

async function reEnrichItem(token) {
    if (!confirm('Force re-run enrichment (classify, title, meta, art, tags) for this item?')) return;
    try {
        const resp = await fetch(`/admin/catalog/${encodeURIComponent(token)}/enrich`, {
            method: 'POST', credentials: 'same-origin'
        });
        const data = await resp.json().catch(() => ({}));
        if (resp.ok) {
            showToast('Enrichment started (job run #' + (data.run_id || '?') + ')');
        } else {
            showToast(data.detail || `Failed (${resp.status})`, 'error');
        }
    } catch (e) {
        showToast(`Network error: ${e.message}`, 'error');
    }
}
</script>
{% endblock %}