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

{% block title %}Streaming Channels - Stream Processor{% endblock %}

{% block extra_css %}
<!-- SweetAlert2 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<style>
    /* Dashboard Animations */
    .dashboard-fade-in {
        animation: fadeInUp 0.6s ease-out;
    }
    
    .stat-card {
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(37, 99, 235, 0.15);
    }
    
    .channel-card {
        transition: all 0.3s ease;
        border: 2px solid transparent;
    }
    
    .channel-card:hover {
        transform: translateY(-3px);
        border-color: var(--primary-200);
        box-shadow: 0 6px 20px rgba(37, 99, 235, 0.1);
    }
    
    .pulse-icon {
        animation: pulse 2s infinite;
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes pulse {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.05);
        }
    }
</style>
{% endblock %}

{% block page_title %}
    <div class="d-flex align-items-center">
        <i class="fas fa-broadcast-tower me-3 text-primary"></i>
        Streaming Channels
    </div>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="mb-4">
        <div class="card shadow-sm">
            <div class="card-body border-bottom">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h1 class="h2 fw-bold text-dark mb-1">Streaming Channels</h1>
                        <p class="text-muted small mb-0">Manage your live streaming channels and monitor their status</p>
                    </div>
                    <div class="d-flex gap-2">
                        <a href="{% url 'streams:session_list' %}" 
                           class="btn btn-outline-secondary btn-sm d-flex align-items-center">
                            <i class="fas fa-play me-2"></i>
                            Sessions
                        </a>
                        <a href="{% url 'streams:channel_create' %}" 
                           class="btn btn-primary btn-sm d-flex align-items-center">
                            <i class="fas fa-plus me-2"></i>
                            Add Channel
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Info Panel -->
    <div class="mb-4">
        <div class="alert alert-info d-flex align-items-center" role="alert">
            <i class="fas fa-info-circle me-3"></i>
            <div>
                <h6 class="alert-heading mb-1">About Streaming Channels</h6>
                <p class="mb-0 small">Streaming channels are configured endpoints for live video streams. Each channel can be started, stopped, and monitored for real-time streaming status and performance metrics.</p>
            </div>
        </div>
    </div>
    <!-- Statistics Cards -->
    <div class="row g-3 mb-4">
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card shadow-sm h-100 stat-card dashboard-fade-in" style="animation-delay: 0.1s;">
                <div class="card-body position-relative">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                <i class="fas fa-broadcast-tower text-primary pulse-icon"></i>
                            </div>
                        </div>
                        <div class="ms-3">
                            <p class="text-muted small fw-medium mb-1">Total Channels</p>
                            <p class="h3 fw-bold text-dark mb-1">{{ channels.count|default:0 }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-6 col-lg-3">
            <div class="card shadow-sm h-100 stat-card dashboard-fade-in" style="animation-delay: 0.2s;">
                <div class="card-body position-relative">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                <i class="fas fa-play text-success pulse-icon"></i>
                            </div>
                        </div>
                        <div class="ms-3">
                            <p class="text-muted small fw-medium mb-1">Active Streams</p>
                            <p class="h3 fw-bold text-dark mb-1">{{ active_streams_count|default:0 }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-6 col-lg-3">
            <div class="card shadow-sm h-100 stat-card dashboard-fade-in" style="animation-delay: 0.3s;">
                <div class="card-body position-relative">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                <i class="fas fa-clock text-warning pulse-icon"></i>
                            </div>
                        </div>
                        <div class="ms-3">
                            <p class="text-muted small fw-medium mb-1">Idle Channels</p>
                            <p class="h3 fw-bold text-dark mb-1">{{ idle_channels_count|default:0 }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-6 col-lg-3">
            <div class="card shadow-sm h-100 stat-card dashboard-fade-in" style="animation-delay: 0.4s;">
                <div class="card-body position-relative">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                <i class="fas fa-users text-info pulse-icon"></i>
                            </div>
                        </div>
                        <div class="ms-3">
                            <p class="text-muted small fw-medium mb-1">Total Views</p>
                            <p class="h3 fw-bold text-dark mb-1">{{ total_views|default:0 }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Search and Filters -->
    <div class="card shadow-sm dashboard-fade-in mb-4" style="animation-delay: 0.5s;">
        <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">
                    <!-- Search -->
                    <div class="col-md-6">
                        <label for="search" class="form-label fw-medium text-dark">
                            Search Channels
                        </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="{{ search }}"
                                    class="form-control ps-5"
                                    placeholder="Search by name, URL, or description...">
                        </div>
                    </div>
                    
                    <!-- Status Filter -->
                    <div class="col-md-3">
                        <label for="status" class="form-label fw-medium text-dark">
                            Status
                        </label>
                        <select name="status" 
                                id="status"
                                class="form-select">
                            <option value="">All Channels</option>
                            <option value="active" {% if status_filter == 'active' %}selected{% endif %}>Active Only</option>
                            <option value="inactive" {% if status_filter == 'inactive' %}selected{% endif %}>Inactive Only</option>
                            <option value="streaming" {% if status_filter == 'streaming' %}selected{% endif %}>Currently Streaming</option>
                        </select>
                    </div>
                    
                    <!-- Action Buttons -->
                    <div class="col-md-3 d-flex align-items-end gap-2">
                        <button type="submit" 
                                class="btn btn-primary d-flex align-items-center">
                            <i class="fas fa-search me-2"></i>
                            Filter
                        </button>
                        {% if search or status_filter %}
                            <a href="{% url 'streams:channel_list' %}" 
                                class="btn btn-outline-secondary d-flex align-items-center">
                                <i class="fas fa-times me-2"></i>
                                Clear
                            </a>
                        {% endif %}
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Channels Grid -->
    {% if channels %}
        <div class="card shadow-sm dashboard-fade-in" style="animation-delay: 0.6s;">
            <div class="card-header bg-white border-bottom">
                <h3 class="h5 mb-0 text-dark">
                    <i class="fas fa-tv text-primary me-2 pulse-icon"></i>
                    Channels ({{ channels|length }})
                </h3>
            </div>
            <div class="card-body">
                <div class="row g-4">
                    {% for channel in channels %}
                        <div class="col-12 col-md-6 col-lg-4">
                            <div class="card h-100 shadow-sm border-0 dashboard-fade-in">
                                <div class="card-body">
                                    <!-- Channel Header -->
                                    <div class="d-flex align-items-start justify-content-between mb-3">
                                        <div class="flex-fill">
                                            <h5 class="card-title fw-semibold text-dark mb-2">
                                                {{ channel.name }}
                                            </h5>
                                            <div class="d-flex align-items-center gap-2 flex-wrap">
                                                {% if channel.is_active %}
                                                    <span class="badge bg-success d-flex align-items-center">
                                                        <span class="bg-light rounded-circle me-1" style="width: 8px; height: 8px;"></span>
                                                        Active
                                                    </span>
                                                {% else %}
                                                    <span class="badge bg-secondary d-flex align-items-center">
                                                        <span class="bg-light rounded-circle me-1" style="width: 8px; height: 8px;"></span>
                                                        Inactive
                                                    </span>
                                                {% endif %}
                                                
                                                {% if channel.active_session %}
                                                    <span class="badge bg-danger d-flex align-items-center">
                                                        <i class="fas fa-circle me-1" style="font-size: 0.5rem;"></i>
                                                        Live
                                                    </span>
                                                {% endif %}
                                            </div>
                                        </div>
                                        
                                        <!-- Quick Actions -->
                                        <div class="d-flex align-items-center gap-1 ms-3">
                                            {% if channel.active_session %}
                                                <form method="post" action="{% url 'streams:session_stop' channel.active_session.id %}" class="d-inline">
                                                    {% csrf_token %}
                                                    <button type="submit" 
                                                            class="btn btn-sm btn-outline-danger p-1" 
                                                            title="Stop Channel">
                                                        <i class="fas fa-stop"></i>
                                                    </button>
                                                </form>
                                            {% elif channel.is_active %}
                                                <button class="btn btn-sm btn-outline-success p-1"
                                                        hx-post="{% url 'streams:channel_start' channel.id %}"
                                                        hx-target="closest .col-12"
                                                        hx-swap="outerHTML"
                                                        title="Start Channel">
                                                    <i class="fas fa-play"></i>
                                                </button>
                                            {% endif %}
                                            
                                            <a href="{% url 'streams:channel_edit' channel.pk %}" 
                                                class="btn btn-sm btn-outline-primary p-1" 
                                                title="Edit Channel">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            
                                            <a href="{% url 'streams:channel_detail' channel.pk %}" 
                                                class="btn btn-sm btn-outline-secondary p-1" 
                                                title="View Details">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                        </div>
                                    </div>
                                    
                                    <!-- Channel Description -->
                                    {% if channel.description %}
                                        <p class="text-muted small mb-3" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">
                                            {{ channel.description }}
                                        </p>
                                    {% endif %}
                                    
                                    <!-- Channel Details -->
                                    <div class="mb-3">
                                        <!-- HLS URL -->
                                        <div class="d-flex align-items-center justify-content-between mb-2">
                                            <span class="small fw-medium text-dark">HLS URL:</span>
                                            <div class="d-flex align-items-center gap-2">
                                                <code class="small bg-light px-2 py-1 rounded text-truncate" style="max-width: 120px;">
                                                    {{ channel.hls_url|default:"Not configured" }}
                                                </code>
                                                {% if channel.hls_url %}
                                                    <button onclick="copyToClipboard('{{ channel.hls_url }}')" 
                                                            class="btn btn-sm btn-link p-0 text-primary" 
                                                            title="Copy URL">
                                                        <i class="fas fa-copy"></i>
                                                    </button>
                                                {% endif %}
                                            </div>
                                        </div>
                                        
                                        <!-- Technical Details -->
                                        <div class="row g-2 small">
                                            <div class="col-6">
                                                <span class="text-muted">Segment Duration:</span>
                                                <span class="fw-medium d-block">{{ channel.segment_duration|default:"6s" }}</span>
                                            </div>
                                            <div class="col-6">
                                                <span class="text-muted">Max Segments:</span>
                                                <span class="fw-medium d-block">{{ channel.max_segments|default:"10" }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Channel Footer -->
                                    <div class="mt-auto pt-3 border-top">
                                        <div class="d-flex align-items-center justify-content-between small text-muted mb-3">
                                            <div>
                                                <i class="fas fa-user me-1"></i>
                                                {{ channel.created_by.username|default:"System" }}
                                            </div>
                                            <div>
                                                <i class="fas fa-calendar me-1"></i>
                                                {{ channel.created_at|date:"M d, Y" }}
                                            </div>
                                        </div>
                                        
                                        <!-- Action Buttons -->
                                        <div class="d-flex gap-2">
                                            {% if channel.active_session %}
                                                <form method="post" action="{% url 'streams:session_stop' channel.active_session.id %}" class="flex-fill">
                                                    {% csrf_token %}
                                                    <button type="submit" 
                                                            class="btn btn-danger btn-sm w-100 d-flex align-items-center justify-content-center">
                                                        <i class="fas fa-stop me-1"></i>
                                                        Stop
                                                    </button>
                                                </form>
                                            {% elif channel.is_active %}
                                                <button class="btn btn-success btn-sm flex-fill d-flex align-items-center justify-content-center"
                                                        hx-post="{% url 'streams:channel_start' channel.id %}"
                                                        hx-target="closest .col-12"
                                                        hx-swap="outerHTML">
                                                    <i class="fas fa-play me-1"></i>
                                                    Start
                                                </button>
                                            {% endif %}
                                            
                                            <a href="{% url 'streams:channel_edit' channel.pk %}" 
                                                class="btn btn-outline-secondary btn-sm flex-fill d-flex align-items-center justify-content-center">
                                                <i class="fas fa-edit me-1"></i>
                                                Edit
                                            </a>
                                            
                                            <a href="{% url 'streams:channel_detail' channel.pk %}" 
                                                class="btn btn-outline-secondary btn-sm d-flex align-items-center justify-content-center">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    {% else %}
        <div class="card shadow-sm">
            <div class="card-body text-center py-5">
                <i class="fas fa-broadcast-tower display-1 text-muted mb-3"></i>
                <h3 class="h5 fw-medium text-dark mb-2">No channels found</h3>
                <p class="text-muted mb-4">Get started by creating your first streaming channel.</p>
                <a href="{% url 'streams:channel_create' %}" 
                    class="btn btn-primary d-flex align-items-center justify-content-center mx-auto" style="width: fit-content;">
                     <i class="fas fa-plus me-2"></i>
                     Create Channel
                </a>
            </div>
        </div>
    {% endif %}

    <!-- Pagination -->
    {% if is_paginated %}
        <div class="card shadow-sm mt-4">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between">
                    <div class="d-block d-sm-none">
                        {% if page_obj.has_previous %}
                            <a href="?page={{ page_obj.previous_page_number }}{% if search %}&search={{ search }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}" 
                                class="btn btn-outline-secondary me-2">
                                Previous
                            </a>
                        {% endif %}
                        {% if page_obj.has_next %}
                            <a href="?page={{ page_obj.next_page_number }}{% if search %}&search={{ search }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}" 
                                class="btn btn-outline-secondary">
                                Next
                            </a>
                        {% endif %}
                    </div>
                    <div class="d-none d-sm-flex align-items-center justify-content-between w-100">
                        <div>
                            <p class="text-muted small mb-0">
                                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>
                                results
                            </p>
                        </div>
                        <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 search %}&search={{ search }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% 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 search %}&search={{ search }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% 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 search %}&search={{ search }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">
                                                <i class="fas fa-chevron-right"></i>
                                            </a>
                                        </li>
                                    {% endif %}
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
</div> 
{% endblock %}

{% block extra_js %}
<script>
    // Auto-refresh live status every 30 seconds
    setInterval(function() {
        document.querySelectorAll('[data-channel-id]').forEach(function(element) {
            const channelId = element.dataset.channelId;
            fetch(`/api/channels/${channelId}/status/`)
                .then(response => response.json())
                .then(data => {
                    const badge = element.querySelector('.live-badge');
                    if (data.is_streaming) {
                        if (!badge) {
                            const liveBadge = document.createElement('span');
                            liveBadge.className = 'live-badge px-2 py-1 rounded text-xs bg-red-100 text-red-800';
                            liveBadge.innerHTML = 'Live';
                            element.querySelector('.status-badges').appendChild(liveBadge);
                        }
                    } else {
                        if (badge) {
                            badge.remove();
                        }
                    }
                });
        });
    }, 30000);
    
    // Copy to clipboard functionality
    function copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(function() {
            // You could add a toast notification here
            console.log('Copied to clipboard: ' + text);
        });
    }
    
    // Auto-submit search form with delay
    let searchTimeout;
    const searchInput = document.getElementById('search');
    if (searchInput) {
        searchInput.addEventListener('input', function() {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(function() {
                document.querySelector('form').submit();
            }, 1000);
        });
    }
</script>
{% endblock %}