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

{% block title %}Stream Sessions{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<style>
    .dashboard-fade-in {
        animation: fadeInUp 0.6s ease-out;
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .pulse-icon {
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
    }
    
    .stat-card:hover {
        transform: translateY(-2px);
        transition: transform 0.2s ease-in-out;
    }
</style>
{% endblock %}

{% block page_title %}
<div class="d-flex justify-content-between align-items-center">
    <h1 class="h3 mb-0 text-gray-800">Stream Sessions</h1>
    <a href="{% url 'streams:channel_list' %}" class="btn btn-primary">
        <i class="fas fa-plus me-2"></i>New Session
    </a>
</div>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header Card -->
    <div class="card shadow-sm dashboard-fade-in mb-4">
        <div class="card-body">
            <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center">
                <div>
                    <h1 class="h3 fw-bold text-dark mb-2">Stream Sessions</h1>
                    <p class="text-muted mb-0">Monitor and manage your streaming sessions with real-time status updates</p>
                </div>
                <div class="mt-3 mt-lg-0">
                    <a href="{% url 'streams:channel_list' %}" class="btn btn-outline-primary">
                        <i class="fas fa-broadcast-tower me-2"></i>Channels
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Info Panel -->
    <div class="alert alert-info border-0 shadow-sm dashboard-fade-in mb-4" style="animation-delay: 0.1s; background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);">
        <div class="d-flex align-items-start">
            <div class="flex-shrink-0">
                <i class="fas fa-info-circle text-primary fs-5 pulse-icon"></i>
            </div>
            <div class="ms-3">
                <h6 class="fw-bold text-primary mb-2">Session Management</h6>
                <div class="text-dark">
                    <p class="d-flex align-items-center mb-1"><i class="fas fa-check-circle text-success me-2"></i>Monitor real-time streaming sessions and their status</p>
                    <p class="d-flex align-items-center mb-1"><i class="fas fa-check-circle text-success me-2"></i>Filter sessions by channel, status, and date range</p>
                    <p class="d-flex align-items-center mb-0"><i class="fas fa-check-circle text-success me-2"></i>View detailed session information and performance metrics</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters Card -->
    <div class="card shadow-sm dashboard-fade-in mb-4" style="animation-delay: 0.2s;">
        <div class="card-header bg-white border-bottom">
            <h3 class="h5 mb-0 text-dark">
                <i class="fas fa-filter text-primary me-2 pulse-icon"></i>
                Search & Filters
            </h3>
        </div>
        <div class="card-body">
            <form method="get">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label for="search" class="form-label fw-medium text-dark">
                            <i class="fas fa-search me-1"></i>Search Sessions
                        </label>
                        <div class="position-relative">
                            <div class="position-absolute top-50 start-0 translate-middle-y ps-3">
                                <i class="fas fa-search text-muted"></i>
                            </div>
                            <input type="text" 
                                   name="search" 
                                   id="search"
                                   value="{{ request.GET.search }}"
                                   placeholder="Search by channel name..."
                                   class="form-control ps-5">
                        </div>
                    </div>
                    
                    <div class="col-md-3">
                        <label for="status" class="form-label fw-medium text-dark">
                            <i class="fas fa-filter me-1"></i>Status
                        </label>
                        <select name="status" 
                                id="status"
                                class="form-select">
                            <option value="">All Status</option>
                            <option value="active" {% if request.GET.status == 'active' %}selected{% endif %}>Active</option>
                            <option value="completed" {% if request.GET.status == 'completed' %}selected{% endif %}>Completed</option>
                            <option value="failed" {% if request.GET.status == 'failed' %}selected{% endif %}>Failed</option>
                            <option value="stopped" {% if request.GET.status == 'stopped' %}selected{% endif %}>Stopped</option>
                            <option value="error" {% if request.GET.status == 'error' %}selected{% endif %}>Error</option>
                        </select>
                    </div>
                    
                    <div class="col-md-3">
                        <label for="channel" class="form-label fw-medium text-dark">
                            <i class="fas fa-tv me-1"></i>Channel
                        </label>
                        <select name="channel" 
                                id="channel"
                                class="form-select">
                            <option value="">All Channels</option>
                            {% for channel in channels %}
                                <option value="{{ channel.id }}" {% if request.GET.channel == channel.id|stringformat:'s' %}selected{% endif %}>
                                    {{ channel.name }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div class="col-md-2 d-flex align-items-end">
                        <div class="d-grid gap-2 w-100">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-search me-2"></i>Apply
                            </button>
                            {% if request.GET.search or request.GET.status or request.GET.channel %}
                            <a href="{% url 'streams:session_list' %}" class="btn btn-outline-secondary">
                                <i class="fas fa-times me-2"></i>Clear
                            </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Sessions List -->
    {% if sessions %}
        <div class="card shadow-sm dashboard-fade-in" style="animation-delay: 0.3s;">
            <div class="card-header bg-white border-bottom">
                <h3 class="h5 mb-0 text-dark">
                    <i class="fas fa-play-circle text-primary me-2"></i>
                    Stream Sessions
                </h3>
            </div>
            <div class="list-group list-group-flush">
                {% for session in sessions %}
                <div class="list-group-item list-group-item-action border-0">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="d-flex align-items-start">
                            <div class="flex-shrink-0 me-3">
                                {% if session.status == 'active' %}
                                    <span class="badge bg-success rounded-pill pulse-icon">●</span>
                                {% elif session.status == 'completed' %}
                                    <span class="badge bg-primary rounded-pill">●</span>
                                {% elif session.status == 'failed' %}
                                    <span class="badge bg-danger rounded-pill">●</span>
                                {% else %}
                                    <span class="badge bg-secondary rounded-pill">●</span>
                                {% endif %}
                            </div>
                            
                            <div class="flex-grow-1">
                                <div class="d-flex align-items-center mb-2">
                                    <h5 class="mb-0 me-3">
                                        <a href="{% url 'streams:session_detail' session.pk %}" 
                                           class="text-decoration-none text-dark fw-bold">
                                            {{ session.channel.name }}
                                        </a>
                                    </h5>
                                    <span class="badge 
                                        {% if session.status == 'active' %}bg-success
                                        {% elif session.status == 'completed' %}bg-primary
                                        {% elif session.status == 'failed' %}bg-danger
                                        {% else %}bg-secondary{% endif %}">
                                        {{ session.get_status_display }}
                                    </span>
                                </div>
                                
                                <div class="d-flex flex-wrap gap-3 text-muted small mb-2">
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-clock me-1"></i>
                                        Started: {{ session.started_at|date:"M d, Y H:i" }}
                                    </div>
                                    {% if session.ended_at %}
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-stop-circle me-1"></i>
                                        Ended: {{ session.ended_at|date:"M d, Y H:i" }}
                                    </div>
                                    {% endif %}
                                    {% if session.duration %}
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-hourglass-half me-1"></i>
                                        Duration: {{ session.duration }}
                                    </div>
                                    {% endif %}
                                </div>
                                
                                {% if session.error_message %}
                                <div class="alert alert-danger py-2 mb-2">
                                    <i class="fas fa-exclamation-triangle me-1"></i>
                                    {{ session.error_message }}
                                </div>
                                {% endif %}
                                
                                <!-- Statistics -->
                                {% if session.statistics %}
                                <div class="row g-2 mt-2">
                                    <div class="col-6 col-md-3">
                                        <div class="bg-light rounded p-2 text-center stat-card">
                                            <div class="text-muted small">Segments</div>
                                            <div class="fw-bold">{{ session.statistics.total_segments|default:0 }}</div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-md-3">
                                        <div class="bg-light rounded p-2 text-center stat-card">
                                            <div class="text-muted small">Data Processed</div>
                                            <div class="fw-bold">{{ session.statistics.total_size|filesizeformat|default:"0 B" }}</div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-md-3">
                                        <div class="bg-light rounded p-2 text-center stat-card">
                                            <div class="text-muted small">Jingles Detected</div>
                                            <div class="fw-bold">{{ session.statistics.jingles_detected|default:0 }}</div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-md-3">
                                        <div class="bg-light rounded p-2 text-center stat-card">
                                            <div class="text-muted small">Ad Breaks</div>
                                            <div class="fw-bold">{{ session.statistics.ad_breaks|default:0 }}</div>
                                        </div>
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <!-- Actions -->
                        <div class="d-flex gap-2">
                            {% if session.status == 'active' %}
                                <form method="post" action="{% url 'streams:session_stop' session.id %}" class="d-inline">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-outline-danger btn-sm"
                                        hx-post="{% url 'streams:session_stop' session.id %}"
                                        hx-confirm="Are you sure you want to stop this stream?"
                                        hx-target="closest .list-group-item"
                                        hx-swap="outerHTML">
                                    <i class="fas fa-stop me-1"></i>
                                    Stop
                                </button>
                            </form>
                            {% endif %}
                            
                            <a href="{% url 'streams:session_detail' session.pk %}" 
                               class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-eye me-1"></i>
                                View
                            </a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>

        <!-- Pagination -->
        {% if is_paginated %}
        <div class="card-footer bg-white border-top-0">
            <div class="d-flex justify-content-between align-items-center">
                <div class="d-none d-sm-block">
                    <p class="text-muted mb-0 small">
                        Showing <span class="fw-medium">{{ page_obj.start_index }}</span> to <span class="fw-medium">{{ page_obj.end_index }}</span> of <span class="fw-medium">{{ paginator.count }}</span> sessions
                    </p>
                </div>
                <nav aria-label="Pagination">
                    <ul class="pagination pagination-sm mb-0">
                        {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">
                                    <i class="fas fa-chevron-left"></i>
                                </a>
                            </li>
                        {% endif %}
                        
                        {% for num in page_obj.paginator.page_range %}
                            {% if page_obj.number == num %}
                                <li class="page-item active">
                                    <span class="page-link">{{ num }}</span>
                                </li>
                            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ num }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">
                                        {{ num }}
                                    </a>
                                </li>
                            {% endif %}
                        {% endfor %}
                        
                        {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">
                                    <i class="fas fa-chevron-right"></i>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
        </div>
        {% endif %}

    {% else %}
        <!-- Empty State -->
        <div class="card shadow-sm dashboard-fade-in text-center" style="animation-delay: 0.3s;">
            <div class="card-body py-5">
                <div class="mb-4">
                    <i class="fas fa-play-circle text-muted" style="font-size: 4rem;"></i>
                </div>
                <h3 class="h4 fw-bold text-dark mb-3">No sessions found</h3>
                {% if request.GET.search or request.GET.status %}
                    <p class="text-muted mb-4">Try adjusting your search or filter criteria</p>
                    <a href="{% url 'streams:session_list' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-times me-2"></i>Clear Filters
                    </a>
                {% else %}
                    <p class="text-muted mb-4">No streaming sessions have been created yet</p>
                    <a href="{% url 'streams:channel_list' %}" class="btn btn-primary">
                        <i class="fas fa-plus me-2"></i>Start New Stream
                    </a>
                {% endif %}
            </div>
        </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    // Auto-refresh active sessions every 30 seconds
    setInterval(function() {
        if (document.querySelector('.pulse-icon')) {
            location.reload();
        }
    }, 30000);
    
    // Enhanced confirmation for stop actions
    document.addEventListener('DOMContentLoaded', function() {
        const stopButtons = document.querySelectorAll('button[hx-confirm]');
        stopButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                Swal.fire({
                    title: 'Stop Stream Session?',
                    text: 'This will stop the active streaming session. This action cannot be undone.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Yes, stop it!',
                    cancelButtonText: 'Cancel'
                }).then((result) => {
                    if (result.isConfirmed) {
                        this.form.submit();
                    }
                });
            });
        });
    });
</script>
{% endblock %}