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

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

{% block page_title %}
    <div class="flex items-center">
        <i class="fas fa-images mr-3 text-primary-600"></i>
        I-Frame Gallery - {{ channel.name }}
    </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">I-Frame Gallery</h1>
                        <p class="mt-1 text-sm text-gray-600">Extracted frames from {{ channel.name }} stream segments</p>
                    </div>
                    <div class="flex space-x-3">
                        <a href="{% url 'streams:channel_detail' pk=channel.pk %}" 
                           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=channel.pk %}" 
                           class="inline-flex items-center px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-primary-600 hover:bg-primary-700">
                            <i class="fas fa-play mr-2"></i>
                            HLS Player
                        </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">I-Frame Extraction</h3>
                    <p class="text-sm text-blue-700">These frames are automatically extracted from stream segments for jingle detection and visual monitoring.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-white shadow rounded-lg p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-images text-purple-600"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Total I-Frames</p>
                    <p class="text-2xl font-bold text-gray-900">{{ total_iframes }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white shadow rounded-lg p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-tv text-green-600"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Channel</p>
                    <p class="text-lg font-bold text-gray-900">{{ channel.name }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white shadow rounded-lg p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-folder text-blue-600"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Storage Path</p>
                    <p class="text-xs text-gray-900 truncate">{{ iframes_path }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- I-Frame Gallery -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <div class="flex justify-between items-center">
                <h3 class="text-lg font-medium text-gray-900">Extracted I-Frames</h3>
                <div class="flex items-center text-sm text-gray-500">
                    <i class="fas fa-clock mr-1"></i>
                    Sorted by newest first
                </div>
            </div>
        </div>
        
        {% if iframe_files %}
            <div class="p-6">
                <!-- Image Grid -->
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-6">
                    {% for iframe in iframe_files %}
                        <div class="group relative bg-gray-100 rounded-lg overflow-hidden hover:shadow-lg transition-shadow duration-200">
                            <div class="aspect-w-16 aspect-h-9">
                                <img src="{% url 'streams:serve_media' channel_slug=channel.slug file_type='iframes' filename=iframe.filename %}" 
                                     alt="I-Frame {{ iframe.filename }}"
                                     class="w-full h-32 object-cover cursor-pointer"
                                     data-image-url="{% url 'streams:serve_media' channel_slug=channel.slug file_type='iframes' filename=iframe.filename %}"
                                     data-filename="{{ iframe.filename }}"
                                     onclick="openImageModal(this.dataset.imageUrl, this.dataset.filename)">
                            </div>
                            <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-opacity duration-200 flex items-center justify-center">
                                <i class="fas fa-search-plus text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200"></i>
                            </div>
                            <div class="p-2">
                                <p class="text-xs text-gray-600 truncate">{{ iframe.filename }}</p>
                                <p class="text-xs text-gray-500">{{ iframe.size|filesizeformat }}</p>
                            </div>
                        </div>
                    {% endfor %}
                </div>
                
                <!-- Pagination -->
                {% if is_paginated %}
                    <div class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6">
                        <div class="flex flex-1 justify-between sm:hidden">
                            {% if page_obj.has_previous %}
                                <a href="?page={{ page_obj.previous_page_number }}" class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Previous</a>
                            {% endif %}
                            {% if page_obj.has_next %}
                                <a href="?page={{ page_obj.next_page_number }}" class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Next</a>
                            {% endif %}
                        </div>
                        <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
                            <div>
                                <p class="text-sm text-gray-700">
                                    Showing
                                    <span class="font-medium">{{ page_obj.start_index }}</span>
                                    to
                                    <span class="font-medium">{{ page_obj.end_index }}</span>
                                    of
                                    <span class="font-medium">{{ paginator.count }}</span>
                                    results
                                </p>
                            </div>
                            <div>
                                <nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
                                    {% if page_obj.has_previous %}
                                        <a href="?page={{ page_obj.previous_page_number }}" class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">
                                            <span class="sr-only">Previous</span>
                                            <i class="fas fa-chevron-left h-5 w-5" aria-hidden="true"></i>
                                        </a>
                                    {% endif %}
                                    
                                    {% for num in page_obj.paginator.page_range %}
                                        {% if page_obj.number == num %}
                                            <span class="relative z-10 inline-flex items-center bg-primary-600 px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600">{{ num }}</span>
                                        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                            <a href="?page={{ num }}" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">{{ num }}</a>
                                        {% endif %}
                                    {% endfor %}
                                    
                                    {% if page_obj.has_next %}
                                        <a href="?page={{ page_obj.next_page_number }}" class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">
                                            <span class="sr-only">Next</span>
                                            <i class="fas fa-chevron-right h-5 w-5" aria-hidden="true"></i>
                                        </a>
                                    {% endif %}
                                </nav>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
        {% else %}
            <div class="p-6 text-center">
                <div class="mx-auto h-12 w-12 text-gray-400">
                    <i class="fas fa-images text-4xl"></i>
                </div>
                <h3 class="mt-2 text-sm font-medium text-gray-900">No I-Frames found</h3>
                <p class="mt-1 text-sm text-gray-500">No extracted frames are available for this channel yet.</p>
                <div class="mt-6">
                    <a href="{% url 'streams:channel_detail' pk=channel.pk %}" 
                       class="inline-flex items-center px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-primary-600 hover:bg-primary-700">
                        <i class="fas fa-arrow-left mr-2"></i>
                        Back to Channel
                    </a>
                </div>
            </div>
        {% endif %}
    </div>
</div>

<!-- Image Modal -->
<div id="imageModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg p-6 max-w-4xl w-full mx-4 max-h-screen overflow-auto">
        <div class="flex justify-between items-center mb-4">
            <h3 id="modalTitle" class="text-lg font-medium text-gray-900">I-Frame Preview</h3>
            <button onclick="closeImageModal()" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        <div class="text-center">
            <img id="modalImage" src="" alt="" class="max-w-full h-auto rounded-lg">
        </div>
        <div class="mt-4 flex justify-center space-x-3">
            <button onclick="closeImageModal()" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
                Close
            </button>
        </div>
    </div>
</div>

<script>
function openImageModal(imageSrc, filename) {
    document.getElementById('modalImage').src = imageSrc;
    document.getElementById('modalTitle').textContent = 'I-Frame: ' + filename;
    document.getElementById('imageModal').classList.remove('hidden');
}

function closeImageModal() {
    document.getElementById('imageModal').classList.add('hidden');
    document.getElementById('modalImage').src = '';
}

// Close modal when clicking outside
document.getElementById('imageModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeImageModal();
    }
});

// Close modal with Escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeImageModal();
    }
});
</script>
{% endblock %}