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

{% block title %}{{ channel.name }} - TS File Browser - Stream Processor{% endblock %}

{% block extra_css %}
<style>
    .file-browser {
        @apply bg-white rounded-lg shadow-lg p-6;
    }
    .file-item {
        @apply flex items-center justify-between p-4 border-b border-gray-100 hover:bg-gray-50 transition-colors;
    }
    .file-info {
        @apply flex items-center space-x-4;
    }
    .file-icon {
        @apply w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center;
    }
    .file-actions {
        @apply flex space-x-2;
    }
    .action-btn {
        @apply px-3 py-1 text-sm rounded-md font-medium transition-colors;
    }
    .btn-play {
        @apply bg-green-100 text-green-700 hover:bg-green-200;
    }
    .btn-download {
        @apply bg-blue-100 text-blue-700 hover:bg-blue-200;
    }
    .video-modal {
        @apply fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden;
    }
    .video-container {
        @apply bg-white rounded-lg p-6 max-w-4xl w-full mx-4;
    }
</style>
{% endblock %}

{% block page_title %}
    <div class="flex items-center">
        <i class="fas fa-file-video mr-3 text-primary-600"></i>
        {{ channel.name }} - TS Browser
    </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">Browse and manage TS segment files</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:hls_player' 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-play mr-2"></i>
                            Live Player
                        </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">TS File Browser</h3>
                    <p class="text-sm text-blue-700">Browse, preview, and download TS segment files from the stream.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- File Browser -->
    <div class="bg-white shadow rounded-lg p-6">
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-xl font-semibold">
                <i class="fas fa-file-video mr-2 text-blue-600"></i>TS Segment Files
            </h2>
            <div class="text-sm text-gray-600">
                <i class="fas fa-info-circle mr-1"></i>{{ ts_files|length }} files found
            </div>
        </div>

        {% if ts_files %}
            <div class="space-y-0">
                {% for file in ts_files %}
                <div class="file-item">
                    <div class="file-info">
                        <div class="file-icon">
                            <i class="fas fa-file-video text-blue-600"></i>
                        </div>
                        <div>
                            <h3 class="font-medium text-gray-900">{{ file.name }}</h3>
                            <p class="text-sm text-gray-600">
                                Size: {{ file.size|filesizeformat }}
                            </p>
                        </div>
                    </div>
                    <div class="file-actions">
                        <button onclick="playTSFile('{{ file.name }}')" class="action-btn btn-play">
                            <i class="fas fa-play mr-1"></i>Play
                        </button>
                        <button onclick="downloadFile('{{ file.name }}')" class="action-btn btn-download">
                            <i class="fas fa-download mr-1"></i>Download
                        </button>
                    </div>
                </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="text-center py-12">
                <i class="fas fa-file-video text-6xl text-gray-400 mb-4"></i>
                <h3 class="text-xl font-medium text-gray-900 mb-2">No TS Files Found</h3>
                <p class="text-gray-600">Start streaming to generate TS segment files.</p>
            </div>
        {% endif %}
    </div>
</div>

<!-- Video Modal -->
<div id="video-modal" class="video-modal">
    <div class="video-container">
        <div class="flex justify-between items-center mb-4">
            <h3 id="modal-title" class="text-lg font-semibold">Playing TS File</h3>
            <button onclick="closeVideoModal()" class="text-gray-500 hover:text-gray-700">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        <video
            id="ts-player"
            class="w-full h-64 bg-black rounded-lg"
            controls
            preload="metadata">
        </video>
        <div class="mt-4 text-sm text-gray-600">
            <p><i class="fas fa-info-circle mr-1"></i>This is a raw TS segment file from the HLS stream.</p>
        </div>
    </div>
</div>

<script>
function playTSFile(filename) {
    const modal = document.getElementById('video-modal');
    const player = document.getElementById('ts-player');
    const title = document.getElementById('modal-title');
    
    // Set video source
    const videoUrl = `/streams/media/{{ channel.slug }}/hls/${filename}`;
    player.src = videoUrl;
    
    // Update modal title
    title.textContent = `Playing: ${filename}`;
    
    // Show modal
    modal.classList.remove('hidden');
    
    // Auto-play
    player.play().catch(e => {
        console.log('Auto-play prevented:', e);
    });
}

function closeVideoModal() {
    const modal = document.getElementById('video-modal');
    const player = document.getElementById('ts-player');
    
    // Stop video and clear source
    player.pause();
    player.src = '';
    
    // Hide modal
    modal.classList.add('hidden');
}

function downloadFile(filename) {
    const downloadUrl = `/streams/media/{{ channel.slug }}/hls/${filename}`;
    const link = document.createElement('a');
    link.href = downloadUrl;
    link.download = filename;
    link.click();
}

// Close modal when clicking outside
document.getElementById('video-modal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeVideoModal();
    }
});

// Auto-refresh file list every 10 seconds
setInterval(function() {
    location.reload();
}, 10000);
</script>
{% endblock %}