"<!DOCTYPE html>\n<html lang=\"th\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>THAI BIZ Ai — Backend Status</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\n  <style>\n    *{margin:0;padding:0;box-sizing:border-box}\n    body{font-family:'Inter',sans-serif;background:#0a0a0f;color:#e2e8f0;min-height:100vh;padding:32px 24px}\n    .container{max-width:900px;margin:0 auto}\n    .header{display:flex;align-items:center;gap:16px;margin-bottom:40px;padding-bottom:24px;border-bottom:1px solid #1e2030}\n    .logo{width:48px;height:48px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px}\n    .header-text h1{font-size:22px;font-weight:700;color:#fff}\n    .header-text p{font-size:13px;color:#64748b;margin-top:2px}\n    .badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}\n    .badge.online{background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.3)}\n    .badge.offline{background:rgba(239,68,68,.15);color:#ef4444;border:1px solid rgba(239,68,68,.3)}\n    .badge.loading{background:rgba(250,204,21,.15);color:#facc15;border:1px solid rgba(250,204,21,.3)}\n    .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-bottom:24px}\n    .card{background:#111827;border:1px solid #1e2030;border-radius:16px;padding:20px}\n    .card-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:#475569;margin-bottom:16px}\n    .stat-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #1a2035}\n    .stat-row:last-child{border-bottom:none}\n    .stat-label{font-size:13px;color:#94a3b8}\n    .stat-value{font-size:13px;font-weight:600;color:#e2e8f0;font-family:'JetBrains Mono',monospace}\n    .stat-value.green{color:#22c55e}\n    .stat-value.red{color:#ef4444}\n    .stat-value.yellow{color:#facc15}\n    .stat-value.purple{color:#a78bfa}\n    .endpoint-list{background:#111827;border:1px solid #1e2030;border-radius:16px;padding:20px;margin-bottom:24px}\n    .ep-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #1a2035}\n    .ep-row:last-child{border-bottom:none}\n    .method{padding:3px 8px;border-radius:6px;font-size:10px;font-weight:700;font-family:'JetBrains Mono',monospace;min-width:44px;text-align:center}\n    .method.GET{background:rgba(34,197,94,.15);color:#22c55e}\n    .method.POST{background:rgba(99,102,241,.15);color:#818cf8}\n    .ep-path{font-family:'JetBrains Mono',monospace;font-size:12px;color:#a78bfa;min-width:220px}\n    .ep-desc{font-size:12px;color:#64748b}\n    .ep-ping{margin-left:auto;font-size:11px;font-family:'JetBrains Mono',monospace}\n    .ai-card{background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(139,92,246,.1));border:1px solid rgba(139,92,246,.3);border-radius:16px;padding:20px;margin-bottom:24px}\n    .ai-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(139,92,246,.15)}\n    .ai-row:last-child{border-bottom:none}\n    .pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.4);animation:pulse 2s infinite}\n    @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.4)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}\n    .refresh-btn{background:rgba(99,102,241,.2);border:1px solid rgba(99,102,241,.4);color:#818cf8;padding:8px 20px;border-radius:8px;cursor:pointer;font-size:13px;font-family:'Inter',sans-serif;transition:all .2s}\n    .refresh-btn:hover{background:rgba(99,102,241,.35)}\n    .footer{text-align:center;font-size:12px;color:#334155;margin-top:32px;padding-top:20px;border-top:1px solid #1e2030}\n  </style>\n</head>\n<body>\n<div class=\"container\">\n  <div class=\"header\">\n    <div class=\"logo\">🤖</div>\n    <div class=\"header-text\">\n      <h1>THAI BIZ Ai — Backend API</h1>\n      <p>backend.thaibizai.com · Split Architecture Mode</p>\n    </div>\n    <div style=\"margin-left:auto;display:flex;gap:10px;align-items:center\">\n      <span class=\"badge loading\" id=\"overall-badge\">⏳ Loading...</span>\n      <button class=\"refresh-btn\" onclick=\"loadStatus()\">↻ Refresh</button>\n    </div>\n  </div>\n\n  <!-- System Stats -->\n  <div class=\"grid\" id=\"stats-grid\">\n    <div class=\"card\"><div class=\"card-title\">⚙️ System</div><div id=\"sys-stats\"><div class=\"stat-label\">Loading...</div></div></div>\n    <div class=\"card\"><div class=\"card-title\">🗄️ Database</div><div id=\"db-stats\"><div class=\"stat-label\">Loading...</div></div></div>\n    <div class=\"card\"><div class=\"card-title\">⚡ Redis / Queue</div><div id=\"redis-stats\"><div class=\"stat-label\">Loading...</div></div></div>\n  </div>\n\n  <!-- AI Provider -->\n  <div class=\"ai-card\">\n    <div class=\"card-title\">🧠 AI Provider — กำลังใช้งาน</div>\n    <div id=\"ai-info\"><div class=\"stat-label\">Loading...</div></div>\n  </div>\n\n  <!-- Endpoints -->\n  <div class=\"endpoint-list\">\n    <div class=\"card-title\">🔌 API Endpoints</div>\n    <div id=\"endpoint-list\"><div class=\"stat-label\">Loading...</div></div>\n  </div>\n\n  <div class=\"footer\" id=\"footer\">THAI BIZ Ai Backend · Loading...</div>\n</div>\n\n<script>\nasync function loadStatus() {\n  document.getElementById('overall-badge').className = 'badge loading';\n  document.getElementById('overall-badge').textContent = '⏳ Checking...';\n  try {\n    const r = await fetch('/api/status');\n    const d = await r.json();\n\n    // Overall badge\n    const allOk = d.database.status === 'online';\n    const badge = document.getElementById('overall-badge');\n    badge.className = 'badge ' + (allOk ? 'online' : 'offline');\n    badge.innerHTML = allOk ? '<span class=\"pulse\"></span> All Systems Operational' : '⚠️ Degraded';\n\n    // System stats\n    const upH = Math.floor(d.uptime/3600), upM = Math.floor((d.uptime%3600)/60);\n    document.getElementById('sys-stats').innerHTML = `\n      <div class=\"stat-row\"><span class=\"stat-label\">Environment</span><span class=\"stat-value purple\">${d.environment}</span></div>\n      <div class=\"stat-row\"><span class=\"stat-label\">Uptime</span><span class=\"stat-value green\">${upH}h ${upM}m</span></div>\n      <div class=\"stat-row\"><span class=\"stat-label\">Memory Used</span><span class=\"stat-value\">${d.memory.used}</span></div>\n      <div class=\"stat-row\"><span class=\"stat-label\">Memory Total</span><span class=\"stat-value\">${d.memory.total}</span></div>\n    `;\n\n    // DB stats\n    document.getElementById('db-stats').innerHTML = `\n      <div class=\"stat-row\"><span class=\"stat-label\">Status</span><span class=\"stat-value ${d.database.status==='online'?'green':'red'}\">${d.database.status==='online'?'✅ Online':'❌ Offline'}</span></div>\n      <div class=\"stat-row\"><span class=\"stat-label\">Latency</span><span class=\"stat-value\">${d.database.latency || 'N/A'}</span></div>\n      <div class=\"stat-row\"><span class=\"stat-label\">Engine</span><span class=\"stat-value\">MySQL (Prisma ORM)</span></div>\n    `;\n\n    // Redis stats\n    document.getElementById('redis-stats').innerHTML = `\n      <div class=\"stat-row\"><span class=\"stat-label\">Status</span><span class=\"stat-value ${d.redis.status==='online'?'green':'yellow'}\">${d.redis.status==='online'?'✅ Online':'⚠️ Offline (Fallback)'}</span></div>\n      <div class=\"stat-row\"><span class=\"stat-label\">Mode</span><span class=\"stat-value\">${d.redis.status==='online'?'BullMQ Queue':'Direct Processing'}</span></div>\n    `;\n\n    // AI info\n    const providerColor = d.ai.provider==='openrouter'?'purple':d.ai.provider==='gemini'?'green':'yellow';\n    document.getElementById('ai-info').innerHTML = `\n      <div class=\"ai-row\"><span class=\"stat-label\">Provider</span><span class=\"stat-value ${providerColor}\">${d.ai.provider.toUpperCase()}</span></div>\n      <div class=\"ai-row\"><span class=\"stat-label\">Model</span><span class=\"stat-value purple\">${d.ai.model}</span></div>\n      <div class=\"ai-row\"><span class=\"stat-label\">API Key</span><span class=\"stat-value\" style=\"font-size:11px\">${d.ai.apiKey}</span></div>\n    `;\n\n    // Endpoints\n    document.getElementById('endpoint-list').innerHTML = d.endpoints.map(ep => `\n      <div class=\"ep-row\">\n        <span class=\"method ${ep.method}\">${ep.method}</span>\n        <span class=\"ep-path\">${ep.path}</span>\n        <span class=\"ep-desc\">${ep.desc}</span>\n      </div>\n    `).join('');\n\n    // Footer\n    document.getElementById('footer').textContent = `THAI BIZ Ai Backend v${d.version} · Last updated: ${new Date(d.timestamp).toLocaleString('th-TH')}`;\n\n  } catch(e) {\n    document.getElementById('overall-badge').className = 'badge offline';\n    document.getElementById('overall-badge').textContent = '❌ Server Error';\n  }\n}\nloadStatus();\nsetInterval(loadStatus, 30000); // auto-refresh every 30s\n</script>\n</body>\n</html>"