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

{% block content %}
<div class="watch-container bg-black text-white min-vh-100">
    <!-- Hero Banner Section -->
    <div class="hero-banner position-relative" style="background-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,0) 100%), url('{% if project.banner_url %}{% static project.banner_url %}{% else %}{% static project.thumbnail_url %}{% endif %}');">
        <div class="banner-content container py-5 d-flex flex-column justify-content-end h-100">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <span class="badge bg-primary mb-3 px-3 py-2 rounded-pill fw-bold text-uppercase tracking-wider">Super Produção AI</span>
                    <h1 class="display-1 fw-bold mb-3 tracking-tight">{{ project.title }}</h1>
                    <div class="d-flex align-items-center gap-4 mb-4 fs-5 text-light opacity-75">
                        <span class="text-warning fw-bold"><i class="bi bi-star-fill me-1"></i> {{ project.rating }}</span>
                        <span>{{ project.duration }}</span>
                        <span class="border border-secondary px-2 py-0 rounded small">{{ project.category }}</span>
                        <span>{{ project.get_project_type_display }}</span>
                    </div>
                    <p class="lead mb-4 text-light opacity-75 col-lg-10">{{ project.description }}</p>
                    <div class="d-flex gap-3">
                        <button class="btn btn-primary btn-lg px-5 py-3 rounded-pill fw-bold shadow-lg" onclick="startCinemaMode()">
                            <i class="bi bi-play-fill me-2 fs-4"></i> ASSISTIR AGORA
                        </button>
                        <button class="btn btn-outline-light btn-lg px-4 py-3 rounded-pill fw-bold" onclick="document.getElementById('script-section').scrollIntoView({behavior: 'smooth'})">
                            <i class="bi bi-file-text me-2"></i> LER ROTEIRO
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content Tabs -->
    <div class="container py-5">
        <ul class="nav nav-tabs border-0 gap-4 mb-5" id="productionTabs" role="tablist">
            <li class="nav-item">
                <button class="nav-link active text-white fw-bold fs-5 border-0 bg-transparent px-0" id="scenes-tab" data-bs-toggle="tab" data-bs-target="#scenes">CENAS DO FILME</button>
            </li>
            <li class="nav-item">
                <button class="nav-link text-white fw-bold fs-5 border-0 bg-transparent px-0" id="cast-tab" data-bs-toggle="tab" data-bs-target="#cast">ELENCO CGI</button>
            </li>
        </ul>

        <div class="tab-content" id="productionTabsContent">
            <!-- Scenes Grid -->
            <div class="tab-pane fade show active" id="scenes">
                <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 rounded-4 overflow-hidden border border-secondary border-opacity-25" onclick="playSceneVideo('{% static scene.video_url %}', '{{ scene.title|escapejs }}', '{{ scene.description|escapejs }}')">
                            {% if scene.image_url %}
                                <img src="{% static scene.image_url %}" class="w-100" style="height: 200px; object-fit: cover;" alt="{{ scene.title }}">
                            {% else %}
                                <div class="bg-dark d-flex align-items-center justify-content-center" style="height: 200px;">
                                    <i class="bi bi-camera-video display-5 opacity-25"></i>
                                </div>
                            {% endif %}
                            <div class="scene-overlay p-3 d-flex flex-column justify-content-end">
                                <span class="small opacity-75 mb-1">Cena {{ scene.number }}</span>
                                <h5 class="fw-bold mb-0">{{ scene.title }}</h5>
                                <div class="play-hint mt-2 small text-primary fw-bold opacity-0">
                                    <i class="bi bi-play-circle-fill me-1"></i> VER VÍDEO
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>

            <!-- Cast Section -->
            <div class="tab-pane fade" id="cast">
                <div class="row g-4">
                    {% for char in project.assets.all %}
                    <div class="col-md-4 col-xl-3">
                        <div class="card bg-dark text-white border-0 rounded-4 overflow-hidden">
                            <div class="card-body p-4 text-center">
                                <div class="avatar-lg mx-auto mb-3 bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 100px; height: 100px;">
                                    <i class="bi bi-person-fill display-4 text-primary"></i>
                                </div>
                                <h5 class="fw-bold mb-1">{{ char.name }}</h5>
                                <p class="small text-primary mb-3">Protagonista CGI</p>
                                <p class="small text-secondary mb-3">{{ char.physical_description|truncatechars:100 }}</p>
                                <button class="btn btn-sm btn-outline-primary rounded-pill px-3" onclick="speakCharacter('{{ char.name|escapejs }}', 'Olá, eu sou {{ char.name|escapejs }} e fui gerado para esta super produção.', '{{ char.voice_preset }}')">
                                    <i class="bi bi-mic-fill me-1"></i> OUVIR VOZ
                                </button>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <!-- Script Section -->
    <div id="script-section" class="bg-dark py-5 mt-5">
        <div class="container py-5">
            <h2 class="display-5 fw-bold mb-5 text-center text-primary">Roteiro Cinematográfico</h2>
            <div class="bg-black p-5 rounded-4 border border-secondary border-opacity-25 screenplay shadow-lg mx-auto" style="max-width: 900px;">
                <pre class="text-light fs-5" style="white-space: pre-wrap; font-family: 'Courier New', Courier, monospace;">{{ project.full_script }}</pre>
            </div>
        </div>
    </div>
