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

{% block title %}{{ channel.name }} - Live Stream Player - Stream Processor{% endblock %}

{% block extra_css %}
<link href="https://vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet">
<style>
  .video-js { width: 100%; height: 400px; }
</style>
{% endblock %}

{% block extra_head %}
<script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-contrib-hls@5.15.0/dist/videojs-contrib-hls.min.js"></script>
{% endblock %}

{% block content %}
<div class="container py-4">
  <!-- Header -->
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h1 class="h3 fw-bold mb-1">{{ channel.name }}</h1>
      <p class="text-muted mb-0">Live Stream Player</p>
    </div>
    <div class="d-flex gap-2">
      <a href="{% url 'streams:channel_detail' channel.id %}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left me-2"></i>Back to Channel
      </a>
      <a href="{% url 'streams:ts_browser' channel.id %}" class="btn btn-outline-secondary">
        <i class="fas fa-file-video me-2"></i>TS Files
      </a>
      <a href="{% url 'streams:iframe_gallery' channel.id %}" class="btn btn-outline-secondary">
        <i class="fas fa-images me-2"></i>iFrames
      </a>
      <a href="{% url 'streams:jingle_preview' channel.id %}" class="btn btn-outline-secondary">
        <i class="fas fa-music me-2"></i>Jingles
      </a>
    </div>
  </div>

  <!-- Media Player -->
  <div class="card shadow-sm mb-4">
    <div class="card-body">
      <h2 class="h5 mb-3">
        <i class="fas fa-play-circle me-2 text-primary"></i>Live Stream
      </h2>

      {% if active_session and hls_url %}
        <video
          id="hls-player"
          class="video-js vjs-default-skin"
          controls
          preload="auto"
          data-setup='{"fluid": true, "responsive": true}'>
          <source src="{{ hls_url }}" type="application/x-mpegURL">
          <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a web browser that
            <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>.
          </p>
        </video>

        <div class="d-flex flex-wrap gap-2 mt-3">
          <button onclick="refreshPlayer()" class="btn btn-primary">
            <i class="fas fa-sync-alt me-2"></i>Refresh Stream
          </button>
          <button onclick="toggleFullscreen()" class="btn btn-secondary">
            <i class="fas fa-expand me-2"></i>Fullscreen
          </button>
          <button onclick="downloadPlaylist()" class="btn btn-outline-secondary">
            <i class="fas fa-download me-2"></i>Download Playlist
          </button>
        </div>
      {% else %}
        <div class="text-center py-5">
          <div class="display-6 text-muted mb-3">
            <i class="fas fa-play-circle"></i>
          </div>
          <h3 class="h5 mb-2">No Active Stream</h3>
          <p class="text-muted mb-3">This channel is not currently streaming.</p>
          <a href="{% url 'streams:channel_detail' channel.id %}" class="btn btn-primary">
            <i class="fas fa-play me-2"></i>Start Stream
          </a>
        </div>
      {% endif %}
    </div>
  </div>

  <!-- Stream Information -->
  <div class="card">
    <div class="card-body">
      <h3 class="h6 mb-3">
        <i class="fas fa-info-circle me-2 text-primary"></i>Stream Information
      </h3>

      <div class="row g-3">
        <div class="col-12 col-md-3">
          <label class="form-label small">Status</label><br>
          {% if active_session %}
            <span class="badge rounded-pill bg-success">
              <i class="fas fa-broadcast-tower me-1"></i>Streaming
            </span>
          {% else %}
            <span class="badge rounded-pill bg-secondary">
              <i class="fas fa-stop-circle me-1"></i>Stopped
            </span>
          {% endif %}
        </div>

        {% if active_session %}
        <div class="col-12 col-md-3">
          <label class="form-label small">Started</label>
          <div class="small text-body">{{ active_session.started_at|date:"M d, Y H:i" }}</div>
        </div>
        <div class="col-12 col-md-3">
          <label class="form-label small">Duration</label>
          <div class="small text-body">{{ active_session.duration|default:"--" }}</div>
        </div>
        <div class="col-12 col-md-3">
          <label class="form-label small">Segments</label>
          <div class="small text-body">{{ active_session.segments_processed|default:0 }}</div>
        </div>
        {% endif %}
      </div>

      {% if channel.jingle_templates.count > 0 %}
      <hr class="my-4">
      <h4 class="small fw-semibold mb-2">
        <i class="fas fa-music me-1"></i>Jingle Detection
      </h4>
      <p class="small text-muted mb-0">
        {{ channel.jingle_templates.count }} jingle template{{ channel.jingle_templates.count|pluralize }} configured for ad break detection
      </p>
      {% endif %}
    </div>
  </div>
</div>

<script>
let player;

document.addEventListener('DOMContentLoaded', function() {
  {% if active_session and hls_url %}
  // Initialize Video.js player with HLS support
  player = videojs('hls-player', {
    fluid: true,
    responsive: true,
    html5: {
      hls: {
        enableLowInitialPlaylist: true,
        smoothQualityChange: true,
        overrideNative: true
      }
    }
  });

  // Auto-refresh stream every 30 seconds if playing
  setInterval(function() {
    if (player && !player.paused()) {
      player.load();
    }
  }, 30000);
  {% endif %}
});

function refreshPlayer() {
  if (player) {
    player.load();
    showNotification('Stream refreshed', 'success');
  }
}

function toggleFullscreen() {
  if (player) {
    if (player.isFullscreen()) {
      player.exitFullscreen();
    } else {
      player.requestFullscreen();
    }
  }
}

function downloadPlaylist() {
  {% if hls_url %}
  window.open('{{ hls_url }}', '_blank');
  {% endif %}
}

// Simple Bootstrap alert toast-ish notification
function showNotification(message, type = 'info') {
  const div = document.createElement('div');
  const cls = type === 'success' ? 'alert-success' : (type === 'error' ? 'alert-danger' : 'alert-info');
  div.className = `alert ${cls} position-fixed top-0 end-0 m-3 shadow`;
  div.style.zIndex = 1080;
  div.textContent = message;
  document.body.appendChild(div);
  setTimeout(() => div.remove(), 2500);
}
</script>
{% endblock %}