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

{% block title %}
  {% if object %}Edit Jingle Template{% else %}Create Jingle Template{% endif %} - Stream Processor
{% endblock %}

{% block content %}
<div class="container-fluid" style="max-width: 900px;">
  <!-- Header -->
  <div class="d-flex align-items-start justify-content-between my-4">
    <div>
      <h1 class="h3 fw-bold mb-1">
        {% if object %}
          <i class="fas fa-edit me-2 text-primary"></i>Edit Jingle Template
        {% else %}
          <i class="fas fa-plus me-2 text-success"></i>Create Jingle Template
        {% endif %}
      </h1>
      <p class="text-muted mb-0">
        {% if object %}
          Update the jingle template configuration and reference image.
        {% else %}
          Upload a reference image and configure detection settings for a new jingle template.
        {% endif %}
      </p>
    </div>
    <div>
      <a href="{% url 'jingles:template_list' %}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left me-2"></i>Back to Templates
      </a>
    </div>
  </div>

  <form id="templateForm" method="post" enctype="multipart/form-data">
    {% csrf_token %}

    <!-- Basic Information -->
    <div class="card shadow-sm mb-4">
      <div class="card-header bg-white">
        <h6 class="mb-0">
          <i class="fas fa-info-circle me-2 text-primary"></i>Basic Information
        </h6>
      </div>
      <div class="card-body">
        <!-- Name -->
        <div class="mb-3">
          <label for="{{ form.name.id_for_label }}" class="form-label">
            Template Name <span class="text-danger">*</span>
          </label>
          {{ form.name }}
          {% if form.name.errors %}
            <div class="text-danger small mt-1">{{ form.name.errors.0 }}</div>
          {% endif %}
          {% if form.name.help_text %}
            <div class="form-text">{{ form.name.help_text }}</div>
          {% endif %}
          <div class="small text-primary mt-1">
            <i class="fas fa-wand-magic-sparkles me-1"></i>
            URL slug will be automatically generated from the template name
          </div>
        </div>

        <!-- Description -->
        <div class="mb-0">
          <label for="{{ form.description.id_for_label }}" class="form-label">Description</label>
          {{ form.description }}
          {% if form.description.errors %}
            <div class="text-danger small mt-1">{{ form.description.errors.0 }}</div>
          {% endif %}
          {% if form.description.help_text %}
            <div class="form-text">{{ form.description.help_text }}</div>
          {% endif %}
        </div>
      </div>
    </div>

    <!-- Image Upload -->
    <div class="card shadow-sm mb-4">
      <div class="card-header bg-white">
        <h6 class="mb-0">
          <i class="fas fa-image me-2 text-success"></i>Reference Image
        </h6>
      </div>
      <div class="card-body">
        {% if object and object.image_path %}
          <div class="alert alert-primary d-flex align-items-center" role="alert">
            <i class="fas fa-info-circle me-2"></i>
            <div class="small">Current image: {{ object.image_path|default:"No image uploaded" }}</div>
          </div>
        {% endif %}

        <div class="mb-3">
          <label for="{{ form.image_file.id_for_label }}" class="form-label">
            {% if object %}Upload New Image{% else %}Upload Image{% endif %}
            {% if not object %}<span class="text-danger">*</span>{% endif %}
          </label>
          {{ form.image_file }}
          {% if form.image_file.errors %}
            <div class="text-danger small mt-1">{{ form.image_file.errors.0 }}</div>
          {% endif %}
          {% if form.image_file.help_text %}
            <div class="form-text">{{ form.image_file.help_text }}</div>
          {% endif %}
        </div>

        <!-- Image Upload Guidelines -->
        <div class="p-3 border rounded bg-light">
          <h6 class="small fw-semibold mb-2">Image Guidelines:</h6>
          <ul class="small text-muted mb-0">
            <li>Use clear, high-quality images for better detection accuracy</li>
            <li>Supported formats: JPG, PNG, GIF, WebP</li>
            <li>Recommended size: 1920x1080 or higher resolution</li>
            <li>Avoid blurry or low-contrast images</li>
          </ul>
        </div>

        <!-- Preview will be injected here -->
      </div>
    </div>

    <!-- Detection Configuration -->
    <div class="card shadow-sm mb-4">
      <div class="card-header bg-white">
        <h6 class="mb-0">
          <i class="fas fa-cogs me-2" style="color:#7c3aed;"></i>Detection Configuration
        </h6>
      </div>
      <div class="card-body">
        <div class="row g-3">
          <!-- Channel -->
          <div class="col-12">
            <label for="{{ form.channel.id_for_label }}" class="form-label">
              Channel <span class="text-danger">*</span>
            </label>
            {{ form.channel }}
            {% if form.channel.errors %}
              <div class="text-danger small mt-1">{{ form.channel.errors.0 }}</div>
            {% endif %}
            {% if form.channel.help_text %}
              <div class="form-text">{{ form.channel.help_text }}</div>
            {% endif %}
          </div>
          
          <!-- Category -->
          <div class="col-12 col-md-6">
            <label for="{{ form.category.id_for_label }}" class="form-label">
              Category <span class="text-danger">*</span>
            </label>
            {{ form.category }}
            {% if form.category.errors %}
              <div class="text-danger small mt-1">{{ form.category.errors.0 }}</div>
            {% endif %}
            {% if form.category.help_text %}
              <div class="form-text">{{ form.category.help_text }}</div>
            {% endif %}
          </div>

          <!-- Similarity Threshold -->
          <div class="col-12 col-md-6">
            <label for="{{ form.similarity_threshold.id_for_label }}" class="form-label">
              Similarity Threshold <span class="text-danger">*</span>
            </label>
            {{ form.similarity_threshold }}
            {% if form.similarity_threshold.errors %}
              <div class="text-danger small mt-1">{{ form.similarity_threshold.errors.0 }}</div>
            {% endif %}
            {% if form.similarity_threshold.help_text %}
              <div class="form-text">{{ form.similarity_threshold.help_text }}</div>
            {% endif %}
          </div>
        </div>

        <!-- Threshold Guidelines -->
        <div class="alert alert-warning mt-3 mb-0" role="alert">
          <h6 class="small fw-semibold mb-2 text-warning">Threshold Guidelines:</h6>
          <ul class="small text-warning mb-0">
            <li><strong>0.05–0.15:</strong> Very sensitive (may have false positives)</li>
            <li><strong>0.15–0.25:</strong> Balanced sensitivity (recommended)</li>
            <li><strong>0.25–0.50:</strong> Less sensitive (fewer false positives)</li>
            <li><strong>0.50+:</strong> Very strict (may miss detections)</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- Status -->
    <div class="card shadow-sm mb-4">
      <div class="card-header bg-white">
        <h6 class="mb-0">
          <i class="fas fa-toggle-on me-2 text-success"></i>Status
        </h6>
      </div>
      <div class="card-body">
        <div class="form-check">
          {{ form.is_active }}
          <label for="{{ form.is_active.id_for_label }}" class="form-check-label">
            Active Template
          </label>
        </div>
        {% if form.is_active.errors %}
          <div class="text-danger small mt-1">{{ form.is_active.errors.0 }}</div>
        {% endif %}
        <div class="form-text">Enable this template for jingle detection</div>
      </div>
    </div>

    <!-- Actions -->
    <div class="d-flex align-items-center justify-content-end gap-2 pt-3 border-top">
      <a href="{% url 'jingles:template_list' %}" class="btn btn-outline-secondary">
        <i class="fas fa-times me-2"></i>Cancel
      </a>
      <button type="submit" class="btn btn-primary">
        <i class="fas fa-save me-2"></i>{% if object %}Update Template{% else %}Create Template{% endif %}
      </button>
    </div>
  </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  // 1) Make raw Django fields look Bootstrap-y without widget_tweaks
  const formEl = document.getElementById('templateForm');
  if (formEl) {
    // text-like inputs (exclude checkbox/radio)
    formEl.querySelectorAll('input:not([type=checkbox]):not([type=radio]):not([type=hidden])')
      .forEach(el => el.classList.add('form-control'));
    // selects & textareas
    formEl.querySelectorAll('select').forEach(el => el.classList.add('form-select'));
    formEl.querySelectorAll('textarea').forEach(el => el.classList.add('form-control'));
    // file inputs
    formEl.querySelectorAll('input[type=file]').forEach(el => el.classList.add('form-control'));
    // checkboxes
    formEl.querySelectorAll('input[type=checkbox]').forEach(el => {
      el.classList.add('form-check-input');
      // If checkbox is wrapped differently, try to move the label after it for correct spacing (best effort)
      const lbl = formEl.querySelector(`label[for="${el.id}"]`);
      if (lbl && !lbl.classList.contains('form-check-label')) lbl.classList.add('form-check-label');
    });
  }

  // 2) Image file preview
  const imageInputId = '{{ form.image_file.id_for_label }}';
  const imageField = document.getElementById(imageInputId);
  if (imageField) {
    imageField.addEventListener('change', function (e) {
      const file = e.target.files && e.target.files[0];
      if (!file) return;

      // Remove existing preview if present
      const existing = document.getElementById('image-preview');
      if (existing) existing.remove();

      const reader = new FileReader();
      reader.onload = function (evt) {
        const wrap = document.createElement('div');
        wrap.id = 'image-preview';
        wrap.className = 'mt-3 p-3 border rounded bg-light';

        wrap.innerHTML = `
          <h6 class="small fw-semibold mb-2">Preview:</h6>
          <img src="${evt.target.result}" alt="Preview" class="img-fluid rounded border" style="max-height: 200px; object-fit: contain;">
          <div class="small text-muted mt-2">
            File: ${file.name} (${(file.size/1024/1024).toFixed(2)} MB)
          </div>
        `;

        imageField.closest('.card-body').appendChild(wrap);
      };
      reader.readAsDataURL(file);
    });
  }
});
</script>
{% endblock %}