</div>

<!-- Cinema Mode Modal -->
<div class="modal fade" id="cinemaModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content bg-black text-white border-0">
            <div class="modal-header border-0 p-4">
                <h5 class="modal-title fw-bold text-primary" id="cinemaTitle">{{ project.title }}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0 d-flex align-items-center justify-content-center position-relative">
                <div id="cinema-player-container" class="w-100 h-100 d-flex flex-column align-items-center justify-content-center">
                    <video id="cinemaVideo" class="h-75 shadow-lg rounded-4" controls autoplay>
                        <source src="" type="video/mp4">
                        Seu navegador não suporta vídeos HTML5.
                    </video>
                    <div class="cinema-caption container text-center mt-4 p-4" style="max-width: 800px;">
                        <h2 id="cinemaSceneTitle" class="fw-bold text-primary mb-3"></h2>
                        <p id="cinemaSceneDesc" class="lead text-light opacity-75"></p>
                    </div>
                </div>
                
                <!-- Controls overlay -->
                <div class="cinema-nav position-absolute bottom-0 w-100 p-5 d-flex justify-content-between align-items-center">
                    <button class="btn btn-lg btn-outline-light rounded-pill px-4" id="prevBtn" onclick="prevScene()">
                        <i class="bi bi-chevron-left me-2"></i> ANTERIOR
                    </button>
                    <button class="btn btn-lg btn-primary rounded-pill px-5 fw-bold" id="nextBtn" onclick="nextScene()">
                        PRÓXIMA <i class="bi bi-chevron-right ms-2"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    let currentSceneIndex = 0;
    const scenes = [
        {% for scene in project.scenes.all %}
        {
            title: "{{ scene.title|escapejs }}",
            description: "{{ scene.description|escapejs }}",
            video: "{% static scene.video_url %}",
            voice: "{{ project.voice_preset }}"
        },
        {% endfor %}
    ];

    const cinemaModal = new bootstrap.Modal(document.getElementById('cinemaModal'));
    const videoEl = document.getElementById('cinemaVideo');
    const titleEl = document.getElementById('cinemaSceneTitle');
    const descEl = document.getElementById('cinemaSceneDesc');

    function startCinemaMode() {
        currentSceneIndex = 0;
        updateCinemaView();
        cinemaModal.show();
    }

    function playSceneVideo(videoUrl, title, desc) {
        videoEl.src = videoUrl;
        titleEl.innerText = title;
        descEl.innerText = desc;
        cinemaModal.show();
        speak(desc);
    }

    function updateCinemaView() {
        const scene = scenes[currentSceneIndex];
        videoEl.src = scene.video;
        titleEl.innerText = scene.title;
        descEl.innerText = scene.description;
        
        document.getElementById('prevBtn').disabled = currentSceneIndex === 0;
        document.getElementById('nextBtn').innerText = currentSceneIndex === scenes.length - 1 ? 'FINALIZAR' : 'PRÓXIMA';
        
        videoEl.play();
        speak(scene.description);
    }

    function nextScene() {
        if (currentSceneIndex < scenes.length - 1) {
            currentSceneIndex++;
            updateCinemaView();
        } else {
            cinemaModal.hide();
        }
    }

    function prevScene() {
        if (currentSceneIndex > 0) {
            currentSceneIndex--;
            updateCinemaView();
        }
    }

    // Voice Simulation (Web Speech API)
    function speak(text) {
        window.speechSynthesis.cancel();
        const utterance = new SpeechSynthesisUtterance(text);
        utterance.lang = 'pt-BR'; // Default to Portuguese
        
        // Try to find a good voice based on preset
        const voices = window.speechSynthesis.getVoices();
        // This is a simple fallback, real implementation would map presets to specific voice names
        utterance.rate = 0.9;
        utterance.pitch = 1.0;
        
        window.speechSynthesis.speak(utterance);
    }

    function speakCharacter(name, text, preset) {
        speak(text);
    }

    // Load voices
    window.speechSynthesis.onvoiceschanged = () => {
        console.log("Voices loaded");
    };
</script>

<style>
    .hero-banner {
        height: 70vh;
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }
    .banner-content { padding-bottom: 5rem; }
    .nav-tabs .nav-link {
        border-bottom: 3px solid transparent !important;
        opacity: 0.5;
        transition: 0.3s;
    }
    .nav-tabs .nav-link.active {
        opacity: 1;
        border-bottom: 3px solid #0d6efd !important;
    }
    .scene-card {
        cursor: pointer;
        transition: transform 0.3s;
    }
    .scene-card:hover {
        transform: scale(1.03);
    }
    .scene-overlay {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 100%);
    }
    .scene-card:hover .play-hint { opacity: 1; }
    .screenplay {
        box-shadow: 0 0 50px rgba(13, 110, 253, 0.1);
        max-height: 800px;
        overflow-y: auto;
    }
    #cinemaVideo { width: 90%; max-height: 60vh; border: 5px solid #111; }
    .tracking-tight { letter-spacing: -0.05rem; }
    .tracking-wider { letter-spacing: 0.2rem; }
</style>
{% endblock %}
