<?php
// 这个文件会被 admin.php 包含，不需要头部
$quick_login_types = [
    'qq' => ['name' => 'QQ登录', 'icon' => 'qq', 'color' => '#12B7F5'],
    'wx' => ['name' => '微信登录', 'icon' => 'wechat', 'color' => '#07C160'],
    'alipay' => ['name' => '支付宝登录', 'icon' => 'alipay', 'color' => '#1677FF'],
    'gitee' => ['name' => 'Gitee登录', 'icon' => 'gitee', 'color' => '#C71D23'],
    'sina' => ['name' => '微博登录', 'icon' => 'weibo', 'color' => '#FF8200'],
    'baidu' => ['name' => '百度登录', 'icon' => 'baidu', 'color' => '#2932E1'],
    'xiaomi' => ['name' => '小米登录', 'icon' => 'xiaomi', 'color' => '#FF6900'],
    'huawei' => ['name' => '华为登录', 'icon' => 'huawei', 'color' => '#FF0000'],
    'douyin' => ['name' => '抖音登录', 'icon' => 'douyin', 'color' => '#000000'],
    'google' => ['name' => '谷歌登录', 'icon' => 'google', 'color' => '#4285F4'],
    'microsoft' => ['name' => '微软登录', 'icon' => 'microsoft', 'color' => '#00A4EF'],
    'facebook' => ['name' => 'Facebook登录', 'icon' => 'facebook', 'color' => '#1877F2'],
    'twitter' => ['name' => 'Twitter登录', 'icon' => 'twitter', 'color' => '#1DA1F2'],
    'feishu' => ['name' => '飞书登录', 'icon' => 'feishu', 'color' => '#00C4A0'],
    'wework' => ['name' => '企业微信登录', 'icon' => 'wework', 'color' => '#2C7A3E'],
    'dingtalk' => ['name' => '钉钉登录', 'icon' => 'dingtalk', 'color' => '#1E9AEF'],
    'github' => ['name' => 'GitHub登录', 'icon' => 'github', 'color' => '#24292E'],
];

// 处理保存
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['save_config'])) {
    foreach ($quick_login_types as $type => $info) {
        $enabled = isset($_POST['enabled_' . $type]) ? 1 : 0;
        $db->query("UPDATE quick_login_config SET enabled = $enabled WHERE type = '$type'");
    }
    echo '<div class="alert alert-success" style="background: rgba(16,185,129,0.1); border: 1px solid #10b981; border-radius: 12px; padding: 12px 16px; margin-bottom: 20px; color: #10b981;">
            ✅ 快捷登录配置已保存
          </div>';
}

// 获取当前配置
$configs = [];
$result = $db->query("SELECT type, enabled FROM quick_login_config");
if ($result) {
    while ($row = $result->fetch_assoc()) {
        $configs[$row['type']] = $row['enabled'];
    }
}
?>

<div class="admin-section">
    <h2>🔐 快捷登录管理</h2>
    <p style="color: var(--text-secondary); margin-bottom: 20px;">统一管理第三方快捷登录方式，支持QQ、微信、支付宝、Gitee等17种登录方式</p>
    
    <form method="POST" class="quick-login-form">
        <div class="quick-login-grid">
            <?php foreach ($quick_login_types as $type => $info): 
                $enabled = isset($configs[$type]) ? $configs[$type] : ($info['enabled'] ?? 0);
            ?>
                <div class="quick-login-item">
                    <label class="quick-login-switch">
                        <input type="checkbox" name="enabled_<?php echo $type; ?>" value="1" <?php echo $enabled ? 'checked' : ''; ?>>
                        <span class="switch-slider"></span>
                    </label>
                    <div class="quick-login-info">
                        <div class="quick-login-icon" style="background: <?php echo $info['color']; ?>;">
                            <img src="/assets/svg/<?php echo $info['icon']; ?>.svg" alt="<?php echo $info['name']; ?>" style="width: 24px; height: 24px;">
                        </div>
                        <span class="quick-login-name"><?php echo $info['name']; ?></span>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
        
        <div style="margin-top: 30px; text-align: center;">
            <button type="submit" name="save_config" class="btn btn-primary">💾 保存配置</button>
        </div>
    </form>
    
    <div style="margin-top: 30px; padding: 15px; background: var(--bg-secondary); border-radius: 12px;">
        <h4>📋 使用说明</h4>
        <ul style="color: var(--text-secondary); font-size: 13px; margin-left: 20px;">
            <li>开启后，登录页面会自动显示对应的快捷登录按钮</li>
            <li>QQ、微信、支付宝、Gitee 默认开启，其他默认关闭</li>
            <li>需要先在彩虹聚合登录后台配置对应的登录方式</li>
            <li>建议只开启用户常用的几种登录方式，避免界面拥挤</li>
        </ul>
    </div>
</div>

<style>
.quick-login-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}
.quick-login-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all 0.2s;
}
.quick-login-item:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
}
.quick-login-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}
.quick-login-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quick-login-name {
    font-weight: 500;
    color: var(--text-primary);
}
.quick-login-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    flex-shrink: 0;
}
.quick-login-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 34px;
}
.switch-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}
.quick-login-switch input:checked + .switch-slider {
    background-color: #667eea;
}
.quick-login-switch input:checked + .switch-slider:before {
    transform: translateX(24px);
}
</style>