{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container-fluid py-5 px-lg-5">
    <div class="d-flex justify-content-between align-items-center mb-5">
        <div>
            <h1 class="display-4 fw-bold text-white mb-0">Biblioteca <span class="text-primary">CGI Studio</span></h1>
            <p class="text-secondary fs-5">Minhas Super Produções Geradas por IA</p>
        </div>
        <a href="{% url 'studio_ai' %}" class="btn btn-primary btn-lg rounded-pill px-4 shadow">
            <i class="bi bi-plus-lg me-2"></i> Criar Nova Produção
        </a>
    </div>

    {% if productions %}
    <div class="row g-4">
        {% for prod in productions %}
        <div class="col-sm-6 col-lg-4 col-xl-3">
            <div class="card h-100 bg-dark text-white border-0 shadow-sm rounded-4 overflow-hidden production-card">
                <div class="position-relative overflow-hidden">
                    {% if prod.thumbnail_url %}
                        <img src="{% static prod.thumbnail_url %}" class="card-img-top production-img" alt="{{ prod.title }}">
                    {% else %}
                        <div class="bg-secondary d-flex align-items-center justify-content-center" style="height: 250px;">
                            <i class="bi bi-camera-reels display-1 opacity-25"></i>
                        </div>
                    {% endif %}
                    <div class="production-overlay p-3 d-flex flex-column justify-content-between">
                        <div class="d-flex justify-content-between align-items-start">
                            <span class="badge bg-primary rounded-pill">{{ prod.get_project_type_display }}</span>
                            <div class="dropdown">
                                <button class="btn btn-sm btn-dark bg-opacity-75 rounded-circle border-0" type="button" data-bs-toggle="dropdown">
                                    <i class="bi bi-three-dots-vertical"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end shadow-lg border-0 rounded-3">
                                    <li><a class="dropdown-item py-2" href="{% url 'edit_production' prod.slug %}"><i class="bi bi-pencil me-2"></i> Editar Dados</a></li>
                                    <li><hr class="dropdown-divider border-secondary"></li>
                                    <li><a class="dropdown-item py-2 text-danger" href="{% url 'delete_production' prod.slug %}" onclick="return confirm('Tem certeza que deseja excluir esta super produção?')"><i class="bi bi-trash me-2"></i> Excluir</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="text-center">
                            <a href="{% url 'watch_production' prod.slug %}" class="btn btn-light rounded-pill btn-sm px-4 fw-bold shadow">
                                <i class="bi bi-play-fill me-1"></i> ASSISTIR
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="text-primary small fw-bold text-uppercase">{{ prod.category }}</span>
                        <span class="text-warning small"><i class="bi bi-star-fill me-1"></i> {{ prod.rating }}</span>
                    </div>
                    <h5 class="card-title fw-bold mb-3">{{ prod.title }}</h5>
                    <div class="d-flex gap-3 text-secondary small">
                        <span><i class="bi bi-clock me-1"></i> {{ prod.duration }}</span>
                        <span><i class="bi bi-currency-dollar me-1"></i> {{ prod.estimated_budget }}</span>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-5">
        <div class="py-5">
            <i class="bi bi-collection-play display-1 text-secondary opacity-25"></i>
            <h3 class="text-white mt-4">Nenhuma produção gerada ainda.</h3>
            <p class="text-secondary">Vá ao Studio AI para criar sua primeira obra prima!</p>
            <a href="{% url 'studio_ai' %}" class="btn btn-primary rounded-pill px-5 mt-3">IR AO STUDIO AI</a>
        </div>
    </div>
    {% endif %}
</div>

<style>
    body { background-color: #050505; }
    .production-card {
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s;
        border: 1px solid rgba(255,255,255,0.05) !important;
    }
    .production-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.5);
        border-color: rgba(13, 110, 253, 0.3) !important;
    }
    .production-img {
        height: 250px;
        object-fit: cover;
        transition: transform 0.6s;
    }
    .production-card:hover .production-img {
        transform: scale(1.1);
    }
    .production-overlay {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%);
        opacity: 0;
        transition: opacity 0.3s;
    }
    .production-card:hover .production-overlay {
        opacity: 1;
    }
    .badge { font-size: 0.7rem; letter-spacing: 0.05rem; }
    .dropdown-item { font-size: 0.9rem; }
</style>
{% endblock %}
