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

{% block title %}{{ session.channel.name }} Session - Stream Processor{% endblock %}

{% block extra_css %}
<style>
  .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
</style>
{% endblock %}

{% block extra_head %}
<script>
  function confirmStopSession() {
    Swal.fire({
      title: 'Stop Session?',
      text: 'Are you sure you want to stop this streaming session?',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#ef4444',
      cancelButtonColor: '#6b7280',
      confirmButtonText: '<i class="fas fa-stop me-2"></i>Yes, Stop Session',
      cancelButtonText: '<i class="fas fa-times me-2"></i>Cancel'
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire({
          title: 'Stopping Session...',
          text: 'Please wait while the session is being stopped.',
          icon: 'info',
          allowOutsideClick: false,
          showConfirmButton: false
        });
        document.getElementById('stop-session-form').submit();
      }
    });
  }

  function confirmDeleteSession() {
    Swal.fire({
      title: 'Delete Session?',
      text: 'Are you sure you want to delete this session? This will also delete all associated segments!',
      icon: 'error',
      showCancelButton: true,
      confirmButtonColor: '#ef4444',
      cancelButtonColor: '#6b7280',
      confirmButtonText: '<i class="fas fa-trash me-2"></i>Yes, Delete',
      cancelButtonText: '<i class="fas fa-times me-2"></i>Cancel',
      input: 'text',
      inputPlaceholder: 'Type "DELETE" to confirm',
      inputValidator: (value) => {
        if (value !== 'DELETE') {
          return 'You must type "DELETE" to confirm deletion';
        }
      }
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire({
          title: 'Deleting...',
          text: 'Please wait while the session is being deleted.',
          icon: 'info',
          allowOutsideClick: false,
          showConfirmButton: false
        });
        document.getElementById('delete-session-form').submit();
      }
    });
  }
</script>
{% endblock %}

{% block content %}
<!-- Hidden forms -->
{% if session.is_running %}
<form id="stop-session-form" method="post" action="{% url 'streams:session_stop' session.id %}" class="d-none">
  {% csrf_token %}
</form>
{% else %}
<form id="delete-session-form" method="post" action="{% url 'streams:session_delete' session.id %}" class="d-none">
  {% csrf_token %}
</form>
{% endif %}

