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

{% block title %}{{ prueba.nombre }} | Gades Manager{% endblock title %}

{% block content %}
<div class="row mb-3 flex-shrink-0">
    <div class="col-12">
        <div class="bg-dark text-white p-3 rounded-3 shadow-sm d-flex justify-content-between align-items-center" style="border-left: 5px solid #0d6efd;">
            <div>
                <h1 class="display-6 fw-bold mb-1">{{ prueba.nombre }}</h1>
                <p class="text-white-50 mb-0">{{ prueba.get_categoria_display }} · Temporada {{ prueba.temporada.nombre }}</p>
            </div>
            <div class="d-flex gap-2">
                {% if puede_editar %}
                    <a href="{% url 'editar_prueba' prueba.pk %}" class="btn btn-outline-light fw-bold">Editar</a>
                {% endif %}
                {% if user.rol == 'directiva' %}
                    <button type="button" class="btn btn-outline-danger fw-bold" data-bs-toggle="modal" data-bs-target="#eliminarModal">Eliminar</button>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="row g-4" style="overflow-y: auto;">

    {% if messages %}
        <div class="col-12">
            {% for message in messages %}
                <div class="alert alert-success py-2 small mb-0">{{ message }}</div>
            {% endfor %}
        </div>
    {% endif %}

    <div class="col-12 col-lg-8">
        <div class="card border-0 shadow-sm">
            <div class="card-body p-4">
                <h5 class="fw-semibold">Objetivo / Descripción</h5>
                <p>{{ prueba.descripcion }}</p>

                <div class="row mb-3">
                    <div class="col-6"><strong>Fecha inicio:</strong> {{ prueba.fecha_inicio|date:"d/m/Y" }}</div>
                    <div class="col-6"><strong>Fecha fin:</strong> {{ prueba.fecha_fin|date:"d/m/Y" }}</div>
                </div>
                <p><strong>Realizado por:</strong> {{ prueba.realizado_por.first_name|default:"—" }}</p>

                {% if prueba.resultados %}
                    <h5 class="fw-semibold mt-4">Conclusiones y Resultados</h5>
                    <p>{{ prueba.resultados }}</p>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-12 col-lg-4">
        <div class="card border-0 shadow-sm">
            <div class="card-body p-4">
                <h5 class="fw-semibold mb-3">Archivos de telemetría</h5>
                <ul class="list-group list-group-flush mb-3">
                    {% for telemetria in prueba.archivos_telemetria.all %}
                        <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <a href="{{ telemetria.archivo_csv.url }}">{{ telemetria.nombre }}</a>
                            <span class="text-secondary small">{{ telemetria.fecha_subida|date:"d/m/Y" }}</span>
                        </li>
                    {% empty %}
                        <li class="list-group-item px-0 text-secondary small">No hay archivos subidos todavía.</li>
                    {% endfor %}
                </ul>

                {% if puede_subir_csv %}
                    <form method="post" action="{% url 'subir_csv' prueba.pk %}" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="mb-2">
                            <label class="form-label small fw-semibold">Nombre</label>
                            {{ form_csv.nombre }}
                        </div>
                        <div class="mb-2">
                            <label class="form-label small fw-semibold">Archivo CSV</label>
                            {{ form_csv.archivo_csv }}
                        </div>
                        <button type="submit" class="btn btn-sm btn-primary fw-bold">Subir CSV</button>
                    </form>
                {% endif %}
            </div>
        </div>
    </div>
</div>

{% if user.rol == 'directiva' %}
<div class="modal fade" id="eliminarModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmar eliminación</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                ¿Seguro que quieres eliminar el test <strong>{{ prueba.nombre }}</strong>? Esta acción no se puede deshacer.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <form method="post" action="{% url 'eliminar_prueba' prueba.pk %}">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger fw-bold">Eliminar</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock content %}