{% extends "base.html" %}

{% block title %}下载记录{% endblock %}
{% block nav_home %}bg-zinc-100 font-semibold text-zinc-900{% endblock %}
{% block header %}下载记录{% endblock %}

{% block content %}
<div id="loading-overlay" class="hidden fixed inset-0 bg-white/70 z-50 flex items-center justify-center">
    <svg class="animate-spin h-8 w-8 text-amber-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
    </svg>
</div>

<form method="get" class="mb-6 p-4 bg-white border border-zinc-200 rounded-lg shadow-sm">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <input type="text" name="title" placeholder="标题关键词" value="{{ query.title or '' }}"
               class="px-3 py-2 border border-zinc-200 rounded-md focus:ring-amber-500 focus:border-amber-500">
        <input type="text" name="feed_name" placeholder="RSS源" value="{{ query.feed_name or '' }}"
               class="px-3 py-2 border border-zinc-200 rounded-md focus:ring-amber-500 focus:border-amber-500">
        <select name="downloader" class="px-3 py-2 border border-zinc-200 rounded-md focus:ring-amber-500 focus:border-amber-500">
            <option value="">全部下载器</option>
            <option value="aria2" {% if query.downloader == 'aria2' %}selected{% endif %}>Aria2</option>
            <option value="qbittorrent" {% if query.downloader == 'qbittorrent' %}selected{% endif %}>qBittorrent</option>
            <option value="transmission" {% if query.downloader == 'transmission' %}selected{% endif %}>Transmission</option>
        </select>
        <div class="flex space-x-2">
            <select name="status" class="w-1/2 px-3 py-2 border border-zinc-200 rounded-md focus:ring-amber-500 focus:border-amber-500">
                <option value="">全部状态</option>
                <option value="1" {% if query.status|string == '1' %}selected{% endif %}>成功</option>
                <option value="0" {% if query.status|string == '0' %}selected{% endif %}>失败</option>
            </select>
            <select name="mode" class="w-1/2 px-3 py-2 border border-zinc-200 rounded-md focus:ring-amber-500 focus:border-amber-500">
                <option value="">全部模式</option>
                <option value="0" {% if query.mode|string == '0' %}selected{% endif %}>自动</option>
                <option value="1" {% if query.mode|string == '1' %}selected{% endif %}>手动</option>
            </select>
        </div>

        <div class="flex items-center space-x-2">
            <label for="published_start_time" class="text-sm text-gray-600 whitespace-nowrap">发布于</label>
            <input type="date" name="published_start_time" id="published_start_time" value="{{ query.published_start_time.strftime('%Y-%m-%d') if query.published_start_time else '' }}" class="px-3 py-2 border border-zinc-200 rounded-md w-full">
        </div>
        <div class="flex items-center space-x-2">
            <label for="published_end_time" class="text-sm text-gray-600 whitespace-nowrap">至</label>
            <input type="date" name="published_end_time" id="published_end_time" value="{{ query.published_end_time.strftime('%Y-%m-%d') if query.published_end_time else '' }}" class="px-3 py-2 border border-zinc-200 rounded-md w-full">
        </div>
        <div class="flex items-center space-x-2">
            <label for="download_start_time" class="text-sm text-gray-600 whitespace-nowrap">下载于</label>
            <input type="date" name="download_start_time" id="download_start_time" value="{{ query.download_start_time.strftime('%Y-%m-%d') if query.download_start_time else '' }}" class="px-3 py-2 border border-zinc-200 rounded-md w-full">
        </div>
        <div class="flex items-center space-x-2">
             <label for="download_end_time" class="text-sm text-gray-600 whitespace-nowrap">至</label>
            <input type="date" name="download_end_time" id="download_end_time" value="{{ query.download_end_time.strftime('%Y-%m-%d') if query.download_end_time else '' }}" class="px-3 py-2 border border-zinc-200 rounded-md w-full">
        </div>
    </div>
    <div class="mt-4 flex justify-end space-x-3">
        <a href="/" class="px-4 py-2 bg-zinc-200 text-zinc-800 rounded-md hover:bg-zinc-300">清空查询</a>
        <button type="submit" class="px-4 py-2 bg-amber-500 text-white rounded-md hover:bg-amber-600 flex items-center space-x-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
            <span>查询</span>
        </button>
    </div>
</form>

