{% extends "base.html" %}
{% block title %}{{ series_name|urldecode }}{% endblock %}
{% block extra_head %}
<style>
    .series-detail-page {
        max-width: 900px;
    }
    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text-muted);
        text-decoration: none;
        font-size: 0.9em;
        font-weight: 500;
        margin-bottom: 20px;
    }
    .back-link:hover { color: var(--text-primary); }
    .series-header {
        margin-bottom: 24px;
    }
    .series-header h1 {
        font-size: 1.8em;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 8px;
    }
    .series-header p {
        color: var(--text-muted);
        font-size: 0.9em;
    }
    .expand-all-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        color: var(--text-secondary);
        padding: 8px 16px;
        border-radius: var(--radius-md);
        cursor: pointer;
        font-size: 0.85em;
        font-weight: 500;
        transition: var(--transition);
        margin-bottom: 20px;
    }
    .expand-all-btn:hover {
        background: var(--bg-elevated);
        border-color: var(--border-hover);
    }
    .season-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        margin-bottom: 12px;
        overflow: hidden;
        transition: var(--transition);
    }
    .season-card:hover { border-color: var(--border-hover); }
    .season-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        cursor: pointer;
        user-select: none;
        transition: var(--transition);
    }
    .season-header:hover { background: rgba(255,255,255,0.02); }
    .season-info {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .season-number {
        width: 40px;
        height: 40px;
        background: var(--bg-surface);
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        color: var(--primary);
        font-size: 0.9em;
    }
    .season-title {
        font-size: 1em;
        color: var(--text-primary);
        font-weight: 600;
    }
    .ep-count {
        color: var(--text-muted);
        font-size: 0.85em;
    }
    .arrow {
        color: var(--text-muted);
        font-size: 1em;
        transition: transform 0.3s;
    }
    .season-card.open .arrow { transform: rotate(180deg); }
    .season-episodes {
        display: none;
        padding: 0 16px 16px;
    }
    .season-card.open .season-episodes { display: block; }
    .season-episodes a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        background: var(--bg-surface);
        border: 1px solid transparent;
        border-radius: var(--radius-md);
        text-decoration: none;
        color: var(--text-secondary);
        font-size: 0.85em;
        margin-bottom: 6px;
        transition: var(--transition);
    }
    .season-episodes a:hover {
        border-color: var(--border-hover);
        background: var(--bg-elevated);
        color: var(--text-primary);
    }
    .season-episodes .ep-num {
        color: var(--primary);
        font-weight: 600;
        min-width: 36px;
    }
    .season-episodes .ep-name {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .season-episodes .ep-status {
        color: var(--text-muted);
        font-size: 0.9em;
    }
    .season-episodes .watched-check {
        color: var(--green);
        font-size: 0.9em;
    }
</style>
{% endblock %}
{% block content %}
<div class="series-detail-page">
    <a href="{{ url_for('series') }}" class="back-link">← Voltar para Séries</a>

    <div class="series-header" style="display:flex; gap:24px; margin-bottom:24px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;">
        {% if logo %}
        <div style="width:180px; min-height:260px; flex-shrink:0; background:var(--bg-surface); display:flex; align-items:center; justify-content:center; overflow:hidden;">
            <img src="{{ logo|proxy_logo }}" alt="{{ series_name|urldecode }}" loading="lazy" style="width:100%; height:100%; object-fit:cover;" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
            <span style="display:none; font-size:4em; color:var(--text-muted);">🎞️</span>
        </div>
        {% endif %}
        <div style="flex:1; padding:24px 24px 24px 0; display:flex; flex-direction:column;">
            <h1 style="font-size:1.8em; font-weight:700; color:var(--text-primary); margin-bottom:8px;">{{ series_name|urldecode }}</h1>
            <div style="display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px;">
                {% if group_title %}<span style="background:var(--bg-surface); border:1px solid var(--border); color:var(--text-secondary); padding:4px 12px; border-radius:100px; font-size:0.8em; font-weight:500;">{{ group_title }}</span>{% endif %}
                <span style="background:var(--bg-surface); border:1px solid var(--border); color:var(--text-secondary); padding:4px 12px; border-radius:100px; font-size:0.8em; font-weight:500;">{{ seasons|length }} temporada(s)</span>
                <span style="background:var(--bg-surface); border:1px solid var(--border); color:var(--text-secondary); padding:4px 12px; border-radius:100px; font-size:0.8em; font-weight:500;">{{ total_eps }} episódio(s)</span>
                {% if year %}<span style="background:var(--primary); color:#fff; border:1px solid var(--primary); padding:4px 12px; border-radius:100px; font-size:0.8em; font-weight:500;">{{ year }}</span>{% endif %}
                {% if rating %}<span style="background:transparent; color:var(--gold); border:1px solid var(--gold); padding:4px 12px; border-radius:100px; font-size:0.8em; font-weight:500;">⭐ {{ "%.1f"|format(rating) }}</span>{% endif %}
            </div>
            {% if description %}
            <p style="color:var(--text-secondary); font-size:0.9em; line-height:1.6; margin-bottom:16px; flex:1;">{{ description }}</p>
            {% endif %}
            <div style="display:flex; gap:10px; flex-wrap:wrap;">
                <button onclick="trocoShare('{{ series_name|urldecode }}', window.location.href)" style="display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-surface);color:var(--text-secondary);font-size:.85em;cursor:pointer;">🔗 Compartilhar</button>
            </div>
        </div>
    </div>

    <button class="expand-all-btn" onclick="toggleAll()">Expandir / Recolher Todas</button>

    {% for season_num in seasons|sort %}
    <div class="season-card" id="season-{{ season_num }}">
        <div class="season-header" onclick="toggleSeason({{ season_num }})">
            <div class="season-info">
                <div class="season-number">T{{ season_num }}</div>
                <div>
                    <div class="season-title">Temporada {{ season_num }}</div>
                    <div class="ep-count">{{ seasons[season_num]|length }} episódios</div>
                </div>
            </div>
            <span class="arrow">▼</span>
        </div>
        <div class="season-episodes">
            {% for ep in seasons[season_num] %}
            <a href="{{ url_for('player', tipo='series', item_id=ep.id) }}">
                <span class="ep-num">E{{ '%02d'|format(ep.episode_number or 0) }}</span>
                <div class="ep-name-wrap">
                    <span class="ep-name">{{ ep.name|urldecode }}</span>
                    {% if ep.description %}
                    <span class="ep-desc" style="font-size:0.78em; color:var(--text-muted); display:block; margin-top:2px; white-space:normal; line-height:1.3;">{{ ep.description|truncate(120) }}</span>
                    {% endif %}
                </div>
                <span class="watched-check" data-id="{{ ep.id }}" style="display:none;">✓</span>
                <span class="ep-status">▶</span>
            </a>
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>

<script>
function toggleSeason(num) {
    document.getElementById('season-' + num).classList.toggle('open');
}
function toggleAll() {
    const cards = document.querySelectorAll('.season-card');
    const allOpen = Array.from(cards).every(c => c.classList.contains('open'));
    cards.forEach(c => {
        if (allOpen) c.classList.remove('open');
        else c.classList.add('open');
    });
}
document.addEventListener('DOMContentLoaded', function() {
    const checks = document.querySelectorAll('.watched-check');
    const ids = Array.from(checks).map(c => parseInt(c.dataset.id));
    if (ids.length === 0) return;
    fetch('/api/watched_ids').then(r => r.json()).then(data => {
        const watched = data.ids || [];
        checks.forEach(c => {
            if (watched.includes(parseInt(c.dataset.id))) c.style.display = 'inline';
        });
    });
});
</script>
{% endblock %}