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

{% block content %}
<!-- Header Cinematográfico -->
<div class="production-header position-relative overflow-hidden" style="height: 70vh;">
    {% if project.thumbnail_url %}
    <img src="{% static project.thumbnail_url %}" class="w-100 h-100 object-fit-cover position-absolute top-0 start-0" alt="{{ project.title }}" style="filter: brightness(0.4) saturate(1.2);">
    {% else %}
    <div class="w-100 h-100 bg-dark position-absolute top-0 start-0"></div>
    {% endif %}
    
    <div class="container h-100 position-relative d-flex align-items-end pb-5">
        <div class="text-white">
            <div class="d-flex align-items-center gap-3 mb-3">
                <span class="badge bg-cyan text-dark fw-bold px-3 py-2">{{ project.get_project_type_display }}</span>
                <span class="badge bg-outline-white text-white border border-white px-3 py-2">{{ project.category }}</span>
                <span class="badge bg-danger fw-bold px-3 py-2">{{ project.rating }}</span>
            </div>
            <h1 class="display-1 fw-bold mb-3 text-gradient-neon">{{ project.title }}</h1>
            <div class="d-flex gap-4 mb-4 text-muted fw-bold">
                <span><i class="bi bi-clock me-2"></i>{{ project.duration }}</span>
                <span><i class="bi bi-cash-stack me-2"></i>ORÇAMENTO: {{ project.estimated_budget }}</span>
            </div>
            <p class="lead col-lg-8 mb-4 shadow-sm">{{ project.description }}</p>
            <div class="d-flex gap-3">
                <button class="btn btn-lg btn-neon-purple px-5 py-3 fw-bold rounded-pill shadow-lg" onclick="startCinemaMode()">
                    <i class="bi bi-play-circle-fill me-2"></i> ASSISTIR AGORA (AI CINEMA)
                </button>
                <button class="btn btn-lg btn-outline-light px-5 py-3 fw-bold rounded-pill" onclick="document.getElementById('script-section').scrollIntoView({behavior: 'smooth'})">
                    <i class="bi bi-file-earmark-text me-2"></i> LER ROTEIRO
                </button>
            </div>
        </div>
    </div>
</div>

<div class="container py-5">
    <!-- Elenco (Personagens) -->
    <div class="mb-5">
        <h2 class="text-white border-start border-cyan border-4 ps-3 mb-4 fw-bold">ELENCO PRINCIPAL</h2>
        <div class="row g-4">
            {% for asset in project.assets.all %}
            {% if asset.asset_type == 'CHAR' %}
            <div class="col-md-4">
                <div class="card glass-card border-0 h-100 hover-up">
                    <div class="card-body p-4 text-center">
                        <div class="rounded-circle bg-dark d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <i class="bi bi-person-bounding-box text-cyan fs-2"></i>
                        </div>
                        <h4 class="text-cyan fw-bold mb-2">{{ asset.name }}</h4>
                        <p class="text-white-50 small m-0">{{ asset.physical_description }}</p>
                    </div>
                </div>
            </div>
            {% endif %}
            {% endfor %}
        </div>
    </div>

    <!-- Cenas Cinematográficas -->
    <div class="mb-5" id="scenes-section">
        <h2 class="text-white border-start border-cyan border-4 ps-3 mb-4 fw-bold">GALERIA DE CENAS</h2>
        <div class="row g-4">
            {% for scene in project.scenes.all %}
            <div class="col-md-6 col-lg-4">
                <div class="scene-card position-relative overflow-hidden rounded-4 shadow-lg h-100" style="min-height: 300px;">
                    {% if scene.image_url %}
                    <img src="{% static scene.image_url %}" class="w-100 h-100 object-fit-cover position-absolute top-0 start-0 transition-transform" alt="{{ scene.title }}">
                    {% else %}
                    <div class="w-100 h-100 bg-dark position-absolute top-0 start-0"></div>
                    {% endif %}
                    
                    <div class="scene-overlay position-absolute bottom-0 start-0 w-100 p-4 bg-gradient-dark">
                        <span class="badge bg-cyan text-dark mb-2">CENA {{ scene.number }}</span>
                        <h5 class="text-white fw-bold mb-2">{{ scene.title }}</h5>
                        <p class="text-light-muted small m-0 line-clamp-3">{{ scene.description }}</p>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Roteiro Completo -->
    <div id="script-section" class="py-5">
        <div class="glass-card p-5 rounded-5 shadow-lg border-secondary border-opacity-25 bg-black">
            <div class="text-center mb-5">
                <h2 class="text-gradient-neon display-4 fw-bold">ROTEIRO ORIGINAL</h2>
                <hr class="w-25 mx-auto border-cyan border-2">
            </div>
            <div class="screenplay text-white-50" style="font-family: 'Courier New', Courier, monospace; line-height: 1.8; max-width: 850px; margin: 0 auto; white-space: pre-line; font-size: 1.2rem;">
                {{ project.full_script }}
            </div>
        </div>
    </div>
