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

{% block title %}Stream Sessions - Stream Processor{% endblock %}
{% block page_title %}Stream Sessions{% endblock %}

{% block extra_css %}
<style>
  .status-dot{width:.75rem;height:.75rem;border-radius:50%;display:inline-block}
  @keyframes pulse{0%{transform:scale(1);opacity:.9}50%{transform:scale(1.25);opacity:.5}100%{transform:scale(1);opacity:.9}}
  .pulse{animation:pulse 1.5s ease-in-out infinite}
</style>
{% endblock %}

{% block content %}
<div class="container py-4">
  <!-- Header -->
  <div class="d-flex justify-content-between align-items-center mb-3">
    <div>
      <h1 class="h4 fw-bold mb-1">
        <i class="fas fa-play-circle me-2 text-primary"></i>
        Stream Sessions
      </h1>
      <p class="text-muted small mb-0">Monitor and manage streaming sessions</p>
    </div>
  </div>

  <!-- Filters -->
  <div class="card mb-4">
    <div class="card-body">
      <form method="get" class="row g-3 align-items-end">
        <div class="col-12 col-md-6">
          <label for="search" class="form-label">Search</label>
          <input type="text"
                 id="search"
                 name="search"
                 value="{{ request.GET.search }}"
                 placeholder="Search by channel name..."
                 class="form-control">
        </div>
        <div class="col-12 col-md-3">
          <label for="status" class="form-label">Status</label>
          <select id="status" name="status" class="form-select">
            <option value="">All Status</option>
            <option value="active" {% if request.GET.status == 'active' %}selected{% endif %}>Active</option>
            <option value="completed" {% if request.GET.status == 'completed' %}selected{% endif %}>Completed</option>
            <option value="failed" {% if request.GET.status == 'failed' %}selected{% endif %}>Failed</option>
            <option value="stopped" {% if request.GET.status == 'stopped' %}selected{% endif %}>Stopped</option>
          </select>
        </div>
        <div class="col-12 col-md-3">
          <button type="submit" class="btn btn-primary me-2">
            <i class="fas fa-search me-2"></i>Filter
          </button>
          {% if request.GET.search or request.GET.status %}
          <a href="{% url 'streams:session_list' %}" class="btn btn-outline-secondary">
            <i class="fas fa-times me-2"></i>Clear
          </a>
          {% endif %}
        </div>
      </form>
    </div>
  </div>

  <!-- Sessions List -->
  {% if sessions %}
    <div class="card">
      <ul class="list-group list-group-flush">
        {% for session in sessions %}
        <li class="list-group-item">
          <div class="d-flex justify-content-between">
            <div class="d-flex align-items-start gap-3">
              <div class="pt-1">
                {% if session.status == 'active' %}
                  <span class="status-dot bg-success pulse"></span>
                {% elif session.status == 'completed' %}
                  <span class="status-dot bg-primary"></span>
                {% elif session.status == 'failed' %}
                  <span class="status-dot bg-danger"></span>
                {% else %}
                  <span class="status-dot bg-secondary"></span>
                {% endif %}
              </div>

              <div class="flex-grow-1">
                <div class="d-flex align-items-center gap-2">
                  <h3 class="h6 mb-0">
                    <a class="text-decoration-none"
                       href="{% url 'streams:session_detail' session.pk %}">
                      {{ session.channel.name }}
                    </a>
                  </h3>
                  <span class="badge
                    {% if session.status == 'active' %} bg-success
                    {% elif session.status == 'completed' %} bg-primary
                    {% elif session.status == 'failed' %} bg-danger
                    {% else %} bg-secondary{% endif %}">
                    {{ session.get_status_display }}
                  </span>
                </div>

                <div class="mt-2 small text-muted d-flex flex-wrap gap-3">
                  <span><i class="fas fa-clock me-1"></i>Started: {{ session.started_at|date:"M d, Y H:i" }}</span>
                  {% if session.ended_at %}
                  <span><i class="fas fa-stop-circle me-1"></i>Ended: {{ session.ended_at|date:"M d, Y H:i" }}</span>
                  {% endif %}
                  {% if session.duration %}
                  <span><i class="fas fa-hourglass-half me-1"></i>Duration: {{ session.duration }}</span>
                  {% endif %}
                </div>

                {% if session.error_message %}
                <div class="mt-2 small text-danger">
                  <i class="fas fa-exclamation-triangle me-1"></i>{{ session.error_message }}
                </div>
                {% endif %}

                {% if session.statistics %}
                <div class="row g-2 mt-3">
                  <div class="col-6 col-sm-3">
                    <div class="bg-light rounded p-2 text-center">
                      <div class="text-muted small">Segments</div>
                      <div class="fw-semibold">{{ session.statistics.total_segments|default:0 }}</div>
                    </div>
                  </div>
                  <div class="col-6 col-sm-3">
                    <div class="bg-light rounded p-2 text-center">
                      <div class="text-muted small">Data Processed</div>
                      <div class="fw-semibold">{{ session.statistics.total_size|filesizeformat|default:"0 B" }}</div>
                    </div>
                  </div>
                  <div class="col-6 col-sm-3">
                    <div class="bg-light rounded p-2 text-center">
                      <div class="text-muted small">Jingles Detected</div>
                      <div class="fw-semibold">{{ session.statistics.jingles_detected|default:0 }}</div>
                    </div>
                  </div>
                  <div class="col-6 col-sm-3">
                    <div class="bg-light rounded p-2 text-center">
                      <div class="text-muted small">Ad Breaks</div>
                      <div class="fw-semibold">{{ session.statistics.ad_breaks|default:0 }}</div>
                    </div>
                  </div>
                </div>
                {% endif %}
              </div>
            </div>

            <!-- Actions -->
            <div class="d-flex align-items-start gap-2 ms-3">
              {% if session.status == 'active' %}
              <form method="post" action="{% url 'streams:session_stop' session.id %}" class="d-inline-block">
                {% csrf_token %}
                <button type="submit"
                        class="btn btn-outline-danger btn-sm"
                        hx-post="{% url 'streams:session_stop' session.id %}"
                        hx-confirm="Are you sure you want to stop this stream?"
                        hx-target="closest li"
                        hx-swap="outerHTML">
                  <i class="fas fa-stop me-1"></i>Stop
                </button>
              </form>
              {% endif %}
              <a href="{% url 'streams:session_detail' session.pk %}"
                 class="btn btn-outline-primary btn-sm">
                <i class="fas fa-eye me-1"></i>View
              </a>
            </div>
          </div>
        </li>
        {% endfor %}
      </ul>
    </div>

    <!-- Pagination -->
    {% if is_paginated %}
    <div class="d-flex justify-content-between align-items-center border rounded-bottom px-3 py-2">
      <div class="small text-muted">
        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">{{ paginator.count }}</span> sessions
      </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 }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}"
               aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </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>
            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
              <li class="page-item">
                <a class="page-link"
                   href="?page={{ num }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">
                  {{ 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 }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}"
               aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
          {% endif %}
        </ul>
      </nav>
    </div>
    {% endif %}
  {% else %}
    <!-- Empty State -->
    <div class="text-center py-5">
      <div class="rounded-circle bg-light d-inline-flex align-items-center justify-content-center mb-3" style="width:3.5rem;height:3.5rem;">
        <i class="fas fa-play-circle text-secondary fs-4"></i>
      </div>
      <h3 class="h5 mb-2">No sessions found</h3>
      {% if request.GET.search or request.GET.status %}
        <p class="text-muted mb-3">Try adjusting your search or filter criteria</p>
        <a href="{% url 'streams:session_list' %}" class="btn btn-outline-secondary">Clear Filters</a>
      {% else %}
        <p class="text-muted mb-3">No streaming sessions have been created yet</p>
        <a href="{% url 'streams:channel_list' %}" class="btn btn-primary">
          <i class="fas fa-plus me-2"></i>Start New Stream
        </a>
      {% endif %}
    </div>
  {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
  // Auto-refresh active sessions every 30 seconds
  setInterval(function () {
    if (document.querySelector('.status-dot.pulse')) {
      location.reload();
    }
  }, 30000);
</script>
{% endblock %}