<?php
$biz = isset($_GET['biz']) ? strtolower(trim((string)$_GET['biz'])) : 'cloud';
$biz = $biz === 'dg' ? 'dg' : 'cloud';
$title = $biz === 'dg' ? '代挂账号管理' : '云端账号管理';
include __DIR__ . '/head.php';
$qqlist_dg_subtitle = trim($conf['qqlist_dg_subtitle'] ?? '');
$qqlist_cloud_subtitle = trim($conf['qqlist_cloud_subtitle'] ?? '');
?>
<script>window.QQ_BIZ=<?php echo json_encode($biz, JSON_UNESCAPED_UNICODE); ?>;</script>

<div class="space-y-4">
    <div class="bg-white rounded-2xl border border-indigo-100 shadow-sm p-4 md:p-5">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
            <div>
                <h1 class="text-xl font-bold text-gray-800"><?php if($biz === 'dg'){echo '<i class="fas fa-link text-indigo-500 mr-2"></i>代挂账号管理';}else{echo '<i class="fas fa-cloud text-indigo-500 mr-2"></i>云端账号管理';} ?></h1>
                <p class="text-sm text-gray-500 mt-1"><?php echo $biz === 'dg' ? ($qqlist_dg_subtitle !== '' ? $qqlist_dg_subtitle : '等级加速自动做任务让你账号快速升级') : ($qqlist_cloud_subtitle !== '' ? $qqlist_cloud_subtitle : '云端，群管，娱乐，抢包等等功能'); ?></p>
            </div>
            <div class="flex flex-wrap gap-2">
                <a href="./add.php?biz=<?php echo $biz ?>" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-medium transition-colors flex items-center gap-1.5 shadow-sm">
                <i class="fas fa-plus text-xs"></i>添加QQ
                </a>
                <button type="button" onclick="recoverQQ()" class="px-4 py-2 bg-gray-700 hover:bg-gray-800 text-white rounded-lg text-sm font-medium transition-colors flex items-center gap-1.5 shadow-sm">
                <i class="fas fa-search text-xs"></i>找回QQ
                </button>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3" id="listTable">
        <div class="col-span-full py-16 flex flex-col items-center justify-center" id="initialLoading">
            <div class="w-10 h-10 border-3 border-indigo-200 border-t-indigo-600 rounded-full animate-spin mb-3"></div>
            <p class="text-gray-400 text-sm">加载中...</p>
        </div>
    </div>

    <div class="flex justify-center pt-1">
        <ul class="flex items-center gap-1" id="pagination"></ul>
    </div>
</div>

</main>

<div id="appModal" class="fixed inset-0 z-50 hidden">
    <div class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity" onclick="closeModal()"></div>
    <div class="fixed inset-0 flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md max-h-[85vh] flex flex-col relative transform transition-all">
            <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100 bg-gray-50/50 rounded-t-2xl">
                <h3 id="modalTitle" class="text-lg font-semibold text-gray-800"></h3>
                <button onclick="closeModal()" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-200 text-gray-400 hover:text-gray-600 transition-colors">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div id="modalBody" class="px-5 py-4 overflow-y-auto"></div>
            <div id="modalFooter" class="px-5 py-3 border-t border-gray-100 hidden"></div>
        </div>
    </div>
</div>

<script src="../assets/js/bootstrap.min.js"></script>
<script src="./assets/js/qqlist.js?ver=<?php echo VERSION ?>"></script>
</body>
</html>
