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

{% block title %}{{ session.channel.name }} Session - Stream Processor{% endblock %}

{% block page_title %}
<i class="fas fa-play-circle text-blue-600 mr-2"></i>
Session Details
{% endblock %}

{% block extra_css %}
<style>
    .status-badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }
    .status-running {
        @apply bg-green-100 text-green-800;
    }
    .status-stopped {
        @apply bg-red-100 text-red-800;
    }
    .status-error {
        @apply bg-yellow-100 text-yellow-800;
    }
    .info-card {
        @apply bg-white overflow-hidden shadow-lg rounded-lg border border-gray-200;
    }
    .info-card-header {
        @apply px-6 py-4 border-b border-gray-200 bg-gray-50;
    }
    .info-card-body {
        @apply px-6 py-6;
    }
    .metric-card {
        @apply bg-white shadow rounded-lg p-6 border border-gray-200;
    }
</style>
{% endblock %}

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

    function confirmDeleteSession() {
        Swal.fire({
            title: 'Delete Session?',
            text: 'Are you sure you want to delete this session? This will also delete all associated segments!',
            icon: 'error',
            showCancelButton: true,
            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#6b7280',
            confirmButtonText: '<i class="fas fa-trash mr-2"></i>Yes, Delete',
            cancelButtonText: '<i class="fas fa-times mr-2"></i>Cancel',
            input: 'text',
            inputPlaceholder: 'Type "DELETE" to confirm',
            inputValidator: (value) => {
                if (value !== 'DELETE') {
                    return 'You must type "DELETE" to confirm deletion';
                }
            }
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({
                    title: 'Deleting...',
                    text: 'Please wait while the session is being deleted.',
                    icon: 'info',
                    allowOutsideClick: false,
                    showConfirmButton: false
                });
                document.getElementById('delete-session-form').submit();
            }
        });
    }
</script>
{% endblock %}

{% block content %}
<!-- Hidden forms for HTMX actions -->
{% if session.is_running %}
<form id="stop-session-form" method="post" action="{% url 'streams:session_stop' session.id %}" style="display: none;">
    {% csrf_token %}
</form>
{% else %}
<form id="delete-session-form" method="post" action="{% url 'streams:session_delete' session.id %}" style="display: none;">
    {% csrf_token %}
</form>
{% endif %}

