<?php
session_start();
// 校验登录，无session跳转登录页
if(empty($_SESSION['user_id'])){
    header("Location: login.php");
    exit;
}
// 简单权限控制，如需管理员账号可自行加判断
$isAdmin = true;
if(!$isAdmin){
    echo "无后台管理权限";
    exit;
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>系统后台管理 Admin</title>
<style>
*{box-sizing:border-box;margin:0;padding:0;font-family:Microsoft Yahei}
body{background:#f0f2f5;padding:24px}
.wrap{max-width:1000px;margin:0 auto}
h1{margin-bottom:20px;color:#1f2937}
.tab-box{display:flex;border-bottom:1px solid #dcdfe6;margin-bottom:16px}
.tab-item{padding:10px 20px;cursor:pointer;border:1px solid transparent;border-bottom:none;background:#fff}
.tab-item.active{border:1px solid #409eff;border-bottom:1px solid #f0f2f5;color:#409eff}
.card{background:#fff;padding:20px;border-radius:6px;border:1px solid #e4e7ed;margin-bottom:16px}
.card h3{margin-bottom:14px;color:#303133}
.form-row{margin-bottom:12px;display:flex;align-items:center;gap:10px}
label{width:140px}
input,textarea{padding:8px 10px;border:1px solid #dcdfe6;border-radius:4px;flex:1;max-width:400px}
textarea{min-height:80px}
button{padding:8px 18px;background:#409eff;color:#fff;border:none;border-radius:4px;cursor:pointer}
#msg{margin-top:10px;padding:8px;border-radius:4px;display:none}
.success{background:#e1f3d8;color:#67c23a}
.error{background:#fef0f0;color:#f56c6c}
#result{margin-top:16px;padding:12px;background:#1e1e1e;color:#fff;white-space:pre-wrap;min-height:100px}
.hide{display:none}
</style>
</head>
<body>
<div class="wrap">
    <h1>系统后台管理面板</h1>
    <div class="tab-box">
        <div class="tab-item active" data-tab="pwd">修改登录密码</div>
        <div class="tab-item" data-tab="theme">界面外观配置</div>
        <div class="tab-item" data-tab="link">侧边栏外链管理</div>
    </div>

    <!-- 1 修改密码模块（BCrypt哈希兼容原有密码） -->
    <div class="card tab-content" id="tab-pwd">
        <h3>账户密码修改（采用bcrypt哈希加密，和历史密码算法统一）</h3>
        <div class="form-row">
            <label>原密码：</label>
            <input type="password" id="old_pwd" placeholder="输入当前登录密码">
        </div>
        <div class="form-row">
            <label>新密码：</label>
            <input type="password" id="new_pwd" placeholder="设置新密码">
        </div>
        <div class="form-row">
            <label>确认新密码：</label>
            <input type="password" id="re_pwd" placeholder="再次输入新密码">
        </div>
        <div class="form-row">
            <button onclick="updatePwd()">提交修改密码</button>
        </div>
        <div id="msg"></div>
        <div id="result"></div>
    </div>

    <!-- 2 界面外观配置 -->
    <div class="card tab-content hide" id="tab-theme">
        <h3>大屏界面外观参数配置</h3>
        <div class="form-row">
            <label>页面标题：</label>
            <input id="page_title" placeholder="告警监控系统">
        </div>
        <div class="form-row">
            <label>主题色值：</label>
            <input id="theme_color" placeholder="#409eff">
        </div>
        <div class="form-row">
            <label>每页展示条数：</label>
            <input id="page_size" placeholder="20">
        </div>
        <div class="form-row">
            <label>自定义底部文案：</label>
            <textarea id="footer_text"></textarea>
        </div>
        <div class="form-row">
            <button onclick="saveTheme()">保存外观配置</button>
        </div>
        <div id="msg"></div>
        <div id="result"></div>
    </div>

    <!-- 3 侧边栏外链管理 -->
    <div class="card tab-content hide" id="tab-link">
        <h3>侧边导航外链配置（一行一条，名称|链接）</h3>
        <div class="form-row">
            <textarea id="sidebar_links" placeholder="示例：
Prometheus|http://10.150.117.190:9090
Alertmanager|http://10.150.117.190:9093"></textarea>
        </div>
        <div class="form-row">
            <button onclick="saveLink()">保存侧边外链</button>
        </div>
        <div id="msg"></div>
        <div id="result"></div>
    </div>

    <div style="margin-top:20px;padding-top:16px;border-top:1px solid #eee">
        <a href="./api/dev_panel.php" target="_blank">👉 进入开发者调试面板（所有接口可视化调用）</a>
        <br><br>
        <a href="dashboard.php">返回监控告警大屏</a>
    </div>
</div>

<script>
const api = "./api/index.php";
const msgBox = document.getElementById("msg");
const resultBox = document.getElementById("result");

// Tab切换逻辑
document.querySelectorAll(".tab-item").forEach(item=>{
    item.onclick = ()=>{
        document.querySelectorAll(".tab-item").forEach(t=>t.classList.remove("active"));
        item.classList.add("active");
        const tabId = item.dataset.tab;
        document.querySelectorAll(".tab-content").forEach(c=>c.classList.add("hide"));
        document.getElementById("tab-"+tabId).classList.remove("hide");
        msgBox.style.display = "none";
        resultBox.innerText = "";
    }
})

// 通用提示
function showMsg(text, type="success"){
    msgBox.className = type;
    msgBox.innerText = text;
    msgBox.style.display = "block";
}

// 1 修改密码接口请求
function updatePwd(){
    const old = document.getElementById("old_pwd").value.trim();
    const new1 = document.getElementById("new_pwd").value.trim();
    const new2 = document.getElementById("re_pwd").value.trim();
    if(!old || !new1 || !new2) return showMsg("所有密码项不能为空","error");
    if(new1 !== new2) return showMsg("两次新密码输入不一致","error");
    const params = new URLSearchParams();
    params.append("act","change_pwd");
    params.append("old_pwd",old);
    params.append("new_pwd",new1);
    fetch(`${api}?${params.toString()}`)
    .then(r=>r.json())
    .then(json=>{
        resultBox.innerText = JSON.stringify(json,null,2);
        if(json.code===0){
            showMsg("密码修改成功，请重新登录");
            setTimeout(()=>location.href="login.php",1500);
        }else{
            showMsg(json.msg,"error");
        }
    })
    .catch(e=>{
        showMsg("请求接口失败："+e,"error");
    })
}

// 2 保存外观配置
function saveTheme(){
    const params = new URLSearchParams();
    params.append("act","save_theme");
    params.append("title",document.getElementById("page_title").value);
    params.append("color",document.getElementById("theme_color").value);
    params.append("pagesize",document.getElementById("page_size").value);
    params.append("footer",document.getElementById("footer_text").value);
    fetch(`${api}?${params.toString()}`)
    .then(r=>r.json())
    .then(json=>{
        resultBox.innerText = JSON.stringify(json,null,2);
        json.code===0 ? showMsg("外观配置保存成功") : showMsg(json.msg,"error");
    })
}

// 3 保存侧边外链
function saveLink(){
    const params = new URLSearchParams();
    params.append("act","save_sidebar_link");
    params.append("link_text",document.getElementById("sidebar_links").value);
    fetch(`${api}?${params.toString()}`)
    .then(r=>r.json())
    .then(json=>{
        resultBox.innerText = JSON.stringify(json,null,2);
        json.code===0 ? showMsg("侧边外链保存成功") : showMsg(json.msg,"error");
    })
}
</script>
</body>
</html>
