<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cloudflare 配置 - Ops-Assistant</title>
<style>
:root{
  --bg:#0f172a;--text:#e5e7eb;--card:#111827;--border:#1f2937;--muted:#9ca3af;
  --accent:#f97316;--accent-hover:#ea580c;--header-bg:linear-gradient(135deg,#7c2d12,#ea580c);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
.header{background:var(--header-bg);color:#fff;padding:18px 20px;position:sticky;top:0;z-index:100;box-shadow:0 2px 10px rgba(0,0,0,.15);display:flex;justify-content:space-between;align-items:center;gap:10px}
.header .right{display:flex;align-items:center;gap:8px}
.header a,.header button{color:#fff;text-decoration:none;background:rgba(255,255,255,.2);padding:0 10px;border-radius:8px;font-size:13px;border:none;cursor:pointer;line-height:28px;height:28px;display:inline-flex;align-items:center;justify-content:center}
.header button{width:28px;padding:0}
.header button svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2}
.wrap{max-width:760px;margin:0 auto;padding:14px}
.card{background:var(--card);border-radius:6px;padding:14px;border:1px solid var(--border);box-shadow:none;margin-bottom:10px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}
.row label{width:180px;color:var(--muted);font-size:13px}
.row input{flex:1;min-width:240px;padding:8px;border:1px solid var(--border);border-radius:6px;font-size:13px;background:#0b1220;color:var(--text)}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
button{border:none;border-radius:6px;padding:8px 12px;cursor:pointer;color:#fff;background:var(--accent);font-size:13px}
button.secondary{background:#6b7280}
small{color:var(--muted)}
</style>
</head>
<body>
<div class="header">
  <div>☁️ Cloudflare 配置</div>
  <div class="right">
    <a href="/">返回首页</a>
    <a href="/logout">退出</a>
  </div>
</div>
<div class="wrap">
  <div class="card">
    <h3>账号凭据</h3>
    <div class="row"><label>Account ID</label><input id="account" placeholder="请输入 Account ID"></div>
    <div class="row"><label>API Token</label><input id="token" placeholder="请输入 API Token"></div>
    <small>用于查询/修改 DNS & Workers（单账号）</small>
    <div class="btns">
      <button onclick="save()">保存</button>
      <button class="secondary" onclick="load()">刷新</button>
    </div>
    <small id="msg"></small>
  </div>
</div>
<script>
async function api(url,opt={}){
  const r=await fetch(url,opt);
  const out=await r.json().catch(()=>({}));
  if(!r.ok) throw new Error(out.message||('HTTP '+r.status));
  return out?.data||{};
}
function esc(s){return String(s||'').replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));}
async function load(){
  try{
    const d=await api('/api/v1/admin/cf/settings');
    document.getElementById('account').value = d.settings?.cf_account_id || '';
    document.getElementById('token').value = d.settings?.cf_api_token || '';
    document.getElementById('msg').textContent='已加载';
  }catch(e){document.getElementById('msg').textContent='加载失败：'+esc(e.message||e);}
}
async function save(){
  const payload={
    account_id: document.getElementById('account').value.trim(),
    api_token: document.getElementById('token').value.trim()
  };
  try{
    await api('/api/v1/admin/cf/settings',{method:'PATCH',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});
    document.getElementById('msg').textContent='已保存';
  }catch(e){document.getElementById('msg').textContent='保存失败：'+esc(e.message||e);}
}
load();
</script>
</body>
</html>
