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

{% block title %}{{ channel.name }} - Live Stream Player - Stream Processor{% endblock %}

{% block extra_css %}
<link href="https://vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet">
<style>
    .player-container {
        @apply bg-white rounded-lg shadow-lg p-6 mb-6;
    }
    .player-controls {
        @apply flex flex-wrap gap-4 mt-4;
    }
    .control-btn {
        @apply px-4 py-2 rounded-lg font-medium transition-colors duration-200;
    }
    .btn-primary {
        @apply bg-blue-600 text-white hover:bg-blue-700;
    }
    .btn-secondary {
        @apply bg-gray-600 text-white hover:bg-gray-700;
    }
    .stream-info {
        @apply bg-gray-50 rounded-lg p-4 mt-4;
    }
    .video-js {
        width: 100%;
        height: 400px;
    }
</style>
{% endblock %}

{% block extra_head %}
<script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-contrib-hls@5.15.0/dist/videojs-contrib-hls.min.js"></script>
{% endblock %}

{% block page_title %}
    <div class="flex items-center">
        <i class="fas fa-play-circle mr-3 text-primary-600"></i>
        {{ channel.name }} - Live Player
    </div>
{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Header -->
    <div class="mb-8">
        <div class="bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900">{{ channel.name }}</h1>
                        <p class="mt-1 text-sm text-gray-600">Live stream player and media controls</p>
                    </div>
                    <div class="flex space-x-3">
                        <a href="{% url 'streams:channel_detail' channel.id %}" 
                           class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                            <i class="fas fa-arrow-left mr-2"></i>
                            Back to Channel
                        </a>
                        <a href="{% url 'streams:ts_browser' channel.id %}" 
                           class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                            <i class="fas fa-file-video mr-2"></i>
                            TS Files
                        </a>
                        <a href="{% url 'streams:iframe_gallery' channel.id %}" 
                           class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                            <i class="fas fa-images mr-2"></i>
                            I-Frames
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Info Panel -->
    <div class="mb-6">
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
            <div class="flex items-center">
                <i class="fas fa-info-circle text-blue-600 mr-3"></i>
                <div>
                    <h3 class="text-sm font-medium text-blue-800">Live Stream Player</h3>
                    <p class="text-sm text-blue-700">Watch the live stream in real-time with HLS support and playback controls.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Media Player -->
    <div class="bg-white shadow rounded-lg p-6 mb-6">
        <h2 class="text-xl font-semibold mb-4">
            <i class="fas fa-play-circle mr-2 text-blue-600"></i>Live Stream
        </h2>
        
        {% if active_session and hls_url %}
            <video
                id="hls-player"
                class="video-js vjs-default-skin"
                controls
                preload="auto"
                data-setup='{"fluid": true, "responsive": true}'>
                <source src="{{ hls_url }}" type="application/x-mpegURL">
                <p class="vjs-no-js">
                    To view this video please enable JavaScript, and consider upgrading to a web browser that
                    <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>.
                </p>
            </video>
            
            <div class="player-controls">
                <button onclick="refreshPlayer()" class="control-btn btn-primary">
                    <i class="fas fa-sync-alt mr-2"></i>Refresh Stream
                </button>
                <button onclick="toggleFullscreen()" class="control-btn btn-secondary">
                    <i class="fas fa-expand mr-2"></i>Fullscreen
                </button>
                <button onclick="downloadPlaylist()" class="control-btn btn-secondary">
                    <i class="fas fa-download mr-2"></i>Download Playlist
                </button>
            </div>
        {% else %}
            <div class="text-center py-12">
                <i class="fas fa-play-circle text-6xl text-gray-400 mb-4"></i>
                <h3 class="text-xl font-medium text-gray-900 mb-2">No Active Stream</h3>
                <p class="text-gray-600 mb-6">This channel is not currently streaming.</p>
                <a href="{% url 'streams:channel_detail' channel.id %}" class="control-btn btn-primary">
                    <i class="fas fa-play mr-2"></i>Start Stream
                </a>
            </div>
        {% endif %}
    </div>

    <!-- Stream Information -->
    <div class="stream-info">
        <h3 class="text-lg font-semibold mb-3">
            <i class="fas fa-info-circle mr-2 text-blue-600"></i>Stream Information
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700">Status</label>
                <span class="status-badge {% if active_session %}status-streaming{% else %}status-inactive{% endif %}">
                    {% if active_session %}
                        <i class="fas fa-broadcast-tower mr-1"></i>Streaming
                    {% else %}
                        <i class="fas fa-stop-circle mr-1"></i>Stopped
                    {% endif %}
                </span>
            </div>
            {% if active_session %}
            <div>
                <label class="block text-sm font-medium text-gray-700">Started</label>
                <p class="text-sm text-gray-900">{{ active_session.started_at|date:"M d, Y H:i" }}</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Duration</label>
                <p class="text-sm text-gray-900">{{ active_session.duration|default:"--" }}</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Segments</label>
                <p class="text-sm text-gray-900">{{ active_session.segments_processed|default:0 }}</p>
            </div>
            {% endif %}
        </div>
        
        {% if channel.jingle_templates.count > 0 %}
        <div class="mt-4 pt-4 border-t border-gray-200">
            <h4 class="text-sm font-medium text-gray-700 mb-2">
                <i class="fas fa-music mr-1"></i>Jingle Detection
            </h4>
            <p class="text-sm text-gray-600">
                {{ channel.jingle_templates.count }} jingle template{{ channel.jingle_templates.count|pluralize }} configured for ad break detection
            </p>
        </div>
        {% endif %}
    </div>
</div>

<script>
let player;

document.addEventListener('DOMContentLoaded', function() {
    {% if active_session and hls_url %}
    // Initialize Video.js player with HLS support
    player = videojs('hls-player', {
        fluid: true,
        responsive: true,
        html5: {
            hls: {
                enableLowInitialPlaylist: true,
                smoothQualityChange: true,
                overrideNative: true
            }
        }
    });

    // Auto-refresh stream every 30 seconds
    setInterval(function() {
        if (player && !player.paused()) {
            player.load();
        }
    }, 30000);
    {% endif %}
});

function refreshPlayer() {
    if (player) {
        player.load();
        showNotification('Stream refreshed', 'success');
    }
}

function toggleFullscreen() {
    if (player) {
        if (player.isFullscreen()) {
            player.exitFullscreen();
        } else {
            player.requestFullscreen();
        }
    }
}

function downloadPlaylist() {
    {% if hls_url %}
    window.open('{{ hls_url }}', '_blank');
    {% endif %}
}

function showNotification(message, type = 'info') {
    // Simple notification system
    const notification = document.createElement('div');
    notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 ${
        type === 'success' ? 'bg-green-500' : 
        type === 'error' ? 'bg-red-500' : 'bg-blue-500'
    } text-white`;
    notification.textContent = message;
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.remove();
    }, 3000);
}
</script>
{% endblock %}