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

{% block title %}Jingle Detections - Stream Processor{% endblock %}

{% block content %}
<div class="py-4 bg-light min-vh-100">
  <div class="container-fluid" style="max-width: 1200px;">

    <!-- Header -->
    <div class="d-flex align-items-center justify-content-between mb-4">
      <div>
        <h1 class="h3 fw-bold text-dark mb-1">Jingle Detections</h1>
        <p class="text-muted mb-0">Monitor and analyze jingle detection results from stream processing</p>
      </div>
      <div class="d-flex gap-2">
        <a href="{% url 'jingles:template_list' %}" class="btn btn-outline-secondary">
          <i class="fas fa-image me-2"></i> Templates
        </a>
        <a href="{% url 'jingles:adbreak_list' %}" class="btn btn-outline-secondary">
          <i class="fas fa-play-circle me-2"></i> Ad Breaks
        </a>
      </div>
    </div>

    <!-- Info Panel -->
    <div class="alert alert-primary d-flex align-items-start mb-4" role="alert">
      <i class="fas fa-info-circle me-3 fs-5"></i>
      <div>
        <h6 class="mb-1">About Jingle Detections</h6>
        <div class="small">
          Jingle detections are individual instances where the AI system has identified a jingle template match in the stream content. Each detection includes confidence scores, timing information, and extracted frames for verification.
        </div>
      </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row row-cols-1 row-cols-md-4 g-3 mb-4">
      <div class="col">
        <div class="card h-100 shadow-sm">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <i class="fas fa-search text-primary fs-4"></i>
              <div class="ms-3">
                <div class="small text-muted">Total Detections</div>
                <div class="fs-5 fw-semibold">{{ detections|length|default:0 }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col">
        <div class="card h-100 shadow-sm">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <i class="fas fa-check-circle text-success fs-4"></i>
              <div class="ms-3">
                <div class="small text-muted">Confirmed</div>
                <div class="fs-5 fw-semibold">
                  {% for detection in detections %}{% if detection.is_confirmed %}{{ forloop.counter0|add:1 }}{% endif %}{% empty %}0{% endfor %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col">
        <div class="card h-100 shadow-sm">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <i class="fas fa-percentage text-warning fs-4"></i>
              <div class="ms-3">
                <div class="small text-muted">Avg Confidence</div>
                <div class="fs-6 fw-semibold">
                  {% if detections %}
                    {% for detection in detections %}{{ detection.confidence_score|floatformat:3 }}{% if not forloop.last %},{% endif %}{% endfor %}
                  {% else %}
                    0.000
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col">
        <div class="card h-100 shadow-sm">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <i class="fas fa-image fs-4" style="color:#7c3aed;"></i>
              <div class="ms-3">
                <div class="small text-muted">Templates Used</div>
                <div class="fs-5 fw-semibold">{{ templates|length|default:0 }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Filters -->
    <div class="card shadow-sm mb-4">
      <div class="card-header bg-white">
        <h6 class="mb-0">Filters</h6>
      </div>
      <div class="card-body">
        <form method="get">
          <div class="row g-3">
            <div class="col-12 col-md-4">
              <label for="template" class="form-label small fw-semibold">Template</label>
              <select name="template" id="template" class="form-select">
                <option value="">All Templates</option>
                {% for template in templates %}
                  <option value="{{ template.id }}" {% if request.GET.template == template.id|stringformat:"s" %}selected{% endif %}>
                    {{ template.name }}
                  </option>
                {% endfor %}
              </select>
            </div>
            <div class="col-12 col-md-4">
              <label for="confidence" class="form-label small fw-semibold">Min Confidence</label>
              <select name="confidence" id="confidence" class="form-select">
                <option value="">Any Confidence</option>
                <option value="0.5" {% if request.GET.confidence == "0.5" %}selected{% endif %}>≥ 0.5</option>
                <option value="0.7" {% if request.GET.confidence == "0.7" %}selected{% endif %}>≥ 0.7</option>
                <option value="0.8" {% if request.GET.confidence == "0.8" %}selected{% endif %}>≥ 0.8</option>
                <option value="0.9" {% if request.GET.confidence == "0.9" %}selected{% endif %}>≥ 0.9</option>
              </select>
            </div>
            <div class="col-12 col-md-4">
              <label for="confirmed" class="form-label small fw-semibold">Confirmation Status</label>
              <select name="confirmed" id="confirmed" class="form-select">
                <option value="">All Detections</option>
                <option value="true" {% if request.GET.confirmed == "true" %}selected{% endif %}>Confirmed Only</option>
                <option value="false" {% if request.GET.confirmed == "false" %}selected{% endif %}>Unconfirmed Only</option>
              </select>
            </div>
          </div>
          <div class="d-flex justify-content-end gap-2 mt-3">
            <a href="{% url 'jingles:detection_list' %}" class="btn btn-outline-secondary">Clear Filters</a>
            <button type="submit" class="btn btn-primary">Apply Filters</button>
          </div>
        </form>
      </div>
    </div>

    <!-- Detections List -->
    <div class="card shadow-sm">
      <div class="card-header bg-white">
        <h6 class="mb-0">Detection Results</h6>
      </div>

      {% if detections %}
        <div class="table-responsive">
          <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
              <tr>
                <th>Template</th>
                <th>Session</th>
                <th>Detection Time</th>
                <th>Confidence</th>
                <th>Status</th>
                <th>Frame</th>
                <th class="text-end">Actions</th>
              </tr>
            </thead>
            <tbody>
              {% for detection in detections %}
                <tr>
                  <!-- Template -->
                  <td>
                    <div class="d-flex align-items-center">
                      <div class="flex-shrink-0">
                        <div class="rounded-circle bg-primary-subtle d-flex align-items-center justify-content-center" style="width:40px;height:40px;">
                          <i class="fas fa-image text-primary"></i>
                        </div>
                      </div>
                      <div class="ms-3">
                        <div class="fw-semibold">{{ detection.template.name }}</div>
                        <div class="text-muted small">{{ detection.template.category|capfirst }}</div>
                      </div>
                    </div>
                  </td>

                  <!-- Session -->
                  <td>
                    <div class="fw-semibold">
                      <a href="{% url 'streams:session_detail' detection.session.id %}" class="text-primary text-decoration-none">
                        {{ detection.session.id|truncatechars:8 }}
                      </a>
                    </div>
                    <div class="text-muted small">{{ detection.session.channel.name }}</div>
                  </td>

                  <!-- Detection Time -->
                  <td>
                    <div>{{ detection.detection_time|date:"M d, Y" }}</div>
                    <div class="text-muted small">{{ detection.detection_time|time:"H:i:s" }}</div>
                  </td>

                  <!-- Confidence -->
                  <td>
                    <div class="d-flex align-items-center">
                      <div class="fw-semibold">{{ detection.confidence_score|floatformat:3 }}</div>
                      <div class="ms-2">
                        {% if detection.confidence_score >= 0.9 %}
                          <span class="badge rounded-pill bg-success-subtle text-success">High</span>
                        {% elif detection.confidence_score >= 0.7 %}
                          <span class="badge rounded-pill bg-warning-subtle text-warning">Medium</span>
                        {% else %}
                          <span class="badge rounded-pill bg-danger-subtle text-danger">Low</span>
                        {% endif %}
                      </div>
                    </div>
                  </td>

                  <!-- Status -->
                  <td>
                    {% if detection.is_confirmed %}
                      <span class="badge rounded-pill bg-success-subtle text-success">
                        <i class="fas fa-check-circle me-1"></i> Confirmed
                      </span>
                    {% else %}
                      <span class="badge rounded-pill bg-secondary-subtle text-secondary">
                        <i class="fas fa-question-circle me-1"></i> Pending
                      </span>
                    {% endif %}
                  </td>

                  <!-- Frame -->
                  <td>
                    {% if detection.frame_path %}
                      <button class="btn btn-link p-0 text-primary text-decoration-none" title="View Frame">
                        <i class="fas fa-eye"></i>
                      </button>
                    {% else %}
                      <span class="text-muted"><i class="fas fa-times"></i></span>
                    {% endif %}
                  </td>

                  <!-- Actions -->
                  <td class="text-end">
                    <div class="d-inline-flex gap-2">
                      <a href="{% url 'jingles:detection_detail' detection.id %}"
                         class="text-primary text-decoration-none" title="View Details">
                        <i class="fas fa-info-circle"></i>
                      </a>
                      {% if not detection.is_confirmed %}
                        <button class="btn btn-link p-0 text-success text-decoration-none" title="Confirm Detection">
                          <i class="fas fa-check"></i>
                        </button>
                      {% endif %}
                      <button class="btn btn-link p-0 text-danger text-decoration-none" title="Delete">
                        <i class="fas fa-trash"></i>
                      </button>
                    </div>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>

        <!-- Pagination -->
        {% if is_paginated %}
          <div class="card-footer bg-white d-flex flex-column flex-sm-row align-items-center justify-content-between">
            <div class="small text-muted mb-2 mb-sm-0">
              Showing <span class="fw-semibold">{{ page_obj.start_index }}</span> to
              <span class="fw-semibold">{{ page_obj.end_index }}</span> of
              <span class="fw-semibold">{{ page_obj.paginator.count }}</span> results
            </div>
            <nav aria-label="Pagination">
              <ul class="pagination mb-0">
                {% if page_obj.has_previous %}
                  <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                    </a>
                  </li>
                {% else %}
                  <li class="page-item disabled"><span class="page-link">&laquo;</span></li>
                {% endif %}

                {% for num in page_obj.paginator.page_range %}
                  {% if page_obj.number == num %}
                    <li class="page-item active"><span class="page-link">{{ num }}</span></li>
                  {% else %}
                    <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
                  {% endif %}
                {% endfor %}

                {% if page_obj.has_next %}
                  <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                    </a>
                  </li>
                {% else %}
                  <li class="page-item disabled"><span class="page-link">&raquo;</span></li>
                {% endif %}
              </ul>
            </nav>
          </div>
        {% endif %}
      {% else %}
        <div class="text-center py-5">
          <i class="fas fa-search fs-1 text-muted mb-3"></i>
          <h5 class="fw-semibold mb-2">No Detections Found</h5>
          <p class="text-muted mb-4">No jingle detections have been recorded yet.</p>
          <div class="d-inline-flex gap-2">
            <a href="{% url 'jingles:template_list' %}" class="btn btn-primary">
              <i class="fas fa-image me-2"></i> Manage Templates
            </a>
            <a href="{% url 'streams:session_list' %}" class="btn btn-outline-secondary">
              <i class="fas fa-play me-2"></i> View Sessions
            </a>
          </div>
        </div>
      {% endif %}
    </div>

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