<!DOCTYPE html>
<html lang="en" data-theme="light">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Download Queue - AniWorld Manager</title>
    <link rel="stylesheet" href="/static/css/styles.css?v={{ static_v }}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>

<body>
    <div class="app-container">
        <!-- Header -->
        <header class="header">
            <div class="header-content">
                <div class="header-title">
                    <i class="fas fa-download"></i>
                    <h1>Download Queue</h1>
                </div>
                <div class="header-actions">
                    <a href="/" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i>
                        <span>Back to Main</span>
                    </a>
                    <button id="theme-toggle" class="btn btn-icon" title="Toggle theme">
                        <i class="fas fa-moon"></i>
                    </button>
                    <button id="logout-btn" class="btn btn-secondary" title="Logout" style="display: none;">
                        <i class="fas fa-sign-out-alt"></i>
                        <span>Logout</span>
                    </button>
                </div>
            </div>
        </header>

        <!-- Main content -->
        <main class="main-content">
            <!-- Queue Statistics -->
            <section class="queue-stats-section">
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-download text-primary"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-value" id="total-items">0</div>
                            <div class="stat-label">Total Items</div>
                        </div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-clock text-warning"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-value" id="pending-items">0</div>
                            <div class="stat-label">In Queue</div>
                        </div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-check-circle text-success"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-value" id="completed-items">0</div>
                            <div class="stat-label">Completed</div>
                        </div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-exclamation-triangle text-error"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-value" id="failed-items">0</div>
                            <div class="stat-label">Failed</div>
                        </div>
                    </div>
                </div>

                <!-- Speed and ETA -->
                <div class="speed-eta-section">
                    <div class="speed-info">
                        <div class="speed-current">
                            <span class="label">Current Speed:</span>
                            <span class="value" id="current-speed">0 MB/s</span>
                        </div>
                        <div class="speed-average">
                            <span class="label">Average Speed:</span>
                            <span class="value" id="average-speed">0 MB/s</span>
                        </div>
                    </div>
                    <div class="eta-info">
                        <span class="label">Estimated Time Remaining:</span>
                        <span class="value" id="eta-time">--:--</span>
                    </div>
                </div>
            </section>

            <!-- Active Downloads -->
            <section class="active-downloads-section">
                <div class="section-header">
                    <h2>
                        <i class="fas fa-play-circle"></i>
                        Active Downloads
                    </h2>
                </div>

                <div class="active-downloads-list" id="active-downloads">
                    <div class="empty-state">
                        <i class="fas fa-pause-circle"></i>
                        <p>No active downloads</p>
                    </div>
                </div>
            </section>

            <!-- Pending Queue -->
            <section class="pending-queue-section">
                <div class="section-header">
                    <h2>
                        <i class="fas fa-clock"></i>
                        Download Queue (<span id="queue-count">0</span>)
                    </h2>
                    <div class="section-actions">
                        <button id="clear-pending-btn" class="btn btn-secondary" disabled>
                            <i class="fas fa-trash-alt"></i>
                            Remove All
                        </button>
                        <button id="start-queue-btn" class="btn btn-primary" disabled>
                            <i class="fas fa-play"></i>
                            Start
                        </button>
                        <button id="stop-queue-btn" class="btn btn-secondary" disabled style="display: none;">
                            <i class="fas fa-stop"></i>
                            Stop
                        </button>
                    </div>
                </div>

                <div class="pending-queue-list" id="pending-queue">
                    <div class="empty-state">
                        <i class="fas fa-list"></i>
                        <p>No items in queue</p>
                        <small>Add episodes from the main page to start downloading</small>
                    </div>
                </div>
            </section>

            <!-- Completed Downloads -->
            <section class="completed-downloads-section">
                <div class="section-header">
                    <h2>
                        <i class="fas fa-check-circle"></i>
                        Completed (<span id="completed-count">0</span>)
                    </h2>
                    <div class="section-actions">
                        <button id="clear-completed-btn" class="btn btn-secondary" disabled>
                            <i class="fas fa-broom"></i>
                            Clear Completed
                        </button>
                    </div>
                </div>

                <div class="completed-downloads-list" id="completed-downloads">
                    <div class="empty-state">
                        <i class="fas fa-check-circle text-success"></i>
                        <p>No completed downloads</p>
                        <small>Completed episodes will appear here</small>
                    </div>
                </div>
            </section>

            <!-- Failed Downloads -->
            <section class="failed-downloads-section">
                <div class="section-header">
                    <h2>
                        <i class="fas fa-exclamation-triangle"></i>
                        Failed (<span id="failed-count">0</span>)
                    </h2>
                    <div class="section-actions">
                        <button id="retry-all-btn" class="btn btn-warning" disabled>
                            <i class="fas fa-redo"></i>
                            Retry All
                        </button>
                        <button id="clear-failed-btn" class="btn btn-secondary" disabled>
                            <i class="fas fa-trash"></i>
                            Clear Failed
                        </button>
                    </div>
                </div>

                <div class="failed-downloads-list" id="failed-downloads">
                    <div class="empty-state">
                        <i class="fas fa-check-circle text-success"></i>
                        <p>No failed downloads</p>
                        <small>Failed episodes can be retried or removed</small>
                    </div>
                </div>
            </section>
        </main>

        <!-- Toast notifications -->
        <div id="toast-container" class="toast-container"></div>
    </div>

    <!-- Loading overlay -->
    <div id="loading-overlay" class="loading-overlay hidden">
        <div class="loading-spinner">
            <i class="fas fa-spinner fa-spin"></i>
            <p>Loading...</p>
        </div>
    </div>

    <!-- Confirmation Modal -->
    <div id="confirm-modal" class="modal hidden">
        <div class="modal-overlay"></div>
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="confirm-title">Confirm Action</h3>
                <button id="close-confirm" class="btn btn-icon">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <p id="confirm-message">Are you sure you want to perform this action?</p>
            </div>
            <div class="modal-footer">
                <button id="confirm-cancel" class="btn btn-secondary">Cancel</button>
                <button id="confirm-ok" class="btn btn-primary">Confirm</button>
            </div>
        </div>
    </div>

    <!-- Shared Modules (load in dependency order) -->
    <script src="/static/js/shared/constants.js?v={{ static_v }}"></script>
    <script src="/static/js/shared/auth.js?v={{ static_v }}"></script>
    <script src="/static/js/shared/api-client.js?v={{ static_v }}"></script>
    <script src="/static/js/shared/theme.js?v={{ static_v }}"></script>
    <script src="/static/js/shared/ui-utils.js?v={{ static_v }}"></script>
    <script src="/static/js/shared/websocket-client.js?v={{ static_v }}"></script>

    <!-- Queue Page Modules -->
    <script src="/static/js/queue/queue-api.js?v={{ static_v }}"></script>
    <script src="/static/js/queue/queue-renderer.js?v={{ static_v }}"></script>
    <script src="/static/js/queue/progress-handler.js?v={{ static_v }}"></script>
    <script src="/static/js/queue/queue-socket-handler.js?v={{ static_v }}"></script>
    <script src="/static/js/queue/queue-init.js?v={{ static_v }}"></script>
</body>

</html>