"<!DOCTYPE html>\n<html lang=\"zh\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>WallStreetKey AI 代理平台</title>\n<style>\n* { margin: 0; padding: 0; box-sizing: border-box; }\nbody { font-family: Arial, sans-serif; background: #0f0f1a; color: #fff; min-height: 100vh; }\n.header { background: #1a1a2e; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; }\n.logo { font-size: 20px; font-weight: bold; color: #7c3aed; }\n.container { max-width: 480px; margin: 60px auto; padding: 0 16px; }\n.card { background: #1a1a2e; border-radius: 12px; padding: 32px; border: 1px solid #333; }\n.card h2 { font-size: 22px; margin-bottom: 24px; text-align: center; }\n.tabs { display: flex; margin-bottom: 24px; border-radius: 8px; overflow: hidden; border: 1px solid #333; }\n.tab { flex: 1; padding: 10px; text-align: center; cursor: pointer; background: #0f0f1a; color: #888; font-size: 14px; border: none; }\n.tab.active { background: #7c3aed; color: white; }\nlabel { display: block; font-size: 13px; color: #aaa; margin-bottom: 6px; margin-top: 16px; }\ninput, textarea { width: 100%; padding: 10px 12px; background: #0f0f1a; border: 1px solid #333; border-radius: 8px; color: white; font-size: 14px; outline: none; }\ninput:focus, textarea:focus { border-color: #7c3aed; }\ntextarea { resize: vertical; min-height: 100px; }\n.btn { width: 100%; background: #7c3aed; color: white; border: none; padding: 12px; border-radius: 8px; cursor: pointer; font-size: 15px; margin-top: 20px; }\n.error { color: #ef4444; font-size: 13px; margin-top: 8px; text-align: center; }\n.dashboard { display: none; }\n.dash-header { background: #1a1a2e; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; }\n.dash-container { max-width: 800px; margin: 24px auto; padding: 0 16px; }\n.dash-card { background: #1a1a2e; border-radius: 12px; padding: 24px; border: 1px solid #333; margin-bottom: 20px; }\n.dash-card h3 { font-size: 16px; margin-bottom: 16px; color: #a78bfa; border-bottom: 1px solid #333; padding-bottom: 12px; }\n.style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }\n.style-btn { border: 2px solid #333; border-radius: 8px; padding: 12px 8px; cursor: pointer; text-align: center; background: #0f0f1a; color: #aaa; font-size: 13px; }\n.style-btn.active { border-color: #7c3aed; color: #a78bfa; background: #1e1b4b; }\n.save-btn { background: #7c3aed; color: white; border: none; padding: 10px 24px; border-radius: 8px; cursor: pointer; font-size: 14px; margin-top: 16px; }\n.logout-btn { background: transparent; color: #888; border: 1px solid #333; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; }\n.toast { position: fixed; bottom: 24px; right: 24px; background: #10b981; color: white; padding: 12px 20px; border-radius: 8px; display: none; font-size: 14px; z-index: 999; }\n</style>\n</head>\n<body>\n<div id=\"auth-page\">\n<div class=\"header\"><div class=\"logo\">WallStreetKey AI</div></div>\n<div class=\"container\"><div class=\"card\">\n  <h2>代理平台</h2>\n  <div class=\"tabs\">\n    <button class=\"tab active\" onclick=\"switchTab('login',this)\">登录</button>\n    <button class=\"tab\" onclick=\"switchTab('register',this)\">注册</button>\n  </div>\n  <div id=\"login-form\">\n    <label>邮箱</label><input type=\"email\" id=\"login-email\" placeholder=\"your@email.com\">\n    <label>密码</label><input type=\"password\" id=\"login-password\" placeholder=\"••••••••\">\n    <div id=\"login-error\" class=\"error\"></div>\n    <button class=\"btn\" onclick=\"login()\">登录</button>\n  </div>\n  <div id=\"register-form\" style=\"display:none\">\n    <label>名字</label><input type=\"text\" id=\"reg-name\" placeholder=\"你的名字\">\n    <label>邮箱</label><input type=\"email\" id=\"reg-email\" placeholder=\"your@email.com\">\n    <label>密码</label><input type=\"password\" id=\"reg-password\" placeholder=\"至少8位\">\n    <div id=\"reg-error\" class=\"error\"></div>\n    <button class=\"btn\" onclick=\"register()\">注册</button>\n  </div>\n</div></div>\n</div>\n<div id=\"dashboard\" class=\"dashboard\">\n<div class=\"dash-header\">\n  <div class=\"logo\">WallStreetKey AI</div>\n  <div style=\"display:flex;align-items:center;gap:12px\">\n    <span id=\"user-name\" style=\"color:#aaa;font-size:14px\"></span>\n    <button class=\"logout-btn\" onclick=\"logout()\">退出</button>\n  </div>\n</div>\n<div class=\"dash-container\">\n  <div class=\"dash-card\">\n    <h3>📱 WhatsApp 设置</h3>\n    <label>WhatsApp 号码</label><input type=\"text\" id=\"whatsapp-number\" placeholder=\"+1234567890\">\n    <label>Phone Number ID</label><input type=\"text\" id=\"phone-number-id\" placeholder=\"来自 Meta 后台\">\n    <label>Access Token</label><input type=\"text\" id=\"access-token\" placeholder=\"来自 Meta 后台\">\n    <button class=\"save-btn\" onclick=\"saveWhatsApp()\">保存 WhatsApp 设置</button>\n  </div>\n  <div class=\"dash-card\">\n    <h3>🤖 AI 助理设置</h3>\n    <label>助理名字</label><input type=\"text\" id=\"ai-name\" placeholder=\"例如：Alex\">\n    <label>助理性格</label><textarea id=\"ai-prompt\" placeholder=\"例如：你是一个专业的金融顾问...\"></textarea>\n    <label>聊天风格</label>\n    <div class=\"style-grid\">\n      <div class=\"style-btn active\" onclick=\"selectStyle('professional',this)\">🎩 专业正式</div>\n      <div class=\"style-btn\" onclick=\"selectStyle('friendly',this)\">😊 轻松友好</div>\n      <div class=\"style-btn\" onclick=\"selectStyle('sales',this)\">💰 销售导向</div>\n    </div>\n    <button class=\"save-btn\" onclick=\"saveAI()\">保存 AI 设置</button>\n  </div>\n  <div class=\"dash-card\">\n    <h3>📝 话术库</h3>\n    <textarea id=\"scripts\" placeholder=\"输入你的话术内容...\"></textarea>\n    <button class=\"save-btn\" onclick=\"saveScripts()\">保存话术</button>\n  </div>\n</div>\n</div>\n<div class=\"toast\" id=\"toast\">保存成功！</div>\n<script>\nlet token = localStorage.getItem(\"token\");\nlet selectedStyle = \"professional\";\nif (token) loadDashboard();\nfunction switchTab(tab, el) {\n  document.querySelectorAll(\".tab\").forEach(t => t.classList.remove(\"active\"));\n  el.classList.add(\"active\");\n  document.getElementById(\"login-form\").style.display = tab===\"login\"?\"block\":\"none\";\n  document.getElementById(\"register-form\").style.display = tab===\"register\"?\"block\":\"none\";\n}\nasync function login() {\n  const res = await fetch(\"/api/auth/login\", {method:\"POST\",headers:{\"Content-Type\":\"application/json\"},body:JSON.stringify({email:document.getElementById(\"login-email\").value,password:document.getElementById(\"login-password\").value})});\n  const data = await res.json();\n  if (res.ok) { localStorage.setItem(\"token\",data.token); token=data.token; loadDashboard(); }\n  else document.getElementById(\"login-error\").textContent = \"邮箱或密码错误\";\n}\nasync function register() {\n  const res = await fetch(\"/api/auth/register\", {method:\"POST\",headers:{\"Content-Type\":\"application/json\"},body:JSON.stringify({name:document.getElementById(\"reg-name\").value,email:document.getElementById(\"reg-email\").value,password:document.getElementById(\"reg-password\").value})});\n  const data = await res.json();\n  if (res.ok) { localStorage.setItem(\"token\",data.token); token=data.token; loadDashboard(); }\n  else document.getElementById(\"reg-error\").textContent = data.detail||\"注册失败\";\n}\nasync function loadDashboard() {\n  const res = await fetch(\"/api/auth/me\",{headers:{\"Authorization\":\"Bearer \"+token}});\n  if (!res.ok) { logout(); return; }\n  const user = await res.json();\n  document.getElementById(\"user-name\").textContent = user.name;\n  const cfg = await fetch(\"/api/client/config\",{headers:{\"Authorization\":\"Bearer \"+token}});\n  const config = await cfg.json();\n  if (config.whatsapp_number) document.getElementById(\"whatsapp-number\").value=config.whatsapp_number;\n  if (config.phone_number_id) document.getElementById(\"phone-number-id\").value=config.phone_number_id;\n  if (config.ai_name) document.getElementById(\"ai-name\").value=config.ai_name;\n  if (config.ai_prompt) document.getElementById(\"ai-prompt\").value=config.ai_prompt;\n  if (config.scripts) document.getElementById(\"scripts\").value=config.scripts;\n  document.getElementById(\"auth-page\").style.display=\"none\";\n  document.getElementById(\"dashboard\").style.display=\"block\";\n}\nfunction selectStyle(style,el) {\n  selectedStyle=style;\n  document.querySelectorAll(\".style-btn\").forEach(b=>b.classList.remove(\"active\"));\n  el.classList.add(\"active\");\n}\nasync function saveWhatsApp() {\n  await fetch(\"/api/client/config\",{method:\"POST\",headers:{\"Content-Type\":\"application/json\",\"Authorization\":\"Bearer \"+token},body:JSON.stringify({whatsapp_number:document.getElementById(\"whatsapp-number\").value,phone_number_id:document.getElementById(\"phone-number-id\").value,access_token:document.getElementById(\"access-token\").value})});\n  showToast();\n}\nasync function saveAI() {\n  await fetch(\"/api/client/config\",{method:\"POST\",headers:{\"Content-Type\":\"application/json\",\"Authorization\":\"Bearer \"+token},body:JSON.stringify({ai_name:document.getElementById(\"ai-name\").value,ai_prompt:document.getElementById(\"ai-prompt\").value,style:selectedStyle})});\n  showToast();\n}\nasync function saveScripts() {\n  await fetch(\"/api/client/config\",{method:\"POST\",headers:{\"Content-Type\":\"application/json\",\"Authorization\":\"Bearer \"+token},body:JSON.stringify({scripts:document.getElementById(\"scripts\").value})});\n  showToast();\n}\nfunction logout() { localStorage.removeItem(\"token\"); token=null; document.getElementById(\"auth-page\").style.display=\"block\"; document.getElementById(\"dashboard\").style.display=\"none\"; }\nfunction showToast() { const t=document.getElementById(\"toast\"); t.style.display=\"block\"; setTimeout(()=>t.style.display=\"none\",2500); }\n</script>\n</body>\n</html>\n"