{% 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') }}"/>

<style>
    .queue-header-container {
        display: flex; justify-content: space-between; align-items: flex-end;
        margin-bottom: 20px; border-bottom: 1px solid rgba(16, 185, 129, 0.2); padding-bottom: 10px;
    }
    .queue-title { color: var(--forest-accent); font-weight: 700; margin: 0; }
    .queue-meta { font-size: 12px; color: #6ee7b7; opacity: 0.6; }

    .custom-queue-table {
        background: rgba(6, 78, 59, 0.2); border-collapse: separate; border-spacing: 0 4px; color: #ecfdf5;
    }
    .custom-queue-table thead th {
        background: rgba(2, 44, 34, 0.8) !important; color: #6ee7b7; font-size: 13px;
        text-transform: uppercase; border: none !important; padding: 12px 8px !important;
        text-align: center;
    }
    .custom-queue-table tbody tr {
        background: rgba(6, 78, 59, 0.3); transition: all 0.2s;
    }
    .custom-queue-table tbody tr:hover { background: rgba(6, 78, 59, 0.5) !important; }
    .custom-queue-table td { border: none !important; vertical-align: middle !important; padding: 14px 8px !important; }

    /* Badges & Status */
    .badge-status {
        padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700;
        display: inline-block; min-width: 60px; text-align: center;
    }
    .status-downloading { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
    .status-wait { background: rgba(251, 191, 36, 0.1); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.2); }
    .status-completed { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
    .status-fail { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }

    /* Progress Bar */
    .custom-progress { height: 18px; background: rgba(0,0,0,0.4); border-radius: 9px; overflow: hidden; border: 1px solid rgba(16, 185, 129, 0.1); }
    .custom-progress .progress-bar {
        background: linear-gradient(90deg, #10b981, #059669) !important;
        font-weight: 700; font-size: 11px;
        transition: width 0.4s ease-out;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    }

    /* Action Buttons */
    .action-btn-mini {
        width: 32px; height: 32px; border-radius: 8px; border: none; font-size: 14px;
        display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s;
    }
    .action-btn-mini.btn-danger { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
    .action-btn-mini.btn-danger:hover { background: #ef4444; color: white; transform: scale(1.1); }
    .action-btn-mini.btn-warning { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
    .action-btn-mini.btn-warning:hover { background: #f59e0b; color: white; transform: scale(1.1); }
    
    .action-btn-group { display: flex; justify-content: center; gap: 4px; }

    .header-buttons { display: flex; gap: 10px; align-items: center; }
    .queue-btn-top {
        display: flex; align-items: center; gap: 6px; padding: 6px 14px;
        border: none; border-radius: 8px; font-weight: 600; font-size: 13px;
        cursor: pointer; transition: all 0.3s ease;
    }
    .queue-btn-top.btn-danger { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
    .queue-btn-top.btn-danger:hover { background: #ef4444; color: white; box-shadow: 0 0 15px rgba(239, 68, 68, 0.4); }
    .queue-btn-top.btn-warning { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
    .queue-btn-top.btn-warning:hover { background: #f59e0b; color: white; box-shadow: 0 0 15px rgba(245, 158, 11, 0.4); }

    /* Details */
    .queue-detail-container { color: #d1fae5; font-size: 13px; }
    .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 20px; }
    .detail-item { display: flex; gap: 10px; align-items: flex-start; }
    .detail-item .label { color: #6ee7b7; font-weight: 700; min-width: 100px; opacity: 0.7; font-size: 11px; text-transform: uppercase; }
    .detail-item .value { color: #ecfdf5; word-break: break-all; }

    /* Smooth Load */
    .content-cloak { opacity: 0; transition: opacity 0.5s ease-out; }
    .content-cloak.visible { opacity: 1; }
</style>

<div class="content-cloak">
    <div class="queue-header-container">
        <h4 class="queue-title"><i class="fa fa-download"></i> 다운로드 큐</h4>
        <div class="header-buttons">
            <button id="reset_btn" class="queue-btn-top btn-danger">
                <i class="fa fa-refresh"></i> 초기화
            </button>
            <button id="delete_completed_btn" class="queue-btn-top btn-warning">
                <i class="fa fa-trash"></i> 완료 삭제
            </button>
        </div>
        <div class="queue-meta">실시간 동기화 활성화됨 (3초 주기)</div>
    </div>

    <div class="table-responsive-custom">
        <table id="result_table" class="table custom-queue-table tableRowHover">
            <thead>
                <tr>
                    <th style="width:5%;">IDX</th>
                    <th style="width:8%;">Plugin</th>
                    <th style="width:10%;">시작시간</th>
                    <th style="width:25%;">파일명</th>
                    <th style="width:8%;">상태</th>
                    <th style="width:18%;">진행률</th>
                    <th style="width:6%;">길이</th>
                    <th style="width:5%;">PF</th>
                    <th style="width:10%;">현재 상태</th>
                    <th style="width:5%;">Action</th>
                </tr>
            </thead>
            <tbody id="list"></tbody>
        </table>
    </div>
</div>

<script type="text/javascript">
    var PACKAGE_NAME = "{{ arg['package_name'] }}";
    var MODULE_NAME = "{{ arg['module_name'] }}";
    var current_list_length = 0;

$(document).ready(function(){
    $(".content-cloak").addClass("visible");
    
    var protocol = location.protocol;
    var socketUrl = protocol + "//" + document.domain + ":" + location.port;
    
    // Queue 전용 소켓 시도
    var queueSocket = null;
    try {
        queueSocket = io.connect(socketUrl + '/anime_downloader/linkkf/queue');
    } catch (e) {
        console.error('Queue socket error:', e);
    }
    
    var frameworkSocket = null;
    try {
        frameworkSocket = io.connect(socketUrl + '/framework');
        frameworkSocket.on('linkkf_status', function(data) {
            status_html(data);
        });
    } catch (e) {
        console.error('Framework socket error:', e);
    }
    
    var socket = queueSocket;
    if (socket) {
        socket.on('status_change', function(data) { button_html(data); });
        socket.on('status', function(data){ status_html(data); });
        socket.on('last', function(data){ status_html(data); button_html(data); });
    }

    on_start();
    refreshIntervalId = setInterval(autoRefreshList, 3000);
});

var refreshIntervalId = null;

function silentFetchList(callback) {
    $.ajax({
        url: '/' + PACKAGE_NAME + '/ajax/' + MODULE_NAME + '/command',
        type: 'POST',
        cache: false,
        global: false,
        data: {command: 'list'},
        dataType: 'json',
        success: function(data) { if (callback) callback(data); }
    });
}

function autoRefreshList() {
    silentFetchList(function(data) {
        if (data.length !== current_list_length) {
            current_list_length = data.length;
            renderList(data);
        }
        
        var hasActiveDownload = false;
        if (data && data.length > 0) {
            for (var j = 0; j < data.length; j++) {
                if (data[j].status_str === 'DOWNLOADING' || data[j].status_str === 'WAITING' || data[j].status_str === 'STARTED') {
                    hasActiveDownload = true;
                    break;
                }
            }
        }
        
        if (!hasActiveDownload && refreshIntervalId) {
            clearInterval(refreshIntervalId);
            refreshIntervalId = null;
        }
        if (hasActiveDownload && !refreshIntervalId) {
            refreshIntervalId = setInterval(autoRefreshList, 3000);
        }
    });
}

function on_start() {
    silentFetchList(function(data) {
        current_list_length = data.length;
        renderList(data);
    });
}

function renderList(data) {
    $("#list").html('');
    if (!data || data.length == 0) {
        $("#list").html("<tr><td colspan='10' style='text-align:center; padding: 40px; color: #6ee7b7;'>다운로드 대기 중인 작업이 없습니다.</td></tr>");
    } else {
        var str = '';
        for(var i in data) {
            str += make_item(data[i]);
        }
        $("#list").html(str);
    }
}

$("body").on('click', '#stop_btn', function(e){
    e.stopPropagation(); e.preventDefault();
    globalSendCommand('stop', $(this).data('idx'), null, null, function(ret){
        refresh_item(ret.data);
    });
});

$("body").on('click', '#reset_btn', function(e){
    e.preventDefault();
    globalConfirmModal('초기화 하시겠습니까?', function(){
        globalSendCommand('reset', null, null, null, function(ret){
            autoRefreshList();
        });
    });
});

$("body").on('click', '#delete_completed_btn', function(e){
    e.preventDefault();
    globalSendCommand('delete_completed', null, null, null, function(ret){
        autoRefreshList();
    });
});

$("body").on('click', '#delete_btn', function(e){
    e.stopPropagation(); e.preventDefault();
    let idx = $(this).data('idx');
    globalSendCommand('remove', idx, null, null, function(ret){
        autoRefreshList();
    });
});

function refresh_item(data) {
    $('#tr1_'+data.idx).html(make_item1(data));
    $('#collapse_'+data.idx).html(make_item2(data));
}

function make_item(data) {
    var str = '<tr id="tr1_'+data.idx+'" style="cursor: pointer;" data-toggle="collapse" data-target="#collapse_'+ data.idx + '" aria-expanded="false" >';
    str += make_item1(data);
    str += '</tr>';
    str += '<tr class="collapse tableRowHoverOff" id="collapse_' + data.idx + '">';
    str += make_item2(data);
    str += '</tr>';
    return str;
}

function make_item1(data) {
    var str = '<td style="text-align:center;">'+ data.idx + '</td>';
    str += '<td style="text-align:center;"><span class="badge badge-info">'+ data.callback_id + '</span></td>';
    str += '<td style="text-align:center; font-size: 12px; color: #6ee7b7;">'+ data.start_time + '</td>';
    str += '<td style="font-weight: 600;">'+ data.filename + '</td>';
    
    var status_class = 'status-wait';
    if (data.status_str === 'DOWNLOADING') status_class = 'status-downloading';
    else if (data.status_str === 'COMPLETED') status_class = 'status-completed';
    else if (data.status_str === 'STOP') status_class = 'status-fail';

    str += '<td id="status_'+data.idx+'" style="text-align:center;"><span class="badge-status ' + status_class + '">'+ data.status_kor + '</span></td>';
    
    var visi = (parseInt(data.percent) > 0) ? 'visible' : 'hidden';
    str += '<td><div class="progress custom-progress"><div id="progress_'+data.idx+'" class="progress-bar" style="visibility: '+visi+'; width:'+data.percent+'%">'+data.percent +'%</div></div></td>';
    
    str += '<td style="text-align:center;">'+ data.duration_str + '</td>';
    str += '<td id="current_pf_count_'+data.idx+'" style="text-align:center; color: #f87171;">'+ data.current_pf_count + '</td>';
    str += '<td style="text-align:center; font-size: 13px;"><div id="current_speed_'+data.idx+'">'+ data.current_speed + '</div><div id="download_time_'+data.idx+'" style="font-size: 11px; opacity: 0.6;">'+ data.download_time + '</div></td>';
    
    str += '<td id="button_'+data.idx+'" style="text-align:center; padding: 10px 4px !important;">';
    str += '<div class="action-btn-group">';
    if (data.status_str == 'DOWNLOADING' || data.status_str == 'WAITING') {
        str += '<button id="stop_btn" class="action-btn-mini btn-danger" data-idx="'+data.idx+'" title="중지"><i class="fa fa-stop"></i></button>';
    } else {
        str += '<button id="delete_btn" class="action-btn-mini btn-warning" data-idx="'+data.idx+'" title="삭제"><i class="fa fa-times"></i></button>';
    }
    str += '</div>';
    str += '</td>';
    return str;
}

function make_item2(data) {
    var str = '<td colspan="10" style="background: rgba(0,0,0,0.2); padding: 15px !important;">';
    str += '<div id="detail_'+data.idx+'" class="queue-detail-container">';
    str += get_detail(data);
    str += '</div>';
    str += '</td>';
    return str;
}

function get_detail(data) {
    var str = '<div class="detail-grid">';
    str += '<div class="detail-item"><span class="label">파일 경로</span><span class="value">' + data.save_fullpath + '</span></div>';
    str += '<div class="detail-item"><span class="label">URL</span><span class="value text-truncate">' + data.url + '</span></div>';
    str += '<div class="detail-item"><span class="label">진행 상황</span><span class="value">' + data.percent+ '% (' + data.current_duration + ' / ' + data.duration + ')</span></div>';
    str += '<div class="detail-item"><span class="label">비트레이트</span><span class="value">' + data.current_bitrate + '</span></div>';
    str += '<div class="detail-item"><span class="label">허용 에러(PF)</span><span class="value">' + data.max_pf_count + '</span></div>';
    if (data.status_str == 'COMPLETED') {
        str += '<div class="detail-item"><span class="label">파일 크기</span><span class="value">' + data.filesize_str + '</span></div>';
        str += '<div class="detail-item"><span class="label">최종 속도</span><span class="value">' + (data.download_speed || 'N/A') + '</span></div>';
    }
    str += '</div>';
    return str;
}

function button_html(data) {
    var str = '<div class="action-btn-group">';
    if (data.status_str == 'DOWNLOADING' || data.status_str == 'WAITING') {
        str += '<button id="stop_btn" class="action-btn-mini btn-danger" data-idx="'+data.idx+'" title="중지"><i class="fa fa-stop"></i></button>';
    } else {
        str += '<button id="delete_btn" class="action-btn-mini btn-warning" data-idx="'+data.idx+'" title="삭제"><i class="fa fa-times"></i></button>';
    }
    str += '</div>';
    $("#button_" + data.idx).html(str);
}

function status_html(data) {
    var progress = document.getElementById("progress_" + data.idx);
    if (!progress) return;
    
    progress.style.width = data.percent+ '%';
    progress.innerHTML = data.percent+ '%';
    progress.style.visibility = 'visible';
    
    var statusEl = document.getElementById("status_" + data.idx);
    if (statusEl) {
        var status_class = 'status-wait';
        if (data.status_str === 'DOWNLOADING') status_class = 'status-downloading';
        else if (data.status_str === 'COMPLETED') status_class = 'status-completed';
        else if (data.status_str === 'STOP') status_class = 'status-fail';
        statusEl.innerHTML = '<span class="badge-status ' + status_class + '">'+ data.status_kor + '</span>';
    }
    
    var pfEl = document.getElementById("current_pf_count_" + data.idx);
    if (pfEl) pfEl.innerHTML = data.current_pf_count;
    
    var speedEl = document.getElementById("current_speed_" + data.idx);
    if (speedEl) speedEl.innerHTML = data.current_speed;
    
    var timeEl = document.getElementById("download_time_" + data.idx);
    if (timeEl) timeEl.innerHTML = data.download_time;
    
    var detailEl = document.getElementById("detail_" + data.idx);
    if (detailEl) detailEl.innerHTML = get_detail(data);
}
</script>

{% endblock %}