{% extends 'base.html' %}

{% block content %}
<section class="py-5">
  <div class="container">
    <nav aria-label="breadcrumb" class="mb-4">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'dashboard' %}" class="text-dark">Dashboard</a></li>
        <li class="breadcrumb-item active" aria-current="page">{{ project.title }}</li>
      </ol>
    </nav>
    
    <div class="row g-5">
      <div class="col-lg-4">
        <div class="glass-card p-4 rounded-0">
          <h4 class="fw-bold mb-4 border-bottom pb-2">Detalhes do Projeto</h4>
          <img src="{{ project.main_image.url }}" class="img-fluid mb-4 border" alt="Original">
          
          <div class="mb-3">
            <span class="small text-uppercase text-muted d-block">Status</span>
            <span class="fw-bold">{% if project.status == 'pending' %}Aguardando Processamento{% else %}{{ project.status|capfirst }}{% endif %}</span>
          </div>
          
          <div class="mb-3">
            <span class="small text-uppercase text-muted d-block">Modelo</span>
            <p class="mb-0">
              Gênero: {{ project.get_gender_display }}<br>
              Tom de Pele: {{ project.get_skin_tone_display }}<br>
              Idade: {{ project.age }} anos<br>
              Biotipo: {{ project.get_body_type_display }}
            </p>
          </div>
          
          <div class="mb-3">
            <span class="small text-uppercase text-muted d-block">Formato</span>
            <span class="fw-bold">{{ project.format }}</span>
          </div>
        </div>
      </div>
      
      <div class="col-lg-8">
        <div class="glass-card p-4 p-md-5 rounded-0 h-100">
          <h3 class="brand-font fw-bold mb-4">Resultados Gerados</h3>
          
          {% if project.results.all %}
          <div class="row g-4">
            {% for result in project.results.all %}
            <div class="col-md-6">
              <div class="border p-2">
                <img src="{{ result.image.url }}" class="img-fluid" alt="{{ result.view_type }}">
                <div class="d-flex justify-content-between align-items-center mt-2">
                  <span class="small text-uppercase fw-bold">{{ result.view_type|capfirst }}</span>
                  <a href="{{ result.image.url }}" download class="btn btn-sm btn-link text-dark">Baixar</a>
                </div>
              </div>
            </div>
            {% endfor %}
          </div>
          {% else %}
          <div class="text-center py-5">
            <div class="spinner-border text-dark mb-4" role="status" style="width: 3rem; height: 3rem;">
              <span class="visually-hidden">Processando...</span>
            </div>
            <h4 class="fw-bold">Sua mágica está sendo preparada...</h4>
            <p class="text-muted">Nossa AI está vestindo os modelos e ajustando a iluminação. Isso levará cerca de 60 segundos.</p>
            <div class="progress mt-4 rounded-0" style="height: 10px;">
              <div class="progress-bar progress-bar-striped progress-bar-animated bg-dark" role="progressbar" style="width: 45%"></div>
            </div>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</section>

{% if project.status == 'pending' %}
<script>
  // Simple auto-refresh mock for demo purposes
  setTimeout(function() {
    // location.reload();
  }, 10000);
</script>
{% endif %}
{% endblock %}
