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

{% block title %}{{ channel.name }} - Channel Details - Stream Processor{% endblock %}

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

{% block extra_head %}
<script>
  function confirmStartStream() {
    Swal.fire({
      title: 'Start Stream?',
      text: 'Are you sure you want to start streaming this channel?',
      icon: 'question',
      showCancelButton: true,
      confirmButtonColor: '#10b981',
      cancelButtonColor: '#6b7280',
      confirmButtonText: '<i class="fas fa-play me-2"></i>Yes, Start Stream',
      cancelButtonText: '<i class="fas fa-times me-2"></i>Cancel'
    }).then((result) => {
      if (result.isConfirmed) {
        document.getElementById('start-stream-form').dispatchEvent(new Event('submit'));
        Swal.fire({
          title: 'Starting Stream...',
          text: 'Please wait while the stream is being started.',
          icon: 'info',
          allowOutsideClick: false,
          showConfirmButton: false,
          timer: 2000
        });
      }
    });
  }

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

{% block content %}
<div class="container-lg py-4">
  <!-- Header -->
  <div class="d-flex align-items-start justify-content-between mb-4">
    <div class="d-flex align-items-start">
      <a href="{% url 'streams:channel_list' %}" class="me-3 text-muted text-decoration-none">
        <i class="fas fa-arrow-left fs-5"></i>
      </a>
      <div>
        <h1 class="h3 fw-bold text-dark d-flex align-items-center mb-1">
          <i class="fas fa-tv me-3 text-primary"></i>
          {{ channel.name }}
          {% if channel.is_active %}
            <span class="badge bg-success-subtle text-success-emphasis ms-3">
              <i class="fas fa-circle me-1"></i> Active
            </span>
          {% else %}
            <span class="badge bg-secondary-subtle text-secondary-emphasis ms-3">
              <i class="fas fa-circle me-1"></i> Inactive
            </span>
          {% endif %}
        </h1>
        <p class="text-muted mb-0">
          {% if channel.description %}
            {{ channel.description }}
          {% else %}
            Channel configuration and streaming details
          {% endif %}
        </p>
      </div>
    </div>
    <div class="d-flex gap-2">
      <a href="{% url 'streams:hls_player' channel.pk %}" class="btn btn-primary">
        <i class="fas fa-play me-2"></i> Live Player
      </a>
      <a href="{% url 'streams:ts_browser' channel.pk %}" class="btn btn-outline-secondary">
        <i class="fas fa-file-video me-2"></i> TS Files
      </a>
      <a href="{% url 'streams:iframe_gallery' channel.pk %}" class="btn btn-outline-secondary">
        <i class="fas fa-images me-2"></i> iFrames
      </a>
      <a href="{% url 'streams:jingle_preview' channel.pk %}" class="btn btn-outline-secondary">
        <i class="fas fa-music me-2"></i> Jingles
      </a>
      <a href="{% url 'streams:channel_edit' channel.pk %}" class="btn btn-outline-secondary">
        <i class="fas fa-edit me-2"></i> Edit
      </a>

      {% if active_session %}
        <form id="stop-stream-form"
              hx-post="{% url 'streams:session_stop' active_session.pk %}"
              hx-target="#stream-status"
              hx-swap="outerHTML"
              class="d-inline">
          {% csrf_token %}
          <button type="button" onclick="confirmStopStream()" class="btn btn-danger">
            <i class="fas fa-stop me-2"></i> Stop Stream
          </button>
        </form>
      {% else %}
        <form id="start-stream-form"
              hx-post="{% url 'streams:channel_start' channel.pk %}"
              hx-target="#stream-status"
              hx-swap="outerHTML"
              class="d-inline">
          {% csrf_token %}
          <button type="button" onclick="confirmStartStream()" class="btn btn-success">
            <i class="fas fa-play me-2"></i> Start Stream
          </button>
        </form>
      {% endif %}
    </div>
  </div>

  <!-- Current Status -->
  <div id="stream-status">
    {% if active_session %}
      <div class="mb-4">
        <div class="alert alert-primary border d-flex align-items-start">
          <i class="fas fa-broadcast-tower fs-4 me-3 text-primary"></i>
          <div class="flex-grow-1">
            <h5 class="mb-2">Currently Streaming</h5>
            <div class="row small text-primary">
              <div class="col-12 col-md-4 mb-1"><strong>Session ID:</strong> {{ active_session.id|truncatechars:8 }}</div>
              <div class="col-12 col-md-4 mb-1"><strong>Started:</strong> {{ active_session.started_at|date:"M d, Y H:i" }}</div>
              <div class="col-12 col-md-4 mb-1">
                <strong>Status:</strong>
                <span class="badge badge-status status-streaming">{{ active_session.get_status_display }}</span>
              </div>
            </div>
          </div>
          <div class="ms-3">
            <a href="{% url 'streams:session_detail' active_session.pk %}" class="btn btn-outline-primary btn-sm">
              <i class="fas fa-eye me-2"></i> View Session
            </a>
          </div>
        </div>
      </div>
    {% else %}
      <div class="mb-4">
        <div class="alert alert-secondary d-flex align-items-start">
          <i class="fas fa-pause-circle fs-4 me-3 text-muted"></i>
          <div>
            <h5 class="mb-1">Stream Not Active</h5>
            <p class="mb-0 small text-muted">This channel is not currently streaming. Click “Start Stream” to begin capturing.</p>
          </div>
        </div>
      </div>
    {% endif %}
  </div>

  <div class="row g-4">
    <!-- Main Column -->
    <div class="col-lg-8 d-flex flex-column gap-4">

      <!-- Channel Information -->
      <div class="card shadow-sm">
        <div class="card-header bg-white">
          <h5 class="card-title mb-0"><i class="fas fa-info-circle me-2 text-primary"></i>Channel Information</h5>
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-6">
              <div class="small text-muted">Channel Name</div>
              <div class="fw-medium">{{ channel.name }}</div>
            </div>
            <div class="col-md-6">
              <div class="small text-muted">Slug</div>
              <div class="fw-medium font-mono">{{ channel.slug }}</div>
            </div>
            <div class="col-12">
              <div class="small text-muted">HLS Source URL</div>
              <div class="fw-medium font-mono break-all p-2 bg-light rounded border">{{ channel.hls_url }}</div>
            </div>
            <div class="col-md-6">
              <div class="small text-muted">Output Directory</div>
              <div class="fw-medium font-mono">{{ channel.output_directory }}</div>
            </div>
            <div class="col-md-6">
              <div class="small text-muted">Created By</div>
              <div class="fw-medium">{{ channel.created_by.username }}</div>
            </div>
            <div class="col-md-6">
              <div class="small text-muted">Created</div>
              <div class="fw-medium">{{ channel.created_at|date:"M d, Y H:i" }}</div>
            </div>
            <div class="col-md-6">
              <div class="small text-muted">Last Updated</div>
              <div class="fw-medium">{{ channel.updated_at|date:"M d, Y H:i" }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- HLS Configuration -->
      <div class="card shadow-sm">
        <div class="card-header bg-white">
          <h5 class="card-title mb-0"><i class="fas fa-cogs me-2 text-purple"></i>HLS Configuration</h5>
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-6">
              <div class="small text-muted">Segment Duration</div>
              <div class="fw-medium">{{ channel.segment_duration }} seconds</div>
            </div>
            <div class="col-md-6">
              <div class="small text-muted">Max Segments</div>
              <div class="fw-medium">{{ channel.max_segments }} segments</div>
            </div>
            <div class="col-md-6">
              <div class="small text-muted">Retry Attempts</div>
              <div class="fw-medium">{{ channel.retry_attempts }} attempts</div>
            </div>
            <div class="col-md-6">
              <div class="small text-muted">Retry Interval</div>
              <div class="fw-medium">{{ channel.retry_interval }} seconds</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Recent Sessions -->
      <div class="card shadow-sm">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
          <h5 class="card-title mb-0"><i class="fas fa-history me-2 text-success"></i>Recent Sessions</h5>
          <a href="{% url 'streams:session_list' %}?channel={{ channel.pk }}" class="small text-primary text-decoration-none">View All Sessions</a>
        </div>
        <div class="card-body">
          {% if recent_sessions %}
            <div class="d-flex flex-column gap-3">
              {% for session in recent_sessions %}
                <div class="border rounded-3 p-3 d-flex justify-content-between align-items-center">
                  <div class="d-flex align-items-center gap-3">
                    <div class="text-muted">
                      {% if session.status == 'streaming' %}
                        <i class="fas fa-play-circle text-success"></i>
                      {% elif session.status == 'stopped' %}
                        <i class="fas fa-stop-circle text-secondary"></i>
                      {% elif session.status == 'error' %}
                        <i class="fas fa-exclamation-circle text-danger"></i>
                      {% else %}
                        <i class="fas fa-circle text-muted"></i>
                      {% endif %}
                    </div>
                    <div>
                      <div class="fw-medium small">Session {{ session.id|truncatechars:8 }}</div>
                      <div class="text-muted small">
                        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 %}
                      </div>
                    </div>
                  </div>
                  <div class="d-flex align-items-center gap-3">
                    <span class="badge badge-status status-{{ session.status }}">{{ session.get_status_display }}</span>
                    <a href="{% url 'streams:session_detail' session.pk %}" class="text-primary text-decoration-none">
                      <i class="fas fa-eye"></i>
                    </a>
                  </div>
                </div>
              {% endfor %}
            </div>
          {% else %}
            <div class="text-center py-4">
              <i class="fas fa-history fs-3 text-muted d-block mb-2"></i>
              <div class="text-muted">No streaming sessions yet</div>
            </div>
          {% endif %}
        </div>
      </div>
    </div>

    <!-- Sidebar -->
    <div class="col-lg-4 d-flex flex-column gap-4">
      <!-- Quick Actions -->
      <div class="card shadow-sm">
        <div class="card-header bg-white">
          <h5 class="card-title mb-0"><i class="fas fa-bolt me-2 text-warning"></i>Quick Actions</h5>
        </div>
        <div class="card-body d-grid gap-2">
          <a href="{% url 'streams:channel_edit' channel.pk %}" class="btn btn-outline-secondary">
            <i class="fas fa-edit me-2"></i> Edit Channel
          </a>
          <button class="btn btn-primary">
            <i class="fas fa-download me-2"></i> Download Segments
          </button>
          <button class="btn btn-purple text-white" style="background:#6f42c1;border-color:#6f42c1;">
            <i class="fas fa-chart-line me-2"></i> View Analytics
          </button>
        </div>
      </div>

      <!-- Configurations -->
      <div class="card shadow-sm">
        <div class="card-header bg-white">
          <h5 class="card-title mb-0"><i class="fas fa-sliders-h me-2 text-indigo"></i>Configurations</h5>
        </div>
        <div class="card-body">
          <div class="mb-3">
            <h6 class="mb-2 small text-muted">Video Configurations</h6>
            {% if video_configs %}
              <div class="d-flex flex-column gap-1 small">
                {% for config in video_configs %}
                  <div class="text-muted">{{ config.name }} ({{ config.resolution }})</div>
                {% endfor %}
              </div>
            {% else %}
              <div class="small text-muted">No video configurations</div>
            {% endif %}
          </div>
          <div>
            <h6 class="mb-2 small text-muted">Audio Configurations</h6>
            {% if audio_configs %}
              <div class="d-flex flex-column gap-1 small">
                {% for config in audio_configs %}
                  <div class="text-muted">{{ config.name }} ({{ config.bitrate }})</div>
                {% endfor %}
              </div>
            {% else %}
              <div class="small text-muted">No audio configurations</div>
            {% endif %}
          </div>
        </div>
      </div>

      <!-- Statistics -->
      <div class="card shadow-sm">
        <div class="card-header bg-white">
          <h5 class="card-title mb-0"><i class="fas fa-chart-bar me-2 text-success"></i>Statistics</h5>
        </div>
        <div class="card-body">
          <div class="d-flex justify-content-between small mb-2">
            <span class="text-muted">Total Sessions</span>
            <span class="fw-medium">{{ recent_sessions|length }}</span>
          </div>
          <div class="d-flex justify-content-between small mb-2">
            <span class="text-muted">Active Sessions</span>
            <span class="fw-medium">{% if active_session %}1{% else %}0{% endif %}</span>
          </div>
          <div class="d-flex justify-content-between small">
            <span class="text-muted">Channel Status</span>
            <span class="fw-medium">
              {% if channel.is_active %}
                <span class="text-success">Active</span>
              {% else %}
                <span class="text-danger">Inactive</span>
              {% endif %}
            </span>
          </div>
        </div>
      </div>

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