{% extends "base.html" %}

{% block content %}
<div class="px-4 sm:px-0 max-w-7xl mx-auto">
    <div class="mb-8">
        <h1 class="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-400 via-sky-400 to-cyan-400 mb-2 tracking-tight">Encoder Dashboard</h1>
        <p class="text-gray-300 text-lg">Monitor your video and audio encoding jobs</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Video Encoder Column -->
        <div class="bg-gray-900 rounded-2xl modern-shadow p-8 transition-all hover:scale-[1.01]">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-2xl font-bold text-white flex items-center">
                    <svg class="w-7 h-7 mr-2 text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                    </svg>
                    Video Encoder
                </h2>
                <a href="{{ url_for('reports', encoder_type='video') }}" class="text-sky-400 hover:text-white text-base font-semibold transition-all">View Reports</a>
            </div>

            <!-- Current Job Status -->
            <div class="mb-6">
                <h3 class="text-lg font-semibold text-white mb-3">Current Job</h3>
                <div class="bg-gray-800 rounded-xl p-4">
                    <div id="video-status">
                        {% if current_video_job %}
                            <div class="flex items-center space-x-2">
                                <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
                                <span class="text-sm">Processing: {{ current_video_job.file_path.split('/')[-1] }}</span>
                                <span class="text-xs text-gray-400">({{ current_video_job_duration|format_duration }})</span>
                            </div>
                        {% else %}
                            <div class="flex items-center space-x-2">
                                <div class="w-3 h-3 bg-gray-500 rounded-full"></div>
                                <span class="text-sm">Idle</span>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Queue -->
            <div class="mb-6">
                <h3 class="text-lg font-semibold text-white mb-3">
                    Queue (<span id="video-queue-length">{{ video_queue_length }}</span>)
                </h3>
                <div class="bg-gray-800 rounded-xl p-4 max-h-64 overflow-y-auto">
                    <div id="video-queue-container">
                        {% if video_queue %}
                            <div class="space-y-2">
                                {% for file_path in video_queue %}
                                    <div class="flex items-center space-x-2 text-sm">
                                        <div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
                                        <span class="text-gray-300">{{ file_path.split('/')[-1] }}</span>
                                    </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <p class="text-gray-400 text-sm">No files in queue</p>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Statistics -->
            <div class="grid grid-cols-2 gap-4">
                <div class="bg-gray-800 rounded-xl p-4 flex flex-col items-center">
                    <div id="video-total-jobs" class="text-3xl font-extrabold text-sky-400">{{ video_stats.total_jobs or 0 }}</div>
                    <div class="text-base text-gray-400">Total Jobs</div>
                </div>
                <div class="bg-gray-800 rounded-xl p-4 flex flex-col items-center">
                    <div id="video-total-saved" class="text-3xl font-extrabold text-green-400">{{ video_stats.total_saved|format_bytes }}</div>
                    <div class="text-base text-gray-400">Space Saved</div>
                </div>
            </div>
        </div>

        <!-- Audio Encoder Column -->
        <div class="bg-gray-900 rounded-2xl modern-shadow p-8 transition-all hover:scale-[1.01]">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-2xl font-bold text-white flex items-center">
                    <svg class="w-7 h-7 mr-2 text-fuchsia-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
                    </svg>
                    Audio Encoder
                </h2>
                <a href="{{ url_for('reports', encoder_type='audio') }}" class="text-fuchsia-400 hover:text-white text-base font-semibold transition-all">View Reports</a>
            </div>

            <!-- Current Job Status -->
            <div class="mb-6">
                <h3 class="text-lg font-semibold text-white mb-3">Current Job</h3>
                <div class="bg-gray-800 rounded-xl p-4">
                    <div id="audio-status">
                        {% if current_audio_job %}
                            <div class="flex items-center space-x-2">
                                <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
                                <span class="text-sm">Processing: {{ current_audio_job.file_path.split('/')[-1] }}</span>
                                <span class="text-xs text-gray-400">({{ current_audio_job_duration|format_duration }})</span>
                            </div>
                        {% else %}
                            <div class="flex items-center space-x-2">
                                <div class="w-3 h-3 bg-gray-500 rounded-full"></div>
                                <span class="text-sm">Idle</span>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Queue -->
            <div class="mb-6">
                <h3 class="text-lg font-semibold text-white mb-3">
                    Queue (<span id="audio-queue-length">{{ audio_queue_length }}</span>)
                </h3>
                <div class="bg-gray-800 rounded-xl p-4 max-h-64 overflow-y-auto">
                    <div id="audio-queue-container">
                        {% if audio_queue %}
                            <div class="space-y-2">
                                {% for file_path in audio_queue %}
                                    <div class="flex items-center space-x-2 text-sm">
                                        <div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
                                        <span class="text-gray-300">{{ file_path.split('/')[-1] }}</span>
                                    </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <p class="text-gray-400 text-sm">No files in queue</p>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Statistics -->
            <div class="grid grid-cols-2 gap-4">
                <div class="bg-gray-800 rounded-xl p-4 flex flex-col items-center">
                    <div id="audio-total-jobs" class="text-3xl font-extrabold text-fuchsia-400">{{ audio_stats.total_jobs or 0 }}</div>
                    <div class="text-base text-gray-400">Total Jobs</div>
                </div>
                <div class="bg-gray-800 rounded-xl p-4 flex flex-col items-center">
                    <div id="audio-total-saved" class="text-3xl font-extrabold text-green-400">{{ audio_stats.total_saved|format_bytes }}</div>
                    <div class="text-base text-gray-400">Space Saved</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Overall Statistics -->
    <div class="mt-8 bg-gradient-to-r from-fuchsia-900 via-gray-900 to-sky-900 rounded-2xl modern-shadow p-8">
        <h2 class="text-2xl font-bold text-white mb-4">Overall Statistics</h2>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="bg-gray-800 rounded-xl p-4 text-center">
                <div id="overall-total-jobs" class="text-3xl font-extrabold text-sky-400">{{ (video_stats.total_jobs or 0) + (audio_stats.total_jobs or 0) }}</div>
                <div class="text-base text-gray-400">Total Jobs Processed</div>
            </div>
            <div class="bg-gray-800 rounded-xl p-4 text-center">
                <div id="overall-total-saved" class="text-3xl font-extrabold text-green-400">{{ ((video_stats.total_saved or 0) + (audio_stats.total_saved or 0))|format_bytes }}</div>
                <div class="text-base text-gray-400">Total Space Saved</div>
            </div>
            <div class="bg-gray-800 rounded-xl p-4 text-center">
                <div id="overall-original-size" class="text-3xl font-extrabold text-yellow-400">{{ ((video_stats.total_original_size or 0) + (audio_stats.total_original_size or 0))|format_bytes }}</div>
                <div class="text-base text-gray-400">Original Size</div>
            </div>
            <div class="bg-gray-800 rounded-xl p-4 text-center">
                <div id="overall-encoded-size" class="text-3xl font-extrabold text-fuchsia-400">{{ ((video_stats.total_encoded_size or 0) + (audio_stats.total_encoded_size or 0))|format_bytes }}</div>
                <div class="text-base text-gray-400">Encoded Size</div>
            </div>
        </div>
    </div>
</div>
{% endblock %}