<div class="overflow-x-auto bg-white border border-zinc-200 rounded-lg shadow-sm">
    <table class="min-w-full text-sm">
        <thead class="bg-zinc-50">
            <tr class="text-left text-zinc-600">
                <th class="px-3 py-2 border-b border-zinc-200 w-12 text-center">#</th>
                <th class="px-3 py-2 border-b border-zinc-200 min-w-[22rem]">标题</th>
                <th class="px-3 py-2 border-b border-zinc-200 w-24">RSS源</th>
                <th class="px-3 py-2 border-b border-zinc-200 min-w-[10rem]">发布时间</th>
                <th class="px-3 py-2 border-b border-zinc-200 w-24 text-center">下载器</th>
                <th class="px-3 py-2 border-b border-zinc-200 w-20 text-center">模式</th>
                <th class="px-3 py-2 border-b border-zinc-200 w-20 text-center">状态</th>
                <th class="px-3 py-2 border-b border-zinc-200 min-w-[10rem]">下载时间</th>
                <th class="px-3 py-2 border-b border-zinc-200 text-center min-w-[15rem]">操作</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-zinc-200">
            {% for dl in downloads %}
            <tr class="hover:bg-zinc-50">
                <td class="px-3 py-2 text-center text-gray-500 align-middle">{{ loop.index + offset }}</td>
                <td class="px-3 py-2 align-middle">
                    <a href="{{ dl.url }}" class="text-blue-600 hover:underline" target="_blank" title="{{ dl.title }}">{{ dl.title | truncate(120) }}</a>
                </td>
                <td class="px-3 py-2 align-middle">
                    <a href="{{ dl.feed_url }}" class="text-blue-600 hover:underline" target="_blank">{{ dl.feed_name or '未知' }}</a>
                </td>
                <td class="px-3 py-2 whitespace-nowrap align-middle">{{ dl.published_time | strftime }}</td>
                <td class="px-3 py-2 text-center align-middle whitespace-nowrap">{{ dl.downloader }}</td>
                <td class="px-3 py-2 text-center align-middle">
                    {% if dl.mode == 0 %}
                        <span class="inline-flex items-center px-2 py-0.5 text-xs font-semibold text-purple-800 bg-purple-100 rounded-full">自动</span>
                    {% else %}
                        <span class="inline-flex items-center px-2 py-0.5 text-xs font-semibold text-indigo-800 bg-indigo-100 rounded-full">手动</span>
                    {% endif %}
                </td>
                <td class="px-3 py-2 text-center align-middle">
                    {% if dl.status == 1 %}
                        <span class="inline-flex items-center px-2 py-0.5 text-xs font-semibold text-green-800 bg-green-100 rounded-full">成功</span>
                    {% else %}
                        <span class="inline-flex items-center px-2 py-0.5 text-xs font-semibold text-red-800 bg-red-100 rounded-full">失败</span>
                    {% endif %}
                </td>
                <td class="px-3 py-2 whitespace-nowrap align-middle">{{ dl.download_time | strftime }}</td>
                <td class="px-3 py-2 text-center align-middle whitespace-nowrap space-x-1">
                    <a href="{{ dl.download_url }}" target="_blank" title="下载种子/磁力链接"
                       class="inline-flex items-center justify-center h-7 w-7 text-xs font-medium rounded text-gray-700 bg-white border border-zinc-200 hover:bg-zinc-50">
                       <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
                    </a>
                    <button onclick="sendToDownloader('aria2', '{{ dl.title | replace("'", "\\'") }}', {{ dl.id }})"
                            title="发送到 Aria2"
                            class="inline-flex items-center px-2.5 py-1.5 text-xs font-medium rounded text-orange-700 bg-orange-100 hover:bg-orange-200">
                            <svg class="h-4 w-4 mr-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M578.659 407.034l-61.184 120.32-61.184-120.32H344.64l138.24 256.634v0.25l20.48 44.032h97.28l132.858-256.634h-111.61Z m-229.472 72.192h61.184l102.4 227.066 102.4-227.066h61.184l-128.762 235.52v0.25l-20.48 36.864h-30.72l-128.762-235.52Z"></path></svg>
                            <span>A2</span>
                    </button>
                    <button onclick="sendToDownloader('qbittorrent', '{{ dl.title | replace("'", "\\'") }}', {{ dl.id }})"
                            title="发送到 qBittorrent"
                            class="inline-flex items-center px-2.5 py-1.5 text-xs font-medium rounded text-blue-700 bg-blue-100 hover:bg-blue-200">
                            <svg class="h-4 w-4 mr-1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#2598d2"><path d="M12,0C5.373,0,0,5.373,0,12s5.373,12,12,12s12-5.373,12-12S18.627,0,12,0z M8.945,16.945V12.835H6.835V6.946h9.999v5.889h-3.834v4.11H8.945z"></path></svg>
                            <span>QB</span>
                    </button>
                    <button onclick="sendToDownloader('transmission', '{{ dl.title | replace("'", "\\'") }}', {{ dl.id }})"
                            title="发送到 Transmission"
                            class="inline-flex items-center px-2.5 py-1.5 text-xs font-medium rounded text-purple-700 bg-purple-100 hover:bg-purple-200">
                            <svg class="h-4 w-4 mr-1" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M19.437 12c0 .91-.194 1.78-.543 2.57l3.75 2.16c.33.19.44.64.24 1.01l-2.29 3.96c-.19.33-.64.44-1.01.24l-3.57-2.06c-1.2.91-2.61 1.45-4.12 1.45-1.5 0-2.92-.54-4.12-1.45l-3.57 2.06c-.33.19-.82.08-1.01-.24l-2.29-3.96c-.19-.33-.08-.82.24-1.01l3.75-2.16a7.99 7.99 0 0 1-.54-2.57c0-.91.19-1.78.54-2.57L1.137 7.27c-.33-.19-.44-.64-.24-1.01l2.29-3.96c.19-.33.64.44 1.01-.24l3.57 2.06c1.2-.91 2.61-1.45 4.12-1.45 1.5 0 2.92.54 4.12 1.45l3.57-2.06c.33-.19.82-.08 1.01.24l2.29 3.96c.19.33.08.82-.24 1.01l-3.75 2.16c.35.79.54 1.66.54 2.57zM12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z"/></svg>
                            <span>TR</span>
                    </button>
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="9" class="text-center py-8 text-gray-500">
                    没有找到匹配的下载记录。
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<div class="mt-4 flex items-center justify-between text-sm">
    <div>
        {% if total > 0 %}
            共 {{ total }} 条记录，当前在第 {{ page }} / {{ total_pages }} 页。
        {% else %}
            无记录
        {% endif %}
    </div>
    <div class="space-x-2">
        {% if page > 1 %}
            <a href="{{ request.url.remove_query_params('page').include_query_params(page=page - 1) }}"
               class="px-3 py-1 bg-white border border-zinc-200 rounded hover:bg-zinc-50">上一页</a>
        {% endif %}

        {% if page < total_pages %}
            <a href="{{ request.url.remove_query_params('page').include_query_params(page=page + 1) }}"
               class="px-3 py-1 bg-white border border-zinc-200 rounded hover:bg-zinc-50">下一页</a>
        {% endif %}
    </div>
