<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>授权回调处理</title>
    <!-- 1. 修复 Favicon 404 错误：添加一个内嵌的锁形图标 -->
    <link rel="icon"
        href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔐</text></svg>">

    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <style>
        body {
            /* 柔和的动漫风格渐变背景 */
            background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            padding: 1rem;
        }

        /* 加载动画 */
        .loader {
            border-top-color: #ec4899;
            /* Pink-500 */
            -webkit-animation: spinner 1.5s linear infinite;
            animation: spinner 1.5s linear infinite;
        }

        @keyframes spinner {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* 简单的淡入动画 */
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>

<body>

    <!-- 主卡片容器：手机端全宽，桌面端限制宽度 -->
    <div class="bg-white/90 backdrop-blur-lg w-full max-w-md rounded-2xl shadow-2xl overflow-hidden fade-in relative">

        <!-- 顶部装饰条 -->
        <div class="h-2 bg-gradient-to-r from-pink-400 to-blue-400"></div>

        <div class="p-6 md:p-8 text-center">

            <!-- 1. 加载状态 -->
            <div id="view-loading" class="block">
                <div class="flex justify-center mb-6">
                    <div class="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-16 w-16"></div>
                </div>
                <h2 class="text-2xl font-bold text-gray-800 mb-2">正在验证...</h2>
                <p class="text-gray-500 text-sm">正在处理您的授权请求，请稍候。</p>
            </div>

            <!-- 2. 成功状态 -->
            <div id="view-success" class="hidden">
                <div class="flex justify-center mb-6">
                    <div class="rounded-full bg-green-100 p-3">
                        <svg class="w-10 h-10 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7">
                            </path>
                        </svg>
                    </div>
                </div>
                <h2 class="text-2xl font-bold text-gray-800 mb-2">授权成功</h2>
                <p class="text-gray-500 mb-6">正在唤起 Telegram...</p>

                <a id="btn-open-bot" href="#"
                    class="block w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-4 rounded-xl transition duration-300 shadow-md transform active:scale-95">
                    打开 Bot
                </a>
            </div>

            <!-- 3. 错误状态 (Code/State 为空) -->
            <div id="view-error" class="hidden">
                <div class="flex justify-center mb-6">
                    <div class="rounded-full bg-red-100 p-3">
                        <svg class="w-10 h-10 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>
                <h2 class="text-xl font-bold text-gray-800 mb-2">无法完成授权</h2>
                <p class="text-gray-500 text-sm mb-6">未能获取到有效的验证码 (Code)。这可能是因为您直接访问了此链接，或者会话已过期。</p>

                <!-- 操作按钮组 -->
                <div class="space-y-3">
                    <a href="https://t.me/XiaoQvanAnimeBot"
                        class="block w-full bg-gray-800 hover:bg-gray-900 text-white font-semibold py-3 px-4 rounded-xl transition duration-300 shadow-md">
                        返回 Bot 重新获取
                    </a>

                    <div class="bg-yellow-50 border border-yellow-100 rounded-xl p-3 text-left mt-4">
                        <p class="text-xs text-yellow-800 font-semibold mb-1">💡 还是不行？</p>
                        <p class="text-xs text-yellow-700 leading-relaxed">
                            如果是自动登录导致没有弹出授权页，请尝试在网站上<b>退出当前账户</b>，然后重新点击 Bot 发送的链接。
                        </p>
                    </div>
                </div>
            </div>

        </div>

        <!-- 底部版权/信息 -->
        <div class="bg-gray-50 px-6 py-3 text-center border-t border-gray-100">
            <p class="text-xs text-gray-400">XiaoQvan Anime Bot Authorization</p>
        </div>
    </div>

    <script>
        // ================= 配置区域 =================
        const BOT_BASE_URL = "https://t.me/mengcat_bot?start=";
        const PREFIX = "bgm_callback_";
        // ===========================================

        // 页面加载完成后立即执行
        document.addEventListener('DOMContentLoaded', () => {
            // 设置一个极短的延时，确保 CSS 动画能正常渲染
            setTimeout(handleAuthLogic, 300);
        });

        function handleAuthLogic() {
            try {
                // 1. 获取 URL 参数
                const urlParams = new URLSearchParams(window.location.search);
                const code = urlParams.get('code');
                const state = urlParams.get('state');

                // 2. 检查 Code 是否存在 (Code 是必须的)
                if (!code) {
                    // 这是一个预期的逻辑分支（未授权访问），不应该抛出 Error 导致控制台报错
                    // 使用 console.warn 告知开发者这是正常的未授权状态
                    console.warn("Auth Info: Missing 'code' parameter. Showing error view.");
                    switchView('view-error');
                    return; // 结束函数执行
                }

                // ================= 成功逻辑 =================

                // 拼接 Payload: bgm_callback_<code>_<state>
                // 如果 state 不存在，变成 bgm_callback_<code>_
                const payload = `${PREFIX}${code}_${state || ''}`;
                const finalUrl = BOT_BASE_URL + payload;

                // 切换到成功视图
                switchView('view-success');

                // 设置按钮链接
                const btn = document.getElementById('btn-open-bot');
                btn.href = finalUrl;

                // 尝试自动跳转
                // 使用 replace，这样用户按返回键不会卡死在回调页
                setTimeout(() => {
                    window.location.replace(finalUrl);
                }, 800);

            } catch (error) {
                // ================= 真正的异常逻辑 =================
                // 只有代码真正崩溃时才会到这里
                console.error("Critical Auth Error:", error);
                switchView('view-error');
            }
        }

        // --- 视图切换辅助函数 ---
        function switchView(viewId) {
            // 隐藏所有视图
            document.getElementById('view-loading').classList.add('hidden');
            document.getElementById('view-success').classList.add('hidden');
            document.getElementById('view-error').classList.add('hidden');

            // 显示目标视图
            const target = document.getElementById(viewId);
            if (target) {
                target.classList.remove('hidden');
                target.classList.add('fade-in'); // 触发淡入动画
            }
        }
    </script>
</body>

</html>