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

{% block title %}Ad Breaks - 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">Ad Breaks</h1>
        <p class="text-muted mb-0">Monitor and analyze advertisement breaks detected in streams</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:detection_list' %}" class="btn btn-outline-secondary">
          <i class="fas fa-search me-2"></i> Detections
        </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 Ad Breaks</h6>
        <div class="small">
          Ad breaks are automatically detected periods of commercial content within streams. They are identified by jingle
          detection pairs (start/end markers) and can be sent to external APIs for analysis and reporting.
        </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-play-circle text-primary fs-4"></i>
              <div class="ms-3">
                <div class="small text-muted">Total Ad Breaks</div>
                <div class="fs-5 fw-semibold">{{ ad_breaks|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-clock text-success fs-4"></i>
              <div class="ms-3">
                <div class="small text-muted">Completed</div>
                <div class="fs-5 fw-semibold">
                  {% for break in ad_breaks %}{% if break.end_time %}{{ 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-hourglass-half text-warning fs-4"></i>
              <div class="ms-3">
                <div class="small text-muted">In Progress</div>
                <div class="fs-5 fw-semibold">
                  {% for break in ad_breaks %}{% if not break.end_time %}{{ 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-external-link-alt text-purple fs-5" style="color:#7c3aed;"></i>
              <div class="ms-3">
                <div class="small text-muted">Sent to API</div>
                <div class="fs-5 fw-semibold">
                  {% for break in ad_breaks %}{% if break.is_sent_to_api %}{{ forloop.counter0|add:1 }}{% endif %}{% empty %}0{% endfor %}
                </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="session" class="form-label small fw-semibold">Session</label>
              <select name="session" id="session" class="form-select">
                <option value="">All Sessions</option>
                {% for break in ad_breaks %}
                  <option value="{{ break.session.id }}" {% if request.GET.session == break.session.id|stringformat:"s" %}selected{% endif %}>
                    {{ break.session.channel.name }} - {{ break.session.start_time|date:"M d, Y H:i" }}
                  </option>
                {% endfor %}
              </select>
            </div>
            <div class="col-12 col-md-4">
              <label for="status" class="form-label small fw-semibold">Status</label>
              <select name="status" id="status" class="form-select">
                <option value="">All Statuses</option>
                <option value="completed" {% if request.GET.status == "completed" %}selected{% endif %}>Completed</option>
                <option value="in_progress" {% if request.GET.status == "in_progress" %}selected{% endif %}>In Progress</option>
              </select>
            </div>
            <div class="col-12 col-md-4">
              <label for="region" class="form-label small fw-semibold">Region</label>
              <select name="region" id="region" class="form-select">
                <option value="">All Regions</option>
                <option value="Netherlands" {% if request.GET.region == "Netherlands" %}selected{% endif %}>Netherlands</option>
                <option value="France" {% if request.GET.region == "France" %}selected{% endif %}>France</option>
                <option value="Global" {% if request.GET.region == "Global" %}selected{% endif %}>Global</option>
              </select>
            </div>
          </div>
          <div class="d-flex justify-content-end gap-2 mt-3">
            <a href="{% url 'jingles:adbreak_list' %}" class="btn btn-outline-secondary">Clear Filters</a>
            <button type="submit" class="btn btn-primary">Apply Filters</button>
          </div>
        </form>
      </div>
    </div>

    <!-- Ad Breaks List -->
    <div class="card shadow-sm">
      <div class="card-header bg-white">
        <h6 class="mb-0">Ad Breaks</h6>
      </div>

      {% if ad_breaks %}
        <div class="table-responsive">
          <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
              <tr>
                <th>Session</th>
                <th>Channel</th>
                <th>Start Time</th>
                <th>Duration</th>
                <th>Status</th>
                <th>Region</th>
                <th>API Status</th>
                <th class="text-end">Actions</th>
              </tr>
            </thead>
            <tbody>
              {% for ad_break in ad_breaks %}
                <tr>
                  <td>
                    <div class="fw-semibold">
                      <a href="{% url 'streams:session_detail' ad_break.session.id %}" class="text-primary text-decoration-none">
                        {{ ad_break.session.id|truncatechars:8 }}
                      </a>
                    </div>
                    <div class="text-muted small">{{ ad_break.session.start_time|date:"M d, H:i" }}</div>
                  </td>
                  <td>
                    <div class="fw-semibold">{{ ad_break.channel_name }}</div>
                    <div class="text-muted small">{{ ad_break.session.channel.name }}</div>
                  </td>
                  <td>
                    <div>{{ ad_break.start_time|date:"M d, Y" }}</div>
                    <div class="text-muted small">{{ ad_break.start_time|time:"H:i:s" }}</div>
                  </td>
                  <td>
                    {% if ad_break.duration_seconds %}
                      <div>{{ ad_break.duration_seconds }}s</div>
                      <div class="text-muted small">
                        {% widthratio ad_break.duration_seconds 60 1 %}m {% widthratio ad_break.duration_seconds 1 1 %}s total
                      </div>
                    {% else %}
                      <span class="text-muted">-</span>
                    {% endif %}
                  </td>
                  <td>
                    {% if ad_break.end_time %}
                      <span class="badge rounded-pill bg-success-subtle text-success">
                        <i class="fas fa-check-circle me-1"></i> Completed
                      </span>
                    {% else %}
                      <span class="badge rounded-pill bg-warning-subtle text-warning">
                        <i class="fas fa-hourglass-half me-1"></i> In Progress
                      </span>
                    {% endif %}
                  </td>
                  <td>
                    <span class="badge rounded-pill bg-secondary-subtle text-secondary">
                      {{ ad_break.region }}
                    </span>
                  </td>
                  <td>
                    {% if ad_break.is_sent_to_api %}
                      <span class="badge rounded-pill bg-primary-subtle text-primary">
                        <i class="fas fa-external-link-alt me-1"></i> Sent
                      </span>
                    {% else %}
                      <span class="badge rounded-pill bg-secondary-subtle text-secondary">
                        <i class="fas fa-clock me-1"></i> Pending
                      </span>
                    {% endif %}
                  </td>
                  <td class="text-end">
                    <div class="d-inline-flex gap-2">
                      <a href="{% url 'jingles:adbreak_detail' ad_break.id %}"
                         class="text-primary text-decoration-none" title="View Details">
                        <i class="fas fa-eye"></i>
                      </a>
                      {% if not ad_break.is_sent_to_api %}
                        <button class="btn btn-link p-0 text-success text-decoration-none" title="Send to API">
                          <i class="fas fa-paper-plane"></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-play-circle fs-1 text-muted mb-3"></i>
          <h5 class="fw-semibold mb-2">No Ad Breaks Found</h5>
          <p class="text-muted mb-4">No advertisement breaks have been detected 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 %}