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

{% block title %}{{ channel.name }} - Jingle Templates - Stream Processor{% endblock %}

{% block extra_css %}
<style>
  .thumb { width: 100%; height: 8rem; object-fit: cover; border-radius: .5rem; }
  .filename-muted { font-size: .875rem; color: #6c757d; }
</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">Jingle Template Preview</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:iframe_gallery' channel.id %}" class="btn btn-warning text-white">
        <i class="fas fa-images me-2"></i>iFrames
      </a>
    </div>
  </div>

  <!-- Comparison Mode Alert -->
  {% if request.GET.compare %}
  <div class="alert alert-warning d-flex align-items-start" role="alert">
    <i class="fas fa-search me-2 mt-1"></i>
    <div>
      <div class="fw-semibold">Comparison Mode</div>
      <div class="small mt-1">Comparing iFrame "<code class="bg-warning-subtle px-1">{{ request.GET.compare }}</code>" with jingle templates.</div>
    </div>
  </div>
  {% endif %}

  <!-- Jingle Templates -->
  <div class="card shadow-sm">
    <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-music me-2 text-primary"></i>Jingle Templates
        </h2>
        <div class="small text-muted">
          <i class="fas fa-info-circle me-1"></i>{{ jingle_templates|length }} template{{ jingle_templates|length|pluralize }} configured
        </div>
      </div>

      {% if jingle_templates %}

        {% if request.GET.compare %}
        <!-- Comparison View -->
        <div class="row g-4 mb-4">
          <div class="col-12 col-md-6">
            <h3 class="h6 fw-semibold mb-2">Source iFrame</h3>
            <img
              src="/streams/media/{{ channel.slug }}/iframes/{{ request.GET.compare }}"
              alt="{{ request.GET.compare }}"
              class="img-fluid rounded border">
            <p class="mt-2 filename-muted">{{ request.GET.compare }}</p>
          </div>
          <div class="col-12 col-md-6">
            <h3 class="h6 fw-semibold mb-2">Comparison Results</h3>
            <div id="comparison-results" class="d-grid gap-2">
              <!-- Filled by JS -->
            </div>
          </div>
        </div>
        {% endif %}

        <!-- Grid -->
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
          {% for template in jingle_templates %}
          <div class="col">
            <div class="card h-100 border">
              {% if template.image_exists %}
              <img src="{{ template.image_path }}" alt="{{ template.name }}" class="thumb"
                   role="button" onclick="viewJingleDetails('{{ template.id }}')">
              {% else %}
              <div class="d-flex align-items-center justify-content-center bg-light border-bottom rounded-top" style="height:8rem;">
                <i class="fas fa-image text-secondary fs-3"></i>
              </div>
              {% endif %}
              <div class="card-body">
                <div class="d-flex justify-content-between align-items-start">
                  <div>
                    <div class="fw-semibold text-body">{{ template.name }}</div>
                    <div class="small text-muted">{{ template.category|title }}</div>
                  </div>
                  <div class="btn-group btn-group-sm">
                    <button class="btn btn-outline-primary" title="Edit" onclick="editTemplate('{{ template.id }}')">
                      <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn btn-outline-success" title="Test Detection" onclick="testTemplate('{{ template.id }}')">
                      <i class="fas fa-play"></i>
                    </button>
                  </div>
                </div>
                <div class="mt-3 small text-muted">
                  Threshold:
                  <span class="text-body fw-semibold">{{ template.similarity_threshold|default:"0.3" }}</span>
                </div>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>

      {% else %}
        <div class="text-center py-5">
          <div class="display-6 text-muted mb-3">
            <i class="fas fa-music"></i>
          </div>
          <h3 class="h5 mb-2">No Jingle Templates</h3>
          <p class="text-muted mb-3">Add jingle templates to enable ad break detection for this channel.</p>
          <a href="/admin/jingles/jingletemplate/add/" class="btn btn-purple btn-primary">
            <i class="fas fa-plus me-2"></i>Add Jingle Template
          </a>
        </div>
      {% endif %}
    </div>
  </div>
</div>

<!-- Jingle Details Modal (Bootstrap 5) -->
<div class="modal fade" id="jingleModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 id="jingle-title" class="modal-title">Jingle Template Details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div id="jingle-details" class="modal-body">
        <!-- Filled by JS -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

<script>
let jingleModalInstance;

// Helper: CSRF token from cookie or form input
function getCSRFToken() {
  const input = document.querySelector('[name=csrfmiddlewaretoken]');
  if (input) return input.value;
  const name = 'csrftoken';
  const cookies = document.cookie ? document.cookie.split('; ') : [];
  for (const c of cookies) {
    const [k, v] = c.split('=');
    if (k === name) return decodeURIComponent(v);
  }
  return null;
}

function viewJingleDetails(templateId) {
  fetch(`/api/jingles/templates/${templateId}/`)
    .then(r => r.json())
    .then(data => {
      const title = document.getElementById('jingle-title');
      const body = document.getElementById('jingle-details');

      title.textContent = `Jingle: ${data.name}`;

      body.innerHTML = `
        <div class="row g-4">
          <div class="col-12 col-md-6">
            <img src="${data.image_path}" alt="${data.name}" class="img-fluid rounded border">
          </div>
          <div class="col-12 col-md-6">
            <dl class="row mb-0">
              <dt class="col-5 text-muted small">Name</dt>
              <dd class="col-7 small fw-semibold">${data.name}</dd>

              <dt class="col-5 text-muted small">Category</dt>
              <dd class="col-7 small">${data.category}</dd>

              <dt class="col-5 text-muted small">Similarity Threshold</dt>
              <dd class="col-7 small">${data.similarity_threshold ?? '0.3'}</dd>

              <dt class="col-5 text-muted small">Status</dt>
              <dd class="col-7 small">
                <span class="badge ${data.is_active ? 'bg-success' : 'bg-danger'}">
                  ${data.is_active ? 'Active' : 'Inactive'}
                </span>
              </dd>

              <dt class="col-5 text-muted small">Created</dt>
              <dd class="col-7 small">${new Date(data.created_at).toLocaleDateString()}</dd>
            </dl>
          </div>
        </div>
      `;

      if (!jingleModalInstance) {
        jingleModalInstance = new bootstrap.Modal(document.getElementById('jingleModal'));
      }
      jingleModalInstance.show();
    })
    .catch(err => {
      console.error('Error fetching jingle details:', err);
      alert('Failed to load jingle details');
    });
}

function editTemplate(templateId) {
  window.location.href = `/admin/jingles/jingletemplate/${templateId}/change/`;
}

function testTemplate(templateId) {
  const headers = { 'Content-Type': 'application/json' };
  const csrf = getCSRFToken();
  if (csrf) headers['X-CSRFToken'] = csrf;

  fetch(`/api/jingles/templates/${templateId}/test/`, {
    method: 'POST',
    headers
  })
  .then(r => r.json())
  .then(data => {
    if (data.success) {
      alert('Test detection started. Check the logs for results.');
    } else {
      alert('Test failed: ' + (data.error || 'Unknown error'));
    }
  })
  .catch(err => {
    console.error('Test error:', err);
    alert('Test failed');
  });
}

{% if request.GET.compare %}
document.addEventListener('DOMContentLoaded', function () {
  loadComparisonResults('{{ request.GET.compare }}');
});

function loadComparisonResults(imageName) {
  const results = document.getElementById('comparison-results');
  results.innerHTML = '<div class="text-center text-muted py-2"><i class="fas fa-spinner fa-spin me-2"></i>Comparing...</div>';

  // Simulated results (replace with API call in real implementation)
  setTimeout(() => {
    let html = '';
    {% for template in jingle_templates %}
      const sim = Math.random(); // simulate similarity
      const pct = (sim * 100).toFixed(1);
      const cls = sim > 0.7 ? 'bg-success' : (sim > 0.4 ? 'bg-warning text-dark' : 'bg-danger');
      const verdict = sim > 0.7 ? 'MATCH' : 'No Match';

      html += `
        <div class="d-flex align-items-center justify-content-between border rounded p-2">
          <div class="d-flex align-items-center gap-2">
            <img src="{{ template.image_path }}" alt="{{ template.name }}" class="rounded" style="width:48px;height:48px;object-fit:cover;">
            <div>
              <div class="fw-semibold small">{{ template.name }}</div>
              <div class="text-muted small">{{ template.category }}</div>
            </div>
          </div>
          <div class="text-end">
            <span class="badge ${cls}">${pct}%</span>
            <div class="small text-muted mt-1">${verdict}</div>
          </div>
        </div>
      `;
    {% endfor %}

    results.innerHTML = html || '<div class="text-muted">No templates to compare</div>';
  }, 800);
}
{% endif %}
</script>
{% endblock %}