<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
    <!-- Header -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <a href="{% url 'streams:session_list' %}" 
                   class="mr-4 text-gray-400 hover:text-gray-600">
                    <i class="fas fa-arrow-left text-xl"></i>
                </a>
                <div>
                    <h1 class="text-3xl font-bold text-gray-900 flex items-center">
                        <i class="fas fa-video mr-3 text-blue-600"></i>
                        {{ session.channel.name }} Session
                        {% if session.is_running %}
                            <span class="status-badge status-running ml-3">
                                <i class="fas fa-circle mr-1"></i>
                                Running
                            </span>
                        {% else %}
                            <span class="status-badge status-stopped ml-3">
                                <i class="fas fa-circle mr-1"></i>
                                Stopped
                            </span>
                        {% endif %}
                    </h1>
                    <p class="mt-2 text-gray-600">
                        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 %}
                    </p>
                </div>
            </div>
            <div class="flex space-x-3">
                <a href="{% url 'streams:channel_detail' session.channel.pk %}" 
                   class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                    <i class="fas fa-tv mr-2"></i>
                    View Channel
                </a>
                {% if session.is_running %}
                    <button onclick="confirmStopSession()" 
                            class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700">
                        <i class="fas fa-stop mr-2"></i>
                        Stop Session
                    </button>
                {% else %}
                    <button onclick="confirmDeleteSession()" 
                            class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700">
                        <i class="fas fa-trash mr-2"></i>
                        Delete Session
                    </button>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Main Content -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Session Information -->
            <div class="info-card">
                <div class="info-card-header">
                    <h3 class="text-lg font-medium text-gray-900">
                        <i class="fas fa-info-circle mr-2 text-blue-600"></i>
                        Session Information
                    </h3>
                </div>
                <div class="info-card-body">
                    <dl class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Session ID</dt>
                            <dd class="mt-1 text-sm text-gray-900 font-mono">{{ session.id|truncatechars:8 }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Channel</dt>
                            <dd class="mt-1 text-sm text-gray-900">
                                <a href="{% url 'streams:channel_detail' session.channel.pk %}" 
                                   class="text-blue-600 hover:text-blue-800">
                                    {{ session.channel.name }}
                                </a>
                            </dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Started</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ session.started_at|date:"M d, Y H:i:s" }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Status</dt>
                            <dd class="mt-1 text-sm text-gray-900">
                                {% if session.is_running %}
                                    <span class="text-green-600 font-medium">Running</span>
                                {% else %}
                                    <span class="text-red-600 font-medium">Stopped</span>
                                {% endif %}
                            </dd>
                        </div>
                        {% if session.ended_at %}
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Ended</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{ session.ended_at|date:"M d, Y H:i:s" }}</dd>
                            </div>
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Duration</dt>
                                <dd class="mt-1 text-sm text-gray-900">
                                    {% if total_duration %}
                                        {{ total_duration|floatformat:1 }} seconds
                                    {% else %}
                                        -
                                    {% endif %}
                                </dd>
                            </div>
                        {% endif %}
                        {% if session.error_message %}
                            <div class="md:col-span-2">
                                <dt class="text-sm font-medium text-gray-500">Error Message</dt>
                                <dd class="mt-1 text-sm text-red-600 bg-red-50 p-2 rounded">{{ session.error_message }}</dd>
                            </div>
                        {% endif %}
                    </dl>
                </div>
            </div>

            <!-- Recent Segments -->
            <div class="info-card">
                <div class="info-card-header">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-medium text-gray-900">
                            <i class="fas fa-film mr-2 text-purple-600"></i>
                            Recent Segments
                        </h3>
                        <span class="text-sm text-gray-500">
                            {{ total_segments }} total segments
                        </span>
                    </div>
                </div>
                <div class="info-card-body">
                    {% if recent_segments %}
                        <div class="space-y-3">
                            {% for segment in recent_segments %}
                                <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
                                    <div class="flex items-center space-x-4">
                                        <div class="flex-shrink-0">
                                            {% if segment.is_available %}
                                                <i class="fas fa-check-circle text-green-600"></i>
                                            {% else %}
                                                <i class="fas fa-clock text-yellow-600"></i>
                                            {% endif %}
                                        </div>
                                        <div>
                                            <div class="text-sm font-medium text-gray-900">
                                                Segment #{{ segment.sequence_number }}
                                            </div>
                                            <div class="text-sm text-gray-500">
                                                {% if segment.duration %}
                                                    {{ segment.duration|floatformat:1 }}s
                                                {% endif %}
                                                {% if segment.file_size %}
                                                    • {{ segment.file_size|filesizeformat }}
                                                {% endif %}
                                                • {{ segment.processed_at|date:"H:i:s" }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        {% if segment.is_available %}
                                            <span class="text-xs text-green-600 bg-green-100 px-2 py-1 rounded">Available</span>
                                        {% else %}
                                            <span class="text-xs text-yellow-600 bg-yellow-100 px-2 py-1 rounded">Processing</span>
                                        {% endif %}
                                        {% if segment.file_path %}
                                            <a href="{{ MEDIA_URL }}{{ segment.file_path }}" 
                                               target="_blank"
                                               class="text-blue-600 hover:text-blue-800">
                                                <i class="fas fa-download"></i>
                                            </a>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center py-6">
                            <i class="fas fa-film text-3xl text-gray-400 mb-2"></i>
                            <p class="text-gray-500">No segments found for this session</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Session Statistics -->
            <div class="info-card">
                <div class="info-card-header">
                    <h3 class="text-lg font-medium text-gray-900">
                        <i class="fas fa-chart-bar mr-2 text-green-600"></i>
                        Statistics
                    </h3>
                </div>
                <div class="info-card-body">
                    <dl class="space-y-3">
                        <div class="flex justify-between">
                            <dt class="text-sm font-medium text-gray-500">Total Segments</dt>
                            <dd class="text-sm text-gray-900">{{ total_segments|default:0 }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm font-medium text-gray-500">Available Segments</dt>
                            <dd class="text-sm text-gray-900">{{ available_segments|default:0 }}</dd>
                        </div>
                        {% if total_duration %}
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500">Total Duration</dt>
                                <dd class="text-sm text-gray-900">{{ total_duration|floatformat:1 }}s</dd>
                            </div>
                        {% endif %}
                        {% if total_size %}
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500">Total Size</dt>
                                <dd class="text-sm text-gray-900">{{ total_size|filesizeformat }}</dd>
                            </div>
                        {% endif %}
                        <div class="flex justify-between">
                            <dt class="text-sm font-medium text-gray-500">Session Status</dt>
                            <dd class="text-sm text-gray-900">
                                {% if session.is_running %}
                                    <span class="text-green-600">Active</span>
                                {% else %}
                                    <span class="text-red-600">Inactive</span>
                                {% endif %}
                            </dd>
                        </div>
                    </dl>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="info-card">
                <div class="info-card-header">
                    <h3 class="text-lg font-medium text-gray-900">
                        <i class="fas fa-bolt mr-2 text-yellow-600"></i>
                        Quick Actions
                    </h3>
                </div>
                <div class="info-card-body">
                    <div class="space-y-3">
                        <a href="{% url 'streams:channel_detail' session.channel.pk %}" 
                           class="w-full inline-flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                            <i class="fas fa-tv mr-2"></i>
                            View Channel
                        </a>
                        
                        {% if session.is_running %}
                            <button onclick="confirmStopSession()" 
                                    class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700">
                                <i class="fas fa-stop mr-2"></i>
                                Stop Session
                            </button>
                        {% endif %}
                        
                        <button class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">
                            <i class="fas fa-download mr-2"></i>
                            Download All Segments
                        </button>
                        
                        <button class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700">
                            <i class="fas fa-play mr-2"></i>
                            Generate Playlist
                        </button>
                        
                        {% if not session.is_running %}
                            <button onclick="confirmDeleteSession()" 
                                    class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700">
                                <i class="fas fa-trash mr-2"></i>
                                Delete Session
                            </button>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Channel Information -->
            <div class="info-card">
                <div class="info-card-header">
                    <h3 class="text-lg font-medium text-gray-900">
                        <i class="fas fa-tv mr-2 text-indigo-600"></i>
                        Channel Info
                    </h3>
                </div>
                <div class="info-card-body">
                    <dl class="space-y-3">
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Channel Name</dt>
                            <dd class="text-sm text-gray-900">{{ session.channel.name }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Stream URL</dt>
                            <dd class="text-sm text-gray-900 font-mono break-all">{{ session.channel.stream_url|truncatechars:30 }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Output Directory</dt>
                            <dd class="text-sm text-gray-900 font-mono">{{ session.channel.output_directory }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Channel Status</dt>
                            <dd class="text-sm text-gray-900">
                                {% if session.channel.is_active %}
                                    <span class="text-green-600">Active</span>
                                {% else %}
                                    <span class="text-gray-600">Inactive</span>
                                {% endif %}
                            </dd>
                        </div>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}