</div>

<div id="toast" class="hidden fixed top-15 left-1/2 -translate-x-1/2 text-white px-5 py-3 rounded-md shadow-lg text-sm font-medium">
    <span id="toast-message"></span>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener("DOMContentLoaded", () => {
    const loadingOverlay = document.getElementById("loading-overlay");

    // ===== Loading & Toast 工具函数 =====
    function showLoading() { loadingOverlay.classList.remove("hidden"); }
    function hideLoading() { loadingOverlay.classList.add("hidden"); }
    function showToast(text, type) {
        const msgBox = document.getElementById("toast");
        if (!msgBox) return;
        document.getElementById("toast-message").textContent = text;
        msgBox.classList.remove("bg-green-500", "bg-red-500", "bg-yellow-500", "bg-zinc-700");
        const typeClasses = {
            success: "bg-green-500",
            error: "bg-red-500",
            warning: "bg-yellow-500"
        };
        msgBox.classList.add(typeClasses[type] || "bg-zinc-700");
        msgBox.classList.remove("hidden");
        setTimeout(() => msgBox.classList.add("hidden"), 3000);
    }

    // ===== “发送到下载器”按钮的 API 调用函数 =====
    window.sendToDownloader = function(type, title, recordId) {
        if (!confirm(`确定要将任务发送到 ${type} 吗？\n\n${title}`)) {
            return;
        }

        showLoading();

        fetch('/redownload', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                id: recordId,
                downloader: type
            })
        })
        .then(res => res.json().then(data => ({ ok: res.ok, body: data })))
        .then(({ ok, body }) => {
            hideLoading();
            if (ok) {
                showToast(body.message || '操作成功！', 'success');
                setTimeout(() => window.location.reload(), 1500);
            } else {
                throw new Error(body.detail || '未知服务器错误');
            }
        })
        .catch(err => {
            hideLoading();
            showToast(`${err.message}`, 'error');
            setTimeout(() => window.location.reload(), 1500);
        });
    }

    // ===== 清理表单空值并提交 =====
    const form = document.querySelector('form');
    if (form) {
        form.addEventListener('submit', function(event) {
            event.preventDefault();
            const formData = new FormData(form);
            const params = new URLSearchParams();
            for (const [key, value] of formData.entries()) {
                if (value) {
                    params.append(key, value);
                }
            }
            window.location.assign(window.location.pathname + '?' + params.toString());
        });
    }
});
</script>
{% endblock %}