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

{% block title %}{{ channel.name }} - Channel Details - Stream Processor{% endblock %}

{% block page_title %}
<i class="fas fa-broadcast-tower text-primary me-2"></i>
Channel Details
{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<style>
    @keyframes dashboard-fade-in {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes pulse-icon {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.1);
        }
    }
    
    .dashboard-fade-in {
        animation: dashboard-fade-in 0.6s ease-out;
    }
    
    .pulse-icon {
        animation: pulse-icon 2s infinite;
    }
    
    .info-card {
        background: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }
</style>
{% endblock %}

{% block extra_head %}
<script>
    function confirmStartStream() {
        Swal.fire({
            title: 'Start Stream?',
            text: 'Are you sure you want to start streaming this channel?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#10b981',
            cancelButtonColor: '#6b7280',
            confirmButtonText: '<i class="fas fa-play mr-2"></i>Yes, Start Stream',
            cancelButtonText: '<i class="fas fa-times mr-2"></i>Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('start-stream-form').dispatchEvent(new Event('submit'));
                Swal.fire({
                    title: 'Starting Stream...',
                    text: 'Please wait while the stream is being started.',
                    icon: 'info',
                    allowOutsideClick: false,
                    showConfirmButton: false,
                    timer: 2000
                });
            }
        });
    }

    function confirmStopStream() {
        Swal.fire({
            title: 'Stop Stream?',
            text: 'Are you sure you want to stop this stream? This will end the current streaming session.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#6b7280',
            confirmButtonText: '<i class="fas fa-stop mr-2"></i>Yes, Stop Stream',
            cancelButtonText: '<i class="fas fa-times mr-2"></i>Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('stop-stream-form').dispatchEvent(new Event('submit'));
                Swal.fire({
                    title: 'Stopping Stream...',
                    text: 'Please wait while the stream is being stopped.',
                    icon: 'info',
                    allowOutsideClick: false,
                    showConfirmButton: false,
                    timer: 2000
                });
            }
        });
    }
