{% extends "base.html" %}
{% block title %}{{ movie.name|urldecode }} - Filmes{% endblock %}
{% block extra_head %}
<style>
    .movie-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); }
    .movie-hero {
        display: flex; gap: 24px; margin-bottom: 32px;
        background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
        overflow: hidden;
    }
    .movie-poster {
        width: 220px; min-height: 320px; flex-shrink: 0;
        background: var(--bg-surface); display: flex; align-items: center; justify-content: center;
        position: relative; overflow: hidden;
    }
    .movie-poster img { width: 100%; height: 100%; object-fit: cover; }
    .movie-poster .placeholder { font-size: 5em; color: var(--text-muted); }
    .movie-info { flex: 1; padding: 28px 28px 28px 0; display: flex; flex-direction: column; }
    .movie-info h1 { font-size: 1.8em; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
    .movie-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
    .movie-meta .tag {
        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;
    }
    .movie-meta .tag.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
    .movie-meta .tag.gold { color: var(--gold); border-color: var(--gold); }
    .movie-desc {
        color: var(--text-secondary); font-size: 0.95em; line-height: 1.7; margin-bottom: 20px;
        flex: 1;
    }
    .movie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
    .movie-actions .btn { padding: 12px 28px; }
    .movie-actions .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text-primary); }
    .movie-actions .btn-outline:hover { background: rgba(255,255,255,0.1); }
    .section-title { font-size: 1.2em; font-weight: 700; color: var(--text-primary); margin: 32px 0 16px; }
    @media (max-width: 640px) {
        .movie-hero { flex-direction: column; }
        .movie-poster { width: 100%; min-height: 0; aspect-ratio: 2/3; max-height: 400px; }
        .movie-info { padding: 20px; }
        .movie-info h1 { font-size: 1.4em; }
    }
</style>
{% endblock %}
{% block content %}
<div class="movie-detail-page">
    <a href="{{ url_for('filmes') }}" class="back-link">← Voltar para Filmes</a>

    <div class="movie-hero">
        <div class="movie-poster">
            {% if movie.logo %}
            <img src="{{ movie.logo|proxy_logo }}" alt="{{ movie.name }}" loading="lazy" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
            <span class="placeholder" style="display:none;">🎬</span>
            {% else %}
            <span class="placeholder">🎬</span>
            {% endif %}
        </div>
        <div class="movie-info">
            <h1>{{ movie.name|urldecode }}</h1>
            <div class="movie-meta">
                {% if year %}<span class="tag primary">{{ year }}</span>{% endif %}
                {% if rating %}<span class="tag gold">⭐ {{ "%.1f"|format(rating) }}</span>{% endif %}
                {% if movie.group_title %}<span class="tag">{{ movie.group_title }}</span>{% endif %}
                {% if movie.view_count %}<span class="tag">{{ movie.view_count }} views</span>{% endif %}
            </div>
            {% if movie.description %}
            <div class="movie-desc">{{ movie.description }}</div>
            {% else %}
            <div class="movie-desc" style="color:var(--text-muted);">Descricao nao disponivel.</div>
            {% endif %}
            <div class="movie-actions">
                <a href="{{ url_for('player', tipo='movie', item_id=movie.id) }}" class="btn">▶ Assistir Agora</a>
                <button class="btn btn-outline" onclick="toggleFavMovie(this, {{ movie.id }})" id="favBtn">☆ Favoritar</button>
                <button class="btn btn-outline" onclick="trocoShare('{{ movie.name|urldecode }}', window.location.href)">🔗 Compartilhar</button>
            </div>
        </div>
    </div>

    {% if related %}
    <div class="section-title">Filmes Similares</div>
    <div class="grid">
        {% for r in related %}
        <div class="card" onclick="location.href='{{ url_for('movie_detail', item_id=r.id) }}'">
            <div class="card-thumb">
                {% if r.logo %}
                <img loading="lazy" src="{{ r.logo|proxy_logo }}" alt="{{ r.name }}" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
                <span style="display:none;">🎬</span>
                {% else %}
                <span>🎬</span>
                {% endif %}
                <div class="play-overlay">▶</div>
            </div>
            <div class="card-body">
                <h3 title="{{ r.name }}">{{ r.name }}</h3>
                <div class="meta">{{ r.group_title }}</div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}
</div>

<script>
function toggleFavMovie(btn, id) {
    fetch('/api/favorites/toggle', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({canal_id: id})
    }).then(r => r.json()).then(data => {
        btn.classList.toggle('active', data.favorited);
        btn.textContent = data.favorited ? '⭐ Favoritado' : '☆ Favoritar';
    });
}
document.addEventListener('DOMContentLoaded', function() {
    fetch('/api/favorites/check_bulk', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ids: [{{ movie.id }}]})
    }).then(r => r.json()).then(data => {
        if (data[{{ movie.id }}]) {
            var btn = document.getElementById('favBtn');
            btn.classList.add('active');
            btn.textContent = '⭐ Favoritado';
        }
    });
});
</script>
{% endblock %}