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

{% block title %}Command Center | Studio CGI Virtual{% endblock %}

{% block content %}
<section class="hero-section">
    <div class="container text-center">
        <div class="mb-4">
            <span class="badge bg-purple bg-opacity-10 text-purple px-3 py-2 rounded-pill small border border-purple border-opacity-25">NEXT-GEN CGI PIPELINE</span>
        </div>
        <h1 class="display-3 mb-4 outfit">Studio de Cinema <span class="text-cyan">Virtual</span></h1>
        <p class="lead text-muted mb-5 mx-auto" style="max-width: 800px;">
            A fábrica digital para super-produções. Gerencie do roteiro à renderização em um fluxo de produção rigoroso e colaborativo.
        </p>
        <div class="d-flex justify-content-center gap-3">
            <a href="#productions" class="btn btn-cyan">Acessar Produções</a>
            <a href="/admin/core/project/add/" class="btn btn-outline-light px-4 py-2 border-opacity-25 rounded-3">Nova Super-Produção +</a>
        </div>
    </div>
</section>

<section id="productions" class="py-5">
    <div class="container">
        <div class="row g-4 mb-5">
            <div class="col-md-4">
                <div class="stats-card">
                    <span class="text-muted d-block mb-1 small text-uppercase fw-bold">Total de Projetos</span>
                    <span class="display-5 fw-bold outfit">{{ total_projects }}</span>
                </div>
            </div>
            <div class="col-md-4">
                <div class="stats-card">
                    <span class="text-muted d-block mb-1 small text-uppercase fw-bold">Produções Ativas</span>
                    <span class="display-5 fw-bold outfit text-cyan">{{ active_productions }}</span>
                </div>
            </div>
            <div class="col-md-4">
                <div class="stats-card">
                    <span class="text-muted d-block mb-1 small text-uppercase fw-bold">Obras Finalizadas</span>
                    <span class="display-5 fw-bold outfit text-purple">{{ completed_projects }}</span>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-between align-items-end mb-4">
            <div>
                <h2 class="h3 mb-0 outfit section-title">Produções em Andamento</h2>
                <p class="text-muted small">Status em tempo real do pipeline CGI</p>
            </div>
        </div>

        <div class="row g-4">
            {% for project in projects %}
            <div class="col-md-6 col-lg-4">
                <div class="project-card">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <span class="pipeline-badge badge-{{ project.status|lower }}">{{ project.get_status_display }}</span>
                        <span class="text-muted small fw-bold">{{ project.get_project_type_display }}</span>
                    </div>
                    
                    <h3 class="h4 mb-3 outfit">
                        <a href="{% url 'project_detail' project.slug %}" class="text-white text-decoration-none hover-cyan transition">
                            {{ project.title }}
                        </a>
                    </h3>
                    
                    <p class="text-muted small mb-4 flex-grow-1">
                        {{ project.description|default:"Sem descrição definida para esta super-produção."|truncatewords:20 }}
                    </p>
                    
                    <div class="pipeline-summary mt-4">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted small fw-bold">Progresso do Pipeline</span>
                            {% with last_step=project.steps.last %}
                            <span class="text-cyan small fw-bold">{{ last_step.progress|default:0 }}%</span>
                            {% endwith %}
                        </div>
                        <div class="progress mb-3">
                            {% with last_step=project.steps.last %}
                            <div class="progress-bar" role="progressbar" style="width: {{ last_step.progress|default:0 }}%"></div>
                            {% endwith %}
                        </div>
                        
                        <div class="d-flex flex-wrap gap-1 mt-3">
                            {% for step in project.steps.all|slice:":4" %}
                            <span class="badge {% if step.is_completed %}bg-cyan text-black{% else %}bg-secondary bg-opacity-10 text-muted border border-secondary border-opacity-25{% endif %} rounded-pill" style="font-size: 0.6rem;">
                                {{ step.get_name_display }}
                            </span>
                            {% endfor %}
                            {% if project.steps.count > 4 %}
                            <span class="text-muted small" style="font-size: 0.6rem;">+{{ project.steps.count|add:"-4" }}</span>
                            {% endif %}
                        </div>
                    </div>
                    
                    <a href="{% url 'project_detail' project.slug %}" class="stretched-link"></a>
                </div>
            </div>
            {% empty %}
            <div class="col-12 text-center py-5">
                <div class="opacity-25 mb-4">
                    <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
                        <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
                        <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
                    </svg>
                </div>
                <h3 class="h4 outfit">Nenhuma produção ativa</h3>
                <p class="text-muted mb-4">Comece sua primeira super-produção 3D agora.</p>
                <a href="/admin/core/project/add/" class="btn btn-cyan">Iniciar Projeto</a>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<section class="py-5 bg-white bg-opacity-05">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h2 class="display-5 outfit mb-4">Pipeline <span class="text-purple">CGI Profissional</span></h2>
                <p class="text-muted mb-4">Nosso estúdio segue o fluxo de trabalho dos maiores estúdios de Hollywood, garantindo qualidade em cada quadro.</p>
                <div class="row g-3">
                    <div class="col-sm-6">
                        <div class="p-3 border border-white border-opacity-10 rounded-3 h-100">
                            <h4 class="h6 outfit text-cyan">Pré-produção</h4>
                            <p class="small text-muted mb-0">Roteiro, Concept Art e Animatic para definir a alma do filme.</p>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="p-3 border border-white border-opacity-10 rounded-3 h-100">
                            <h4 class="h6 outfit text-cyan">Produção</h4>
                            <p class="small text-muted mb-0">Modelagem, Rigging e Animação com personagens realistas.</p>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="p-3 border border-white border-opacity-10 rounded-3 h-100">
                            <h4 class="h6 outfit text-cyan">Iluminação & FX</h4>
                            <p class="small text-muted mb-0">Simulação de partículas, fluidos e luzes cinematográficas.</p>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="p-3 border border-white border-opacity-10 rounded-3 h-100">
                            <h4 class="h6 outfit text-cyan">Pós-produção</h4>
                            <p class="small text-muted mb-0">Renderização em render farm e composição final.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mt-5 mt-lg-0">
                <div class="position-relative">
                    <div class="bg-purple bg-opacity-20 position-absolute top-50 start-50 translate-middle rounded-circle blur-3xl" style="width: 300px; height: 300px;"></div>
                    <div class="project-card p-5 position-relative z-1 border-opacity-10 shadow-lg">
                        <div class="d-flex align-items-center mb-4">
                            <div class="flex-shrink-0 me-3">
                                <div class="bg-cyan rounded-circle" style="width: 12px; height: 12px;"></div>
                            </div>
                            <h4 class="h5 mb-0 outfit">Status da Render Farm</h4>
                        </div>
                        <div class="asset-list-item d-flex justify-content-between align-items-center mb-2">
                            <span class="small text-muted">Nodes Ativos</span>
                            <span class="small outfit fw-bold">128 / 128</span>
                        </div>
                        <div class="asset-list-item d-flex justify-content-between align-items-center mb-2">
                            <span class="small text-muted">CPU Load</span>
                            <span class="small outfit fw-bold">94%</span>
                        </div>
                        <div class="asset-list-item d-flex justify-content-between align-items-center mb-4">
                            <span class="small text-muted">Tempo Estimado</span>
                            <span class="small outfit fw-bold text-cyan">04:12:33</span>
                        </div>
                        <div class="progress" style="height: 4px;">
                            <div class="progress-bar" style="width: 75%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}