</div>

<!-- Cinema Mode Overlay -->
<div id="cinemaOverlay" class="position-fixed top-0 start-0 w-100 h-100 bg-black z-3 d-none flex-column align-items-center justify-content-center text-center p-4">
    <button class="btn btn-outline-light position-absolute top-0 end-0 m-4 rounded-circle" onclick="stopCinemaMode()">
        <i class="bi bi-x-lg"></i>
    </button>
    
    <div id="cinemaContent" class="container">
        <div id="cinemaImageContainer" class="mb-4 ratio ratio-16x9 mx-auto shadow-2xl rounded-4 overflow-hidden" style="max-width: 900px;">
            <img src="" id="cinemaImage" class="w-100 h-100 object-fit-cover">
        </div>
        <div class="cinema-text text-white">
            <h2 id="cinemaTitle" class="display-4 fw-bold text-cyan mb-3"></h2>
            <p id="cinemaDesc" class="lead fs-3"></p>
        </div>
    </div>
    
    <div class="cinema-controls position-absolute bottom-0 w-100 p-5 d-flex justify-content-center gap-4">
        <button class="btn btn-dark rounded-circle btn-lg" id="prevScene"><i class="bi bi-chevron-left"></i></button>
        <div class="d-flex align-items-center text-white-50">
            CENA <span id="currentSceneNum" class="mx-2 text-white fw-bold">1</span> / {{ project.scenes.count }}
        </div>
        <button class="btn btn-dark rounded-circle btn-lg" id="nextScene"><i class="bi bi-chevron-right"></i></button>
    </div>
</div>

<style>
    .bg-gradient-dark {
        background: linear-gradient(transparent, rgba(0,0,0,0.9));
    }
    .text-light-muted {
        color: #ced4da;
    }
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;  
        overflow: hidden;
    }
    .scene-card:hover img {
        transform: scale(1.1);
    }
    .transition-transform {
        transition: transform 0.8s ease;
    }
    .hover-up:hover {
        transform: translateY(-5px);
    }
    .z-3 { z-index: 9999; }
    
    /* Animation for cinema mode */
    #cinemaContent {
        animation: fadeIn 1s ease-in-out;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>

<script>
    const scenes = [
        {% for scene in project.scenes.all %}
        {
            title: "{{ scene.title|escapejs }}",
            description: "{{ scene.description|escapejs }}",
            image: "{% if scene.image_url %}{% static scene.image_url %}{% endif %}",
            number: {{ scene.number }}
        },
        {% endfor %}
    ];
    
    let currentSceneIdx = 0;
    
    function startCinemaMode() {
        document.getElementById('cinemaOverlay').classList.remove('d-none');
        document.getElementById('cinemaOverlay').classList.add('d-flex');
        updateCinemaScene();
    }
    
    function stopCinemaMode() {
        document.getElementById('cinemaOverlay').classList.add('d-none');
        document.getElementById('cinemaOverlay').classList.remove('d-flex');
    }
    
    function updateCinemaScene() {
        const scene = scenes[currentSceneIdx];
        document.getElementById('cinemaTitle').innerText = scene.title;
        document.getElementById('cinemaDesc').innerText = scene.description;
        document.getElementById('cinemaImage').src = scene.image || '';
        document.getElementById('currentSceneNum').innerText = scene.number;
        
        // Animation reset
        const content = document.getElementById('cinemaContent');
        content.style.animation = 'none';
        content.offsetHeight; /* trigger reflow */
        content.style.animation = null;
    }
    
    document.getElementById('nextScene').onclick = () => {
        if (currentSceneIdx < scenes.length - 1) {
            currentSceneIdx++;
            updateCinemaScene();
        } else {
            stopCinemaMode();
            messages.info("Fim da Experiência Cinematográfica.");
        }
    };
    
    document.getElementById('prevScene').onclick = () => {
        if (currentSceneIdx > 0) {
            currentSceneIdx--;
            updateCinemaScene();
        }
    };

    // Keyboard controls
    document.addEventListener('keydown', (e) => {
        if (document.getElementById('cinemaOverlay').classList.contains('d-flex')) {
            if (e.key === 'ArrowRight') document.getElementById('nextScene').click();
            if (e.key === 'ArrowLeft') document.getElementById('prevScene').click();
            if (e.key === 'Escape') stopCinemaMode();
        }
    });
</script>
{% endblock %}