<!DOCTYPE html>
<!-- v2.1 - force redeploy -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Work4WiFi Admin Dashboard</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      min-height: 100vh;
      color: #e2e8f0;
      padding: 20px;
    }
    .container { max-width: 1200px; margin: 0 auto; }

    /* Login */
    .login-box {
      background: rgba(30, 41, 59, 0.8);
      border: 1px solid rgba(148, 163, 184, 0.2);
      border-radius: 12px;
      padding: 24px;
      max-width: 400px;
      margin: 60px auto;
    }
    .login-box h2 { margin-bottom: 16px; color: #e2e8f0; }
    input[type="password"], input[type="number"] {
      width: 100%;
      padding: 12px 16px;
      border-radius: 8px;
      border: 1px solid rgba(148, 163, 184, 0.3);
      background: rgba(15, 23, 42, 0.8);
      color: #e2e8f0;
      font-size: 14px;
      margin-bottom: 12px;
    }
    input:focus { outline: none; border-color: #fbbf24; }
    button {
      padding: 10px 20px;
      border-radius: 8px;
      border: none;
      background: #fbbf24;
      color: #1e1e1e;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: opacity 0.2s;
    }
    button:hover { opacity: 0.9; }
    button:disabled { opacity: 0.5; cursor: not-allowed; }
    .error {
      background: rgba(239, 68, 68, 0.1);
      border: 1px solid rgba(239, 68, 68, 0.3);
      color: #f87171;
      padding: 12px;
      border-radius: 8px;
      margin-bottom: 16px;
      display: none;
    }

    /* Header */
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      flex-wrap: wrap;
      gap: 12px;
    }
    .header h1 { color: #fbbf24; font-size: 22px; }
    .header-actions { display: flex; gap: 8px; align-items: center; }
    .logout-btn {
      background: transparent;
      border: 1px solid rgba(148, 163, 184, 0.3);
      color: #94a3b8;
      padding: 8px 16px;
    }
    .logout-btn:hover { border-color: #ef4444; color: #ef4444; }
    .refresh-btn { padding: 8px 16px; }
    .last-updated { font-size: 11px; color: #64748b; }

    /* Tabs */
    .tabs {
      display: flex;
      gap: 4px;
      margin-bottom: 20px;
      border-bottom: 1px solid rgba(148, 163, 184, 0.2);
      padding-bottom: 0;
      overflow-x: auto;
    }
    .tab {
      padding: 10px 20px;
      background: transparent;
      border: none;
      color: #64748b;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      border-bottom: 2px solid transparent;
      white-space: nowrap;
      transition: all 0.2s;
    }
    .tab:hover { color: #e2e8f0; }
    .tab.active {
      color: #fbbf24;
      border-bottom-color: #fbbf24;
    }
    .tab-content { display: none; }
    .tab-content.active { display: block; }

    /* Cards */
    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 12px;
      margin-bottom: 24px;
    }
    .card {
      background: rgba(30, 41, 59, 0.6);
      border: 1px solid rgba(148, 163, 184, 0.15);
      border-radius: 10px;
      padding: 16px;
      text-align: center;
    }
    .card-value {
      font-size: 28px;
      font-weight: 700;
      color: #60a5fa;
      line-height: 1.2;
    }
    .card-value.gold { color: #fbbf24; }
    .card-value.green { color: #22c55e; }
    .card-value.red { color: #f87171; }
    .card-value.purple { color: #a78bfa; }
    .card-label {
      font-size: 12px;
      color: #94a3b8;
      margin-top: 4px;
    }

    /* Section headings */
    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: #e2e8f0;
      margin: 24px 0 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    }

    /* Chart containers */
    .chart-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 24px;
    }
    @media (max-width: 768px) {
      .chart-row { grid-template-columns: 1fr; }
    }
    .chart-box {
      background: rgba(30, 41, 59, 0.6);
      border: 1px solid rgba(148, 163, 184, 0.15);
      border-radius: 10px;
      padding: 16px;
    }
    .chart-box h3 {
      font-size: 13px;
      color: #94a3b8;
      margin-bottom: 12px;
      font-weight: 500;
    }
    .chart-box canvas { max-height: 220px; }

    /* Table */
    .data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .data-table th {
      text-align: left;
      padding: 10px 12px;
      background: rgba(15, 23, 42, 0.6);
      color: #94a3b8;
      font-weight: 600;
      border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    }
    .data-table td {
      padding: 10px 12px;
      border-bottom: 1px solid rgba(148, 163, 184, 0.08);
      color: #e2e8f0;
    }
    .data-table tr:hover td { background: rgba(59, 130, 246, 0.05); }
    .data-table th.sortable { cursor: pointer; user-select: none; position: relative; white-space: nowrap; }
    .data-table th.sortable:hover { color: #e2e8f0; }
    .sort-arrow { margin-left: 4px; font-size: 10px; opacity: 0.4; }
    .sort-arrow.active { opacity: 1; color: #fbbf24; }
    .col-filter-row th { padding: 4px 6px; background: rgba(15, 23, 42, 0.8); }
    .col-filter-input {
      width: 100%; padding: 4px 8px; border-radius: 4px;
      border: 1px solid rgba(148, 163, 184, 0.2); background: rgba(15, 23, 42, 0.9);
      color: #e2e8f0; font-size: 11px; outline: none;
    }
    .col-filter-input:focus { border-color: #fbbf24; }
    .col-filter-input::placeholder { color: #475569; }
    .visits-table-wrap { overflow-x: auto; max-height: 70vh; overflow-y: auto; }
    .visits-table-wrap thead { position: sticky; top: 0; z-index: 2; }
    .export-grid { display: grid; gap: 16px; }
    .export-card { background: rgba(15,23,42,0.6); border: 1px solid rgba(148,163,184,0.15); border-radius: 12px; padding: 20px; }
    .export-title { font-size: 16px; font-weight: 700; color: #e2e8f0; margin-bottom: 6px; }
    .export-desc { font-size: 13px; color: #94a3b8; margin-bottom: 14px; line-height: 1.5; }
    .export-btn { background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.4); color: #60a5fa; padding: 8px 18px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; transition: background .15s; }
    .export-btn:hover { background: rgba(59,130,246,0.3); }
    .export-btn:disabled { opacity: 0.5; cursor: wait; }
    .badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 9999px;
      font-size: 11px;
      font-weight: 600;
    }
    .badge-free { background: rgba(148, 163, 184, 0.2); color: #94a3b8; }
    .badge-starter { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
    .badge-family { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
    .badge-plus { background: rgba(168, 85, 247, 0.2); color: #a78bfa; }
    .badge-pro { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }
    .badge-unlimited { background: rgba(239, 68, 68, 0.2); color: #f87171; }

    /* Log entries (chatbot) */
    .log-entry {
      background: rgba(30, 41, 59, 0.6);
      border: 1px solid rgba(148, 163, 184, 0.15);
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 12px;
    }
    .log-entry:hover { border-color: rgba(251, 191, 36, 0.3); }
    .log-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      font-size: 12px;
      color: #64748b;
    }
    .log-tokens {
      background: rgba(148, 163, 184, 0.1);
      padding: 4px 8px;
      border-radius: 4px;
    }
    .log-question {
      background: rgba(59, 130, 246, 0.1);
      border-left: 3px solid #3b82f6;
      padding: 12px;
      border-radius: 0 8px 8px 0;
      margin-bottom: 8px;
    }
    .log-question-label { font-size: 11px; color: #60a5fa; margin-bottom: 4px; font-weight: 600; }
    .log-answer {
      background: rgba(34, 197, 94, 0.1);
      border-left: 3px solid #22c55e;
      padding: 12px;
      border-radius: 0 8px 8px 0;
    }
    .log-answer-label { font-size: 11px; color: #22c55e; margin-bottom: 4px; font-weight: 600; }

    /* Correction button & form */
    .correct-btn {
      margin-top: 10px;
      padding: 6px 14px;
      font-size: 12px;
      background: rgba(251, 191, 36, 0.15);
      border: 1px solid rgba(251, 191, 36, 0.4);
      color: #fbbf24;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 600;
      transition: all 0.2s;
    }
    .correct-btn:hover { background: rgba(251, 191, 36, 0.3); }
    .correction-form {
      margin-top: 12px;
      background: rgba(251, 191, 36, 0.05);
      border: 1px solid rgba(251, 191, 36, 0.2);
      border-radius: 8px;
      padding: 14px;
      display: none;
    }
    .correction-form.open { display: block; }
    .correction-form textarea {
      width: 100%;
      padding: 10px 12px;
      border-radius: 6px;
      border: 1px solid rgba(148, 163, 184, 0.3);
      background: rgba(15, 23, 42, 0.8);
      color: #e2e8f0;
      font-size: 13px;
      font-family: inherit;
      resize: vertical;
      min-height: 80px;
      margin-bottom: 8px;
    }
    .correction-form textarea:focus { outline: none; border-color: #fbbf24; }
    .correction-form label { font-size: 12px; color: #94a3b8; font-weight: 600; display: block; margin-bottom: 4px; }
    .correction-actions { display: flex; gap: 8px; margin-top: 8px; }
    .correction-actions button { font-size: 12px; padding: 6px 16px; }
    .save-correction-btn { background: #22c55e; color: #fff; }
    .cancel-correction-btn { background: transparent; border: 1px solid rgba(148, 163, 184, 0.3); color: #94a3b8; }
    .correction-saved { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); color: #22c55e; padding: 8px 12px; border-radius: 6px; margin-top: 8px; font-size: 12px; }

    /* Corrections list */
    .correction-entry {
      background: rgba(251, 191, 36, 0.05);
      border: 1px solid rgba(251, 191, 36, 0.15);
      border-radius: 8px;
      padding: 14px;
      margin-bottom: 10px;
    }
    .correction-entry .correction-q { font-weight: 600; color: #fbbf24; margin-bottom: 6px; font-size: 13px; }
    .correction-entry .correction-a { color: #e2e8f0; font-size: 13px; white-space: pre-wrap; }
    .correction-entry .correction-meta { font-size: 11px; color: #64748b; margin-top: 8px; display: flex; justify-content: space-between; align-items: center; }
    .delete-correction-btn {
      padding: 4px 10px;
      font-size: 11px;
      background: rgba(239, 68, 68, 0.15);
      border: 1px solid rgba(239, 68, 68, 0.3);
      color: #f87171;
      border-radius: 4px;
      cursor: pointer;
    }
    .delete-correction-btn:hover { background: rgba(239, 68, 68, 0.3); }

    /* Server health */
    .health-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
      margin-bottom: 24px;
    }
    .health-card {
      background: rgba(30, 41, 59, 0.6);
      border: 1px solid rgba(148, 163, 184, 0.15);
      border-radius: 10px;
      padding: 16px;
    }
    .health-card h3 {
      font-size: 14px;
      color: #94a3b8;
      margin-bottom: 12px;
    }
    .health-row {
      display: flex;
      justify-content: space-between;
      padding: 6px 0;
      font-size: 13px;
      border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    }
    .health-row:last-child { border-bottom: none; }
    .health-label { color: #94a3b8; display: flex; align-items: center; gap: 6px; }
    .health-value { color: #e2e8f0; font-weight: 500; }
    .health-help {
      font-size: 11px;
      color: #64748b;
      line-height: 1.35;
      margin: -6px 0 10px;
    }
    .health-source {
      font-size: 11px;
      color: #64748b;
      margin: -8px 0 10px;
    }
    .health-label[title] {
      cursor: help;
      text-decoration: underline;
      text-decoration-style: dotted;
      text-underline-offset: 2px;
    }
    .status-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 6px;
    }
    .status-dot.green { background: #22c55e; }
    .status-dot.red { background: #ef4444; }
    .status-dot.yellow { background: #fbbf24; }

    /* Deploy list */
    .deploy-entry {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-bottom: 1px solid rgba(148, 163, 184, 0.08);
      font-size: 13px;
    }
    .deploy-status {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .deploy-status.live { background: #22c55e; }
    .deploy-status.building { background: #fbbf24; }
    .deploy-status.failed { background: #ef4444; }
    .deploy-status.deactivated { background: #64748b; }
    .deploy-info { flex: 1; }
    .deploy-commit { color: #60a5fa; font-size: 12px; }
    .deploy-time { color: #64748b; font-size: 12px; }

    /* Loading & empty */
    .loading, .empty-state {
      text-align: center;
      padding: 40px;
      color: #64748b;
    }
    .spinner {
      display: inline-block;
      width: 24px;
      height: 24px;
      border: 3px solid rgba(148, 163, 184, 0.2);
      border-top-color: #fbbf24;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .hidden { display: none; }
    .controls { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
    .controls label { color: #94a3b8; font-size: 13px; }
    .controls input[type="number"] { width: 80px; margin: 0; }

    /* Config notice */
    .config-notice {
      background: rgba(251, 191, 36, 0.1);
      border: 1px solid rgba(251, 191, 36, 0.3);
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 16px;
      font-size: 13px;
      color: #fbbf24;
    }
    .config-notice code {
      background: rgba(15, 23, 42, 0.6);
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- Login Screen -->
    <div id="login-screen" class="login-box">
      <h2>&#x1f512; Admin Access</h2>
      <div id="error" class="error"></div>
      <input type="password" id="admin-key" placeholder="Enter Admin Key" />
      <button onclick="login()" style="width:100%">Access Dashboard</button>
    </div>

    <!-- Dashboard -->
    <div id="dashboard" class="hidden">
      <div class="header">
        <div>
          <h1>&#x1f4ca; Work4WiFi Admin</h1>
          <span class="last-updated" id="last-updated"></span>
        </div>
        <div class="header-actions">
          <button class="refresh-btn" onclick="refreshAll()">&#x1f504; Refresh</button>
          <button class="logout-btn" onclick="logout()">Logout</button>
        </div>
      </div>

      <!-- Tabs -->
      <div class="tabs">
        <button class="tab active" data-tab="business" onclick="switchTab('business')">&#x1f4c8; Business KPIs</button>
        <button class="tab" data-tab="families" onclick="switchTab('families')">&#x1f46a; Families</button>
        <button class="tab" data-tab="server" onclick="switchTab('server')">&#x1f5a5;&#xfe0f; Server Health</button>
        <button class="tab" data-tab="chatbot" onclick="switchTab('chatbot')">&#x1f4ac; Chatbot Logs</button>
        <button class="tab" data-tab="analytics" onclick="switchTab('analytics')">&#x1f310; Web Analytics</button>
        <button class="tab" data-tab="clarity" onclick="switchTab('clarity')">&#x1f50d; Clarity</button>
        <button class="tab" data-tab="playstore" onclick="switchTab('playstore')">&#x1f4f1; Play Store</button>
        <button class="tab" data-tab="vercel" onclick="switchTab('vercel')">&#x25b2; Vercel</button>
        <button class="tab" data-tab="export" onclick="switchTab('export')">&#x1f4e5; Data Export</button>
      </div>

      <!-- Tab: Business KPIs -->
      <div id="tab-business" class="tab-content active">
        <div id="business-loading" class="loading"><div class="spinner"></div><p>Loading metrics...</p></div>
        <div id="business-content" class="hidden">

          <div class="section-title">Overview</div>
          <div class="cards" id="overview-cards"></div>

          <div class="section-title">Growth (Recent)</div>
          <div class="cards" id="growth-cards"></div>

          <div class="chart-row">
            <div class="chart-box">
              <h3>Registrations (Last 14 Days)</h3>
              <canvas id="chart-registrations"></canvas>
            </div>
            <div class="chart-box">
              <h3>Chore Submissions (Last 14 Days)</h3>
              <canvas id="chart-submissions"></canvas>
            </div>
          </div>

          <div class="section-title">Submissions Breakdown</div>
          <div class="cards" id="submission-cards"></div>

          <div class="chart-row">
            <div class="chart-box">
              <h3>Verification Method</h3>
              <canvas id="chart-verification"></canvas>
            </div>
            <div class="chart-box">
              <h3>Subscription Tiers</h3>
              <canvas id="chart-subscriptions"></canvas>
            </div>
          </div>

          <div class="section-title">Engagement</div>
          <div class="cards" id="engagement-cards"></div>

          <div class="section-title" style="margin-top:24px">Recent Families</div>
          <div id="recent-families-table"></div>
        </div>
      </div>

      <!-- Tab: All Families -->
      <div id="tab-families" class="tab-content">
        <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px">
          <input type="text" id="families-search" placeholder="Search by name or emailΓÇª"
            style="flex:1;min-width:200px;max-width:340px;padding:8px 12px;border-radius:6px;border:1px solid rgba(148,163,184,0.3);background:rgba(15,23,42,0.8);color:#e2e8f0;font-size:13px"
            oninput="debounceLoadFamilies()" />
          <select id="families-sort"
            style="padding:8px 10px;border-radius:6px;border:1px solid rgba(148,163,184,0.3);background:rgba(15,23,42,0.8);color:#e2e8f0;font-size:13px"
            onchange="loadFamilies(1)">
            <option value="newest">Newest first</option>
            <option value="oldest">Oldest first</option>
            <option value="name">Name AΓÇôZ</option>
          </select>
          <span id="families-count" style="color:#64748b;font-size:13px"></span>
        </div>
        <div id="families-table-wrap"></div>
        <div id="families-pagination" style="display:flex;gap:6px;align-items:center;justify-content:center;margin-top:16px;flex-wrap:wrap"></div>
      </div>

      <!-- Tab: Server Health -->
      <div id="tab-server" class="tab-content">
        <div id="server-loading" class="loading"><div class="spinner"></div><p>Loading server data...</p></div>
        <div id="server-content" class="hidden">
          <div class="health-help">Live backend + MongoDB health. Most numbers are point-in-time; "Last Hour" cards come from Render metrics and can lag slightly.</div>
          <div class="health-grid" id="server-health-grid"></div>
          <div class="section-title">Recent Deploys</div>
          <div class="health-help">Latest deploy events reported by Render for this service.</div>
          <div id="deploys-list"></div>
        </div>
      </div>

      <!-- Tab: Chatbot Logs -->
      <div id="tab-chatbot" class="tab-content">
        <div class="controls">
          <label>Show last: <input type="number" id="log-limit" value="50" min="1" max="200" /></label>
          <button class="refresh-btn" onclick="fetchChatbotLogs()">&#x1f504; Refresh</button>
          <button class="refresh-btn" onclick="toggleCorrections()" style="background:rgba(251,191,36,0.15);border:1px solid rgba(251,191,36,0.4);color:#fbbf24" id="toggle-corrections-btn">&#x1f4dd; View Corrections (<span id="corrections-count">0</span>)</button>
        </div>
        <div id="corrections-panel" style="display:none;margin-bottom:16px">
          <div class="section-title" style="color:#fbbf24;margin-bottom:10px">&#x2705; Admin Corrections (applied to chatbot)</div>
          <div id="corrections-list"></div>
        </div>
        <div id="chatbot-stats" class="cards" style="margin-bottom:16px"></div>
        <div id="chatbot-logs-container"></div>
      </div>

      <!-- Tab: Web Analytics -->
      <div id="tab-analytics" class="tab-content">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:8px">
          <div>
            <label>Period: <select id="analytics-period" onchange="fetchAnalytics()" style="background:rgba(15,23,42,0.8);color:#e2e8f0;border:1px solid rgba(148,163,184,0.3);border-radius:6px;padding:6px 10px;font-size:13px">
              <option value="hours:1">Last hour</option>
              <option value="hours:24">Last 24 hours</option>
              <option value="days:7" selected>Last 7 days</option>
              <option value="days:14">Last 14 days</option>
              <option value="days:30">Last 30 days</option>
              <option value="days:90">Last 90 days</option>
            </select></label>
          </div>
          <button class="refresh-btn" onclick="fetchAnalytics()">&#x1f504; Refresh</button>
        </div>
        <div id="analytics-loading" class="loading"><div class="spinner"></div><p>Loading analytics...</p></div>
        <div id="analytics-content" class="hidden">

          <div class="section-title">Overview</div>
          <div class="cards" id="analytics-overview-cards"></div>

          <div class="section-title">Bot Traffic</div>
          <div class="cards" id="analytics-bot-cards"></div>
          <div id="analytics-bots-table"></div>

          <div class="chart-row">
            <div class="chart-box">
              <h3>Daily Page Views</h3>
              <canvas id="chart-daily-views"></canvas>
            </div>
            <div class="chart-box">
              <h3>Hub Page Views</h3>
              <canvas id="chart-hub-views"></canvas>
            </div>
          </div>

          <div class="section-title">Top Pages</div>
          <div id="analytics-pages-table"></div>

          <div class="chart-row">
            <div class="chart-box">
              <h3>Device Breakdown</h3>
              <canvas id="chart-devices"></canvas>
            </div>
            <div class="chart-box">
              <h3>Browser Breakdown</h3>
              <canvas id="chart-browsers"></canvas>
            </div>
          </div>

          <div class="section-title">Top Referrers</div>
          <div id="analytics-referrers-table"></div>

          <div class="section-title" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px">
            <span>All Visits</span>
            <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
              <select id="visits-page-filter" onchange="resetAndFetchVisits()" style="background:rgba(15,23,42,0.8);color:#e2e8f0;border:1px solid rgba(148,163,184,0.3);border-radius:6px;padding:6px 10px;font-size:12px">
                <option value="">All Pages</option>
              </select>
              <select id="visits-device-filter" onchange="resetAndFetchVisits()" style="background:rgba(15,23,42,0.8);color:#e2e8f0;border:1px solid rgba(148,163,184,0.3);border-radius:6px;padding:6px 10px;font-size:12px">
                <option value="">All Devices</option>
              </select>
              <select id="visits-browser-filter" onchange="resetAndFetchVisits()" style="background:rgba(15,23,42,0.8);color:#e2e8f0;border:1px solid rgba(148,163,184,0.3);border-radius:6px;padding:6px 10px;font-size:12px">
                <option value="">All Browsers</option>
              </select>
              <select id="visits-referrer-filter" onchange="resetAndFetchVisits()" style="background:rgba(15,23,42,0.8);color:#e2e8f0;border:1px solid rgba(148,163,184,0.3);border-radius:6px;padding:6px 10px;font-size:12px">
                <option value="">All Referrers</option>
                <option value="hasReferrer">Has Referrer (no direct)</option>
                <option value="direct">Direct Only</option>
              </select>
              <label style="font-size:12px;color:#94a3b8;display:flex;align-items:center;gap:4px">
                <input type="checkbox" id="visits-include-bots" onchange="resetAndFetchVisits()"> Bots
              </label>
            </div>
          </div>
          <div id="visits-count" style="font-size:12px;color:#64748b;margin-bottom:8px"></div>
          <div id="analytics-visits-table"></div>
          <div id="visits-load-more" style="text-align:center;margin-top:12px;display:none">
            <button class="refresh-btn" onclick="loadMoreVisits()">Load More</button>
          </div>
        </div>
      </div>

      <!-- Tab: Clarity Analytics -->
      <div id="tab-clarity" class="tab-content">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:8px">
          <span style="font-size:13px;color:#94a3b8" id="clarity-cache-status"></span>
        </div>
        <div id="clarity-loading" class="loading"><div class="spinner"></div><p>Loading Clarity analytics...</p></div>
        <div id="clarity-content" class="hidden">

          <!-- Key Takeaways -->
          <div style="background:rgba(251,191,36,0.08);border:1px solid rgba(251,191,36,0.25);border-radius:10px;padding:18px;margin-bottom:20px">
            <h3 style="color:#fbbf24;font-size:15px;margin-bottom:10px">&#x1f4a1; Key Takeaways</h3>
            <ul id="clarity-takeaways" style="list-style:none;padding:0;margin:0;font-size:13px;color:#e2e8f0;line-height:1.7"></ul>
          </div>
          <div style="background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.25);border-radius:10px;padding:18px;margin-bottom:24px">
            <h3 style="color:#22c55e;font-size:15px;margin-bottom:10px">&#x1f680; Recommendations</h3>
            <ul id="clarity-recommendations" style="list-style:none;padding:0;margin:0;font-size:13px;color:#e2e8f0;line-height:1.7"></ul>
          </div>

          <!-- Overview Cards -->
          <div class="section-title">Traffic Overview (Last 3 Days)</div>
          <div class="cards" id="clarity-overview-cards"></div>

          <!-- Channel Performance Table -->
          <div class="section-title">Traffic by Channel</div>
          <div id="clarity-channel-table"></div>

          <!-- Charts Row: Device + OS -->
          <div class="chart-row">
            <div class="chart-box">
              <h3>Device Breakdown</h3>
              <canvas id="clarity-chart-device"></canvas>
            </div>
            <div class="chart-box">
              <h3>Operating System</h3>
              <canvas id="clarity-chart-os"></canvas>
            </div>
          </div>

          <!-- Charts Row: Browser + Country -->
          <div class="chart-row">
            <div class="chart-box">
              <h3>Browser Breakdown</h3>
              <canvas id="clarity-chart-browser"></canvas>
            </div>
            <div class="chart-box">
              <h3>Top Countries</h3>
              <canvas id="clarity-chart-country"></canvas>
            </div>
          </div>

          <!-- Traffic Sources -->
          <div class="section-title">Traffic by Source</div>
          <div id="clarity-source-table"></div>

          <!-- Page Performance Table -->
          <div class="section-title">Page Performance</div>
          <div id="clarity-page-table"></div>

          <!-- Engagement by Channel -->
          <div class="section-title">Engagement &amp; Scroll Depth by Channel</div>
          <div id="clarity-engagement-table"></div>

          <!-- UX Issues -->
          <div class="section-title">UX Issues by Channel</div>
          <div id="clarity-ux-table"></div>

        </div>
        <div id="clarity-error" class="hidden" style="background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#f87171;padding:12px;border-radius:8px"></div>
      </div>

      <!-- Tab: Play Store -->
      <div id="tab-playstore" class="tab-content">
        <div id="playstore-loading" class="loading"><div class="spinner"></div><p>Loading Play Store data...</p></div>
        <div id="playstore-content" class="hidden">

          <div class="section-title">Reviews & Ratings</div>
          <div class="cards" id="playstore-reviews-cards"></div>

          <div class="chart-row">
            <div class="chart-box">
              <h3>Rating Distribution</h3>
              <canvas id="chart-rating-dist"></canvas>
            </div>
            <div class="chart-box" style="overflow-y:auto;max-height:240px">
              <h3>Recent Reviews</h3>
              <div id="recent-reviews-list"></div>
            </div>
          </div>

          <div class="section-title">Install Metrics</div>
          <div id="playstore-installs-note" style="background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.3);border-radius:8px;padding:12px;margin-bottom:16px;font-size:13px;color:#60a5fa">
            Γä╣∩╕Å Install/uninstall metrics require Play Developer Reporting API. Enable it in <a href="https://console.cloud.google.com/apis/api/playdeveloperreporting.googleapis.com" target="_blank" style="color:#93c5fd;text-decoration:underline">Google Cloud Console</a>.
          </div>

        </div>
        <div id="playstore-error" class="hidden" style="background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#f87171;padding:12px;border-radius:8px"></div>
      </div>

      <!-- Tab: Vercel -->
      <div id="tab-vercel" class="tab-content">
        <div id="vercel-loading" class="loading"><div class="spinner"></div><p>Loading Vercel data...</p></div>
        <div id="vercel-content" class="hidden">

          <div class="section-title">Deployment Summary</div>
          <div class="cards" id="vercel-summary-cards"></div>

          <div class="section-title">Projects & Deployments</div>
          <div id="vercel-projects-list"></div>

        </div>
        <div id="vercel-error" class="hidden" style="background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#f87171;padding:12px;border-radius:8px"></div>
      </div>

      <!-- Tab: Data Export -->
      <div id="tab-export" class="tab-content">
        <div style="max-width:700px">
          <p style="color:#94a3b8;margin-bottom:20px">Download raw data as CSV files for analysis in Excel, Power BI, or any other tool. Each button exports <strong>all records</strong> from that collection.</p>

          <div class="export-grid">
            <div class="export-card">
              <div class="export-title">&#x1f310; Page Views / Visits</div>
              <div class="export-desc">Every recorded page view with page, referrer, device, browser, location, time on page, scroll depth, UTM tags, and more.</div>
              <button class="export-btn" onclick="downloadExport('visits')">&#x1f4e5; Download CSV</button>
            </div>
            <div class="export-card">
              <div class="export-title">&#x1f46a; Families</div>
              <div class="export-desc">All families with subscription tier/status, member & child counts, hub info, setup wizard status, and chores-done totals.</div>
              <button class="export-btn" onclick="downloadExport('families')">&#x1f4e5; Download CSV</button>
            </div>
            <div class="export-card">
              <div class="export-title">&#x1f9d2; Children</div>
              <div class="export-desc">All child profiles with family name, age, active status, WiFi hours, custody schedule, and parent-override flags.</div>
              <button class="export-btn" onclick="downloadExport('children')">&#x1f4e5; Download CSV</button>
            </div>
            <div class="export-card">
              <div class="export-title">&#x2705; Chore Submissions</div>
              <div class="export-desc">Every chore submission with child & chore names, verification status, AI confidence, rewards granted, source, and timestamps.</div>
              <button class="export-btn" onclick="downloadExport('submissions')">&#x1f4e5; Download CSV</button>
            </div>
            <div class="export-card">
              <div class="export-title">&#x1f9f9; Chores</div>
              <div class="export-desc">All chore definitions with family, category, difficulty, WiFi minutes, verification criteria, and custom/premade flags.</div>
              <button class="export-btn" onclick="downloadExport('chores')">&#x1f4e5; Download CSV</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    const API_BASE = 'https://chorecheck-backend.onrender.com/api/admin';
    let adminKey = localStorage.getItem('w4w_admin_key') || '';
    let chartInstances = {};

    // Auto-login if key stored
    if (adminKey) {
      document.getElementById('login-screen').classList.add('hidden');
      document.getElementById('dashboard').classList.remove('hidden');
      refreshAll();
    }

    // ΓöÇΓöÇΓöÇ Auth ΓöÇΓöÇΓöÇ
    async function login() {
      const key = document.getElementById('admin-key').value.trim();
      if (!key) return showError('Please enter the admin key');
      try {
        const res = await fetch(`${API_BASE}/chatbot/logs?limit=1`, { headers: { 'x-admin-key': key } });
        if (res.status === 401) return showError('Invalid admin key');
        if (!res.ok) return showError('Server error');
        adminKey = key;
        localStorage.setItem('w4w_admin_key', key);
        document.getElementById('login-screen').classList.add('hidden');
        document.getElementById('dashboard').classList.remove('hidden');
        refreshAll();
      } catch { showError('Connection failed'); }
    }

    function logout() {
      adminKey = '';
      localStorage.removeItem('w4w_admin_key');
      document.getElementById('login-screen').classList.remove('hidden');
      document.getElementById('dashboard').classList.add('hidden');
      document.getElementById('admin-key').value = '';
    }

    function showError(msg) {
      const el = document.getElementById('error');
      el.textContent = msg;
      el.style.display = 'block';
      setTimeout(() => el.style.display = 'none', 3000);
    }

    function enc(s) { return encodeURIComponent(s); }

    // ΓöÇΓöÇΓöÇ Tabs ΓöÇΓöÇΓöÇ
    function switchTab(tab) {
      document.querySelectorAll('.tab').forEach(t => t.classList.toggle('active', t.dataset.tab === tab));
      document.querySelectorAll('.tab-content').forEach(tc => tc.classList.toggle('active', tc.id === `tab-${tab}`));
      // Lazy-load data
      if (tab === 'business' && !window._businessLoaded) fetchBusinessMetrics();
      if (tab === 'families') loadFamilies(1);
      if (tab === 'server' && !window._serverLoaded) fetchServerMetrics();
      if (tab === 'chatbot' && !window._chatbotLoaded) fetchChatbotLogs();
      if (tab === 'analytics' && !window._analyticsLoaded) fetchAnalytics();
      if (tab === 'clarity' && !window._clarityLoaded) fetchClarityData();
      if (tab === 'playstore' && !window._playstoreLoaded) fetchPlayStoreStats();
      if (tab === 'vercel' && !window._vercelLoaded) fetchVercelMetrics();
    }

    async function refreshAll() {
      window._businessLoaded = false;
      window._serverLoaded = false;
      window._chatbotLoaded = false;
      window._analyticsLoaded = false;
      window._clarityLoaded = false;
      window._playstoreLoaded = false;
      window._vercelLoaded = false;
      const activeTab = document.querySelector('.tab.active')?.dataset.tab || 'business';
      if (activeTab === 'business') fetchBusinessMetrics();
      else if (activeTab === 'families') loadFamilies(1);
      else if (activeTab === 'server') fetchServerMetrics();
      else if (activeTab === 'chatbot') fetchChatbotLogs();
      else if (activeTab === 'analytics') fetchAnalytics();
      else if (activeTab === 'clarity') fetchClarityData();
      else if (activeTab === 'playstore') fetchPlayStoreStats();
      else if (activeTab === 'vercel') fetchVercelMetrics();
      document.getElementById('last-updated').textContent = `Updated: ${new Date().toLocaleTimeString()}`;
    }

    // ΓöÇΓöÇΓöÇ All Families (paginated) ΓöÇΓöÇΓöÇ
    let _familiesDebounce = null;
    function debounceLoadFamilies() {
      clearTimeout(_familiesDebounce);
      _familiesDebounce = setTimeout(() => loadFamilies(1), 350);
    }

    async function loadFamilies(page) {
      page = page || 1;
      const search = (document.getElementById('families-search')?.value || '').trim();
      const sort   = document.getElementById('families-sort')?.value || 'newest';
      const wrap   = document.getElementById('families-table-wrap');
      const pgDiv  = document.getElementById('families-pagination');
      const cntEl  = document.getElementById('families-count');

      wrap.innerHTML = '<div class="loading"><div class="spinner"></div><p>Loading familiesΓÇª</p></div>';
      pgDiv.innerHTML = '';

      try {
        const params = new URLSearchParams({ page, limit: 20, sort });
        if (search) params.set('search', search);
        const res = await fetch(`${API_BASE}/families?${params}`, { headers: { 'x-admin-key': adminKey } });
        if (res.status === 401) return logout();
        const d = await res.json();

        cntEl.textContent = `${d.total.toLocaleString()} famil${d.total === 1 ? 'y' : 'ies'}`;

        if (!d.families.length) {
          wrap.innerHTML = '<div class="empty-state">No families found.</div>';
          return;
        }

        const rows = d.families.map(f => `
          <tr>
            <td style="font-weight:500">${esc(f.name)}</td>
            <td style="font-size:12px;color:#94a3b8">${esc(f.ownerEmail || 'ΓÇö')}</td>
            <td><span class="badge badge-${f.subscription?.tier || 'free'}">${f.subscription?.tier || 'free'}</span></td>
            <td>${f.subscription?.status || 'ΓÇö'}</td>
            <td style="text-align:center">${f.childrenCount ?? 0}</td>
            <td style="font-weight:600;color:${(f.choresDoneCount||0)>0?'#22c55e':'#64748b'}">${(f.choresDoneCount||0).toLocaleString()}</td>
            <td style="font-size:12px;color:#64748b">${f.hubConfig?.hubId ? '<span style="color:#60a5fa">Γ£ô Hub</span>' : 'ΓÇö'}</td>
            <td style="font-size:12px;color:#94a3b8">${new Date(f.createdAt).toLocaleDateString()}</td>
          </tr>`).join('');

        wrap.innerHTML = `
          <table class="data-table">
            <thead><tr>
              <th>Family</th><th>Email</th><th>Tier</th><th>Status</th>
              <th style="text-align:center">Kids</th><th>Chores Done</th><th>Hub</th><th>Joined</th>
            </tr></thead>
            <tbody>${rows}</tbody>
          </table>`;

        // Pagination
        if (d.pages > 1) {
          const makeBtn = (label, p, active, disabled) => {
            const cls = `style="padding:6px 12px;border-radius:6px;font-size:13px;font-weight:${active?'700':'500'};
              background:${active?'#fbbf24':'rgba(148,163,184,0.1)'};color:${active?'#1e1e1e':'#94a3b8'};
              border:1px solid ${active?'#fbbf24':'rgba(148,163,184,0.2)'};cursor:${disabled?'not-allowed':'pointer'};opacity:${disabled?0.4:1}"`;
            return `<button ${cls} onclick="${disabled?'':`loadFamilies(${p})`}">${label}</button>`;
          };
          let btns = makeBtn('ΓÇ╣ Prev', page - 1, false, page === 1);
          // Show at most 7 page buttons
          const start = Math.max(1, page - 3);
          const end   = Math.min(d.pages, start + 6);
          for (let p = start; p <= end; p++) {
            btns += makeBtn(p, p, p === page, false);
          }
          btns += makeBtn('Next ΓÇ║', page + 1, false, page === d.pages);
          pgDiv.innerHTML = btns;
        }
      } catch (e) {
        wrap.innerHTML = `<div class="empty-state">Failed to load families: ${e.message}</div>`;
      }
    }

    // ΓöÇΓöÇΓöÇ Business KPIs ΓöÇΓöÇΓöÇ
    async function fetchBusinessMetrics() {
      show('business-loading'); hide('business-content');
      try {
        const res = await fetch(`${API_BASE}/metrics/business`, { headers: { 'x-admin-key': adminKey } });
        if (res.status === 401) return logout();
        const data = await res.json();
        window._businessLoaded = true;
        renderBusinessMetrics(data);
        hide('business-loading'); show('business-content');
      } catch (e) {
        console.error('Business metrics error:', e);
        document.getElementById('business-loading').innerHTML = `<p>Failed to load metrics: ${e.message || e}</p>`;
      }
    }

    function renderBusinessMetrics(d) {
      // Overview
      setCards('overview-cards', [
        { value: d.overview.totalFamilies, label: 'Families', color: 'gold' },
        { value: d.overview.totalParents, label: 'Parents' },
        { value: d.overview.totalChildren, label: 'Children', color: 'green' },
        { value: d.overview.activeChores, label: 'Active Chores', color: 'purple' },
        { value: d.overview.hubWaitlist, label: 'Hub Waitlist' }
      ]);

      // Growth
      setCards('growth-cards', [
        { value: d.growth.familiesThisWeek, label: 'Families This Week', color: 'green' },
        { value: d.growth.familiesThisMonth, label: 'Families This Month' },
        { value: d.growth.childrenThisWeek, label: 'Children This Week', color: 'green' }
      ]);

      // Submissions
      setCards('submission-cards', [
        { value: d.submissions.today, label: 'Today', color: 'gold' },
        { value: d.submissions.thisWeek, label: 'This Week' },
        { value: d.submissions.thisMonth, label: 'This Month' },
        { value: d.submissions.total, label: 'All Time', color: 'purple' },
        { value: d.submissions.pending, label: 'Pending Review', color: 'red' },
        { value: d.submissions.approved, label: 'Approved', color: 'green' }
      ]);

      // Engagement
      const hours = Math.round(d.engagement.totalWiFiMinutesEarned / 60);
      setCards('engagement-cards', [
        { value: d.engagement.totalChoresCompleted.toLocaleString(), label: 'Total Chores Done', color: 'green' },
        { value: `${hours}h`, label: 'WiFi Time Earned', color: 'gold' },
        { value: d.engagement.avgCurrentStreak, label: 'Avg Streak' },
        { value: d.engagement.longestStreak, label: 'Longest Streak', color: 'purple' },
        { value: d.engagement.chatbotConversations, label: 'Chatbot Chats' },
        { value: d.engagement.chatbotThisWeek, label: 'Chats This Week' }
      ]);

      // Charts
      renderLineChart('chart-registrations', d.charts.registrationsByDay, '#22c55e');
      renderLineChart('chart-submissions', d.charts.submissionsByDay, '#60a5fa');
      renderDoughnut('chart-verification', {
        'AI Verified': d.submissions.aiVerified,
        'Parent Verified': d.submissions.parentVerified,
        'Pending': d.submissions.pending,
        'Rejected': d.submissions.rejected
      }, ['#3b82f6', '#22c55e', '#fbbf24', '#ef4444']);
      renderDoughnut('chart-subscriptions', d.subscriptions, [
        '#64748b', '#3b82f6', '#22c55e', '#a78bfa', '#fbbf24', '#ef4444'
      ]);

      // Recent families table
      const tbody = d.recentFamilies.map(f => `
        <tr>
          <td>${esc(f.name)}</td>
          <td style="font-size:12px;color:#94a3b8">${esc(f.ownerEmail || '')}</td>
          <td><span class="badge badge-${f.subscription?.tier || 'free'}">${f.subscription?.tier || 'free'}</span></td>
          <td>${f.subscription?.status || '-'}</td>
          <td style="font-weight:600;color:${f.choresDoneCount > 0 ? '#22c55e' : '#64748b'}">${f.choresDoneCount || 0}</td>
          <td>${new Date(f.createdAt).toLocaleDateString()}</td>
        </tr>
      `).join('');
      document.getElementById('recent-families-table').innerHTML = `
        <table class="data-table">
          <thead><tr><th>Family</th><th>Email</th><th>Tier</th><th>Status</th><th>Chores Done</th><th>Joined</th></tr></thead>
          <tbody>${tbody}</tbody>
        </table>`;
    }

    // ΓöÇΓöÇΓöÇ Server Health ΓöÇΓöÇΓöÇ
    async function fetchServerMetrics() {
      show('server-loading'); hide('server-content');
      try {
        const adminHeaders = { headers: { 'x-admin-key': adminKey } };
        const [serverRes, deploysRes] = await Promise.all([
          fetch(`${API_BASE}/metrics/server`, adminHeaders),
          fetch(`${API_BASE}/metrics/render/deploys`, adminHeaders)
        ]);
        if (serverRes.status === 401) return logout();
        const server = await serverRes.json();
        const deploys = await deploysRes.json();
        window._serverLoaded = true;
        renderServerHealth(server, deploys);
        hide('server-loading'); show('server-content');
      } catch (e) {
        document.getElementById('server-loading').innerHTML = '<p>Failed to load server data</p>';
      }
    }

    function renderServerHealth(s, deploys) {
      const grid = document.getElementById('server-health-grid');
      const uptimeHrs = Math.round(s.uptime / 3600 * 10) / 10;
      const memMB = Math.round(s.memoryUsage.heapUsed / 1024 / 1024);
      const memTotalMB = Math.round(s.memoryUsage.heapTotal / 1024 / 1024);

      function sevDot(sev, tip) {
        const title = tip ? ` title="${esc(String(tip))}"` : '';
        return `<span class="status-dot ${sev}"${title}></span>`;
      }

      function uptimeSev(hours) {
        if (hours < 0.25) return { sev: 'red', tip: 'Backend restarted very recently (< 15 min).' };
        if (hours < 1) return { sev: 'yellow', tip: 'Backend restarted recently (< 1 hour).' };
        return { sev: 'green', tip: 'Uptime looks normal.' };
      }

      function heapSev(usedMB, totalMB) {
        if (!totalMB || totalMB <= 0) return { sev: 'yellow', tip: 'Heap total not available.' };
        const ratio = usedMB / totalMB;
        if (ratio >= 0.9) return { sev: 'red', tip: `Heap is very full (~${Math.round(ratio * 100)}%). Risk of GC pressure/out-of-memory.` };
        if (ratio >= 0.8) return { sev: 'yellow', tip: `Heap is getting full (~${Math.round(ratio * 100)}%).` };
        return { sev: 'green', tip: `Heap usage looks fine (~${Math.round(ratio * 100)}%).` };
      }

      function rssSev(rssMB) {
        // Heuristic thresholds; Render instance sizes vary.
        if (rssMB >= 600) return { sev: 'red', tip: 'High process memory (RSS). May risk OOM depending on instance size.' };
        if (rssMB >= 400) return { sev: 'yellow', tip: 'Elevated process memory (RSS). Watch for steady growth.' };
        return { sev: 'green', tip: 'Process memory (RSS) looks normal.' };
      }

      function connSev(current, available) {
        const total = (current || 0) + (available || 0);
        if (total <= 0) return { sev: 'yellow', tip: 'Connection capacity not available.' };
        const util = (current || 0) / total;
        if (available <= 10 || util >= 0.9) return { sev: 'red', tip: 'MongoDB is near its connection limit.' };
        if (available <= 50 || util >= 0.75) return { sev: 'yellow', tip: 'MongoDB connection usage is moderately high.' };
        return { sev: 'green', tip: 'MongoDB connection usage looks healthy.' };
      }

      const uptimeSig = uptimeSev(uptimeHrs);
      const heapSig = heapSev(memMB, memTotalMB);
      const rssMB = Math.round(s.memoryUsage.rss / 1024 / 1024);
      const rssSig = rssSev(rssMB);
      const dbConnected = s.database.status === 'connected';

      let html = `
        <div class="health-card">
          <h3>&#x1f5a5;&#xfe0f; Process</h3>
          <div class="health-source">Source: Backend (Node)</div>
          <div class="health-help">Backend process status (restarts reset uptime and memory).</div>
          <div class="health-row"><span class="health-label" title="Node.js runtime version the backend is running">${sevDot('green', 'Informational')}Node</span><span class="health-value">${s.nodeVersion}</span></div>
          <div class="health-row"><span class="health-label" title="Time since the backend process last restarted (deploys/crashes reset this)">${sevDot(uptimeSig.sev, uptimeSig.tip)}Uptime</span><span class="health-value">${uptimeHrs} hrs</span></div>
          <div class="health-row"><span class="health-label" title="JavaScript heap in use vs heap allocated by V8 (not total process memory)">${sevDot(heapSig.sev, heapSig.tip)}Heap Used</span><span class="health-value">${memMB} / ${memTotalMB} MB</span></div>
          <div class="health-row"><span class="health-label" title="Resident Set Size: total memory held by the process (heap + native + buffers)">${sevDot(rssSig.sev, rssSig.tip)}RSS</span><span class="health-value">${rssMB} MB</span></div>
        </div>

        <div class="health-card">
          <h3>&#x1f4be; Database</h3>
          <div class="health-source">Source: MongoDB (via backend)</div>
          <div class="health-help">MongoDB connection + database size summary.</div>
          <div class="health-row">
            <span class="health-label" title="Whether the backend is currently connected to MongoDB">${sevDot(dbConnected ? 'green' : 'red', dbConnected ? 'Connected' : 'Disconnected')}Status</span>
            <span class="health-value"><span class="status-dot ${s.database.status === 'connected' ? 'green' : 'red'}"></span>${s.database.status}</span>
          </div>
          <div class="health-row"><span class="health-label" title="Mongo database name currently selected for reads/writes">${sevDot('green', 'Informational')}DB Name</span><span class="health-value">${s.database.name || '-'}</span></div>`;

      if (s.database.stats) {
        const st = s.database.stats;
        html += `
          <div class="health-row"><span class="health-label" title="Number of collections (tables) in this database">${sevDot('green', 'Informational')}Collections</span><span class="health-value">${st.collections || '-'}</span></div>
          <div class="health-row"><span class="health-label" title="Approximate total documents across all collections (db.stats 'objects')">${sevDot('green', 'Informational')}Objects</span><span class="health-value">${(st.objects || 0).toLocaleString()}</span></div>
          <div class="health-row"><span class="health-label" title="Logical size of stored data (does not include indexes)">${sevDot('green', 'Informational')}Data Size</span><span class="health-value">${formatBytes(st.dataSize)}</span></div>
          <div class="health-row"><span class="health-label" title="Allocated storage on disk (dataSize plus padding/overhead)">${sevDot('green', 'Informational')}Storage Size</span><span class="health-value">${formatBytes(st.storageSize)}</span></div>
          <div class="health-row"><span class="health-label" title="Index count and total index storage size">${sevDot('green', 'Informational')}Indexes</span><span class="health-value">${st.indexes || '-'} (${formatBytes(st.indexSize)})</span></div>`;
      }
      html += `</div>`;

      if (s.database.connections) {
        const c = s.database.connections;
        const connSig = connSev(c.current, c.available);
        html += `
        <div class="health-card">
          <h3>&#x1f517; DB Connections</h3>
          <div class="health-source">Source: MongoDB server</div>
          <div class="health-help">Connection counts reported by MongoDB (not just this app).</div>
          <div class="health-row"><span class="health-label" title="Current active connections to MongoDB across all clients">${sevDot(connSig.sev, connSig.tip)}Current</span><span class="health-value">${c.current}</span></div>
          <div class="health-row"><span class="health-label" title="Connections available before hitting MongoDB's configured limit">${sevDot(connSig.sev, connSig.tip)}Available</span><span class="health-value">${c.available}</span></div>
          <div class="health-row"><span class="health-label" title="Total connections created since the MongoDB server last started">${sevDot('green', 'Informational')}Total Created</span><span class="health-value">${(c.totalCreated || 0).toLocaleString()}</span></div>
        </div>`;
      }

      if (s.database.opcounters) {
        const ops = s.database.opcounters;
        html += `
        <div class="health-card">
          <h3>&#x26a1; DB Operations (lifetime)</h3>
          <div class="health-source">Source: MongoDB server</div>
          <div class="health-help">Operation counters since the MongoDB server last restarted (includes all clients).</div>
          <div class="health-row"><span class="health-label" title="Number of insert operations since MongoDB start">${sevDot('green', 'Informational')}Insert</span><span class="health-value">${(ops.insert || 0).toLocaleString()}</span></div>
          <div class="health-row"><span class="health-label" title="Number of queries since MongoDB start">${sevDot('green', 'Informational')}Query</span><span class="health-value">${(ops.query || 0).toLocaleString()}</span></div>
          <div class="health-row"><span class="health-label" title="Number of update operations since MongoDB start">${sevDot('green', 'Informational')}Update</span><span class="health-value">${(ops.update || 0).toLocaleString()}</span></div>
          <div class="health-row"><span class="health-label" title="Number of delete operations since MongoDB start">${sevDot('green', 'Informational')}Delete</span><span class="health-value">${(ops.delete || 0).toLocaleString()}</span></div>
          <div class="health-row"><span class="health-label" title="Total database commands since MongoDB start (includes internal commands)">${sevDot('green', 'Informational')}Commands</span><span class="health-value">${(ops.command || 0).toLocaleString()}</span></div>
        </div>`;
      }

      // Render API metrics
      const renderConfigured = s.render && (s.render.configured !== false);
      const renderLegacyError = (s.render && typeof s.render.error === 'string' && s.render.error.trim()) ? s.render.error.trim() : null;
      const renderErrors = (s.render && Array.isArray(s.render.errors) && s.render.errors.length)
        ? s.render.errors
        : (renderLegacyError ? [renderLegacyError] : null);
      const renderHasAnyMetrics = !!(s.render && (s.render.httpRequests || s.render.httpLatency || s.render.cpu || s.render.memory || s.render.bandwidth));
      const renderPlanBlocksMetrics = !!(renderErrors && renderErrors.some(e => {
        const msg = String(e || '');
        return /query is not allowed for plan/i.test(msg) || /plan:\s*hobby/i.test(msg);
      }));

      if (s.render && s.render.configured === false) {
        const missing = (s.render.missing && s.render.missing.length) ? s.render.missing.join(', ') : 'RENDER_API_KEY and RENDER_SERVICE_ID';
        html += `
        <div class="health-card">
          <h3>&#x1f310; Render Metrics</h3>
          <div class="config-notice">
            Not configured. Add <code>${esc(missing)}</code> to your Render environment to enable.
          </div>
        </div>`;
      } else if (renderConfigured) {
        if (s.render.service) {
          const svc = s.render.service;
          const dash = svc.dashboardUrl || '';
          html += `
          <div class="health-card">
            <h3>&#x2601;&#xfe0f; Render Service</h3>
            <div class="health-source">Source: Render API</div>
            <div class="health-help">Runtime plan/specs for the running backend service (this is the ΓÇ£instance typeΓÇ¥ you were trying to find).</div>
            <div class="health-row"><span class="health-label" title="Render runtime plan / instance type">${sevDot('green', 'Informational')}Plan</span><span class="health-value">${esc(svc.plan || '-')}</span></div>
            <div class="health-row"><span class="health-label" title="Render build machine tier (used for builds, not runtime)">${sevDot('green', 'Informational')}Build Plan</span><span class="health-value">${esc(svc.buildPlan || '-')}</span></div>
            <div class="health-row"><span class="health-label" title="Runtime environment for the service">${sevDot('green', 'Informational')}Runtime</span><span class="health-value">${esc(svc.runtime || '-')}</span></div>
            <div class="health-row"><span class="health-label" title="Region where the service runs">${sevDot('green', 'Informational')}Region</span><span class="health-value">${esc(svc.region || '-')}</span></div>
            <div class="health-row"><span class="health-label" title="Configured instance count (manual scale); autoscaling may override actual running count">${sevDot('green', 'Informational')}Instances</span><span class="health-value">${svc.numInstances ?? '-'}</span></div>
            <div class="health-row"><span class="health-label" title="Autoscaling settings, if enabled">${sevDot('green', 'Informational')}Autoscaling</span><span class="health-value">${svc.autoscaling?.enabled ? `on (${svc.autoscaling.min}-${svc.autoscaling.max})` : 'off'}</span></div>
            ${dash ? `<div class="health-row"><span class="health-label" title="Open this service in the Render dashboard">${sevDot('green', 'Informational')}Dashboard</span><span class="health-value"><a href="${escAttr(dash)}" target="_blank" rel="noopener">Open</a></span></div>` : ''}
          </div>`;
        }

        if (s.render && renderErrors && !renderHasAnyMetrics) {
          const errText = renderErrors.map(e => esc(String(e))).join('<br/>');
          const guidance = renderPlanBlocksMetrics
            ? 'Render metrics queries are not available on the Hobby plan. Upgrade the service plan to enable metrics.'
            : 'Check that <code>RENDER_API_KEY</code> is valid and <code>RENDER_SERVICE_ID</code> matches this service.';
          html += `
          <div class="health-card">
            <h3>&#x1f310; Render Metrics</h3>
            <div class="health-source">Source: Render API</div>
            <div class="config-notice">
              Render data unavailable.<br/>
              ${errText}<br/>
              (${guidance})
            </div>
          </div>`;
        }

        if (s.render.httpRequests) {
          html += `
          <div class="health-card">
            <h3>&#x1f310; HTTP (Last Hour)</h3>
            <div class="health-source">Source: Render metrics API</div>
            <div class="health-help">Request counts reported by Render for the last ~60 minutes.</div>
            ${renderMetricSummary(s.render.httpRequests, 'httpRequests')}
          </div>`;
        }
        if (s.render.httpLatency) {
          html += `
          <div class="health-card">
            <h3>&#x23f1;&#xfe0f; Latency (Last Hour)</h3>
            <div class="health-source">Source: Render metrics API</div>
            <div class="health-help">Response time summary from Render for the last ~60 minutes.</div>
            ${renderMetricSummary(s.render.httpLatency, 'httpLatency')}
          </div>`;
        }
        if (s.render.cpu) {
          html += `
          <div class="health-card">
            <h3>&#x1f4bb; CPU (Last Hour)</h3>
            <div class="health-source">Source: Render metrics API</div>
            <div class="health-help">CPU usage summary from Render for the last ~60 minutes.</div>
            ${renderMetricSummary(s.render.cpu, 'cpu')}
          </div>`;
        }
        if (s.render.memory) {
          html += `
          <div class="health-card">
            <h3>&#x1f9e0; Memory (Last Hour)</h3>
            <div class="health-source">Source: Render metrics API</div>
            <div class="health-help">Memory usage summary from Render for the last ~60 minutes (separate from Node heap).</div>
            ${renderMetricSummary(s.render.memory, 'memory')}
          </div>`;
        }
      }

      grid.innerHTML = html;

      // Deploys
      const deploysList = document.getElementById('deploys-list');
      if (deploys.deploys && deploys.deploys.length > 0) {
        deploysList.innerHTML = deploys.deploys.map(d => {
          const dep = d.deploy || d;
          const status = (dep.status || 'unknown').toLowerCase();
          const statusClass = status === 'live' ? 'live' : status === 'build_in_progress' ? 'building' : status === 'build_failed' ? 'failed' : 'deactivated';
          const commit = dep.commit?.message || dep.trigger || status;
          const time = dep.finishedAt || dep.createdAt;
          return `
            <div class="deploy-entry">
              <div class="deploy-status ${statusClass}"></div>
              <div class="deploy-info">
                <div>${status.replace(/_/g, ' ')}</div>
                <div class="deploy-commit">${esc(commit.substring(0, 80))}</div>
              </div>
              <div class="deploy-time">${time ? timeAgo(new Date(time)) : '-'}</div>
            </div>`;
        }).join('');
      } else {
        const msg = deploys.error ? `Render deploys unavailable: ${esc(String(deploys.error))}` : (deploys.message || 'No deploys found');
        deploysList.innerHTML = `<div class="empty-state">${msg}</div>`;
      }
    }

    function renderMetricSummary(data, kind) {
      if (!data) return '<div class="health-row"><span class="health-label">No data</span></div>';

      function sevDot(sev, tip) {
        const title = tip ? ` title="${esc(String(tip))}"` : '';
        return `<span class="status-dot ${sev}"${title}></span>`;
      }

      function metricSignal(metricKind, label, value) {
        const raw = (value ?? '').toString();
        const num = Number(value);
        const l = (label || '').toString().toLowerCase();
        const k = (metricKind || '').toString().toLowerCase();

        if (!Number.isFinite(num)) return { sev: 'green', tip: 'Informational.' };

        const looksLikeLatency = k.includes('latency') || l.includes('latency') || l.includes('p95') || l.includes('p99') || l.includes('ms');
        if (looksLikeLatency) {
          const ms = num;
          if (ms >= 2000) return { sev: 'red', tip: `High latency (${Math.round(ms)} ms).` };
          if (ms >= 1000) return { sev: 'yellow', tip: `Elevated latency (${Math.round(ms)} ms).` };
          return { sev: 'green', tip: `Latency looks OK (${Math.round(ms)} ms).` };
        }

        if (k === 'cpu' || l.includes('cpu')) {
          const pct = num <= 1.5 ? (num * 100) : num;
          if (pct >= 85) return { sev: 'red', tip: `High CPU (~${Math.round(pct)}%).` };
          if (pct >= 70) return { sev: 'yellow', tip: `Elevated CPU (~${Math.round(pct)}%).` };
          return { sev: 'green', tip: `CPU looks OK (~${Math.round(pct)}%).` };
        }

        if (k === 'memory' || l.includes('memory') || l.includes('mem')) {
          const looksPercent = raw.includes('%') || l.includes('percent') || l.includes('util');
          if (looksPercent) {
            const pct = num <= 1.5 ? (num * 100) : num;
            if (pct >= 90) return { sev: 'red', tip: `High memory (~${Math.round(pct)}%).` };
            if (pct >= 75) return { sev: 'yellow', tip: `Elevated memory (~${Math.round(pct)}%).` };
            return { sev: 'green', tip: `Memory looks OK (~${Math.round(pct)}%).` };
          }

          // If this is bytes, use a conservative heuristic. Instance size varies.
          const bytes = num;
          const mb = bytes / 1024 / 1024;
          if (bytes >= 1200 * 1024 * 1024) return { sev: 'red', tip: `High memory (~${Math.round(mb)} MB).` };
          if (bytes >= 800 * 1024 * 1024) return { sev: 'yellow', tip: `Elevated memory (~${Math.round(mb)} MB).` };
          return { sev: 'green', tip: `Memory looks OK (~${Math.round(mb)} MB).` };
        }

        // Default: treat as informational.
        return { sev: 'green', tip: 'Informational.' };
      }

      if (Array.isArray(data)) {
        if (data.length === 0) return '<div class="health-row"><span class="health-label">No data</span></div>';
        return data.slice(0, 5).map(item => {
          const label = item.metric || item.name || 'Value';
          const val = item.value ?? item.values?.[item.values.length - 1]?.value ?? '-';
          const sig = metricSignal(kind, label, val);
          return `<div class="health-row"><span class="health-label">${sevDot(sig.sev, sig.tip)}${esc(String(label))}</span><span class="health-value">${val}</span></div>`;
        }).join('');
      }
      return Object.entries(data).slice(0, 6).map(([k, v]) =>
        (() => {
          const val = typeof v === 'object' ? JSON.stringify(v).substring(0, 40) : v;
          const sig = metricSignal(kind, k, typeof v === 'object' ? NaN : v);
          return `<div class="health-row"><span class="health-label">${sevDot(sig.sev, sig.tip)}${esc(k)}</span><span class="health-value">${val}</span></div>`;
        })()
      ).join('');
    }

    // ΓöÇΓöÇΓöÇ Chatbot Logs ΓöÇΓöÇΓöÇ
    async function fetchChatbotLogs() {
      const container = document.getElementById('chatbot-logs-container');
      container.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
      const limit = document.getElementById('log-limit').value || 50;
      try {
        const res = await fetch(`${API_BASE}/chatbot/logs?limit=${limit}`, { headers: { 'x-admin-key': adminKey } });
        if (res.status === 401) return logout();
        const data = await res.json();
        window._chatbotLoaded = true;

        let totalTokens = 0;
        data.logs.forEach(l => { totalTokens += (l.promptTokens || 0) + (l.completionTokens || 0); });

        document.getElementById('chatbot-stats').innerHTML = `
          <div class="card"><div class="card-value">${data.count}</div><div class="card-label">Total Conversations</div></div>
          <div class="card"><div class="card-value">${totalTokens.toLocaleString()}</div><div class="card-label">Total Tokens (shown)</div></div>`;

        if (data.logs.length === 0) {
          container.innerHTML = '<div class="empty-state">No conversations yet</div>';
          return;
        }

        container.innerHTML = data.logs.map(log => {
          const logId = log.id || log._id;
          return `
          <div class="log-entry" id="log-${logId}">
            <div class="log-meta">
              <span>${new Date(log.timestamp).toLocaleString()}</span>
              <span class="log-tokens">${log.promptTokens || 0} + ${log.completionTokens || 0} tokens</span>
            </div>
            <div class="log-question">
              <div class="log-question-label">&#x2753; QUESTION</div>
              <span class="log-question-text">${esc(log.question)}</span>
            </div>
            <div class="log-answer">
              <div class="log-answer-label">&#x1f4ac; AI RESPONSE</div>
              ${esc(log.answer)}
            </div>
            <button class="correct-btn" onclick="toggleCorrectionForm('${logId}')">&#x270f;&#xfe0f; Correct This Response</button>
            <div class="correction-form" id="correction-form-${logId}">
              <label>Correct Answer:</label>
              <textarea id="correction-text-${logId}" placeholder="Enter the correct response the AI should have given...">${esc(log.answer)}</textarea>
              <div class="correction-actions">
                <button class="save-correction-btn" onclick="saveCorrection('${logId}')">&#x2705; Save Correction</button>
                <button class="cancel-correction-btn" onclick="toggleCorrectionForm('${logId}')">Cancel</button>
              </div>
            </div>
          </div>
        `}).join('');
        // Also load corrections count
        fetchCorrections(true);
      } catch {
        container.innerHTML = '<div class="empty-state">Failed to load logs</div>';
      }
    }

    // ΓöÇΓöÇΓöÇ Correction Functions ΓöÇΓöÇΓöÇ
    function toggleCorrectionForm(logId) {
      const form = document.getElementById('correction-form-' + logId);
      if (form) form.classList.toggle('open');
    }

    async function saveCorrection(logId) {
      const textarea = document.getElementById('correction-text-' + logId);
      const correctAnswer = textarea.value.trim();
      if (!correctAnswer) return alert('Please enter the correct response.');

      // Read question and wrong answer directly from the DOM
      const logEntry = document.getElementById('log-' + logId);
      const question = logEntry.querySelector('.log-question-text').textContent.trim();
      const answerDiv = logEntry.querySelector('.log-answer');
      const wrongAnswer = answerDiv.textContent.replace('≡ƒÆ¼ AI RESPONSE', '').trim();

      try {
        const res = await fetch(`${API_BASE}/chatbot/corrections`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'x-admin-key': adminKey },
          body: JSON.stringify({ question, wrongAnswer, correctAnswer })
        });
        if (res.status === 401) return logout();
        const data = await res.json();
        if (data.success) {
          const form = document.getElementById('correction-form-' + logId);
          form.classList.remove('open');
          form.insertAdjacentHTML('afterend', '<div class="correction-saved">&#x2705; Correction saved! The chatbot will now use this answer.</div>');
          fetchCorrections(true);
        } else {
          alert('Failed to save: ' + (data.error || 'Unknown error'));
        }
      } catch (err) {
        alert('Error saving correction: ' + err.message);
      }
    }

    function toggleCorrections() {
      const panel = document.getElementById('corrections-panel');
      const isHidden = panel.style.display === 'none';
      panel.style.display = isHidden ? 'block' : 'none';
      if (isHidden) fetchCorrections(false);
    }

    async function fetchCorrections(countOnly) {
      try {
        const res = await fetch(`${API_BASE}/chatbot/corrections`, { headers: { 'x-admin-key': adminKey } });
        if (res.status === 401) return logout();
        const data = await res.json();
        document.getElementById('corrections-count').textContent = data.count;
        if (countOnly) return;

        const container = document.getElementById('corrections-list');
        if (data.corrections.length === 0) {
          container.innerHTML = '<div class="empty-state">No corrections yet. Click "Correct This Response" on any log entry to add one.</div>';
          return;
        }
        container.innerHTML = data.corrections.map(c => `
          <div class="correction-entry" id="correction-${c.id}">
            <div class="correction-q">Q: ${esc(c.question)}</div>
            <div class="correction-a">${esc(c.correctAnswer)}</div>
            <div class="correction-meta">
              <span>${new Date(c.timestamp).toLocaleString()}</span>
              <button class="delete-correction-btn" onclick="deleteCorrection('${c.id}')">&#x1f5d1;&#xfe0f; Remove</button>
            </div>
          </div>
        `).join('');
      } catch {
        document.getElementById('corrections-list').innerHTML = '<div class="empty-state">Failed to load corrections</div>';
      }
    }

    async function deleteCorrection(id) {
      if (!confirm('Remove this correction? The chatbot will no longer use it.')) return;
      try {
        const res = await fetch(`${API_BASE}/chatbot/corrections/${id}`, { method: 'DELETE', headers: { 'x-admin-key': adminKey } });
        if (res.status === 401) return logout();
        const data = await res.json();
        if (data.success) {
          const el = document.getElementById('correction-' + id);
          if (el) el.remove();
          fetchCorrections(true);
        }
      } catch (err) {
        alert('Error deleting correction: ' + err.message);
      }
    }

    // ΓöÇΓöÇΓöÇ Chart Helpers ΓöÇΓöÇΓöÇ
    function renderLineChart(canvasId, data, color) {
      if (chartInstances[canvasId]) chartInstances[canvasId].destroy();
      const ctx = document.getElementById(canvasId)?.getContext('2d');
      if (!ctx || !data) return;
      chartInstances[canvasId] = new Chart(ctx, {
        type: 'line',
        data: {
          labels: data.map(d => { const p = d._id.split('-'); return `${p[1]}/${p[2]}`; }),
          datasets: [{
            data: data.map(d => d.count),
            borderColor: color,
            backgroundColor: color + '20',
            fill: true,
            tension: 0.3,
            pointRadius: 4,
            pointBackgroundColor: color
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: { legend: { display: false } },
          scales: {
            y: { beginAtZero: true, ticks: { color: '#64748b', stepSize: 1 }, grid: { color: 'rgba(148,163,184,0.08)' } },
            x: { ticks: { color: '#64748b' }, grid: { display: false } }
          }
        }
      });
    }

    function renderDoughnut(canvasId, data, colors) {
      if (chartInstances[canvasId]) chartInstances[canvasId].destroy();
      const ctx = document.getElementById(canvasId)?.getContext('2d');
      if (!ctx || !data) return;
      const labels = Object.keys(data);
      const values = Object.values(data);
      if (values.every(v => v === 0)) {
        ctx.canvas.parentElement.innerHTML += '<p style="text-align:center;color:#64748b;font-size:12px;">No data yet</p>';
        return;
      }
      chartInstances[canvasId] = new Chart(ctx, {
        type: 'doughnut',
        data: {
          labels: labels.map(l => l.charAt(0).toUpperCase() + l.slice(1)),
          datasets: [{ data: values, backgroundColor: colors.slice(0, labels.length), borderWidth: 0 }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: { position: 'right', labels: { color: '#94a3b8', boxWidth: 12, padding: 12, font: { size: 12 } } }
          }
        }
      });
    }

    // ΓöÇΓöÇΓöÇ Util ΓöÇΓöÇΓöÇ
    function setCards(containerId, items) {
      document.getElementById(containerId).innerHTML = items.map(i => `
        <div class="card">
          <div class="card-value ${i.color || ''}">${i.value}</div>
          <div class="card-label">${i.label}</div>
        </div>
      `).join('');
    }

    function esc(text) {
      if (!text) return '';
      return String(text).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>');
    }

    function escAttr(text) {
      return esc(text).replace(/"/g, '&quot;').replace(/'/g, '&#39;');
    }

    function formatBytes(bytes) {
      if (!bytes || bytes === 0) return '0 B';
      const k = 1024;
      const sizes = ['B', 'KB', 'MB', 'GB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
    }

    function timeAgo(date) {
      const secs = Math.floor((new Date() - date) / 1000);
      if (secs < 60) return 'just now';
      if (secs < 3600) return Math.floor(secs / 60) + 'm ago';
      if (secs < 86400) return Math.floor(secs / 3600) + 'h ago';
      return Math.floor(secs / 86400) + 'd ago';
    }

    function show(id) { document.getElementById(id).classList.remove('hidden'); }
    function hide(id) { document.getElementById(id).classList.add('hidden'); }

    // Enter key to login
    document.getElementById('admin-key').addEventListener('keypress', (e) => {
      if (e.key === 'Enter') login();
    });

    // ΓöÇΓöÇΓöÇ Web Analytics ΓöÇΓöÇΓöÇ
    let analyticsCharts = {};

    async function fetchAnalytics() {
      show('analytics-loading'); hide('analytics-content');
      try {
        const periodSelect = document.getElementById('analytics-period');
        const periodValue = periodSelect?.value || 'days:7';
        const [unit, amount] = periodValue.split(':');
        const params = new URLSearchParams();
        if (unit === 'hours') params.set('hours', amount);
        else params.set('days', amount);
        
        // Apply filters from visits section to analytics
        const pageFilter = document.getElementById('visits-page-filter')?.value;
        const deviceFilter = document.getElementById('visits-device-filter')?.value;
        const browserFilter = document.getElementById('visits-browser-filter')?.value;
        const referrerFilter = document.getElementById('visits-referrer-filter')?.value;
        const includeBots = document.getElementById('visits-include-bots')?.checked;
        
        if (pageFilter) params.set('pageFilter', pageFilter);
        if (deviceFilter) params.set('device', deviceFilter);
        if (browserFilter) params.set('browser', browserFilter);
        if (referrerFilter) params.set('referrer', referrerFilter);
        if (includeBots) params.set('includeBots', 'true');
        
        const res = await fetch(`${API_BASE}/metrics/analytics?${params}`, { headers: { 'x-admin-key': adminKey } });
        if (res.status === 401) return logout();
        const data = await res.json();
        window._analyticsLoaded = true;
        renderAnalytics(data);
        hide('analytics-loading'); show('analytics-content');
      } catch (err) {
        console.error('Analytics error:', err);
        document.getElementById('analytics-loading').innerHTML = `<p style="color:#f87171">Failed to load analytics: ${err.message || err}</p>`;
      }
    }

    function renderAnalytics(data) {
      const o = data.overview || {};
      const ob = data.overviewBots || {};

      // Overview cards
      setCards('analytics-overview-cards', [
        { value: o.totalPageViews ?? 0, label: 'Total Page Views', color: 'gold' },
        { value: o.uniqueVisitors ?? 0, label: 'Unique Visitors' },
        { value: formatDuration(o.avgTimeOnPage), label: 'Avg Time on Page', color: 'green' },
        { value: (o.avgScrollDepth ?? 0) + '%', label: 'Avg Scroll Depth', color: 'purple' }
      ]);

      // Bot traffic
      setCards('analytics-bot-cards', [
        { value: ob.totalPageViews ?? 0, label: 'Bot Page Views', color: 'red' },
        { value: ob.uniqueVisitors ?? 0, label: 'Bot Unique Visitors', color: 'red' }
      ]);

      const bots = data.botsByName || [];
      document.getElementById('analytics-bots-table').innerHTML = bots.length === 0
        ? '<p style="color:#64748b;font-size:13px;">No bot traffic detected yet</p>'
        : `<table class="data-table">
          <thead><tr><th>Bot</th><th>Views</th></tr></thead>
          <tbody>${bots.map(b => `
            <tr><td>${esc(b._id || 'Unknown')}</td><td>${b.views || 0}</td></tr>
          `).join('')}</tbody>
        </table>`;

      // Daily views chart
      analyticsLineChart('chart-daily-views', 'dailyViews',
        (data.dailyViews || []).map(d => d._id),
        [{
          label: 'Page Views',
          data: (data.dailyViews || []).map(d => d.views),
          borderColor: '#fbbf24',
          backgroundColor: 'rgba(251,191,36,0.1)'
        }, {
          label: 'Unique Visitors',
          data: (data.dailyViews || []).map(d => d.uniqueVisitors),
          borderColor: '#60a5fa',
          backgroundColor: 'rgba(96,165,250,0.1)'
        }]
      );

      // Hub views chart
      const hubData = data.hubViews || [];
      analyticsLineChart('chart-hub-views', 'hubViews',
        hubData.map(d => d._id),
        [{
          label: 'Hub Page Views',
          data: hubData.map(d => d.views),
          borderColor: '#22c55e',
          backgroundColor: 'rgba(34,197,94,0.1)'
        }, {
          label: 'Hub Unique Visitors',
          data: hubData.map(d => d.uniqueVisitors),
          borderColor: '#a78bfa',
          backgroundColor: 'rgba(167,139,250,0.1)'
        }]
      );

      // Top pages table
      const pages = data.pageBreakdown || [];
      document.getElementById('analytics-pages-table').innerHTML = `
        <table class="data-table">
          <thead><tr><th>Page</th><th>Views</th><th>Unique Visitors</th><th>Avg Time</th><th>Avg Scroll</th></tr></thead>
          <tbody>${pages.map(p => `
            <tr>
              <td><strong>${esc(p._id || 'unknown')}</strong></td>
              <td>${p.views}</td>
              <td>${p.uniqueVisitors || 0}</td>
              <td>${formatDuration(p.avgTimeOnPage)}</td>
              <td>${Math.round(p.avgScrollDepth || 0)}%</td>
            </tr>
          `).join('')}</tbody>
        </table>`;

      // Device chart
      analyticsDoughnutChart('chart-devices', 'devices',
        (data.deviceBreakdown || []).map(d => d._id || 'unknown'),
        (data.deviceBreakdown || []).map(d => d.count),
        ['#fbbf24', '#60a5fa', '#22c55e', '#a78bfa', '#f87171']
      );

      // Browser chart
      analyticsDoughnutChart('chart-browsers', 'browsers',
        (data.browserBreakdown || []).map(d => d._id || 'unknown'),
        (data.browserBreakdown || []).map(d => d.count),
        ['#fbbf24', '#60a5fa', '#22c55e', '#a78bfa', '#f87171', '#fb923c', '#e879f9', '#94a3b8']
      );

      // Referrer table
      const refs = data.referrerBreakdown || [];
      document.getElementById('analytics-referrers-table').innerHTML = refs.length === 0
        ? '<p style="color:#64748b;font-size:13px;">No referrer data yet</p>'
        : `<table class="data-table">
          <thead><tr><th>Referrer</th><th>Visits</th><th>Avg Time on Page</th><th>Avg Scroll Depth</th></tr></thead>
          <tbody>${refs.map(r => `
            <tr><td>${esc(r._id)}</td><td>${r.count}</td><td>${formatDuration(r.avgTimeOnPage)}</td><td>${Math.round(r.avgScrollDepth || 0)}%</td></tr>
          `).join('')}</tbody>
        </table>`;

      // Populate page filter dropdown with top pages
      const topPages = data.topPages || [];
      const pageSelect = document.getElementById('visits-page-filter');
      if (pageSelect) {
        pageSelect.innerHTML = '<option value="">All Pages</option>' + 
          topPages.map(p => `<option value="${esc(p._id)}">${esc(p._id)}</option>`).join('');
      }

      // Fetch visits with current filters (don't call resetAndFetchVisits - that would create a loop!)
      visitsState = { visits: [], page: 1, hasMore: false, total: 0 };
      fetchVisits();
    }

    // Visits state
    let visitsState = {
      visits: [],
      page: 1,
      hasMore: false,
      total: 0
    };

    // Client-side sort & filter state for visits table
    let visitsSortCol = 'timestamp';
    let visitsSortDir = 'desc';
    let visitsColFilters = { page: '', device: '', browser: '', timeOnPage: '', scrollDepth: '', referrer: '', location: '', timestamp: '' };

    function toggleVisitsSort(col) {
      if (visitsSortCol === col) {
        visitsSortDir = visitsSortDir === 'asc' ? 'desc' : 'asc';
      } else {
        visitsSortCol = col;
        visitsSortDir = col === 'timestamp' ? 'desc' : 'asc';
      }
      renderVisitsTable();
    }

    function onColFilterInput(col, value) {
      visitsColFilters[col] = value.toLowerCase();
      renderVisitsTable();
    }

    function getFilteredSortedVisits() {
      let data = visitsState.visits.slice();
      // Apply column filters
      Object.keys(visitsColFilters).forEach(col => {
        const q = visitsColFilters[col];
        if (!q) return;
        data = data.filter(v => {
          let val = '';
          if (col === 'page') val = v.page || '';
          else if (col === 'device') val = v.device || '';
          else if (col === 'browser') val = v.browser || '';
          else if (col === 'referrer') val = v.referrer || 'direct';
          else if (col === 'timeOnPage') val = formatDuration(v.timeOnPage);
          else if (col === 'scrollDepth') val = (v.scrollDepth != null ? Math.round(v.scrollDepth) + '%' : '-');
          else if (col === 'location') val = formatLocation(v);
          else if (col === 'timestamp') val = new Date(v.timestamp).toLocaleString();
          return val.toLowerCase().includes(q);
        });
      });
      // Sort
      data.sort((a, b) => {
        let va, vb;
        if (visitsSortCol === 'timeOnPage') { va = a.timeOnPage || 0; vb = b.timeOnPage || 0; }
        else if (visitsSortCol === 'scrollDepth') { va = a.scrollDepth || 0; vb = b.scrollDepth || 0; }
        else if (visitsSortCol === 'timestamp') { va = new Date(a.timestamp).getTime(); vb = new Date(b.timestamp).getTime(); }
        else if (visitsSortCol === 'location') { va = formatLocation(a).toLowerCase(); vb = formatLocation(b).toLowerCase(); }
        else { va = (a[visitsSortCol] || '').toString().toLowerCase(); vb = (b[visitsSortCol] || '').toString().toLowerCase(); }
        if (va < vb) return visitsSortDir === 'asc' ? -1 : 1;
        if (va > vb) return visitsSortDir === 'asc' ? 1 : -1;
        return 0;
      });
      return data;
    }

    function sortArrowHtml(col) {
      if (visitsSortCol !== col) return '<span class="sort-arrow">Γçà</span>';
      return visitsSortDir === 'asc'
        ? '<span class="sort-arrow active">Γû▓</span>'
        : '<span class="sort-arrow active">Γû╝</span>';
    }

    async function resetAndFetchVisits() {
      visitsState = { visits: [], page: 1, hasMore: false, total: 0 };
      // Refresh both visits and analytics when filters change (but don't create a loop!)
      await fetchVisits();
      await fetchAnalytics();
    }

    async function loadMoreVisits() {
      visitsState.page++;
      await fetchVisits(true);
    }

    async function fetchVisits(append = false) {
      const periodVal = document.getElementById('analytics-period').value;
      const [unit, amount] = periodVal.split(':');
      const params = new URLSearchParams();
      
      if (unit === 'hours') params.set('hours', amount);
      else params.set('days', amount);
      
      params.set('page', visitsState.page);
      params.set('limit', '50');
      
      const pageFilter = document.getElementById('visits-page-filter')?.value;
      const deviceFilter = document.getElementById('visits-device-filter')?.value;
      const browserFilter = document.getElementById('visits-browser-filter')?.value;
      const referrerFilter = document.getElementById('visits-referrer-filter')?.value;
      const includeBots = document.getElementById('visits-include-bots')?.checked;
      
      if (pageFilter) params.set('pageFilter', pageFilter);
      if (deviceFilter) params.set('device', deviceFilter);
      if (browserFilter) params.set('browser', browserFilter);
      if (referrerFilter) params.set('referrer', referrerFilter);
      if (includeBots) params.set('includeBots', 'true');

      try {
        const res = await fetch(`${API_BASE}/metrics/visits?${params}`, {
          headers: { 'x-admin-key': adminKey }
        });
        if (!res.ok) {
          const errData = await res.json().catch(() => ({}));
          throw new Error(errData.error || `HTTP ${res.status}`);
        }
        const data = await res.json();
        
        if (append) {
          visitsState.visits = [...visitsState.visits, ...data.visits];
        } else {
          visitsState.visits = data.visits;
          // Update filter dropdowns with options from server
          if (data.filterOptions) {
            const deviceSelect = document.getElementById('visits-device-filter');
            const browserSelect = document.getElementById('visits-browser-filter');
            if (deviceSelect && data.filterOptions.devices) {
              const currentDevice = deviceSelect.value;
              deviceSelect.innerHTML = '<option value="">All Devices</option>' + 
                data.filterOptions.devices.map(d => `<option value="${esc(d)}">${esc(d)}</option>`).join('');
              deviceSelect.value = currentDevice;
            }
            if (browserSelect && data.filterOptions.browsers) {
              const currentBrowser = browserSelect.value;
              browserSelect.innerHTML = '<option value="">All Browsers</option>' + 
                data.filterOptions.browsers.map(b => `<option value="${esc(b)}">${esc(b)}</option>`).join('');
              browserSelect.value = currentBrowser;
            }
          }
        }
        
        visitsState.hasMore = data.pagination?.hasMore || false;
        visitsState.total = data.pagination?.total || 0;
        
        renderVisitsTable();
      } catch (err) {
        console.error('Visits fetch error:', err);
        document.getElementById('analytics-visits-table').innerHTML = 
          `<p style="color:#f87171;font-size:13px;">Error loading visits: ${esc(err.message)}</p>`;
      }
    }

    function renderVisitsTable() {
      const allVisits = visitsState.visits;
      const filtered = getFilteredSortedVisits();
      const countEl = document.getElementById('visits-count');
      const loadMoreEl = document.getElementById('visits-load-more');
      
      const filterActive = Object.values(visitsColFilters).some(v => v);
      if (countEl) {
        countEl.textContent = filterActive
          ? `Showing ${filtered.length} of ${allVisits.length} loaded (${visitsState.total} total)`
          : `Showing ${allVisits.length} of ${visitsState.total} visits`;
      }
      
      if (loadMoreEl) {
        loadMoreEl.style.display = visitsState.hasMore ? 'block' : 'none';
      }

      const cols = [
        { key: 'page', label: 'Page', ph: 'Filter page...' },
        { key: 'device', label: 'Device', ph: 'Filter...' },
        { key: 'browser', label: 'Browser', ph: 'Filter...' },
        { key: 'timeOnPage', label: 'Time', ph: 'e.g. 1m' },
        { key: 'scrollDepth', label: 'Scroll', ph: 'e.g. 80%' },
        { key: 'referrer', label: 'Referrer', ph: 'Filter...' },
        { key: 'location', label: 'Location', ph: 'e.g. US, CA' },
        { key: 'timestamp', label: 'When', ph: 'Filter...' }
      ];

      if (allVisits.length === 0) {
        document.getElementById('analytics-visits-table').innerHTML =
          '<p style="color:#64748b;font-size:13px;">No visits match the filters</p>';
        return;
      }

      const headerRow = cols.map(c =>
        `<th class="sortable" onclick="toggleVisitsSort('${c.key}')">${c.label}${sortArrowHtml(c.key)}</th>`
      ).join('');

      const filterRow = cols.map(c =>
        `<th><input class="col-filter-input" type="text" placeholder="${c.ph}" value="${esc(visitsColFilters[c.key])}" oninput="onColFilterInput('${c.key}', this.value)"></th>`
      ).join('');

      const bodyRows = filtered.map(v => `
        <tr>
          <td>${esc(v.page)}</td>
          <td>${v.device || '-'}</td>
          <td>${v.browser || '-'}</td>
          <td>${formatDuration(v.timeOnPage)}</td>
          <td>${v.scrollDepth != null ? Math.round(v.scrollDepth) + '%' : '-'}</td>
          <td>${v.referrer ? esc(v.referrer) : '<span style="color:#64748b">direct</span>'}</td>
          <td>${formatLocation(v) || '<span style="color:#64748b">-</span>'}</td>
          <td title="${new Date(v.timestamp).toLocaleString()}">${timeAgo(new Date(v.timestamp))}</td>
        </tr>
      `).join('');

      document.getElementById('analytics-visits-table').innerHTML =
        `<div class="visits-table-wrap"><table class="data-table">
          <thead>
            <tr>${headerRow}</tr>
            <tr class="col-filter-row">${filterRow}</tr>
          </thead>
          <tbody>${bodyRows}</tbody>
        </table></div>`;
    }

    function analyticsLineChart(canvasId, chartKey, labels, datasets) {
      if (analyticsCharts[chartKey]) analyticsCharts[chartKey].destroy();
      const ctx = document.getElementById(canvasId);
      if (!ctx) return;
      analyticsCharts[chartKey] = new Chart(ctx, {
        type: 'line',
        data: {
          labels: labels.map(l => { const d = new Date(l); return (d.getMonth()+1) + '/' + d.getDate(); }),
          datasets: datasets.map(ds => ({
            ...ds,
            fill: true,
            tension: 0.3,
            pointRadius: 3,
            borderWidth: 2
          }))
        },
        options: {
          responsive: true,
          plugins: { legend: { labels: { color: '#94a3b8', font: { size: 11 } } } },
          scales: {
            x: { ticks: { color: '#64748b', font: { size: 10 } }, grid: { color: 'rgba(148,163,184,0.08)' } },
            y: { beginAtZero: true, ticks: { color: '#64748b', font: { size: 10 } }, grid: { color: 'rgba(148,163,184,0.08)' } }
          }
        }
      });
    }

    function analyticsDoughnutChart(canvasId, chartKey, labels, dataValues, colors) {
      if (analyticsCharts[chartKey]) analyticsCharts[chartKey].destroy();
      const ctx = document.getElementById(canvasId);
      if (!ctx) return;
      analyticsCharts[chartKey] = new Chart(ctx, {
        type: 'doughnut',
        data: {
          labels,
          datasets: [{ data: dataValues, backgroundColor: colors, borderWidth: 0 }]
        },
        options: {
          responsive: true,
          plugins: { legend: { position: 'right', labels: { color: '#94a3b8', font: { size: 11 }, padding: 8 } } }
        }
      });
    }

    function formatDuration(secs) {
      if (!secs || secs === 0) return '0s';
      secs = Math.round(secs);
      if (secs < 60) return secs + 's';
      return Math.floor(secs / 60) + 'm ' + (secs % 60) + 's';
    }

    function formatLocation(v) {
      const parts = [];
      if (v.city) parts.push(v.city);
      if (v.region) parts.push(v.region);
      if (v.country) parts.push(v.country);
      return parts.join(', ');
    }

    // ΓöÇΓöÇΓöÇ Play Store Stats ΓöÇΓöÇΓöÇ
    async function fetchPlayStoreStats() {
      show('playstore-loading'); hide('playstore-content'); hide('playstore-error');
      try {
        const res = await fetch(`https://chorecheck-backend.onrender.com/api/play-console/stats`);
        if (res.status === 403) {
          const errData = await res.json().catch(() => ({}));
          hide('playstore-loading');
          show('playstore-error');
          document.getElementById('playstore-error').innerHTML = `
            <strong>ΓÜá∩╕Å Play Console Access Denied (403)</strong><br>
            <div style="margin:8px 0; padding:8px; background:rgba(239,68,68,0.2); border-left:3px solid #ef4444; font-family:monospace; font-size:12px;">
              ${errData.details || errData.error || 'Permission denied'}
            </div>
            To fix this:<br>
            1. Go to <a href="https://play.google.com/console" target="_blank" style="color:#93c5fd;text-decoration:underline">Google Play Console</a> > <strong>Users & permissions</strong> (Not just API Access)<br>
            2. Click "Invite new users" and enter the service account email<br>
            3. Grant "View app information" and "View financial data" permissions<br>
            4. Ensure the user has access to the "com.snogames.work4wifi" app
          `;
          return;
        }
        if (!res.ok) {
          const errData = await res.json().catch(() => ({}));
          throw new Error(errData.details || errData.error || `HTTP ${res.status}`);
        }
        const data = await res.json();
        window._playstoreLoaded = true;
        renderPlayStoreStats(data.data);
        hide('playstore-loading'); show('playstore-content');
      } catch (e) {
        console.error('Play Store stats error:', e);
        hide('playstore-loading');
        show('playstore-error');
        document.getElementById('playstore-error').innerHTML = `
          <strong>Failed to load Play Store data</strong><br>
          ${e.message || e}<br>
          <div style="font-size:0.8em; margin-top:8px; opacity:0.8">
             Check console for full debug details if available.
          </div>
        `;
      }
    }

    function renderPlayStoreStats(d) {
      // Reviews cards
      setCards('playstore-reviews-cards', [
        { value: d.reviews.total || 0, label: 'Total Reviews', color: 'blue' },
        { value: d.reviews.average || 0, label: 'Average Rating', color: 'gold' },
        { value: 'Γ¡É'.repeat(Math.round(d.reviews.average || 0)), label: 'Stars' }
      ]);

      // Rating distribution chart
      const dist = d.reviews.distribution || { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 };
      if (chartInstances['chart-rating-dist']) chartInstances['chart-rating-dist'].destroy();
      const ctx = document.getElementById('chart-rating-dist');
      if (ctx) {
        chartInstances['chart-rating-dist'] = new Chart(ctx, {
          type: 'bar',
          data: {
            labels: ['Γ¡É', 'Γ¡ÉΓ¡É', 'Γ¡ÉΓ¡ÉΓ¡É', 'Γ¡ÉΓ¡ÉΓ¡ÉΓ¡É', 'Γ¡ÉΓ¡ÉΓ¡ÉΓ¡ÉΓ¡É'],
            datasets: [{
              label: 'Reviews',
              data: [dist[1], dist[2], dist[3], dist[4], dist[5]],
              backgroundColor: ['#ef4444', '#f97316', '#fbbf24', '#a3e635', '#22c55e']
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
              y: { beginAtZero: true, ticks: { color: '#64748b', stepSize: 1 }, grid: { color: 'rgba(148,163,184,0.08)' } },
              x: { ticks: { color: '#64748b' }, grid: { display: false } }
            }
          }
        });
      }

      // Recent reviews list
      const reviews = d.reviews.recent || [];
      document.getElementById('recent-reviews-list').innerHTML = reviews.length === 0
        ? '<p style="color:#64748b;font-size:12px;text-align:center;padding:20px 0">No reviews yet</p>'
        : reviews.map(r => `
            <div style="border-bottom:1px solid rgba(148,163,184,0.08);padding:10px 0;font-size:12px">
              <div style="display:flex;justify-content:space-between;margin-bottom:4px">
                <strong style="color:#e2e8f0">${esc(r.author)}</strong>
                <span style="color:#fbbf24">${'Γ¡É'.repeat(r.rating)}</span>
              </div>
              <p style="color:#94a3b8;margin:4px 0;line-height:1.4">${esc(r.text || 'No text')}</p>
              ${r.date ? `<span style="color:#64748b;font-size:11px">${timeAgo(new Date(r.date))}</span>` : ''}
              ${r.reply ? `<div style="background:rgba(251,191,36,0.05);border-left:2px solid #fbbf24;padding:6px 8px;margin-top:6px;font-size:11px;color:#e2e8f0"><strong>Your reply:</strong> ${esc(r.reply)}</div>` : ''}
            </div>
          `).join('');
    }

    // ΓöÇΓöÇΓöÇ Vercel Metrics ΓöÇΓöÇΓöÇ
    async function fetchVercelMetrics() {
      show('vercel-loading'); hide('vercel-content'); hide('vercel-error');
      try {
        const res = await fetch(`${API_BASE}/metrics/vercel`, { headers: { 'x-admin-key': adminKey } });
        if (res.status === 401) return logout();
        if (res.status === 400) {
          const errData = await res.json().catch(() => ({}));
          hide('vercel-loading');
          show('vercel-error');
          document.getElementById('vercel-error').innerHTML = `
            <strong>ΓÜá∩╕Å Vercel API Not Configured</strong><br>
            <div style="margin:8px 0; font-size:13px;">
              Add these environment variables to your backend:<br>
              <code style="background:rgba(0,0,0,0.3);padding:2px 6px;border-radius:4px">VERCEL_API_TOKEN</code> - Create at <a href="https://vercel.com/account/tokens" target="_blank" style="color:#93c5fd;text-decoration:underline">vercel.com/account/tokens</a><br>
              <code style="background:rgba(0,0,0,0.3);padding:2px 6px;border-radius:4px">VERCEL_TEAM_ID</code> - (Optional) Find in team settings URL
            </div>
          `;
          return;
        }
        if (!res.ok) {
          const errData = await res.json().catch(() => ({}));
          throw new Error(errData.error || `HTTP ${res.status}`);
        }
        const data = await res.json();
        window._vercelLoaded = true;
        renderVercelMetrics(data);
        hide('vercel-loading'); show('vercel-content');
      } catch (e) {
        console.error('Vercel metrics error:', e);
        hide('vercel-loading');
        show('vercel-error');
        document.getElementById('vercel-error').innerHTML = `
          <strong>Failed to load Vercel data</strong><br>
          ${e.message || e}
        `;
      }
    }

    function renderVercelMetrics(data) {
      const s = data.summary || {};
      
      // Summary cards
      setCards('vercel-summary-cards', [
        { value: s.totalProjects || 0, label: 'Projects', color: 'blue' },
        { value: s.deploymentsLast24h || 0, label: 'Deploys (24h)', color: 'green' },
        { value: s.deploymentsLast7d || 0, label: 'Deploys (7d)', color: 'gold' },
        { value: s.failedDeployments || 0, label: 'Failed', color: s.failedDeployments > 0 ? 'red' : 'green' }
      ]);

      // Projects list with deployments
      const projects = data.projects || [];
      document.getElementById('vercel-projects-list').innerHTML = projects.length === 0
        ? '<p style="color:#64748b;font-size:13px;">No projects found</p>'
        : projects.map(p => `
            <div style="background:rgba(30,41,59,0.5);border:1px solid rgba(148,163,184,0.1);border-radius:12px;padding:16px;margin-bottom:16px;">
              <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
                <div>
                  <strong style="color:#e2e8f0;font-size:15px;">Γû▓ ${esc(p.project)}</strong>
                  ${p.framework ? `<span style="margin-left:8px;font-size:11px;color:#64748b;background:rgba(100,116,139,0.2);padding:2px 8px;border-radius:4px;">${esc(p.framework)}</span>` : ''}
                </div>
              </div>
              <div style="font-size:12px;">
                ${(p.deployments || []).slice(0, 5).map(d => `
                  <div style="display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(148,163,184,0.08);">
                    <div style="display:flex;align-items:center;gap:8px;">
                      ${getDeployStateIcon(d.readyState)}
                      <a href="https://${d.url}" target="_blank" style="color:#60a5fa;text-decoration:none;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;">${esc(d.url)}</a>
                    </div>
                    <div style="display:flex;align-items:center;gap:12px;color:#64748b;">
                      ${d.branch ? `<span style="background:rgba(147,197,253,0.1);color:#93c5fd;padding:2px 8px;border-radius:4px;font-size:11px;">${esc(d.branch)}</span>` : ''}
                      <span title="${new Date(d.createdAt).toLocaleString()}">${timeAgo(new Date(d.createdAt))}</span>
                    </div>
                  </div>
                  ${d.meta ? `<div style="color:#94a3b8;font-size:11px;padding:4px 0 8px 24px;max-width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${esc(d.meta)}</div>` : ''}
                `).join('')}
              </div>
            </div>
          `).join('');
    }

    function getDeployStateIcon(state) {
      const states = {
        'READY': '<span style="color:#22c55e;" title="Ready">ΓùÅ</span>',
        'ERROR': '<span style="color:#ef4444;" title="Error">ΓùÅ</span>',
        'BUILDING': '<span style="color:#fbbf24;" title="Building">ΓùÉ</span>',
        'QUEUED': '<span style="color:#64748b;" title="Queued">Γùï</span>',
        'CANCELED': '<span style="color:#64748b;" title="Canceled">Γùï</span>'
      };
      return states[state] || '<span style="color:#64748b;">Γùï</span>';
    }

    // ΓöÇΓöÇΓöÇ Clarity Analytics ΓöÇΓöÇΓöÇ
    const clarityCharts = {};

    async function fetchClarityData() {
      show('clarity-loading'); hide('clarity-content'); hide('clarity-error');
      try {
        const res = await fetch(`${API_BASE}/metrics/clarity`, { headers: { 'x-admin-key': adminKey } });
        if (res.status === 401) return logout();
        if (res.status === 503) {
          const err = await res.json();
          document.getElementById('clarity-error').textContent = err.error || 'Clarity data not available';
          hide('clarity-loading'); show('clarity-error');
          return;
        }
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const data = await res.json();
        window._clarityLoaded = true;
        renderClarityData(data);
        hide('clarity-loading'); show('clarity-content');
      } catch (e) {
        console.error('Clarity fetch error:', e);
        document.getElementById('clarity-error').textContent = 'Failed to load Clarity data: ' + (e.message || e);
        hide('clarity-loading'); show('clarity-error');
      }
    }

    function renderClarityData(d) {
      // Cache status ΓÇö show last refresh in CST
      if (d._cache) {
        let refreshText = 'Never refreshed';
        if (d._cache.lastFetchedAt) {
          const dt = new Date(d._cache.lastFetchedAt);
          refreshText = 'Last refreshed: ' + dt.toLocaleString('en-US', { timeZone: 'America/Chicago', month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit', hour12: true }) + ' CST';
        }
        document.getElementById('clarity-cache-status').textContent = `${refreshText} ┬╖ Period: ${d.period || 'Last 3 days'}`;
      }

      // ΓöÇΓöÇ Takeaways & Recommendations ΓöÇΓöÇ
      const takeawaysList = document.getElementById('clarity-takeaways');
      takeawaysList.innerHTML = (d.takeaways?.takeaways || []).map(t =>
        `<li style="padding:4px 0;border-bottom:1px solid rgba(148,163,184,0.1)">Γû╕ ${escHtml(t)}</li>`
      ).join('') || '<li style="color:#64748b">No takeaways available</li>';

      const recsList = document.getElementById('clarity-recommendations');
      recsList.innerHTML = (d.takeaways?.recommendations || []).map(r =>
        `<li style="padding:4px 0;border-bottom:1px solid rgba(148,163,184,0.1)">ΓåÆ ${escHtml(r)}</li>`
      ).join('') || '<li style="color:#64748b">No recommendations</li>';

      // ΓöÇΓöÇ Overview Cards ΓöÇΓöÇ
      const mobileDevice = d.byDevice?.find(x => x.device === 'Mobile');
      const mobilePct = d.overview.totalSessions > 0 && mobileDevice
        ? Math.round((mobileDevice.sessions / d.overview.totalSessions) * 100) : 0;
      const topSource = d.bySource?.[0];
      const homePage = d.byPage?.find(p => p.page === '/');
      setCards('clarity-overview-cards', [
        { value: d.overview.totalSessions, label: 'Total Sessions', color: 'gold' },
        { value: d.overview.totalUsers, label: 'Unique Users', color: 'blue' },
        { value: mobilePct + '%', label: 'Mobile Traffic', color: 'green' },
        { value: topSource ? topSource.source : 'ΓÇö', label: 'Top Source', color: 'purple' },
        { value: homePage ? homePage.avgScrollDepth + '%' : 'ΓÇö', label: 'Homepage Scroll', color: 'red' },
      ]);

      // ΓöÇΓöÇ Channel Table ΓöÇΓöÇ
      renderClarityTable('clarity-channel-table',
        ['Channel', 'Medium', 'Sessions', '% Traffic', 'Users', 'Pages/Session'],
        (d.trafficByChannel || []).map(r => [
          r.channel, r.medium || 'ΓÇö',
          r.sessions,
          d.overview.totalSessions > 0 ? ((r.sessions / d.overview.totalSessions) * 100).toFixed(1) + '%' : '0%',
          r.users,
          r.pagesPerSession?.toFixed(2) || 'ΓÇö',
        ])
      );

      // ΓöÇΓöÇ Source Table ΓöÇΓöÇ
      renderClarityTable('clarity-source-table',
        ['Source', 'Sessions', 'Users'],
        (d.bySource || []).map(r => [r.source, r.sessions, r.users])
      );

      // ΓöÇΓöÇ Page Performance Table ΓöÇΓöÇ
      renderClarityTable('clarity-page-table',
        ['Page', 'Sessions', 'Users', 'Avg Time', 'Active Time', 'Scroll Depth'],
        (d.byPage || []).map(r => [
          r.page, r.sessions, r.users,
          r.avgTotalTime + 's', r.avgActiveTime + 's', r.avgScrollDepth + '%'
        ])
      );

      // ΓöÇΓöÇ Engagement Table ΓöÇΓöÇ
      const engRows = (d.engagementByChannel || []).map(e => {
        const s = d.scrollByChannel?.find(s => s.channel === e.channel && s.medium === e.medium);
        return [e.channel, e.medium || 'ΓÇö', e.totalTime + 's', e.activeTime + 's', s ? s.avgScrollDepth.toFixed(1) + '%' : 'ΓÇö'];
      });
      renderClarityTable('clarity-engagement-table',
        ['Channel', 'Medium', 'Total Time', 'Active Time', 'Scroll Depth'],
        engRows
      );

      // ΓöÇΓöÇ UX Issues Table ΓöÇΓöÇ
      renderClarityTable('clarity-ux-table',
        ['Channel', 'Sessions', 'Dead Clicks', 'Rage Clicks', 'Quickbacks', 'Script Errors'],
        (d.uxIssues || []).map(r => [
          r.channel, r.sessions,
          r.deadClickPct + '%', r.rageClickPct + '%',
          r.quickbackPct + '%', r.scriptErrorPct + '%'
        ])
      );

      // ΓöÇΓöÇ Charts ΓöÇΓöÇ
      renderClarityPie('clarity-chart-device', d.byDevice || [], 'device', 'sessions');
      renderClarityPie('clarity-chart-os', d.byOS || [], 'os', 'sessions');
      renderClarityPie('clarity-chart-browser', d.byBrowser || [], 'browser', 'sessions');
      renderClarityBar('clarity-chart-country', d.byCountry?.slice(0, 8) || [], 'country', 'sessions');
    }

    function renderClarityTable(containerId, headers, rows) {
      if (!rows.length) {
        document.getElementById(containerId).innerHTML = '<p style="color:#64748b;font-size:13px">No data available</p>';
        return;
      }
      let html = '<table class="data-table"><thead><tr>';
      headers.forEach(h => html += `<th>${escHtml(h)}</th>`);
      html += '</tr></thead><tbody>';
      rows.forEach(row => {
        html += '<tr>';
        row.forEach((cell, i) => {
          const align = (i > 0 && !isNaN(parseFloat(cell))) ? 'text-align:right' : '';
          html += `<td style="${align}">${escHtml(String(cell ?? 'ΓÇö'))}</td>`;
        });
        html += '</tr>';
      });
      html += '</tbody></table>';
      document.getElementById(containerId).innerHTML = html;
    }

    function escHtml(str) {
      const div = document.createElement('div');
      div.textContent = str;
      return div.innerHTML;
    }

    const clarityColors = ['#fbbf24','#60a5fa','#22c55e','#a78bfa','#f87171','#fb923c','#2dd4bf','#e879f9','#94a3b8'];

    function renderClarityPie(canvasId, data, labelField, valueField) {
      const canvas = document.getElementById(canvasId);
      if (!canvas) return;
      if (clarityCharts[canvasId]) clarityCharts[canvasId].destroy();
      const labels = data.map(r => r[labelField]);
      const values = data.map(r => r[valueField]);
      clarityCharts[canvasId] = new Chart(canvas, {
        type: 'doughnut',
        data: {
          labels,
          datasets: [{ data: values, backgroundColor: clarityColors.slice(0, labels.length), borderWidth: 0 }]
        },
        options: {
          responsive: true,
          plugins: {
            legend: { position: 'right', labels: { color: '#94a3b8', font: { size: 11 }, padding: 8 } }
          }
        }
      });
    }

    function renderClarityBar(canvasId, data, labelField, valueField) {
      const canvas = document.getElementById(canvasId);
      if (!canvas) return;
      if (clarityCharts[canvasId]) clarityCharts[canvasId].destroy();
      const labels = data.map(r => r[labelField]);
      const values = data.map(r => r[valueField]);
      clarityCharts[canvasId] = new Chart(canvas, {
        type: 'bar',
        data: {
          labels,
          datasets: [{ data: values, backgroundColor: '#60a5fa', borderRadius: 4 }]
        },
        options: {
          responsive: true,
          indexAxis: 'y',
          plugins: { legend: { display: false } },
          scales: {
            x: { ticks: { color: '#94a3b8' }, grid: { color: 'rgba(148,163,184,0.1)' } },
            y: { ticks: { color: '#e2e8f0', font: { size: 11 } }, grid: { display: false } }
          }
        }
      });
    }

    // ΓöÇΓöÇΓöÇ Data Export ΓöÇΓöÇΓöÇ
    async function downloadExport(type) {
      const btn = event.target;
      btn.disabled = true;
      btn.textContent = 'DownloadingΓÇª';
      try {
        const resp = await fetch(`${API_BASE}/export/${type}`, { headers: { 'x-admin-key': adminKey } });
        if (!resp.ok) throw new Error('Download failed');
        const blob = await resp.blob();
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = resp.headers.get('Content-Disposition')?.match(/filename="(.+)"/)?.[1] || `${type}_export.csv`;
        document.body.appendChild(a);
        a.click();
        a.remove();
        URL.revokeObjectURL(url);
      } catch (e) {
        alert('Export failed: ' + e.message);
      } finally {
        btn.disabled = false;
        btn.innerHTML = '&#x1f4e5; Download CSV';
      }
    }

  </script>
</body>
</html>