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

{% block title %}Ad Breaks - Stream Processor{% endblock %}

{% block page_title %}
<i class="fas fa-ad text-purple-600 mr-2"></i>
Ad Breaks
{% endblock %}

{% block extra_css %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50 py-6">
    <div class="max-w-7xl mx-auto px-4">
        <!-- Header -->
        <div class="bg-white shadow rounded-lg p-6 mb-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">Ad Breaks</h1>
                    <p class="mt-1 text-gray-600">Monitor and analyze advertisement breaks detected in streams</p>
                </div>
                <div class="flex space-x-2">
                    <a href="{% url 'jingles:template_list' %}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        <i class="fas fa-image mr-2"></i>
                        Templates
                    </a>
                    <a href="{% url 'jingles:detection_list' %}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        <i class="fas fa-search mr-2"></i>
                        Detections
                    </a>
                </div>
            </div>
        </div>

        <!-- Info Panel -->
        <div class="bg-blue-50 border border-blue-200 rounded p-4 mb-6">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-info-circle text-blue-400"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-blue-800">About Ad Breaks</h3>
                    <div class="mt-2 text-sm text-blue-700">
                        <p>Ad breaks are automatically detected periods of commercial content within streams. They are identified by jingle detection pairs (start/end markers) and can be sent to external APIs for analysis and reporting.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Statistics Cards -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            <div class="bg-white border rounded p-4">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-play-circle text-blue-600"></i>
                    </div>
                    <div class="ml-4">
                        <dt class="text-sm text-gray-500">Total Ad Breaks</dt>
                        <dd class="text-lg font-medium">{{ ad_breaks|length|default:0 }}</dd>
                    </div>
                </div>
            </div>

            <div class="bg-white border rounded p-4">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-clock text-green-600"></i>
                    </div>
                    <div class="ml-4">
                        <dt class="text-sm text-gray-500">Completed</dt>
                        <dd class="text-lg font-medium">
                            {% for break in ad_breaks %}{% if break.end_time %}{{ forloop.counter0|add:1 }}{% endif %}{% empty %}0{% endfor %}
                        </dd>
                    </div>
                </div>
            </div>

            <div class="bg-white border rounded p-4">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-hourglass-half text-yellow-600"></i>
                    </div>
                    <div class="ml-4">
                        <dt class="text-sm text-gray-500">In Progress</dt>
                        <dd class="text-lg font-medium">
                            {% for break in ad_breaks %}{% if not break.end_time %}{{ forloop.counter0|add:1 }}{% endif %}{% empty %}0{% endfor %}
                        </dd>
                    </div>
                </div>
            </div>

            <div class="bg-white border rounded p-4">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-external-link-alt text-purple-600"></i>
                    </div>
                    <div class="ml-4">
                        <dt class="text-sm text-gray-500">Sent to API</dt>
                        <dd class="text-lg font-medium">
                            {% for break in ad_breaks %}{% if break.is_sent_to_api %}{{ forloop.counter0|add:1 }}{% endif %}{% empty %}0{% endfor %}
                        </dd>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filters -->
        <div class="bg-white border rounded mb-6">
            <div class="px-4 py-3 border-b border-gray-200">
                <h3 class="text-lg font-medium">Filters</h3>
            </div>
            <div class="p-4">
                <form method="get" class="space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label for="session" class="block text-sm font-medium text-gray-700">Session</label>
                            <select name="session" id="session" class="mt-1 block w-full border-gray-300 rounded">
                                <option value="">All Sessions</option>
                                {% for break in ad_breaks %}
                                    <option value="{{ break.session.id }}" {% if request.GET.session == break.session.id|stringformat:"s" %}selected{% endif %}>
                                        {{ break.session.channel.name }} - {{ break.session.start_time|date:"M d, Y H:i" }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div>
                            <label for="status" class="block text-sm font-medium text-gray-700">Status</label>
                            <select name="status" id="status" class="mt-1 block w-full border-gray-300 rounded">
                                <option value="">All Statuses</option>
                                <option value="completed" {% if request.GET.status == "completed" %}selected{% endif %}>Completed</option>
                                <option value="in_progress" {% if request.GET.status == "in_progress" %}selected{% endif %}>In Progress</option>
                            </select>
                        </div>
                        <div>
                            <label for="region" class="block text-sm font-medium text-gray-700">Region</label>
                            <select name="region" id="region" class="mt-1 block w-full border-gray-300 rounded">
                                <option value="">All Regions</option>
                                <option value="Netherlands" {% if request.GET.region == "Netherlands" %}selected{% endif %}>Netherlands</option>
                                <option value="France" {% if request.GET.region == "France" %}selected{% endif %}>France</option>
                                <option value="Global" {% if request.GET.region == "Global" %}selected{% endif %}>Global</option>
                            </select>
                        </div>
                    </div>
                    <div class="flex justify-end space-x-2">
                        <a href="{% url 'jingles:adbreak_list' %}" class="px-3 py-2 border border-gray-300 rounded text-sm bg-white hover:bg-gray-50">
                            Clear Filters
                        </a>
                        <button type="submit" class="px-3 py-2 border border-transparent rounded text-sm text-white bg-blue-600 hover:bg-blue-700">
                            Apply Filters
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Ad Breaks List -->
        <div class="bg-white border rounded overflow-hidden">
            <div class="px-4 py-3 border-b border-gray-200">
                <h3 class="text-lg font-medium">Ad Breaks</h3>
            </div>
            
            {% if ad_breaks %}
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Session</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Channel</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Start Time</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Region</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">API Status</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            {% for ad_break in ad_breaks %}
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-medium text-gray-900">
                                            <a href="{% url 'streams:session_detail' ad_break.session.id %}" class="text-blue-600 hover:text-blue-900">
                                                {{ ad_break.session.id|truncatechars:8 }}
                                            </a>
                                        </div>
                                        <div class="text-sm text-gray-500">{{ ad_break.session.start_time|date:"M d, H:i" }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-medium text-gray-900">{{ ad_break.channel_name }}</div>
                                        <div class="text-sm text-gray-500">{{ ad_break.session.channel.name }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900">{{ ad_break.start_time|date:"M d, Y" }}</div>
                                        <div class="text-sm text-gray-500">{{ ad_break.start_time|time:"H:i:s" }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        {% if ad_break.duration_seconds %}
                                            <div class="text-sm text-gray-900">{{ ad_break.duration_seconds }}s</div>
                                            <div class="text-sm text-gray-500">
                                                {% widthratio ad_break.duration_seconds 60 1 %}m {% widthratio ad_break.duration_seconds 1 1 %}s total
                                            </div>
                                        {% else %}
                                            <span class="text-sm text-gray-400">-</span>
                                        {% endif %}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        {% if ad_break.end_time %}
                                            <span class="px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                                                <i class="fas fa-check-circle mr-1"></i>
                                                Completed
                                            </span>
                                        {% else %}
                                            <span class="px-2 py-1 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
                                                <i class="fas fa-hourglass-half mr-1"></i>
                                                In Progress
                                            </span>
                                        {% endif %}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 py-1 rounded text-xs font-medium bg-gray-100 text-gray-800">
                                            {{ ad_break.region }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        {% if ad_break.is_sent_to_api %}
                                            <span class="px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
                                                <i class="fas fa-external-link-alt mr-1"></i>
                                                Sent
                                            </span>
                                        {% else %}
                                            <span class="px-2 py-1 rounded text-xs font-medium bg-gray-100 text-gray-800">
                                                <i class="fas fa-clock mr-1"></i>
                                                Pending
                                            </span>
                                        {% endif %}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <div class="flex space-x-2">
                                            <a href="{% url 'jingles:adbreak_detail' ad_break.id %}" class="text-blue-600 hover:text-blue-900" title="View Details">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            {% if not ad_break.is_sent_to_api %}
                                                <button class="text-green-600 hover:text-green-900" title="Send to API">
                                                    <i class="fas fa-paper-plane"></i>
                                                </button>
                                            {% endif %}
                                            <button class="text-red-600 hover:text-red-900" title="Delete">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                {% if is_paginated %}
                    <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200">
                        <div class="flex-1 flex justify-between sm:hidden">
                            {% if page_obj.has_previous %}
                                <a href="?page={{ page_obj.previous_page_number }}" class="px-3 py-2 border border-gray-300 text-sm rounded bg-white hover:bg-gray-50">
                                    Previous
                                </a>
                            {% endif %}
                            {% if page_obj.has_next %}
                                <a href="?page={{ page_obj.next_page_number }}" class="ml-3 px-3 py-2 border border-gray-300 text-sm rounded bg-white hover:bg-gray-50">
                                    Next
                                </a>
                            {% endif %}
                        </div>
                        <div class="hidden sm:flex-1 sm:flex 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">{{ page_obj.paginator.count }}</span> results
                                </p>
                            </div>
                            <div>
                                <nav class="inline-flex" aria-label="Pagination">
                                    {% if page_obj.has_previous %}
                                        <a href="?page={{ page_obj.previous_page_number }}" class="px-2 py-2 border border-r-0 bg-white text-sm hover:bg-gray-50">
                                            <i class="fas fa-chevron-left"></i>
                                        </a>
                                    {% endif %}
                                    
                                    {% for num in page_obj.paginator.page_range %}
                                        {% if page_obj.number == num %}
                                            <span class="px-3 py-2 border bg-blue-50 text-sm text-blue-600">
                                                {{ num }}
                                            </span>
                                        {% else %}
                                            <a href="?page={{ num }}" class="px-3 py-2 border border-r-0 bg-white text-sm hover:bg-gray-50">
                                                {{ num }}
                                            </a>
                                        {% endif %}
                                    {% endfor %}
                                    
                                    {% if page_obj.has_next %}
                                        <a href="?page={{ page_obj.next_page_number }}" class="px-2 py-2 border bg-white text-sm hover:bg-gray-50">
                                            <i class="fas fa-chevron-right"></i>
                                        </a>
                                    {% endif %}
                                </nav>
                            </div>
                        </div>
                    </div>
                {% endif %}
            {% else %}
                <div class="text-center py-12">
                    <i class="fas fa-play-circle text-4xl text-gray-400 mb-4"></i>
                    <h3 class="text-lg font-medium mb-2">No Ad Breaks Found</h3>
                    <p class="text-gray-500 mb-6">No advertisement breaks have been detected yet.</p>
                    <div class="space-x-2">
                        <a href="{% url 'jingles:template_list' %}" class="px-3 py-2 border border-transparent rounded text-sm text-white bg-blue-600 hover:bg-blue-700">
                            <i class="fas fa-image mr-2"></i>
                            Manage Templates
                        </a>
                        <a href="{% url 'streams:session_list' %}" class="px-3 py-2 border border-gray-300 rounded text-sm bg-white hover:bg-gray-50">
                            <i class="fas fa-play mr-2"></i>
                            View Sessions
                        </a>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}