<div class="mb-6 flex justify-between items-center">
    <div class="flex items-center">
        <a href="/admin/robots/{{.Robot.ID}}" class="text-gray-500 hover:text-gray-700 mr-4">
            <i class="fas fa-arrow-left"></i>
        </a>
        <h1 class="text-2xl font-semibold text-gray-800">微信登录</h1>
    </div>
</div>

<div class="max-w-md mx-auto">
    {{if .IsError}}
    <div class="mb-4 bg-red-50 border border-red-200 rounded-lg p-4 text-red-700">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-exclamation-circle text-red-500 mt-0.5"></i>
            </div>
            <div class="ml-3">
                <p>{{.Message}}</p>
            </div>
        </div>
    </div>
    {{end}}

    <div class="clean-card overflow-hidden shadow-md rounded-lg">
        <div class="p-6 flex flex-col items-center">
            {{if .IsOnline}}
                <!-- 已在线状态 -->
                <div class="flex flex-col items-center mb-6">
                    <div class="relative mb-4">
                        <div class="w-24 h-24 rounded-full overflow-hidden border-4 shadow-lg flex items-center justify-center">
                          <img src="{{.Robot.Avatar}}" alt="WeChat Avatar" class="w-full h-full object-cover">
                        </div>
                        <div class="absolute bottom-0 right-0 bg-green-500 w-6 h-6 rounded-full border-2 border-white flex items-center justify-center">
                            <i class="fas fa-check text-white text-xs"></i>
                        </div>
                    </div>
                    <h3 class="text-xl font-medium text-gray-800">{{.Robot.Nickname}}</h3>
                    <div class="mt-2 px-4 py-1.5 bg-green-50 rounded-full">
                        <span class="inline-flex items-center text-sm font-medium text-green-700">
                            <i class="fas fa-check-circle mr-1.5"></i>
                            微信已在线，无需登录
                        </span>
                    </div>
                </div>

                <div class="w-full flex justify-center mt-4">
                    <a href="/admin/robots/{{.Robot.ID}}" class="py-2 px-6 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-800 hover:bg-gray-700 transition-colors">
                        返回机器人详情
                    </a>
                </div>
            {{else if .IsAwaken}}
                <!-- 唤醒登录模式 -->
                <div class="flex flex-col items-center mb-6">
                    <div class="relative mb-4">
                        <div class="w-24 h-24 rounded-full overflow-hidden border-4 border-white shadow-lg flex items-center justify-center bg-blue-50">
                          <img src="{{.Robot.Avatar}}" alt="WeChat Avatar" class="w-full h-full object-cover">
                        </div>
                        <div class="absolute bottom-0 right-0 bg-blue-500 w-6 h-6 rounded-full border-2 border-white flex items-center justify-center animate-pulse">
                            <i class="fas fa-bell text-white text-xs"></i>
                        </div>
                    </div>
                    <h3 class="text-xl font-medium text-gray-800">{{.Robot.Nickname}}</h3>
                    <p class="text-sm text-gray-500 mt-1">请在手机上确认登录</p>
                </div>

                <div id="login-status" class="text-center mb-6">
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                        <span class="relative flex h-3 w-3 mr-2">
                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
                            <span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span>
                        </span>
                        正在唤醒
                    </span>
                </div>

                <div class="text-center mb-6">
                    <div class="inline-block">
                        <div class="flex space-x-2">
                            <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0s"></div>
                            <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
                            <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
                        </div>
                    </div>
                </div>

                <div class="w-full flex justify-between">
                    <a href="/admin/robots/{{.Robot.ID}}" class="py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                        取消
                    </a>
                    <a href="/admin/robots/{{.Robot.ID}}/login?qrcode=1" class="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-800 hover:bg-gray-700 transition-colors">
                        使用二维码
                    </a>
                </div>
            {{else}}
                <!-- 二维码登录模式 -->
                <div class="border border-gray-200 rounded-lg p-3 mb-6 bg-white">
                    <img src="{{.QRCode}}" alt="Login QR Code" class="w-64 h-64">
                </div>

                <div id="login-status" class="text-center mb-4">
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                        <span class="relative flex h-3 w-3 mr-2">
                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
                            <span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span>
                        </span>
                        等待扫描
                    </span>
                </div>

                <p class="text-sm text-gray-500 mb-4 text-center">
                    请打开微信，使用"扫一扫"功能扫描上方二维码登录
                </p>

                <div id="timer" class="text-sm text-gray-500 mb-5">
                    二维码有效期: <span id="countdown">120</span>秒
                </div>

                <div class="w-full flex justify-between">
                    <a href="/admin/robots/{{.Robot.ID}}" class="py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                        取消
                    </a>
                    <a href="/admin/robots/{{.Robot.ID}}/login?qrcode=1" id="refresh-qrcode" class="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-800 hover:bg-gray-700 transition-colors hidden">
                        刷新二维码
                    </a>
                </div>
            {{end}}
        </div>
    </div>

    <p class="text-center text-sm text-gray-500 mt-6">
        <i class="fas fa-info-circle mr-1"></i> 请确保手机与电脑在同一网络环境
    </p>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        {{if not .IsOnline}}
        const loginStatus = document.getElementById('login-status');
        const refreshQrcode = document.getElementById('refresh-qrcode');
        let secondsLeft = 120;
        let countdown = document.getElementById('countdown');

        // 检查登录状态
        function checkLoginStatus() {
            fetch(`/admin/robots/{{.Robot.ID}}/check-qrcode?uuid={{.UUID}}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // 扫码阶段：0-未扫描, 1-已扫描未确认, 2-已登录
                        if (data.status === 0) {
                            loginStatus.innerHTML = `
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                                    <span class="relative flex h-3 w-3 mr-2">
                                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
                                        <span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span>
                                    </span>
                                    {{if .IsAwaken}}正在唤醒{{else}}等待扫描{{end}}
                                </span>
                            `;
                        } else if (data.status === 1) {
                            loginStatus.innerHTML = `
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
                                    <span class="relative flex h-3 w-3 mr-2">
                                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-yellow-400 opacity-75"></span>
                                        <span class="relative inline-flex rounded-full h-3 w-3 bg-yellow-500"></span>
                                    </span>
                                    已扫描，等待确认
                                </span>
                            `;
                        } else if (data.status === 99 && data.userInfo && Object.keys(data.userInfo).length > 0) {
                            loginStatus.innerHTML = `
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
                                    <i class="fas fa-check-circle mr-1"></i>
                                    登录成功
                                </span>
                            `;

                            clearInterval(timerInterval);
                            clearInterval(statusCheckInterval);

                            // 延迟一下再跳转，让用户有时间看到成功状态
                            setTimeout(() => {
                                window.location.href = `/admin/robots/{{.Robot.ID}}`;
                            }, 1500);
                        }
                    } else if (data.expired) {
                        loginStatus.innerHTML = `
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
                                <i class="fas fa-times-circle mr-1"></i>
                                {{if .IsAwaken}}唤醒失败{{else}}二维码已过期{{end}}
                            </span>
                        `;

                        clearInterval(timerInterval);
                        clearInterval(statusCheckInterval);

                        // 显示刷新按钮
                        if (refreshQrcode) {
                            refreshQrcode.classList.remove('hidden');
                        }
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }

        // 每3秒检查一次状态
        const statusCheckInterval = setInterval(checkLoginStatus, 3000);

        // 立即执行一次检查
        checkLoginStatus();

        {{if not .IsAwaken}}
        // 开始倒计时
        const timerInterval = setInterval(() => {
            secondsLeft--;
            if (countdown) {
                countdown.textContent = secondsLeft;
            }

            if (secondsLeft <= 0) {
                clearInterval(timerInterval);

                // 显示刷新按钮
                if (refreshQrcode) {
                    refreshQrcode.classList.remove('hidden');
                }
            }
        }, 1000);
        {{end}}
        {{end}}
    });
</script>
