{% extends "base.html" %}
{% block content %}
<link rel="stylesheet" href="{{ url_for('.static', filename='css/mobile_custom.css') }}"/>
<link rel="stylesheet" href="{{ url_for('.static', filename='css/' ~ arg['sub'] ~ '.css') }}"/>


<div class="queue-container content-cloak ohli24-queue-page">
    <!-- 헤더 버튼 그룹 -->
    <div class="queue-header">
        <div class="header-title">
            <i class="fa fa-download"></i>
            <span>다운로드 큐</span>
            <span class="queue-count" id="queue_count">0</span>
        </div>
        <div class="header-buttons">
            <button id="reset_btn" class="queue-btn queue-btn-danger">
                <i class="fa fa-refresh"></i> 초기화
            </button>
            <button id="delete_completed_btn" class="queue-btn queue-btn-warning">
                <i class="fa fa-trash"></i> 완료 삭제
            </button>
            <button id="go_ffmpeg_btn" class="queue-btn queue-btn-info">
                <i class="fa fa-external-link"></i> FFMPEG
            </button>
        </div>
    </div>
    
    <!-- 다운로드 목록 -->
    <div id="download_list_div" class="queue-list"></div>
    
    <!-- 빈 상태 표시 -->
    <div id="empty_state" class="empty-state" style="display: none;">
        <i class="fa fa-inbox"></i>
        <p>다운로드 대기 중인 항목이 없습니다</p>
    </div>
</div>

<style>
    /* Queue specific tweaks */
    #download_list_div { display: flex; flex-direction: column; gap: 10px; width: 100%; }
    .queue-item { margin-bottom: 5px; }
    @media (max-width: 768px) {
        .queue-item { padding: 10px; }
        .item-info { flex: 1; }
        .progress-wrapper { height: 24px; border-radius: 12px; }
        .progress-label { font-size: 11px; }
    }
</style>

<script src="{{ url_for('.static', filename='js/sjva_ui14.js') }}"></script>
<script type="text/javascript">
    var package_name = "{{arg['package_name'] }}";
    var sub = "{{arg['sub'] }}";
    var current_data = null;

    $(document).ready(function () {
        var socket = io.connect(window.location.href);
        socket.on('on_start', (data) => {})
        socket.on('start', function (data) {
            on_start();
        });
        socket.on('list_refresh', function (data) {
            on_start()
        });
        socket.on('status', function (data) {
            on_status(data)
        });

        on_start();
        var refreshIntervalId = setInterval(silentRefresh, 3000);
    });

    var current_list_length = 0;
    var refreshIntervalId = null;

    function silentRefresh() {
        $.ajax({
            url: '/' + package_name + '/ajax/' + sub + '/entity_list',
            type: "POST",
            cache: false,
            global: false,
            data: {},
            dataType: "json",
            success: function (data) {
                if (data.length !== current_list_length) {
                    current_list_length = data.length;
                    make_download_list(data);
                }
                
                var hasActive = false;
                for (var i = 0; i < data.length; i++) {
                    if (data[i].ffmpeg_status_kor === '다운로드중' || data[i].ffmpeg_status_kor === '대기중') {
                        hasActive = true;
                        break;
                    }
                }
                
                if (!hasActive && refreshIntervalId) {
                    clearInterval(refreshIntervalId);
                    refreshIntervalId = null;
                }
                if (hasActive && !refreshIntervalId) {
                    refreshIntervalId = setInterval(silentRefresh, 3000);
                }
            }
        });
    }

    function on_start() {
        $.ajax({
            url: '/' + package_name + '/ajax/' + sub + '/entity_list',
            type: "POST",
            cache: false,
            data: {},
            dataType: "json",
            success: function (data) {
                current_list_length = data.length;
                make_download_list(data)
            }
        });
    }

    function on_status(data) {
        var entity_id = data.entity_id;
        var percent = data.ffmpeg_percent;
        var status_kor = data.ffmpeg_status_kor;
        var speed = data.current_speed;
        
        var progressBar = document.getElementById("progress_" + entity_id);
        if (progressBar != null) {
            progressBar.style.width = percent + '%';
            var label = status_kor;
            if (percent != 0) label += " (" + percent + "%)";
            if (speed) label += " " + speed;
            document.getElementById("progress_" + entity_id + "_label").innerHTML = label;
        }
    }

    function getStatusClass(status) {
        if (status === '다운로드중') return 'status-downloading';
        if (status === '완료' || status === 'completed') return 'status-completed';
        if (status === '실패' || status === 'FAILED') return 'status-failed';
        return 'status-waiting';
    }

    function make_download_list(data) {
        document.getElementById('queue_count').textContent = data.length;
        
        if (data.length === 0) {
            document.getElementById('download_list_div').style.display = 'none';
            document.getElementById('empty_state').style.display = 'flex';
            return;
        }
        
        document.getElementById('download_list_div').style.display = 'flex';
        document.getElementById('empty_state').style.display = 'none';
        
        var str = '';
        for (var i in data) {
            var item = data[i];
            var statusClass = getStatusClass(item.ffmpeg_status_kor);
            var label = item.ffmpeg_status_kor;
            if (item.ffmpeg_percent != 0) {
                label += ' (' + item.ffmpeg_percent + '%)';
            }
            
            str += '<div class="queue-item">';
            str += '<div class="item-number">#' + item.entity_id + '</div>';
            str += '<div class="item-info">';
            str += '<div class="item-filename">' + (item.filename || '파일명 없음') + '</div>';
            str += '<div class="item-meta">';
            str += '<span class="item-time"><i class="fa fa-clock-o"></i> ' + item.created_time + '</span>';
            str += '</div>';
            str += '</div>';
            str += '<div class="progress-container">';
            str += '<div class="progress-wrapper">';
            str += '<div id="progress_' + item.entity_id + '" class="progress-bar ' + statusClass + '" style="width: ' + item.ffmpeg_percent + '%;"></div>';
            str += '<span id="progress_' + item.entity_id + '_label" class="progress-label">' + label + '</span>';
            str += '</div>';
            str += '</div>';
            str += '<div class="item-actions">';
            str += '<button class="cancel-btn" data-id="' + item.entity_id + '" onclick="cancelItem(' + item.entity_id + ')"><i class="fa fa-times"></i> 취소</button>';
            str += '</div>';
            str += '</div>';
        }
        document.getElementById("download_list_div").innerHTML = str;
    }

    function cancelItem(entity_id) {
        queue_command({'command': 'cancel', 'entity_id': entity_id});
    }

    $("body").on('click', '#reset_btn', function (e) {
        e.preventDefault();
        if (!confirm('정말 큐를 초기화하시겠습니까?')) return;
        queue_command({'command': 'reset', 'entity_id': -1});
    });

    $("body").on('click', '#delete_completed_btn', function (e) {
        e.preventDefault();
        queue_command({'command': 'delete_completed', 'entity_id': -1});
    });

    function queue_command(data) {
        $.ajax({
            url: '/' + package_name + '/ajax/' + sub + '/queue_command',
            type: "POST",
            cache: false,
            data: data,
            dataType: "json",
            success: function (ret) {
                if (ret.ret == 'notify') {
                    $.notify('<strong>' + ret.log + '</strong>', {type: 'warning'});
                }
                on_start();
            }
        });
    }

    $("body").on('click', '#go_ffmpeg_btn', function (e) {
        e.preventDefault();
        $(location).attr('href', '/ffmpeg')
    });
</script>

</script>

{% endblock %}