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

{% block title %}{{ channel.name }} - TS File Browser - Stream Processor{% endblock %}

{% block extra_css %}
<style>
  .file-icon {
    width: 42px; height: 42px; border-radius: .5rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(13,110,253,.1); color: #0d6efd;
  }
  .filename {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }
  .truncate {
    max-width: 52ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
</style>
{% 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">TS File Browser</p>
    </div>
    <div class="d-flex gap-2">
      <a href="{% url 'streams:channel_detail' channel.id %}" class="btn btn-secondary">
        <i class="fas fa-arrow-left me-2"></i>Back to Channel
      </a>
      <a href="{% url 'streams:hls_player' channel.id %}" class="btn btn-primary">
        <i class="fas fa-play me-2"></i>Live Player
      </a>
      <a href="{% url 'streams:iframe_gallery' channel.id %}" class="btn btn-outline-primary">
        <i class="fas fa-images me-2"></i>iFrames
      </a>
    </div>
  </div>

  <!-- File Browser -->
  <div class="card">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="h5 mb-0">
          <i class="fas fa-file-video me-2 text-primary"></i>TS Segment Files
        </h2>
        <div class="text-muted small">
          <i class="fas fa-info-circle me-1"></i>{{ ts_files|length }} files found
        </div>
      </div>

      {% if ts_files %}
        <ul class="list-group list-group-flush">
          {% for file in ts_files %}
          <li class="list-group-item">
            <div class="d-flex align-items-center justify-content-between">
              <div class="d-flex align-items-center gap-3">
                <span class="file-icon"><i class="fas fa-file-video"></i></span>
                <div>
                  <div class="filename truncate" title="{{ file.name }}">{{ file.name }}</div>
                  <div class="small text-muted">Size: {{ file.size|filesizeformat }}</div>
                </div>
              </div>
              <div class="d-flex gap-2">
                <button
                  class="btn btn-outline-success btn-sm"
                  onclick="playTSFile('{{ file.name|escapejs }}')">
                  <i class="fas fa-play me-1"></i>Play
                </button>
                <a
                  class="btn btn-outline-primary btn-sm"
                  href="/streams/media/{{ channel.slug|urlencode }}/hls/{{ file.name|urlencode }}"
                  download="{{ file.name }}">
                  <i class="fas fa-download me-1"></i>Download
                </a>
                <button
                  class="btn btn-outline-secondary btn-sm"
                  onclick="copyLink('{{ file.name|escapejs }}')">
                  <i class="fas fa-link me-1"></i>Copy link
                </button>
              </div>
            </div>
          </li>
          {% endfor %}
        </ul>
      {% else %}
        <div class="text-center py-5">
          <i class="fas fa-file-video fa-3x text-secondary mb-3"></i>
          <h3 class="h5">No TS Files Found</h3>
          <p class="text-muted mb-0">Start streaming to generate TS segment files.</p>
        </div>
      {% endif %}
    </div>
  </div>
</div>

<!-- Video Modal -->
<div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title filename" id="videoModalLabel">Playing TS File</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                onclick="stopVideo()"></button>
      </div>
      <div class="modal-body">
        <video id="tsPlayer" class="w-100 bg-dark" height="360" controls preload="metadata">
          <!-- Many browsers can’t play raw .ts; support varies. -->
          <source id="tsSource" src="" type="video/mp2t">
          Your browser may not support playback of raw TS segments.
        </video>
        <div class="small text-muted mt-2">
          <i class="fas fa-info-circle me-1"></i>This is a raw TS segment file from the HLS stream.
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  const channelSlug = "{{ channel.slug|escapejs }}";

  function buildFileUrl(name) {
    return `/streams/media/${encodeURIComponent(channelSlug)}/hls/${encodeURIComponent(name)}`;
  }

  function playTSFile(name) {
    const src = buildFileUrl(name);
    const source = document.getElementById('tsSource');
    const player = document.getElementById('tsPlayer');

    source.src = src;
    player.load();

    // Show modal (Bootstrap 5)
    const modalEl = document.getElementById('videoModal');
    const modal = window.bootstrap ? new bootstrap.Modal(modalEl) : null;
    if (modal) modal.show();

    document.getElementById('videoModalLabel').textContent = `Playing: ${name}`;

    // Try autoplay
    player.play().catch(()=>{ /* Autoplay may be blocked; user can press play */ });
  }

  function stopVideo() {
    const player = document.getElementById('tsPlayer');
    if (player) {
      player.pause();
      player.currentTime = 0;
      document.getElementById('tsSource').src = '';
      player.removeAttribute('src');
      player.load();
    }
  }

  function copyLink(name) {
    const url = buildFileUrl(name);
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(window.location.origin + url).then(showToast, showToast);
    } else {
      // Fallback
      const ta = document.createElement('textarea');
      ta.value = window.location.origin + url;
      document.body.appendChild(ta);
      ta.select();
      try { document.execCommand('copy'); } catch(e) {}
      document.body.removeChild(ta);
      showToast();
    }
  }

  function showToast() {
    // Lightweight toast
    const div = document.createElement('div');
    div.className = 'position-fixed top-0 end-0 m-3 alert alert-success py-2 px-3 shadow';
    div.role = 'alert';
    div.textContent = 'Link copied to clipboard';
    document.body.appendChild(div);
    setTimeout(()=>div.remove(), 2000);
  }

  // Optional: auto-refresh list every 15s only if page is visible
  const AUTO_REFRESH_MS = 15000;
  setInterval(() => {
    if (!document.hidden) {
      // Simple approach; replace with HTMX partial if available
      window.location.reload();
    }
  }, AUTO_REFRESH_MS);

  // Stop video when modal fully hidden (for users closing with backdrop)
  document.getElementById('videoModal')?.addEventListener('hidden.bs.modal', stopVideo);
</script>
{% endblock %}