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

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

{% block extra_css %}
<style>
    .jingle-container {
        @apply bg-white rounded-lg shadow-lg p-6;
    }
    .jingle-grid {
        @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
    }
    .jingle-card {
        @apply border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow;
    }
    .jingle-image {
        @apply w-full h-32 object-cover rounded-lg mb-3;
    }
    .jingle-info {
        @apply space-y-2;
    }
    .comparison-mode {
        @apply bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6;
    }
    .comparison-grid {
        @apply grid grid-cols-1 md:grid-cols-2 gap-6;
    }
    .comparison-item {
        @apply text-center;
    }
    .similarity-score {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }
    .score-high {
        @apply bg-green-100 text-green-800;
    }
    .score-medium {
        @apply bg-yellow-100 text-yellow-800;
    }
    .score-low {
        @apply bg-red-100 text-red-800;
    }
</style>
{% endblock %}

{% block page_title %}
    <div class="flex items-center">
        <i class="fas fa-music mr-3 text-primary-600"></i>
        {{ channel.name }} - Jingle Templates
    </div>
{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Header -->
    <div class="mb-8">
        <div class="bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900">{{ channel.name }}</h1>
                        <p class="mt-1 text-sm text-gray-600">Preview and manage jingle detection templates</p>
                    </div>
                    <div class="flex space-x-3">
                        <a href="{% url 'streams:channel_detail' channel.id %}" 
                           class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                            <i class="fas fa-arrow-left mr-2"></i>
                            Back to Channel
                        </a>
                        <a href="{% url 'streams:hls_player' channel.id %}" 
                           class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                            <i class="fas fa-play mr-2"></i>
                            Live Player
                        </a>
                        <a href="{% url 'streams:iframe_gallery' channel.id %}" 
                           class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                            <i class="fas fa-images mr-2"></i>
                            I-Frames
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Info Panel -->
    <div class="mb-6">
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
            <div class="flex items-center">
                <i class="fas fa-info-circle text-blue-600 mr-3"></i>
                <div>
                    <h3 class="text-sm font-medium text-blue-800">Jingle Template Preview</h3>
                    <p class="text-sm text-blue-700">View and compare jingle detection templates for automated content recognition.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Comparison Mode Alert -->
    {% if request.GET.compare %}
    <div class="comparison-mode">
        <div class="flex items-center">
            <i class="fas fa-search mr-2 text-yellow-600"></i>
            <h3 class="font-medium">Comparison Mode</h3>
        </div>
        <p class="mt-1 text-sm">Comparing iFrame "{{ request.GET.compare }}" with jingle templates.</p>
    </div>
    {% endif %}

    <!-- Jingle Templates -->
    <div class="bg-white shadow rounded-lg p-6">
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-xl font-semibold">
                <i class="fas fa-music mr-2 text-purple-600"></i>Jingle Templates
            </h2>
            <div class="text-sm text-gray-600">
                <i class="fas fa-info-circle mr-1"></i>{{ jingle_templates|length }} template{{ jingle_templates|length|pluralize }} configured
            </div>
        </div>

        {% if jingle_templates %}
            {% if request.GET.compare %}
                <!-- Comparison View -->
                <div class="comparison-grid mb-8">
                    <div class="comparison-item">
                        <h3 class="text-lg font-medium mb-3">Source iFrame</h3>
                        <img src="/streams/media/{{ channel.slug }}/iframes/{{ request.GET.compare }}" 
                             alt="{{ request.GET.compare }}" 
                             class="w-full h-48 object-cover rounded-lg border">
                        <p class="mt-2 text-sm text-gray-600">{{ request.GET.compare }}</p>
                    </div>
                    <div class="comparison-item">
                        <h3 class="text-lg font-medium mb-3">Comparison Results</h3>
                        <div id="comparison-results" class="space-y-3">
                            <!-- Results will be loaded via JavaScript -->
                        </div>
                    </div>
                </div>
            {% endif %}

            <div class="jingle-grid">
                {% for template in jingle_templates %}
                <div class="jingle-card">
                    {% if template.image_exists %}
                        <img src="{{ template.image_path }}" 
                             alt="{{ template.name }}" 
                             class="jingle-image"
                             onclick="viewJingleDetails('{{ template.id }}')">
                    {% else %}
                        <div class="jingle-image bg-gray-200 flex items-center justify-center">
                            <i class="fas fa-image text-gray-400 text-2xl"></i>
                        </div>
                    {% endif %}
                    
                    <div class="jingle-info">
                        <h3 class="font-medium text-gray-900">{{ template.name }}</h3>
                        <p class="text-sm text-gray-600">{{ template.category|title }}</p>
                        
                        <div class="flex justify-between items-center mt-3">
                            <span class="text-xs text-gray-500">
                                Threshold: {{ template.similarity_threshold|default:"0.3" }}
                            </span>
                            <div class="flex space-x-1">
                                <button onclick="editTemplate('{{ template.id }}')" 
                                        class="text-blue-600 hover:text-blue-800" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button onclick="testTemplate('{{ template.id }}')" 
                                        class="text-green-600 hover:text-green-800" title="Test Detection">
                                    <i class="fas fa-play"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="text-center py-12">
                <i class="fas fa-music text-6xl text-gray-400 mb-4"></i>
                <h3 class="text-xl font-medium text-gray-900 mb-2">No Jingle Templates</h3>
                <p class="text-gray-600 mb-6">Add jingle templates to enable ad break detection for this channel.</p>
                <a href="/admin/jingles/jingletemplate/add/" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
                    <i class="fas fa-plus mr-2"></i>Add Jingle Template
                </a>
            </div>
        {% endif %}
    </div>
</div>

<!-- Jingle Details Modal -->
<div id="jingle-modal" class="modal">
    <div class="modal-content">
        <div class="flex justify-between items-center mb-4">
            <h3 id="jingle-title" class="text-lg font-semibold">Jingle Template Details</h3>
            <button onclick="closeJingleModal()" class="text-gray-500 hover:text-gray-700">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        <div id="jingle-details">
            <!-- Details will be loaded via JavaScript -->
        </div>
    </div>
</div>

<script>
function viewJingleDetails(templateId) {
    // Fetch and display jingle template details
    fetch(`/api/jingles/templates/${templateId}/`)
        .then(response => response.json())
        .then(data => {
            const modal = document.getElementById('jingle-modal');
            const title = document.getElementById('jingle-title');
            const details = document.getElementById('jingle-details');
            
            title.textContent = `Jingle: ${data.name}`;
            
            details.innerHTML = `
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <img src="${data.image_path}" alt="${data.name}" class="w-full rounded-lg">
                    </div>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Name</label>
                            <p class="text-gray-900">${data.name}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Category</label>
                            <p class="text-gray-900">${data.category}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Similarity Threshold</label>
                            <p class="text-gray-900">${data.similarity_threshold || '0.3'}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Status</label>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${data.is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
                                ${data.is_active ? 'Active' : 'Inactive'}
                            </span>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Created</label>
                            <p class="text-gray-900">${new Date(data.created_at).toLocaleDateString()}</p>
                        </div>
                    </div>
                </div>
            `;
            
            modal.classList.remove('hidden');
        })
        .catch(error => {
            console.error('Error fetching jingle details:', error);
            alert('Failed to load jingle details');
        });
}

function closeJingleModal() {
    const modal = document.getElementById('jingle-modal');
    modal.classList.add('hidden');
}

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

function testTemplate(templateId) {
    // Trigger a test detection for this template
    fetch(`/api/jingles/templates/${templateId}/test/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Test detection started. Check the logs for results.');
        } else {
            alert('Test failed: ' + data.error);
        }
    })
    .catch(error => {
        console.error('Test error:', error);
        alert('Test failed');
    });
}

function refreshGallery() {
    location.reload();
}

// Load comparison results if in comparison mode
{% if request.GET.compare %}
document.addEventListener('DOMContentLoaded', function() {
    loadComparisonResults('{{ request.GET.compare }}');
});

function loadComparisonResults(imageName) {
    const resultsContainer = document.getElementById('comparison-results');
    resultsContainer.innerHTML = '<div class="text-center"><i class="fas fa-spinner fa-spin"></i> Comparing...</div>';
    
    // Simulate comparison results (in a real implementation, this would call an API)
    setTimeout(() => {
        const templates = {{ jingle_templates|length }};
        let resultsHtml = '';
        
        {% for template in jingle_templates %}
        const similarity = Math.random(); // Simulated similarity score
        const scoreClass = similarity > 0.7 ? 'score-high' : similarity > 0.4 ? 'score-medium' : 'score-low';
        const match = similarity > 0.7 ? 'MATCH' : 'No Match';
        
        resultsHtml += `
            <div class="flex items-center justify-between p-3 border rounded-lg">
                <div class="flex items-center space-x-3">
                    <img src="{{ template.image_path }}" alt="{{ template.name }}" class="w-12 h-12 object-cover rounded">
                    <div>
                        <p class="font-medium">{{ template.name }}</p>
                        <p class="text-sm text-gray-600">{{ template.category }}</p>
                    </div>
                </div>
                <div class="text-right">
                    <span class="similarity-score ${scoreClass}">${(similarity * 100).toFixed(1)}%</span>
                    <p class="text-xs text-gray-600 mt-1">${match}</p>
                </div>
            </div>
        `;
        {% endfor %}
        
        resultsContainer.innerHTML = resultsHtml || '<p class="text-gray-600">No templates to compare</p>';
    }, 1000);
}
{% endif %}

// Close modal when clicking outside
document.getElementById('jingle-modal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeJingleModal();
    }
});
</script>
{% endblock %}