</script>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="card shadow-sm mb-4 dashboard-fade-in">
        <div class="card-body">
        <div class="d-flex justify-content-between align-items-start">
            <div class="d-flex align-items-start">
                <a href="{% url 'streams:channel_list' %}" 
                   class="me-4 text-muted text-decoration-none">
                    <i class="fas fa-arrow-left fs-4"></i>
                </a>
                <div>
                    <h1 class="h2 fw-bold text-dark d-flex align-items-center mb-2">
                        <i class="fas fa-tv me-3 text-primary"></i>
                        {{ channel.name }}
                        {% if channel.is_active %}
                            <span class="badge bg-success ms-3">
                                <i class="fas fa-circle me-1 pulse-icon"></i>
                                Active
                            </span>
                        {% else %}
                            <span class="badge bg-secondary ms-3">
                                <i class="fas fa-circle me-1"></i>
                                Inactive
                            </span>
                        {% endif %}
                    </h1>
                    <p class="text-muted mb-0">
                        {% if channel.description %}
                            {{ channel.description }}
                        {% else %}
                            Channel configuration and streaming details
                        {% endif %}
                    </p>
                </div>
            </div>
            <div class="d-flex gap-2 flex-wrap">
                <a href="{% url 'streams:hls_player' channel.pk %}" 
                   class="btn btn-primary">
                    <i class="fas fa-play me-2"></i>
                    Live Player
                </a>
                <a href="{% url 'streams:ts_browser' channel.pk %}" 
                   class="btn btn-outline-secondary">
                    <i class="fas fa-file-video me-2"></i>
                    TS Files
                </a>
                <a href="{% url 'streams:iframe_gallery' channel.pk %}" 
                   class="btn btn-outline-secondary">
                    <i class="fas fa-images me-2"></i>
                    iFrames
                </a>
                <a href="{% url 'streams:jingle_preview' channel.pk %}" 
                   class="btn btn-outline-secondary">
                    <i class="fas fa-music me-2"></i>
                    Jingles
                </a>
                <a href="{% url 'streams:channel_edit' channel.pk %}" 
                   class="btn btn-outline-secondary">
                    <i class="fas fa-edit me-2"></i>
                    Edit
                </a>
                {% if active_session %}
                    <form id="stop-stream-form" 
                          hx-post="{% url 'streams:session_stop' active_session.pk %}"
                          hx-target="#stream-status"
                          hx-swap="outerHTML"
                          class="d-inline">
                        {% csrf_token %}
                        <button type="button" 
                                onclick="confirmStopStream()"
                                class="btn btn-danger">
                            <i class="fas fa-stop me-2"></i>
                            Stop Stream
                        </button>
                    </form>
                {% else %}
                    <form id="start-stream-form"
                          hx-post="{% url 'streams:channel_start' channel.pk %}"
                          hx-target="#stream-status"
                          hx-swap="outerHTML"
                          class="d-inline">
                        {% csrf_token %}
                        <button type="button" 
                                onclick="confirmStartStream()"
                                class="btn btn-success">
                            <i class="fas fa-play me-2"></i>
                            Start Stream
                        </button>
                    </form>
                {% endif %}
            </div>
        </div>
        </div>
    </div>

    <!-- Current Status -->
    <div id="stream-status">
        {% if active_session %}
            <div class="card shadow-sm mb-4 dashboard-fade-in" style="animation-delay: 0.2s;">
                <div class="card-body bg-primary bg-opacity-10 border-primary border-opacity-25">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-broadcast-tower fs-2 text-primary pulse-icon"></i>
                        </div>
                        <div class="ms-4 flex-fill">
                            <h3 class="h5 fw-medium text-primary mb-2">Currently Streaming</h3>
                            <div class="row g-3 small text-primary">
                                <div class="col-md-4">
                                    <strong>Session ID:</strong> {{ active_session.id|truncatechars:8 }}
                                </div>
                                <div class="col-md-4">
                                    <strong>Started:</strong> {{ active_session.started_at|date:"M d, Y H:i" }}
                                </div>
                                <div class="col-md-4">
                                    <strong>Status:</strong> 
                                    <span class="badge bg-primary">
                                        {{ active_session.get_status_display }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="flex-shrink-0">
                            <a href="{% url 'streams:session_detail' active_session.pk %}" 
                               class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-eye me-2"></i>
                                View Session
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        {% else %}
            <div class="card shadow-sm mb-4 dashboard-fade-in" style="animation-delay: 0.2s;">
                <div class="card-body bg-light">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-pause-circle fs-2 text-muted"></i>
                        </div>
                        <div class="ms-4">
                            <h3 class="h5 fw-medium text-dark mb-1">Stream Not Active</h3>
                            <p class="small text-muted mb-0">This channel is not currently streaming. Click "Start Stream" to begin capturing.</p>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>

    <div class="row g-4">
        <!-- Channel Configuration -->
        <div class="col-lg-8">
            <!-- Basic Information -->
            <div class="card shadow-sm mb-4 dashboard-fade-in" style="animation-delay: 0.3s;">
                <div class="card-header bg-white border-bottom">
                    <h3 class="h5 fw-medium text-dark mb-0">
                        <i class="fas fa-info-circle me-2 text-primary"></i>
                        Channel Information
                    </h3>
                </div>
                <div class="card-body">
                    <dl class="row g-3">
                        <div class="col-md-6">
                            <dt class="small fw-medium text-muted">Channel Name</dt>
                            <dd class="mt-1 small text-dark">{{ channel.name }}</dd>
                        </div>
                        <div class="col-md-6">
                            <dt class="small fw-medium text-muted">Slug</dt>
                            <dd class="mt-1 small text-dark font-monospace">{{ channel.slug }}</dd>
                        </div>
                        <div class="col-12">
                            <dt class="small fw-medium text-muted">HLS Source URL</dt>
                            <dd class="mt-1 small text-dark text-break font-monospace bg-light p-2 rounded">
                                {{ channel.hls_url }}
                            </dd>
                        </div>
                        <div class="col-md-6">
                            <dt class="small fw-medium text-muted">Output Directory</dt>
                            <dd class="mt-1 small text-dark font-monospace">{{ channel.output_directory }}</dd>
                        </div>
                        <div class="col-md-6">
                            <dt class="small fw-medium text-muted">Created By</dt>
                            <dd class="mt-1 small text-dark">{{ channel.created_by.username }}</dd>
                        </div>
                        <div class="col-md-6">
                            <dt class="small fw-medium text-muted">Created</dt>
                            <dd class="mt-1 small text-dark">{{ channel.created_at|date:"M d, Y H:i" }}</dd>
                        </div>
                        <div class="col-md-6">
                            <dt class="small fw-medium text-muted">Last Updated</dt>
                            <dd class="mt-1 small text-dark">{{ channel.updated_at|date:"M d, Y H:i" }}</dd>
                        </div>
                    </dl>
                </div>
            </div>

            <!-- HLS Configuration -->
            <div class="card shadow-sm mb-4 dashboard-fade-in" style="animation-delay: 0.4s;">
                <div class="card-header bg-white border-bottom">
                    <h3 class="h5 fw-medium text-dark mb-0">
                        <i class="fas fa-cogs me-2 text-purple"></i>
                        HLS Configuration
                    </h3>
                </div>
                <div class="card-body">
                    <dl class="row g-3">
                        <div class="col-md-6">
                            <dt class="small fw-medium text-muted">Segment Duration</dt>
                            <dd class="mt-1 small text-dark">{{ channel.segment_duration }} seconds</dd>
                        </div>
                        <div class="col-md-6">
                            <dt class="small fw-medium text-muted">Max Segments</dt>
                            <dd class="mt-1 small text-dark">{{ channel.max_segments }} segments</dd>
                        </div>
                        <div class="col-md-6">
                            <dt class="small fw-medium text-muted">Retry Attempts</dt>
                            <dd class="mt-1 small text-dark">{{ channel.retry_attempts }} attempts</dd>
                        </div>
                        <div class="col-md-6">
                            <dt class="small fw-medium text-muted">Retry Interval</dt>
                            <dd class="mt-1 small text-dark">{{ channel.retry_interval }} seconds</dd>
                        </div>
                    </dl>
                </div>
            </div>

            <!-- Recent Sessions -->
            <div class="card shadow-sm mb-4 dashboard-fade-in" style="animation-delay: 0.5s;">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="h5 fw-medium text-dark mb-0">
                            <i class="fas fa-history me-2 text-success"></i>
                            Recent Sessions
                        </h3>
                        <a href="{% url 'streams:session_list' %}?channel={{ channel.pk }}" 
                           class="small text-primary text-decoration-none">
                            View All Sessions
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    {% if recent_sessions %}
                        <div class="d-grid gap-3">
                            {% for session in recent_sessions %}
                                <div class="d-flex justify-content-between align-items-center p-3 border rounded">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 me-3">
                                            {% if session.status == 'streaming' %}
                                                <i class="fas fa-play-circle text-success"></i>
                                            {% elif session.status == 'stopped' %}
                                                <i class="fas fa-stop-circle text-muted"></i>
                                            {% elif session.status == 'error' %}
                                                <i class="fas fa-exclamation-circle text-danger"></i>
                                            {% else %}
                                                <i class="fas fa-circle text-muted"></i>
                                            {% endif %}
                                        </div>
                                        <div>
                                            <div class="small fw-medium text-dark">
                                                Session {{ session.id|truncatechars:8 }}
                                            </div>
                                            <div class="small text-muted">
                                                Started: {{ session.started_at|date:"M d, Y H:i" }}
                                                {% if session.ended_at %}
                                                    • Ended: {{ session.ended_at|date:"M d, Y H:i" }}
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                        <span class="badge 
                                            {% if session.status == 'streaming' %}bg-success
                                            {% elif session.status == 'stopped' %}bg-secondary
                                            {% elif session.status == 'error' %}bg-danger
                                            {% else %}bg-secondary{% endif %}">
                                            {{ session.get_status_display }}
                                        </span>
                                        <a href="{% url 'streams:session_detail' session.pk %}" 
                                           class="text-primary text-decoration-none">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center py-5">
                            <i class="fas fa-history display-4 text-muted mb-3"></i>
                            <p class="text-muted">No streaming sessions yet</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="d-grid gap-4">
            <!-- Quick Actions -->
            <div class="card shadow-sm dashboard-fade-in" style="animation-delay: 0.6s;">
                <div class="card-header bg-white border-bottom">
                    <h3 class="h5 fw-medium text-dark mb-0">
                        <i class="fas fa-bolt me-2 text-warning"></i>
                        Quick Actions
                    </h3>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{% url 'streams:channel_edit' channel.pk %}" 
                           class="btn btn-outline-secondary d-flex align-items-center justify-content-center">
                            <i class="fas fa-edit me-2"></i>
                            Edit Channel
                        </a>
                        
                        <button class="btn btn-primary d-flex align-items-center justify-content-center">
                            <i class="fas fa-download me-2"></i>
                            Download Segments
                        </button>
                        
                        <button class="btn btn-info d-flex align-items-center justify-content-center">
                            <i class="fas fa-chart-line me-2"></i>
                            View Analytics
                        </button>
                    </div>
                </div>
            </div>

            <!-- Configuration Summary -->
            <div class="card shadow-sm dashboard-fade-in" style="animation-delay: 0.7s;">
                <div class="card-header bg-white border-bottom">
                    <h3 class="h5 fw-medium text-dark mb-0">
                        <i class="fas fa-sliders-h me-2 text-primary"></i>
                        Configurations
                    </h3>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-3">
                        <div>
                            <h4 class="small fw-medium text-dark mb-2">Video Configurations</h4>
                            {% if video_configs %}
                                <div class="d-grid gap-1">
                                    {% for config in video_configs %}
                                        <div class="small text-muted">
                                            {{ config.name }} ({{ config.resolution }})
                                        </div>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <p class="small text-muted">No video configurations</p>
                            {% endif %}
                        </div>
                        
                        <div>
                            <h4 class="small fw-medium text-dark mb-2">Audio Configurations</h4>
                            {% if audio_configs %}
                                <div class="d-grid gap-1">
                                    {% for config in audio_configs %}
                                        <div class="small text-muted">
                                            {{ config.name }} ({{ config.bitrate }})
                                        </div>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <p class="small text-muted">No audio configurations</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Channel Statistics -->
            <div class="card shadow-sm dashboard-fade-in" style="animation-delay: 0.8s;">
                <div class="card-header bg-white border-bottom">
                    <h3 class="h5 fw-medium text-dark mb-0">
                        <i class="fas fa-chart-bar me-2 text-success"></i>
                        Statistics
                    </h3>
                </div>
                <div class="card-body">
                    <dl class="d-grid gap-3">
                        <div class="d-flex justify-content-between">
                            <dt class="small fw-medium text-muted">Total Sessions</dt>
                            <dd class="small text-dark">{{ recent_sessions|length }}</dd>
                        </div>
                        <div class="d-flex justify-content-between">
                            <dt class="small fw-medium text-muted">Active Sessions</dt>
                            <dd class="small text-dark">
                                {% if active_session %}1{% else %}0{% endif %}
                            </dd>
                        </div>
                        <div class="d-flex justify-content-between">
                            <dt class="small fw-medium text-muted">Channel Status</dt>
                            <dd class="small text-dark">
                                {% if channel.is_active %}
                                    <span class="text-success">Active</span>
                                {% else %}
                                    <span class="text-danger">Inactive</span>
                                {% endif %}
                            </dd>
                        </div>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}