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

{% block title %}{{ template.name }} - Jingle Template Details - Stream Processor{% endblock %}

{# Optional local styles to mirror your original palette accents #}
{% block extra_head %}
<style>
  .badge-active   { background:#dcfce7; color:#166534; }  /* green-100 / green-800 */
  .badge-inactive { background:#fee2e2; color:#991b1b; }  /* red-100 / red-800 */
  .chip-purple    { background:#f3e8ff; color:#6b21a8; }  /* purple-100 / purple-800-ish */
  .card-edge { border-radius:.5rem; }
</style>

<script>
  // SweetAlert confirm flows (colors approximate your Tailwind palette)
  function confirmActivateTemplate() {
    Swal.fire({
      title: 'Activate Template?',
      text: 'Are you sure you want to activate this jingle template for detection?',
      icon: 'question',
      showCancelButton: true,
      confirmButtonColor: '#10b981', // teal-500/greenish
      cancelButtonColor: '#6b7280',  // gray-500
      confirmButtonText: '<i class="fas fa-play me-2"></i>Yes, Activate',
      cancelButtonText: '<i class="fas fa-times me-2"></i>Cancel'
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire({
          title: 'Activated!',
          text: 'Template has been activated successfully.',
          icon: 'success',
          timer: 2000,
          showConfirmButton: false
        }).then(() => { location.reload(); });
      }
    });
  }

  function confirmDeactivateTemplate() {
    Swal.fire({
      title: 'Deactivate Template?',
      text: 'Are you sure you want to deactivate this jingle template? It will stop being used for detection.',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#ef4444', // red-500
      cancelButtonColor: '#6b7280',
      confirmButtonText: '<i class="fas fa-pause me-2"></i>Yes, Deactivate',
      cancelButtonText: '<i class="fas fa-times me-2"></i>Cancel'
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire({
          title: 'Deactivated!',
          text: 'Template has been deactivated successfully.',
          icon: 'success',
          timer: 2000,
          showConfirmButton: false
        }).then(() => { location.reload(); });
      }
    });
  }

  function confirmDeleteTemplate() {
    Swal.fire({
      title: 'Delete Template?',
      text: 'Are you sure you want to delete this jingle template? This action cannot be undone!',
      icon: 'error',
      showCancelButton: true,
      confirmButtonColor: '#ef4444',
      cancelButtonColor: '#6b7280',
      confirmButtonText: '<i class="fas fa-trash me-2"></i>Yes, Delete',
      cancelButtonText: '<i class="fas fa-times me-2"></i>Cancel',
      input: 'text',
      inputPlaceholder: 'Type "DELETE" to confirm',
      inputValidator: (value) => {
        if (value !== 'DELETE') return 'You must type "DELETE" to confirm deletion';
      }
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire({
          title: 'Deleting...',
          text: 'Please wait while the template is being deleted.',
          icon: 'info',
          allowOutsideClick: false,
          showConfirmButton: false
        });
        // TODO: submit a form or fire an HTMX/Fetch call to perform deletion
      }
    });
  }
</script>
{% endblock %}

{% block content %}
<div class="container-fluid" style="max-width:1200px;">
  <!-- Header -->
  <div class="d-flex align-items-center justify-content-between my-4">
    <div class="d-flex align-items-start">
      <a href="{% url 'jingles:template_list' %}" class="me-3 text-muted text-decoration-none" title="Back">
        <i class="fas fa-arrow-left fs-5"></i>
      </a>
      <div>
        <h1 class="h3 fw-bold d-flex align-items-center mb-1">
          <i class="fas fa-image me-2" style="color:#7c3aed;"></i>
          {{ template.name }}
          {% if template.is_active %}
            <span class="badge rounded-pill ms-3 badge-active">
              <i class="fas fa-circle me-1"></i> Active
            </span>
          {% else %}
            <span class="badge rounded-pill ms-3 badge-inactive">
              <i class="fas fa-circle me-1"></i> Inactive
            </span>
          {% endif %}
        </h1>
        <p class="text-muted mb-0">
          {% if template.description %}
            {{ template.description }}
          {% else %}
            Jingle template for {{ template.get_category_display|lower }} detection
          {% endif %}
        </p>
      </div>
    </div>

    <div class="d-flex gap-2">
      <a href="{% url 'jingles:template_edit' template.pk %}" class="btn btn-outline-secondary">
        <i class="fas fa-edit me-2"></i>Edit Template
      </a>
      {% if template.is_active %}
        <button class="btn btn-danger" onclick="confirmDeactivateTemplate()">
          <i class="fas fa-pause me-2"></i>Deactivate
        </button>
      {% else %}
        <button class="btn btn-success" onclick="confirmActivateTemplate()">
          <i class="fas fa-play me-2"></i>Activate
        </button>
      {% endif %}
    </div>
  </div>

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

      <!-- Template Information -->
      <div class="card shadow-sm card-edge">
        <div class="card-header bg-white">
          <h6 class="mb-0">
            <i class="fas fa-info-circle me-2 text-primary"></i> Template Information
          </h6>
        </div>
        <div class="card-body">
          <dl class="row gy-3">
            <dt class="col-md-4 small text-muted">Template Name</dt>
            <dd class="col-md-8 small fw-semibold">{{ template.name }}</dd>

            <dt class="col-md-4 small text-muted">Slug</dt>
            <dd class="col-md-8 small"><code>{{ template.slug }}</code></dd>

            <dt class="col-md-4 small text-muted">Category</dt>
            <dd class="col-md-8 small">
              <span class="badge rounded-pill chip-purple">{{ template.get_category_display }}</span>
            </dd>

            <dt class="col-md-4 small text-muted">Similarity Threshold</dt>
            <dd class="col-md-8 small fw-semibold">{{ template.similarity_threshold|floatformat:3 }}</dd>

            <dt class="col-md-4 small text-muted">Created By</dt>
            <dd class="col-md-8 small">{{ template.created_by.username }}</dd>

            <dt class="col-md-4 small text-muted">Created</dt>
            <dd class="col-md-8 small">{{ template.created_at|date:"M d, Y H:i" }}</dd>

            {% if template.description %}
              <dt class="col-12 small text-muted">Description</dt>
              <dd class="col-12 small">{{ template.description }}</dd>
            {% endif %}
          </dl>
        </div>
      </div>

      <!-- Reference Image -->
      <div class="card shadow-sm card-edge">
        <div class="card-header bg-white">
          <h6 class="mb-0">
            <i class="fas fa-image me-2" style="color:#16a34a;"></i> Reference Image
          </h6>
        </div>
        <div class="card-body">
          {% if template.image_path %}
            <div class="text-center">
              <img src="{{ MEDIA_URL }}{{ template.image_path }}"
                   alt="{{ template.name }}"
                   class="img-fluid rounded border"
                   style="max-height:400px; object-fit:contain;">
              <p class="text-muted small mt-2">{{ template.image_path }}</p>
            </div>
          {% else %}
            <div class="text-center py-4">
              <i class="fas fa-image fs-1 text-muted mb-2"></i>
              <p class="text-muted mb-0">No reference image uploaded</p>
            </div>
          {% endif %}
        </div>
      </div>

      <!-- Recent Detections -->
      <div class="card shadow-sm card-edge">
        <div class="card-header bg-white d-flex align-items-center justify-content-between">
          <h6 class="mb-0">
            <i class="fas fa-search me-2" style="color:#ca8a04;"></i> Recent Detections
          </h6>
          <a href="{% url 'jingles:detection_list' %}?template={{ template.pk }}"
             class="small text-primary text-decoration-none">View All Detections</a>
        </div>
        <div class="card-body">
          {% if recent_detections %}
            <div class="d-flex flex-column gap-3">
              {% for detection in recent_detections %}
                <div class="d-flex align-items-center justify-content-between border rounded p-3">
                  <div class="d-flex align-items-center gap-3">
                    <i class="fas fa-bullseye" style="color:#16a34a;"></i>
                    <div>
                      <div class="small fw-semibold">Detection {{ detection.id|truncatechars:8 }}</div>
                      <div class="text-muted small">
                        {{ detection.detection_time|date:"M d, Y H:i:s" }}
                        {% if detection.session %} • Channel: {{ detection.session.channel.name }}{% endif %}
                      </div>
                    </div>
                  </div>
                  <div class="d-flex align-items-center gap-3">
                    <span class="small text-muted">Confidence: {{ detection.confidence|floatformat:3 }}</span>
                    <a href="{% url 'jingles:detection_detail' detection.pk %}"
                       class="text-primary text-decoration-none" title="View">
                      <i class="fas fa-eye"></i>
                    </a>
                  </div>
                </div>
              {% endfor %}
            </div>
          {% else %}
            <div class="text-center py-4">
              <i class="fas fa-search fs-3 text-muted mb-2"></i>
              <p class="text-muted mb-0">No detections found for this template</p>
            </div>
          {% endif %}
        </div>
      </div>
    </div>

    <!-- Sidebar column -->
    <div class="col-lg-4 d-flex flex-column gap-4">

      <!-- Quick Actions -->
      <div class="card shadow-sm card-edge">
        <div class="card-header bg-white">
          <h6 class="mb-0">
            <i class="fas fa-bolt me-2" style="color:#ca8a04;"></i> Quick Actions
          </h6>
        </div>
        <div class="card-body">
          <div class="d-grid gap-2">
            <a href="{% url 'jingles:template_edit' template.pk %}" class="btn btn-outline-secondary">
              <i class="fas fa-edit me-2"></i>Edit Template
            </a>
            <button class="btn btn-primary">
              <i class="fas fa-download me-2"></i>Download Image
            </button>
            <button class="btn" style="background:#7c3aed; color:#fff;">
              <i class="fas fa-vial me-2"></i>Test Detection
            </button>
            <button class="btn btn-danger" onclick="confirmDeleteTemplate()">
              <i class="fas fa-trash me-2"></i>Delete Template
            </button>
          </div>
        </div>
      </div>

      <!-- Detection Statistics -->
      <div class="card shadow-sm card-edge">
        <div class="card-header bg-white">
          <h6 class="mb-0">
            <i class="fas fa-chart-bar me-2" style="color:#16a34a;"></i> Detection Statistics
          </h6>
        </div>
        <div class="card-body">
          <dl class="row gy-2">
            <dt class="col-7 small text-muted">Total Detections</dt>
            <dd class="col-5 small fw-semibold text-end">{{ recent_detections|length }}</dd>

            <dt class="col-7 small text-muted">This Week</dt>
            <dd class="col-5 small text-end">-</dd>

            <dt class="col-7 small text-muted">Average Confidence</dt>
            <dd class="col-5 small text-end">-</dd>

            <dt class="col-7 small text-muted">Template Status</dt>
            <dd class="col-5 small text-end">
              {% if template.is_active %}
                <span class="text-success fw-semibold">Active</span>
              {% else %}
                <span class="text-danger fw-semibold">Inactive</span>
              {% endif %}
            </dd>
          </dl>
        </div>
      </div>

      <!-- Detection Settings -->
      <div class="card shadow-sm card-edge">
        <div class="card-header bg-white">
          <h6 class="mb-0">
            <i class="fas fa-cogs me-2" style="color:#4f46e5;"></i> Detection Settings
          </h6>
        </div>
        <div class="card-body">
          <dl class="row gy-3">
            <dt class="col-7 small text-muted">Similarity Threshold</dt>
            <dd class="col-5 small fw-semibold text-end">{{ template.similarity_threshold|floatformat:3 }}</dd>
            <dd class="col-12 text-muted small">
              {% if template.similarity_threshold < 0.15 %}
                Very sensitive (may have false positives)
              {% elif template.similarity_threshold < 0.25 %}
                Balanced sensitivity (recommended)
              {% elif template.similarity_threshold < 0.50 %}
                Less sensitive (fewer false positives)
              {% else %}
                Very strict (may miss detections)
              {% endif %}
            </dd>

            <dt class="col-7 small text-muted">Category</dt>
            <dd class="col-5 small text-end">{{ template.get_category_display }}</dd>

            <dt class="col-7 small text-muted">Image Path</dt>
            <dd class="col-5 small text-end"><code class="text-wrap">{{ template.image_path|default:"Not set" }}</code></dd>
          </dl>
        </div>
      </div>

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