<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Tokens 管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const apiPrefix = "{{ api_prefix }}";
            const uploadForm = document.getElementById('uploadForm');
            const clearForm = document.getElementById('clearForm');
            const errorButton = document.getElementById('errorButton');

            if (apiPrefix === "None") {
                uploadForm.action = "/tokens/upload";
                clearForm.action = "/tokens/clear";
                errorButton.dataset.api = "/tokens/error";
            } else {
                uploadForm.action = `/${apiPrefix}/tokens/upload`;
                clearForm.action = `/${apiPrefix}/tokens/clear`;
                errorButton.dataset.api = `/${apiPrefix}/tokens/error`;
            }

            errorButton.addEventListener('click', async () => {
                const response = await fetch(errorButton.dataset.api, {
                    method: 'POST',
                });
                const result = await response.json();
                const errorTokens = result.error_tokens;

                const errorModal = document.getElementById('errorModal');
                const errorModalContent = document.getElementById('errorModalContent');

                errorModalContent.innerHTML = errorTokens.map(token => `<p>${token}</p>`).join('');
                errorModal.classList.remove('hidden');
            });

            document.getElementById('errorModalClose').addEventListener('click', () => {
                document.getElementById('errorModal').classList.add('hidden');
            });

            document.getElementById('errorModalCopy').addEventListener('click', () => {
                const errorModalContent = document.getElementById('errorModalContent');
                const textToCopy = errorModalContent.innerText.replace(/\n\n/g, '\n');
                navigator.clipboard.writeText(textToCopy).then(() => {
                    alert('错误 Tokens 已复制到剪贴板');
                }).catch(err => {
                    alert('复制失败，请手动复制');
                });
            });
        });
    </script>
</head>
<body class="bg-gradient-to-r from-blue-200 via-purple-200 to-pink-200 flex justify-center items-center min-h-screen">
    <div class="bg-white p-10 rounded-lg shadow-2xl w-128 text-center">
        <h1 class="text-4xl font-extrabold text-gray-900 mb-6">Tokens 管理</h1>
        <p class="text-gray-600 mb-4">当前可用 Tokens 数量：<span class="text-blue-600">{{ tokens_count }}</span></p>
        <form class="mb-2" id="uploadForm" method="post">
            <textarea class="w-full p-4 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 resize-none" name="text" placeholder="一行一个Token，可以是 AccessToken 或 RefreshToken" rows="10"></textarea>
            <p class="text-gray-600 mb-2">注：使用docker时如果挂载了data文件夹则重启后不需要再次上传</p>
            <button class="w-full bg-blue-600 text-white py-3 rounded-md hover:bg-blue-700 transition duration-300 mb-2" type="submit">上传</button>
        </form>
        <button id="errorButton" class="w-full bg-yellow-600 text-white py-3 rounded-md hover:bg-yellow-700 transition duration-200 mt-2">查看错误Tokens</button>
        <p class="text-gray-600 mt-2">点击清空，将会清空上传和错误的 Tokens</p>
        <form id="clearForm" method="post">
            <button class="w-full bg-red-600 text-white py-3 rounded-md hover:bg-red-700 transition duration-300" type="submit">清空Tokens</button>
        </form>
    </div>
    
    <div id="errorModal" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex justify-center items-center hidden">
        <div class="bg-white p-6 rounded-lg shadow-lg w-150">
            <h2 class="text-2xl font-bold mb-4">错误 Tokens</h2>
            <div id="errorModalContent" class="list-disc list-inside text-left mb-4"></div>
            <div class="flex justify-end space-x-4">
                <button id="errorModalCopy" class="bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 transition duration-300">复制</button>
                <button id="errorModalClose" class="bg-red-600 text-white py-2 px-4 rounded-md hover:bg-red-700 transition duration-300">关闭</button>
            </div>
        </div>
    </div>
</body>
</html>
