{% extends "base.html" %}
{% load i18n %}
{% load crispy_forms_tags %}

{% block head %}
<style>
    .detection-form-card {
        border: none;
        box-shadow: 0 2px 12px rgba(0,0,0,.10);
        border-radius: .75rem;
    }
    .recent-table th {
        background-color: #f8f9fa;
        font-size: .85rem;
        text-transform: uppercase;
        letter-spacing: .05em;
    }
</style>
{% endblock head %}

{% block content %}
<div class="container py-4">

    <!-- En-tête -->
    <div class="row mb-4">
        <div class="col">
            <h2 class="fw-bold">
                <i class="bi bi-search me-2 text-primary"></i>Détection de nids de poule
            </h2>
            <p class="text-muted mb-0">
                Uploadez une image de voirie pour détecter automatiquement les nids de poule via <strong>YOLO11</strong>.
            </p>
        </div>
    </div>

    <!-- Messages -->
    {% for message in messages %}
    <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fermer"></button>
    </div>
    {% endfor %}

    <div class="row g-4">

        <!-- Formulaire d'upload -->
        <div class="col-lg-7">
            <div class="card detection-form-card">
                <div class="card-header bg-primary text-white rounded-top">
                    <h5 class="mb-0"><i class="bi bi-upload me-2"></i>Analyser une image</h5>
                </div>
                <div class="card-body p-4">
                    <form method="post" enctype="multipart/form-data" novalidate>
                        {% csrf_token %}
                        {{ form|crispy }}
                        <div class="d-grid mt-3">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="bi bi-cpu me-2"></i>Lancer la détection
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Informations sur le modèle -->
            <!-- <div class="alert alert-info mt-3 d-flex align-items-start gap-2" role="alert">
                <i class="bi bi-info-circle-fill fs-5 flex-shrink-0 mt-1"></i>
                <div>
                    <strong>Modèle utilisé : YOLO11</strong><br>
                    Le modèle <code>yolo11n.pt</code> est téléchargé automatiquement au premier usage.
                    Pour de meilleures performances sur les nids de poule, un modèle fine-tuné sur
                    <em>RDD2022</em> ou <em>Pothole-600</em> peut être configuré via
                    <code>ROAD_DETECTION_MODEL_PATH</code> dans les settings.
                </div>
            </div> -->
        </div>

        <!-- Analyses récentes -->
        <div class="col-lg-5">
            <div class="card detection-form-card h-100">
                <div class="card-header bg-secondary text-white rounded-top">
                    <h5 class="mb-0"><i class="bi bi-clock-history me-2"></i>Mes analyses récentes</h5>
                </div>
                <div class="card-body p-0">
                    {% if recent_detections %}
                    <div class="table-responsive">
                        <table class="table table-hover mb-0 recent-table">
                            <thead>
                                <tr>
                                    <th class="ps-3">Date</th>
                                    <th class="text-center">Détections</th>
                                    <th class="text-center">Seuil</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for d in recent_detections %}
                                <tr>
                                    <td class="ps-3 align-middle">
                                        <small>{{ d.created_at|date:"d/m/Y H:i" }}</small>
                                    </td>
                                    <td class="text-center align-middle">
                                        {% if d.detection_count > 0 %}
                                        <span class="badge bg-danger">{{ d.detection_count }}</span>
                                        {% else %}
                                        <span class="badge bg-success">0</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-center align-middle">
                                        <small class="text-muted">{{ d.confidence_threshold|floatformat:2 }}</small>
                                    </td>
                                    <td class="text-end pe-3 align-middle">
                                        <a href="{% url 'road_detection:result' pk=d.pk %}"
                                           class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center text-muted py-5">
                        <i class="bi bi-image fs-1 d-block mb-2"></i>
                        Aucune analyse effectuée pour l'instant.
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

    </div>
</div>
{% endblock content %}