<div class="container py-4">
  <!-- Header -->
  <div class="d-flex justify-content-between align-items-start mb-4">
    <div class="d-flex align-items-start">
      <a href="{% url 'streams:session_list' %}" class="me-3 text-muted">
        <i class="fas fa-arrow-left fs-5"></i>
      </a>
      <div>
        <h1 class="h3 fw-bold mb-1">
          <i class="fas fa-video me-2 text-primary"></i>
          {{ session.channel.name }} Session
          {% if session.is_running %}
            <span class="badge bg-success ms-2"><i class="fas fa-circle me-1"></i>Running</span>
          {% else %}
            <span class="badge bg-secondary ms-2"><i class="fas fa-circle me-1"></i>Stopped</span>
          {% endif %}
        </h1>
        <p class="text-muted mb-0">
          Started {{ session.started_at|date:"M d, Y H:i" }}
          {% if session.ended_at %} • Ended {{ session.ended_at|date:"M d, Y H:i" }}{% endif %}
        </p>
      </div>
    </div>
    <div class="btn-group">
      <a href="{% url 'streams:channel_detail' session.channel.pk %}" class="btn btn-outline-secondary">
        <i class="fas fa-tv me-2"></i>View Channel
      </a>
      {% if session.is_running %}
        <button onclick="confirmStopSession()" class="btn btn-danger">
          <i class="fas fa-stop me-2"></i>Stop Session
        </button>
      {% else %}
        <button onclick="confirmDeleteSession()" class="btn btn-danger">
          <i class="fas fa-trash me-2"></i>Delete Session
        </button>
      {% endif %}
    </div>
  </div>

  <div class="row g-4">
    <!-- Main column -->
    <div class="col-lg-8">
      <!-- Session Information -->
      <div class="card shadow-sm mb-4">
        <div class="card-header bg-white">
          <i class="fas fa-info-circle me-2 text-primary"></i>
          <span class="fw-semibold">Session Information</span>
        </div>
        <div class="card-body">
          <dl class="row mb-0">
            <dt class="col-sm-4 text-muted small">Session ID</dt>
            <dd class="col-sm-8 small mono">{{ session.id|truncatechars:8 }}</dd>

            <dt class="col-sm-4 text-muted small">Channel</dt>
            <dd class="col-sm-8 small">
              <a href="{% url 'streams:channel_detail' session.channel.pk %}" class="link-primary">{{ session.channel.name }}</a>
            </dd>

            <dt class="col-sm-4 text-muted small">Started</dt>
            <dd class="col-sm-8 small">{{ session.started_at|date:"M d, Y H:i:s" }}</dd>

            <dt class="col-sm-4 text-muted small">Status</dt>
            <dd class="col-sm-8 small">
              {% if session.is_running %}
                <span class="text-success fw-semibold">Running</span>
              {% else %}
                <span class="text-danger fw-semibold">Stopped</span>
              {% endif %}
            </dd>

            {% if session.ended_at %}
              <dt class="col-sm-4 text-muted small">Ended</dt>
              <dd class="col-sm-8 small">{{ session.ended_at|date:"M d, Y H:i:s" }}</dd>

              <dt class="col-sm-4 text-muted small">Duration</dt>
              <dd class="col-sm-8 small">
                {% if total_duration %}{{ total_duration|floatformat:1 }} seconds{% else %}-{% endif %}
              </dd>
            {% endif %}

            {% if session.error_message %}
              <dt class="col-sm-4 text-muted small">Error Message</dt>
              <dd class="col-sm-8">
                <div class="alert alert-danger py-2 px-3 mb-0 small">{{ session.error_message }}</div>
              </dd>
            {% endif %}
          </dl>
        </div>
      </div>

      <!-- Recent Segments -->
      <div class="card shadow-sm">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
          <div>
            <i class="fas fa-film me-2 text-primary"></i>
            <span class="fw-semibold">Recent Segments</span>
          </div>
          <span class="small text-muted">{{ total_segments }} total segments</span>
        </div>
        <div class="card-body">
          {% if recent_segments %}
          <div class="vstack gap-2">
            {% for segment in recent_segments %}
            <div class="border rounded p-2 d-flex justify-content-between align-items-center">
              <div class="d-flex align-items-center">
                <div class="me-3">
                  {% if segment.is_available %}
                    <i class="fas fa-check-circle text-success"></i>
                  {% else %}
                    <i class="fas fa-clock text-warning"></i>
                  {% endif %}
                </div>
                <div>
                  <div class="small fw-semibold text-body">Segment #{{ segment.sequence_number }}</div>
                  <div class="small text-muted">
                    {% if segment.duration %}{{ segment.duration|floatformat:1 }}s{% endif %}
                    {% if segment.file_size %} • {{ segment.file_size|filesizeformat }}{% endif %}
                    • {{ segment.processed_at|date:"H:i:s" }}
                  </div>
                </div>
              </div>
              <div class="d-flex align-items-center gap-2">
                {% if segment.is_available %}
                  <span class="badge bg-success">Available</span>
                {% else %}
                  <span class="badge bg-warning text-dark">Processing</span>
                {% endif %}
                {% if segment.file_path %}
                  <a href="{{ MEDIA_URL }}{{ segment.file_path }}" target="_blank" class="text-decoration-none" title="Download">
                    <i class="fas fa-download"></i>
                  </a>
                {% endif %}
              </div>
            </div>
            {% endfor %}
          </div>
          {% else %}
            <div class="text-center py-4 text-muted">
              <i class="fas fa-film fs-3 d-block mb-2"></i>
              No segments found for this session
            </div>
          {% endif %}
        </div>
      </div>
    </div>

    <!-- Sidebar -->
    <div class="col-lg-4">
      <!-- Statistics -->
      <div class="card shadow-sm mb-4">
        <div class="card-header bg-white">
          <i class="fas fa-chart-bar me-2 text-success"></i>
          <span class="fw-semibold">Statistics</span>
        </div>
        <div class="card-body">
          <ul class="list-unstyled mb-0 small">
            <li class="d-flex justify-content-between mb-2">
              <span class="text-muted">Total Segments</span>
              <span class="fw-semibold">{{ total_segments|default:0 }}</span>
            </li>
            <li class="d-flex justify-content-between mb-2">
              <span class="text-muted">Available Segments</span>
              <span class="fw-semibold">{{ available_segments|default:0 }}</span>
            </li>
            {% if total_duration %}
            <li class="d-flex justify-content-between mb-2">
              <span class="text-muted">Total Duration</span>
              <span class="fw-semibold">{{ total_duration|floatformat:1 }}s</span>
            </li>
            {% endif %}
            {% if total_size %}
            <li class="d-flex justify-content-between mb-2">
              <span class="text-muted">Total Size</span>
              <span class="fw-semibold">{{ total_size|filesizeformat }}</span>
            </li>
            {% endif %}
            <li class="d-flex justify-content-between">
              <span class="text-muted">Session Status</span>
              <span class="fw-semibold">
                {% if session.is_running %}<span class="text-success">Active</span>{% else %}<span class="text-danger">Inactive</span>{% endif %}
              </span>
            </li>
          </ul>
        </div>
      </div>

      <!-- Quick Actions -->
      <div class="card shadow-sm mb-4">
        <div class="card-header bg-white">
          <i class="fas fa-bolt me-2 text-warning"></i>
          <span class="fw-semibold">Quick Actions</span>
        </div>
        <div class="card-body d-grid gap-2">
          <a href="{% url 'streams:channel_detail' session.channel.pk %}" class="btn btn-outline-secondary">
            <i class="fas fa-tv me-2"></i>View Channel
          </a>

          {% if session.is_running %}
          <button onclick="confirmStopSession()" class="btn btn-danger">
            <i class="fas fa-stop me-2"></i>Stop Session
          </button>
          {% endif %}

          <button class="btn btn-primary">
            <i class="fas fa-download me-2"></i>Download All Segments
          </button>

          <button class="btn btn-outline-primary">
            <i class="fas fa-play me-2"></i>Generate Playlist
          </button>

          {% if not session.is_running %}
          <button onclick="confirmDeleteSession()" class="btn btn-danger">
            <i class="fas fa-trash me-2"></i>Delete Session
          </button>
          {% endif %}
        </div>
      </div>

      <!-- Channel Info -->
      <div class="card shadow-sm">
        <div class="card-header bg-white">
          <i class="fas fa-tv me-2 text-info"></i>
          <span class="fw-semibold">Channel Info</span>
        </div>
        <div class="card-body small">
          <dl class="row mb-0">
            <dt class="col-5 text-muted">Channel Name</dt>
            <dd class="col-7">{{ session.channel.name }}</dd>

            <dt class="col-5 text-muted">Stream URL</dt>
            <dd class="col-7 mono text-break">{{ session.channel.stream_url|truncatechars:30 }}</dd>

            <dt class="col-5 text-muted">Output Directory</dt>
            <dd class="col-7 mono">{{ session.channel.output_directory }}</dd>

            <dt class="col-5 text-muted">Channel Status</dt>
            <dd class="col-7">
              {% if session.channel.is_active %}
                <span class="badge bg-success">Active</span>
              {% else %}
                <span class="badge bg-secondary">Inactive</span>
              {% endif %}
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}