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

{% block title %}{{ channel.name }} - iFrame Gallery - Stream Processor{% endblock %}

{% block extra_css %}
<style>
  /* Card-like gallery container */
  .gallery-card { border-radius: .5rem; }
  /* Grid thumbnails */
  .iframe-item { position: relative; cursor: pointer; }
  .iframe-image { width: 100%; height: 96px; object-fit: cover; border-radius: .5rem; border: 1px solid #dee2e6; }
  .iframe-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0); border-radius: .5rem;
    opacity: 0; transition: opacity .2s, background .2s;
  }
  .iframe-item:hover .iframe-overlay { background: rgba(0,0,0,.5); opacity: 1; }
  .iframe-actions { display: flex; gap: .5rem; }
  .action-icon {
    width: 2.25rem; height: 2.25rem; border-radius: 50%;
    background: #fff; display: flex; align-items: center; justify-content: center;
    color: #495057; border: 1px solid #dee2e6;
  }
  .action-icon:hover { background: #e7f1ff; color: #0d6efd; }
  .filename { font-size: .75rem; color: #6c757d; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
</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 text-body">{{ channel.name }}</h1>
      <p class="text-muted mb-0">Extracted iFrame Gallery</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:hls_player' channel.id %}" class="btn btn-primary">
        <i class="fas fa-play me-2"></i>Live Player
      </a>
      <a href="{% url 'streams:ts_browser' channel.id %}" class="btn btn-success">
        <i class="fas fa-file-video me-2"></i>TS Files
      </a>
      <a href="{% url 'streams:jingle_preview' channel.id %}" class="btn btn-warning text-white">
        <i class="fas fa-music me-2"></i>Jingles
      </a>
    </div>
  </div>

  <!-- Gallery -->
  <div class="card shadow-sm gallery-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-images me-2 text-primary"></i>Extracted iFrames
        </h2>
        <div class="d-flex align-items-center gap-3">
          <div class="text-muted small">
            <i class="fas fa-info-circle me-1"></i>{{ iframe_files|length }} frames found
          </div>
          <button onclick="refreshGallery()" class="btn btn-sm btn-primary">
            <i class="fas fa-sync-alt me-1"></i>Refresh
          </button>
        </div>
      </div>

      {% if iframe_files %}
        <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-3">
          {% for iframe in iframe_files %}
          <div class="col">
            <div class="iframe-item" onclick="viewImage('{{ iframe.name }}')">
              <img
                src="/streams/media/{{ channel.slug }}/iframes/{{ iframe.name }}"
                alt="{{ iframe.name }}"
                class="iframe-image"
                loading="lazy">
              <div class="iframe-overlay">
                <div class="iframe-actions">
                  <button class="action-icon" title="View Full Size">
                    <i class="fas fa-search-plus"></i>
                  </button>
                  <button class="action-icon" title="Download" onclick="event.stopPropagation(); downloadImage('{{ iframe.name }}');">
                    <i class="fas fa-download"></i>
                  </button>
                </div>
              </div>
            </div>
            <div class="mt-2 filename" title="{{ iframe.name }}">{{ iframe.name }}</div>
          </div>
          {% endfor %}
        </div>

        {% if iframe_files|length >= 100 %}
        <div class="text-center mt-4">
          <button class="btn btn-outline-primary">
            <i class="fas fa-plus me-2"></i>Load More
          </button>
        </div>
        {% endif %}
      {% else %}
        <div class="text-center py-5">
          <div class="display-6 text-muted mb-3">
            <i class="fas fa-images"></i>
          </div>
          <h3 class="h5 mb-2">No iFrames Found</h3>
          <p class="text-muted mb-3">iFrames will appear here when stream processing extracts keyframes for jingle detection.</p>
          <a href="{% url 'streams:hls_player' channel.id %}" class="btn btn-primary">
            <i class="fas fa-play me-2"></i>Start Streaming
          </a>
        </div>
      {% endif %}
    </div>
  </div>
</div>

<!-- Image Modal (Bootstrap 5) -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 id="image-title" class="modal-title">iFrame Preview</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body text-center">
        <img id="modal-image" src="" alt="" class="img-fluid rounded">
      </div>
      <div class="modal-footer">
        <button onclick="downloadCurrentImage()" class="btn btn-primary">
          <i class="fas fa-download me-2"></i>Download
        </button>
        <button onclick="compareWithJingles()" class="btn btn-secondary">
          <i class="fas fa-search me-2"></i>Compare with Jingles
        </button>
      </div>
    </div>
  </div>
</div>

<script>
let currentImageName = '';
let modalInstance;

function viewImage(imageName) {
  const title = document.getElementById('image-title');
  const modalImage = document.getElementById('modal-image');
  currentImageName = imageName;

  modalImage.src = `/streams/media/{{ channel.slug }}/iframes/${imageName}`;
  modalImage.alt = imageName;
  title.textContent = `iFrame: ${imageName}`;

  if (!modalInstance) {
    modalInstance = new bootstrap.Modal(document.getElementById('imageModal'));
  }
  modalInstance.show();
}

function downloadImage(name) {
  const link = document.createElement('a');
  link.href = `/streams/media/{{ channel.slug }}/iframes/${name}`;
  link.download = name;
  document.body.appendChild(link);
  link.click();
  link.remove();
}

function downloadCurrentImage() {
  if (currentImageName) downloadImage(currentImageName);
}

function compareWithJingles() {
  if (currentImageName) {
    window.location.href = `{% url 'streams:jingle_preview' channel.id %}?compare=${currentImageName}`;
  }
}

function refreshGallery() {
  window.location.reload();
}
</script>
{% endblock %}