{% extends "base.html" %}

{% block title %}Admin Dashboard - AgentHub{% endblock %}

{% block content %}
<div class="container my-5">
  <!-- Header -->
  <div class="row mb-4">
    <div class="col-12">
      <div class="d-flex justify-content-between align-items-center">
        <div>
          <h2><i class="fas fa-users-cog me-3"></i>Admin Dashboard</h2>
          <p class="text-muted mb-0">Manage users and AI agents across the system</p>
        </div>
        <div class="d-flex gap-2">
          <button class="btn btn-outline-primary" id="refreshBtn">
            <i class="fas fa-sync-alt me-2"></i>Refresh
          </button>
          <button class="btn btn-outline-danger" onclick="logout()">
            <i class="fas fa-sign-out-alt me-2"></i>Logout
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Statistics Cards -->
  <div class="row mb-4 align-items-stretch">
    <div class="col-lg-2 col-md-4 mb-3 d-flex">
      <div class="stat-card w-100">
        <div class="stat-icon"><i class="fas fa-users"></i></div>
        <div class="stat-info">
          <h3 id="totalUsers">0</h3>
          <p>Total Users</p>
        </div>
      </div>
    </div>
    <div class="col-lg-2 col-md-4 mb-3 d-flex">
      <div class="stat-card agent-card w-100">
        <div class="stat-icon"><i class="fas fa-robot"></i></div>
        <div class="stat-info">
          <h3 id="totalAgents">0</h3>
          <p>Total Agents</p>
        </div>
      </div>
    </div>
    <div class="col-lg-2 col-md-4 mb-3 d-flex">
      <div class="stat-card w-100">
        <div class="stat-icon"><i class="fas fa-envelope"></i></div>
        <div class="stat-info">
          <h3 id="totalMessages">0</h3>
          <p>Total Messages</p>
        </div>
      </div>
    </div>
    <div class="col-lg-2 col-md-4 mb-3 d-flex">
      <div class="stat-card w-100">
        <div class="stat-icon"><i class="fas fa-coins"></i></div>
        <div class="stat-info">
          <h3 id="totalTokens">0</h3>
          <p>Total Tokens</p>
        </div>
      </div>
    </div>
    <div class="col-lg-2 col-md-4 mb-3 d-flex">
      <div class="stat-card w-100">
        <div class="stat-icon"><i class="fas fa-comments"></i></div>
        <div class="stat-info">
          <h3 id="totalConversations">0</h3>
          <p>Conversations</p>
        </div>
      </div>
    </div>
    <div class="col-lg-2 col-md-4 mb-3 d-flex">
      <div class="stat-card w-100">
        <div class="stat-icon"><i class="fas fa-user-friends"></i></div>
        <div class="stat-info">
          <h3 id="totalUniqueUsers">0</h3>
          <p>Agent-User Sessions</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Tabs Navigation -->
  <div class="row">
    <div class="col-12">
      <div class="card shadow-sm border-0">
        <div class="card-header bg-white">
          <ul class="nav nav-tabs card-header-tabs" id="adminTabs">
            <li class="nav-item">
              <a class="nav-link active" id="analytics-tab" data-bs-toggle="tab" href="#analytics">
                <i class="fas fa-chart-line me-2"></i>Analytics
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="users-tab" data-bs-toggle="tab" href="#users">
                <i class="fas fa-users me-2"></i>Users Management
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="agents-tab" data-bs-toggle="tab" href="#agents">
                <i class="fas fa-robot me-2"></i>Agents Management
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="verification-tab" data-bs-toggle="tab" href="#verification">
                <i class="fas fa-check-circle me-2"></i>Verification
                <span class="badge bg-warning ms-1" id="verificationPendingBadge" style="display:none;">0</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="card-body">
          <div class="tab-content" id="adminTabsContent">
            <!-- Analytics Tab -->
            <div class="tab-pane fade show active" id="analytics">
              <!-- Analytics Filter Bar -->
              <div class="row mb-3">
                <div class="col-12">
                  <div class="d-flex flex-wrap align-items-center gap-2 p-3 bg-light rounded">
                    <span class="fw-semibold text-muted me-1"><i class="fas fa-filter me-1"></i>Filters:</span>
                    <select id="analyticsStatusFilter" class="form-select form-select-sm" style="width:auto;min-width:150px;">
                      <option value="">All Statuses</option>
                      <option value="Active">Active</option>
                      <option value="Development">Development</option>
                      <option value="Inactive">Inactive</option>
                      <option value="Deprecated">Deprecated</option>
                    </select>
                    <select id="analyticsDisciplineFilter" class="form-select form-select-sm" style="width:auto;min-width:200px;">
                      <option value="">All Disciplines</option>
                      <option value="Strategy">Strategy</option>
                      <option value="Creative">Creative</option>
                      <option value="Oversight including delivery">Oversight including delivery</option>
                      <option value="Optimization">Optimization</option>
                      <option value="Back Office including operations">Back Office including operations</option>
                      <option value="Pencil Agents">Pencil Agents</option>
                    </select>
                    <select id="analyticsTimeRange" class="form-select form-select-sm" style="width:auto;min-width:140px;">
                      <option value="30">Last 30 Days</option>
                      <option value="60">Last 60 Days</option>
                      <option value="90" selected>Last 90 Days</option>
                      <option value="180">Last 180 Days</option>
                    </select>
                    <button id="analyticsApplyBtn" class="btn btn-sm btn-primary">
                      <i class="fas fa-check me-1"></i>Apply
                    </button>
                  </div>
                </div>
              </div>

              <div class="row mb-4">
                <!-- Usage Over Time Chart -->
                <div class="col-lg-8 mb-4">
                  <div class="card h-100 border-0 shadow-sm">
                    <div class="card-header bg-white"><h6 class="mb-0"><i class="fas fa-chart-area me-2"></i>System Usage Over Time <span id="timeRangeLabel">(Last 90 Days)</span></h6></div>
                    <div class="card-body">
                      <div id="usageTimelineEmpty" class="text-center text-muted py-5" style="display:none;">No usage timeline data available</div>
                      <canvas id="usageTimelineChart"></canvas>
                    </div>
                  </div>
                </div>
                <!-- Token Breakdown Doughnut -->
                <div class="col-lg-4 mb-4">
                  <div class="card h-100 border-0 shadow-sm">
                    <div class="card-header bg-white"><h6 class="mb-0"><i class="fas fa-coins me-2"></i>Token Breakdown</h6></div>
                    <div class="card-body d-flex align-items-center justify-content-center">
                      <div id="tokenBreakdownEmpty" class="text-center text-muted py-5" style="display:none;">No token data available</div>
                      <canvas id="tokenBreakdownChart"></canvas>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row mb-4">
                <!-- Status Breakdown Doughnut -->
                <div class="col-lg-4 mb-4">
                  <div class="card h-100 border-0 shadow-sm">
                    <div class="card-header bg-white"><h6 class="mb-0"><i class="fas fa-signal me-2"></i>Agents by Status</h6></div>
                    <div class="card-body d-flex align-items-center justify-content-center">
                      <div id="statusBreakdownEmpty" class="text-center text-muted py-5" style="display:none;">No agent data available</div>
                      <canvas id="statusBreakdownChart"></canvas>
                    </div>
                  </div>
                </div>
                <!-- Discipline Breakdown Doughnut -->
                <div class="col-lg-4 mb-4">
                  <div class="card h-100 border-0 shadow-sm">
                    <div class="card-header bg-white"><h6 class="mb-0"><i class="fas fa-layer-group me-2"></i>Agents by Discipline</h6></div>
                    <div class="card-body d-flex align-items-center justify-content-center">
                      <div id="disciplineBreakdownEmpty" class="text-center text-muted py-5" style="display:none;">No discipline data available</div>
                      <canvas id="disciplineBreakdownChart"></canvas>
                    </div>
                  </div>
                </div>
                <!-- Rating Distribution Bar Chart -->
                <div class="col-lg-4 mb-4">
                  <div class="card h-100 border-0 shadow-sm">
                    <div class="card-header bg-white"><h6 class="mb-0"><i class="fas fa-star me-2"></i>Rating Distribution</h6></div>
                    <div class="card-body d-flex align-items-center justify-content-center">
                      <div id="ratingDistEmpty" class="text-center text-muted py-5" style="display:none;">No rating data available</div>
                      <canvas id="ratingDistChart"></canvas>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row mb-4">
                <!-- Top 5 Agents by Messages -->
                <div class="col-lg-6 mb-4">
                  <div class="card h-100 border-0 shadow-sm">
                    <div class="card-header bg-white"><h6 class="mb-0"><i class="fas fa-trophy me-2"></i>Top 5 Agents by Messages</h6></div>
                    <div class="card-body p-0">
                      <div class="table-responsive">
                        <table class="table table-hover mb-0 analytics-table">
                          <thead><tr><th>#</th><th>Agent</th><th>Status</th><th>Messages</th></tr></thead>
                          <tbody id="topMessagesTbody">
                            <tr><td colspan="4" class="text-center text-muted py-3">No data</td></tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Top 5 Agents by Tokens -->
                <div class="col-lg-6 mb-4">
                  <div class="card h-100 border-0 shadow-sm">
                    <div class="card-header bg-white"><h6 class="mb-0"><i class="fas fa-trophy me-2"></i>Top 5 Agents by Tokens</h6></div>
                    <div class="card-body p-0">
                      <div class="table-responsive">
                        <table class="table table-hover mb-0 analytics-table">
                          <thead><tr><th>#</th><th>Agent</th><th>Status</th><th>Tokens</th></tr></thead>
                          <tbody id="topTokensTbody">
                            <tr><td colspan="4" class="text-center text-muted py-3">No data</td></tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row mb-4">
                <!-- Recently Active Agents -->
                <div class="col-12">
                  <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white"><h6 class="mb-0"><i class="fas fa-clock me-2"></i>Recently Active Agents</h6></div>
                    <div class="card-body p-0">
                      <div class="table-responsive">
                        <table class="table table-hover mb-0 analytics-table">
                          <thead><tr><th>Agent</th><th>Status</th><th>Discipline</th><th>Messages</th><th>Tokens</th><th>Last Used</th></tr></thead>
                          <tbody id="recentlyActiveTbody">
                            <tr><td colspan="6" class="text-center text-muted py-3">No recently active agents</td></tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Users Management Tab -->
            <div class="tab-pane fade" id="users">
              <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">Users Management</h5>
                <div class="d-flex gap-2">
                  <button class="btn btn-success admin-write-action" onclick="showCreateUserModal()">
                    <i class="fas fa-user-plus me-2"></i>Create User
                  </button>
                  <div class="input-group" style="width: 300px;">
                    <span class="input-group-text"><i class="fas fa-search"></i></span>
                    <input type="text" class="form-control" id="userSearch" placeholder="Search users...">
                  </div>
                </div>
              </div>
              
              <div class="table-responsive">
                <table class="table table-hover">
                  <thead>
                    <tr>
                      <th>User</th>
                      <th>Email</th>
                      <th>Auth</th>
                      <th>Type</th>
                      <th>Status</th>
                      <th>Agents</th>
                      <th>Actions</th>
                    </tr>
                  </thead>
                  <tbody id="usersTableBody">
                    <tr>
                      <td colspan="7" class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                          <span class="visually-hidden">Loading...</span>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- Agents Management Tab -->
            <div class="tab-pane fade" id="agents">
              <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">Agent Management</h5>
                <div class="d-flex gap-2">
                  <select class="form-select" id="agentStatusFilter" style="width: auto;">
                    <option value="">All Statuses</option>
                    <option value="Active">Active</option>
                    <option value="Development">Development</option>
                    <option value="Inactive">Inactive</option>
                    <option value="Deprecated">Deprecated</option>
                  </select>
                  <select class="form-select" id="agentAuditFilter" style="width: auto;">
                    <option value="">All Audit</option>
                    <option value="audited">Audited</option>
                    <option value="not_audited">Not Audited</option>
                  </select>
                  <div class="input-group" style="width: 300px;">
                    <span class="input-group-text"><i class="fas fa-search"></i></span>
                    <input type="text" class="form-control" id="agentSearch" placeholder="Search agents...">
                  </div>
                </div>
              </div>
              
              <div class="table-responsive">
                <table class="table table-hover">
                  <thead>
                    <tr>
                      <th>Agent Name</th>
                      <th>Owner</th>
                      <th>Version</th>
                      <th>Created</th>
                      <th>Actions</th>
                    </tr>
                  </thead>
                  <tbody id="agentsTableBody">
                    <tr>
                      <td colspan="5" class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                          <span class="visually-hidden">Loading...</span>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- Verification Tab -->
            <div class="tab-pane fade" id="verification">
              <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0"><i class="fas fa-check-circle me-2"></i>Agent Verification</h5>
                <div class="d-flex gap-2">
                  <select id="verificationFilter" class="form-select form-select-sm" style="width:auto;" onchange="filterVerificationAgents()">
                    <option value="all">All</option>
                    <option value="needs_verification" selected>Needs Verification</option>
                    <option value="verified">Verified</option>
                  </select>
                </div>
              </div>
              <div class="table-responsive">
                <table class="table table-hover">
                  <thead>
                    <tr>
                      <th>Agent Name</th>
                      <th>Client Name</th>
                      <th>Studio</th>
                      <th>Created By</th>
                      <th>Date Created</th>
                      <th>Status</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                  <tbody id="verificationTableBody">
                    <tr>
                      <td colspan="7" class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                          <span class="visually-hidden">Loading...</span>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Edit User Modal -->
<div class="modal fade" id="editUserModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Edit User</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form id="editUserForm">
          <input type="hidden" id="editUserId">
          <input type="hidden" id="editUserAuthProvider">
          <div class="mb-3">
            <label for="editUserEmail" class="form-label">Email Address</label>
            <input type="email" class="form-control" id="editUserEmail" readonly>
          </div>
          <div class="mb-3">
            <label for="editUserFullName" class="form-label">Full Name</label>
            <input type="text" class="form-control" id="editUserFullName">
          </div>
          <div class="mb-3">
            <label class="form-label">Authentication Method</label>
            <div id="editUserAuthDisplay">
              <span class="badge bg-secondary">Loading...</span>
            </div>
          </div>
          <div class="mb-3">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="editUserIsActive">
              <label class="form-check-label" for="editUserIsActive">
                Account is active
              </label>
            </div>
          </div>
          <div class="mb-3">
            <div class="form-check" style="display:none;">
              <input class="form-check-input" type="checkbox" id="editUserIsAdmin">
              <label class="form-check-label" for="editUserIsAdmin">
                User has admin privileges
              </label>
            </div>
          </div>
          <div class="mb-3">
            <label for="editUserRole" class="form-label">Role</label>
            <select class="form-select" id="editUserRole">
              <option value="user">User</option>
              <option value="admin">Admin</option>
              <option value="readonly_admin">Read-Only Admin</option>
            </select>
            <div class="form-text">Read-Only Admin can view the admin dashboard but cannot make changes.</div>
          </div>
          <!-- Password Reset Section (only for local users) -->
          <div class="mb-3" id="passwordResetSection" style="display: none;">
            <hr>
            <label class="form-label">Password Management</label>
            <button type="button" class="btn btn-outline-warning btn-sm" onclick="showResetPasswordModal()">
              <i class="fas fa-key me-2"></i>Reset Password
            </button>
            <div class="form-text">Reset the user's password. They will need to use the new password to log in.</div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="submit" form="editUserForm" class="btn btn-primary">Save Changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Create User Modal -->
<div class="modal fade" id="createUserModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="fas fa-user-plus me-2"></i>Create New User</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="alert alert-info small">
          <i class="fas fa-info-circle me-2"></i>
          This creates a local user account with email/password authentication.
          For Microsoft SSO users, they will be created automatically on first login.
        </div>
        <form id="createUserForm">
          <div class="mb-3">
            <label for="createUserEmail" class="form-label">Email Address <span class="text-danger">*</span></label>
            <input type="email" class="form-control" id="createUserEmail" required placeholder="user@example.com">
          </div>
          <div class="mb-3">
            <label for="createUserFullName" class="form-label">Full Name</label>
            <input type="text" class="form-control" id="createUserFullName" placeholder="John Doe">
          </div>
          <div class="mb-3">
            <label for="createUserPassword" class="form-label">Password <span class="text-danger">*</span></label>
            <input type="password" class="form-control" id="createUserPassword" required minlength="8" placeholder="Minimum 8 characters">
            <div class="form-text">Password must be at least 8 characters.</div>
          </div>
          <div class="mb-3">
            <label for="createUserPasswordConfirm" class="form-label">Confirm Password <span class="text-danger">*</span></label>
            <input type="password" class="form-control" id="createUserPasswordConfirm" required minlength="8" placeholder="Confirm password">
          </div>
          <div class="mb-3">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="createUserIsAdmin">
              <label class="form-check-label" for="createUserIsAdmin">
                Grant admin privileges
              </label>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="submit" form="createUserForm" class="btn btn-success">
          <i class="fas fa-user-plus me-2"></i>Create User
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Reset Password Modal -->
<div class="modal fade" id="resetPasswordModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="fas fa-key me-2"></i>Reset Password</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="alert alert-warning small">
          <i class="fas fa-exclamation-triangle me-2"></i>
          This will reset the password for <strong id="resetPasswordUserEmail"></strong>.
          The user will need to use the new password to log in.
        </div>
        <form id="resetPasswordForm">
          <input type="hidden" id="resetPasswordEmail">
          <div class="mb-3">
            <label for="newPassword" class="form-label">New Password <span class="text-danger">*</span></label>
            <input type="password" class="form-control" id="newPassword" required minlength="8" placeholder="Minimum 8 characters">
            <div class="form-text">Password must be at least 8 characters.</div>
          </div>
          <div class="mb-3">
            <label for="newPasswordConfirm" class="form-label">Confirm New Password <span class="text-danger">*</span></label>
            <input type="password" class="form-control" id="newPasswordConfirm" required minlength="8" placeholder="Confirm new password">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="submit" form="resetPasswordForm" class="btn btn-warning">
          <i class="fas fa-key me-2"></i>Reset Password
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Edit Agent Modal -->
<div class="modal fade" id="editAgentModal" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Edit Agent</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form id="editAgentForm">
          <input type="hidden" id="editAgentId">
          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="editAgentName" class="form-label">Agent Name *</label>
              <input type="text" class="form-control" id="editAgentName" required>
            </div>
            <div class="col-md-6 mb-3">
              <label for="editAgentTool" class="form-label">Tool *</label>
              <input type="text" class="form-control" id="editAgentTool" required>
            </div>
          </div>
          
          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="editAgentStatus" class="form-label">Status</label>
              <select class="form-select" id="editAgentStatus">
                <option value="Development">Development</option>
                <option value="Active">Active</option>
                <option value="Inactive">Inactive</option>
                <option value="Deprecated">Deprecated</option>
              </select>
            </div>
            <div class="col-md-6 mb-3">
              <label for="editAgentVersion" class="form-label">Version</label>
              <input type="text" class="form-control" id="editAgentVersion">
            </div>
          </div>
          
          <div class="mb-3">
            <label for="editAgentDescription" class="form-label">Description</label>
            <textarea class="form-control" id="editAgentDescription" rows="3" maxlength="300"></textarea>
          </div>
          
          <div class="mb-3">
            <label for="editAgentPurpose" class="form-label">Purpose</label>
            <input type="text" class="form-control" id="editAgentPurpose" maxlength="200">
          </div>
          
          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="editAgentLocation" class="form-label">Location</label>
              <input type="text" class="form-control" id="editAgentLocation">
            </div>
            <div class="col-md-6 mb-3">
              <label for="editAgentDepartment" class="form-label">Department</label>
              <input type="text" class="form-control" id="editAgentDepartment">
            </div>
          </div>
          
          <div class="mb-3">
            <label for="editAgentContact" class="form-label">Contact Person</label>
            <input type="text" class="form-control" id="editAgentContact">
          </div>
          
          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="editAgentTags" class="form-label">Tags</label>
              <input type="text" class="form-control" id="editAgentTags" placeholder="Separate with commas">
            </div>
            <div class="col-md-6 mb-3">
              <label for="editAgentUserbase" class="form-label">Target Userbase</label>
              <input type="text" class="form-control" id="editAgentUserbase" placeholder="Separate with commas">
            </div>
          </div>
          
          <div class="mb-3">
            <label for="editAgentCapabilities" class="form-label">Capabilities</label>
            <input type="text" class="form-control" id="editAgentCapabilities" placeholder="Separate with commas">
          </div>

          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="editAgentDiscipline" class="form-label">
                <i class="fas fa-layer-group me-2"></i>Discipline
              </label>
              <select class="form-select" id="editAgentDiscipline">
                <option value="">Select Discipline</option>
                <option value="Strategy">Strategy</option>
                <option value="Creative">Creative</option>
                <option value="Oversight including delivery">Oversight including delivery</option>
                <option value="Optimization">Optimization</option>
                <option value="Back Office including operations">Back Office including operations</option>
                <option value="Pencil Agents">Pencil Agents</option>
              </select>
            </div>
          </div>

          <div class="mb-3" id="editQualityAuditSection">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="editQualityAuditStatus" onchange="toggleAdminRiskFactor()">
              <label class="form-check-label" for="editQualityAuditStatus">
                <i class="fas fa-certificate me-2"></i>Quality Audit
                <span class="badge bg-warning text-dark ms-2">Admin Only</span>
              </label>
            </div>
            <div class="form-text" id="editQualityAuditNote">
              Check this box if the agent has passed quality audit review.
            </div>
          </div>
          
          <div class="mb-3" id="editRiskFactorSection" style="display: none;">
            <label for="editRiskFactor" class="form-label">
              <i class="fas fa-exclamation-triangle me-2"></i>Risk Factor
              <span class="badge bg-warning text-dark ms-2">Admin Only</span>
              <span class="text-danger">*</span>
            </label>
            <select class="form-select" id="editRiskFactor">
              <option value="">Select Risk Level</option>
              <option value="1">1 - Very Low Risk</option>
              <option value="2">2 - Low Risk</option>
              <option value="3">3 - Medium Risk</option>
              <option value="4">4 - High Risk</option>
              <option value="5">5 - Very High Risk</option>
            </select>
            <div class="form-text" id="editRiskFactorNote">
              Required when Quality Audit is checked. Select the appropriate risk level for this agent.
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="submit" form="editAgentForm" class="btn btn-primary">Save Changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Rating Framework Info Modal -->
<div class="modal fade" id="ratingFrameworkModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="fas fa-info-circle me-2"></i>Rating Framework</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <h6 class="mb-3">Star Rating Scale</h6>
        <table class="table table-bordered table-sm">
          <thead class="table-light">
            <tr><th>Rating</th><th>Level</th><th>Description</th></tr>
          </thead>
          <tbody>
            <tr><td><span class="text-warning">&#9733;</span> 1</td><td>Initial</td><td>Agent is in early stages; minimal functionality, limited testing, and not yet ready for regular use.</td></tr>
            <tr><td><span class="text-warning">&#9733;&#9733;</span> 2</td><td>Developing</td><td>Agent has basic functionality but significant gaps remain; occasional errors and inconsistent outputs.</td></tr>
            <tr><td><span class="text-warning">&#9733;&#9733;&#9733;</span> 3</td><td>Competent</td><td>Agent performs core tasks reliably; meets basic expectations with acceptable accuracy and response quality.</td></tr>
            <tr><td><span class="text-warning">&#9733;&#9733;&#9733;&#9733;</span> 4</td><td>Proficient</td><td>Agent delivers high-quality results consistently; handles edge cases well and provides good user experience.</td></tr>
            <tr><td><span class="text-warning">&#9733;&#9733;&#9733;&#9733;&#9733;</span> 5</td><td>Expert</td><td>Agent excels across all dimensions; exceptional accuracy, reliability, and user satisfaction.</td></tr>
          </tbody>
        </table>
        <h6 class="mt-4 mb-3">Performance Areas</h6>
        <div class="row">
          <div class="col-md-6 mb-3">
            <div class="card h-100">
              <div class="card-body">
                <h6 class="card-title"><i class="fas fa-bullseye me-2 text-primary"></i>Accuracy & Reliability</h6>
                <p class="card-text small text-muted mb-0">How correct and consistent are the agent's outputs? Does it handle inputs reliably without errors?</p>
              </div>
            </div>
          </div>
          <div class="col-md-6 mb-3">
            <div class="card h-100">
              <div class="card-body">
                <h6 class="card-title"><i class="fas fa-user-check me-2 text-success"></i>User Experience</h6>
                <p class="card-text small text-muted mb-0">Is the agent easy to interact with? Does it understand user intent and provide clear, helpful responses?</p>
              </div>
            </div>
          </div>
          <div class="col-md-6 mb-3">
            <div class="card h-100">
              <div class="card-body">
                <h6 class="card-title"><i class="fas fa-tachometer-alt me-2 text-warning"></i>Efficiency & Performance</h6>
                <p class="card-text small text-muted mb-0">Does the agent respond promptly? Does it complete tasks without unnecessary steps or resource usage?</p>
              </div>
            </div>
          </div>
          <div class="col-md-6 mb-3">
            <div class="card h-100">
              <div class="card-body">
                <h6 class="card-title"><i class="fas fa-expand-arrows-alt me-2 text-info"></i>Scope & Adaptability</h6>
                <p class="card-text small text-muted mb-0">How well does the agent handle varied or unexpected scenarios? Can it adapt to different user needs?</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<style>
.stat-card {
  background: linear-gradient(135deg, #f3ae3e 0%, #f3ae3e 100%);
  border-radius: 16px;
  padding: 1.25rem;
  color: white;
  display: flex;
  align-items: center;
  min-height: 90px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.admin-card {
  background: linear-gradient(135deg, #f3ae3e 0%, #f3ae3e 100%);
}

.agent-card {
  background: linear-gradient(135deg, #f3ae3e 0%, #f3ae3e 100%);
}

.active-card {
  background: linear-gradient(135deg, #f3ae3e 0%, #f3ae3e 100%);
}

.stat-icon {
  font-size: 2rem;
  margin-right: 0.75rem;
  opacity: 0.8;
  flex-shrink: 0;
}

.stat-info {
  min-width: 0;
}

.stat-info h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-info p {
  margin: 0;
  opacity: 0.9;
  font-size: 0.75rem;
  white-space: normal;
  line-height: 1.2;
}

.user-avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f3ae3e 0%, #f3ae3e 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
}

.table th {
  border-top: none;
  font-weight: 600;
  color: #2d3748;
  background-color: #f7fafc;
}

/* Column width adjustments for better visibility - Override Bootstrap with higher specificity */

/* Users table column widths */
#users .table-responsive .table.table-hover th:nth-child(1), 
#users .table-responsive .table.table-hover td:nth-child(1) { 
  width: 22% !important; 
  min-width: 140px !important; 
  max-width: 180px !important;
}
#users .table-responsive .table.table-hover th:nth-child(2), 
#users .table-responsive .table.table-hover td:nth-child(2) { 
  width: 25% !important; 
  min-width: 160px !important; 
  max-width: 220px !important;
}
#users .table-responsive .table.table-hover th:nth-child(3), 
#users .table-responsive .table.table-hover td:nth-child(3) { 
  width: 10% !important; 
}
#users .table-responsive .table.table-hover th:nth-child(4), 
#users .table-responsive .table.table-hover td:nth-child(4) { 
  width: 10% !important; 
}
#users .table-responsive .table.table-hover th:nth-child(5), 
#users .table-responsive .table.table-hover td:nth-child(5) { 
  width: 8% !important; 
}
#users .table-responsive .table.table-hover th:nth-child(6), 
#users .table-responsive .table.table-hover td:nth-child(6) { 
  width: 12% !important; 
}
#users .table-responsive .table.table-hover th:nth-child(7), 
#users .table-responsive .table.table-hover td:nth-child(7) { 
  width: 15% !important; 
  min-width: 120px !important; 
}

/* Agents table column widths (5 columns: Agent Name, Owner, Version, Created, Actions) */
#agents .table-responsive .table.table-hover th:nth-child(1), 
#agents .table-responsive .table.table-hover td:nth-child(1) { 
  width: 40% !important; 
  min-width: 220px !important; 
  max-width: 320px !important;
}
#agents .table-responsive .table.table-hover th:nth-child(2), 
#agents .table-responsive .table.table-hover td:nth-child(2) { 
  width: 25% !important; 
  min-width: 160px !important; 
  max-width: 200px !important;
}
#agents .table-responsive .table.table-hover th:nth-child(3), 
#agents .table-responsive .table.table-hover td:nth-child(3) { 
  width: 12% !important; 
  max-width: 90px !important;
}
#agents .table-responsive .table.table-hover th:nth-child(4), 
#agents .table-responsive .table.table-hover td:nth-child(4) { 
  width: 13% !important; 
}
#agents .table-responsive .table.table-hover th:nth-child(5), 
#agents .table-responsive .table.table-hover td:nth-child(5) { 
  width: 10% !important; 
  min-width: 120px !important; 
}

/* Ensure table uses full width and layout is fixed */
#users .table-responsive .table.table-hover,
#agents .table-responsive .table.table-hover {
  table-layout: fixed !important;
  width: 100% !important;
}

/* Make sure text wraps in narrow columns */
#users .table-responsive .table.table-hover td,
#agents .table-responsive .table.table-hover td {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.table-hover tbody tr:hover {
  background-color: rgba(243, 174, 62, 0.05);
}

.card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.card-header {
  background: rgba(243, 174, 62, 0.05);
  border-bottom: 1px solid #e2e8f0;
  border-radius: 16px 16px 0 0 !important;
}

.nav-tabs .nav-link {
  border: none;
  color: #64748b;
  padding: 12px 20px;
}

.nav-tabs .nav-link.active {
  background-color: transparent;
  border-bottom: 2px solid #f3ae3e;
  color: #f3ae3e;
}

.status-Active { background-color: #d4edda; color: #155724; }
.status-Development { background-color: #fff3cd; color: #856404; }
.status-Inactive { background-color: #f8d7da; color: #721c24; }
.status-Deprecated { background-color: #e2e3e5; color: #41464b; }

.bg-orange {
  background-color: #fd7e14 !important;
  color: white !important;
}

.analytics-table th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
}
.analytics-table td {
  padding: 0.6rem 1rem;
  vertical-align: middle;
}
.rank-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  color: #fff;
  background: linear-gradient(135deg, #f3ae3e 0%, #e8983e 100%);
}

@media (max-width: 768px) {
  .stat-card {
    text-align: center;
    flex-direction: column;
  }

  .stat-icon {
    margin-right: 0;
    margin-bottom: 0.5rem;
  }

  .stat-info h3 {
    font-size: 1.2rem;
  }

  .stat-info p {
    font-size: 0.75rem;
  }

  .table-responsive {
    font-size: 0.875rem;
  }
}
</style>

<script>
let allUsers = [];
let allAgents = [];
let verificationAgents = [];
const isReadonlyAdmin = {% if current_user and current_user.get('role') == 'readonly_admin' %}true{% else %}false{% endif %};
const isFullAdmin = {% if current_user and current_user.get('is_admin') %}true{% else %}false{% endif %};

document.addEventListener('DOMContentLoaded', function() {
  loadAdminData();
  loadAnalytics();
  loadVerificationData();
  setupEventListeners();

  // Hide write-action buttons for readonly admins
  if (isReadonlyAdmin && !isFullAdmin) {
    document.querySelectorAll('.admin-write-action').forEach(el => el.style.display = 'none');
  }
});

function setupEventListeners() {
  document.getElementById('refreshBtn').addEventListener('click', () => { loadAdminData(); loadAnalytics(); loadVerificationData(); });
  document.getElementById('userSearch').addEventListener('input', filterUsers);
  document.getElementById('agentSearch').addEventListener('input', filterAgents);
  document.getElementById('agentStatusFilter').addEventListener('change', filterAgents);
  document.getElementById('agentAuditFilter').addEventListener('change', filterAgents);
  document.getElementById('editUserForm').addEventListener('submit', handleEditUserSubmit);
  document.getElementById('editAgentForm').addEventListener('submit', handleEditAgentSubmit);
  document.getElementById('createUserForm').addEventListener('submit', handleCreateUserSubmit);
  document.getElementById('resetPasswordForm').addEventListener('submit', handleResetPasswordSubmit);
  document.getElementById('analyticsApplyBtn').addEventListener('click', loadAnalytics);
}

async function loadAdminData() {
  try {
    // Load users and agents in parallel
    const [usersResponse, agentsResponse] = await Promise.all([
      fetch('{{ base_path }}/api/admin/users', {
        credentials: 'include'
      }),
      fetch('{{ base_path }}/api/admin/agents', {
        credentials: 'include'
      })
    ]);

    if (usersResponse.status === 401 || agentsResponse.status === 401) {
      window.location.href = '{{ base_path }}/login';
      return;
    }

    if (usersResponse.status === 403 || agentsResponse.status === 403) {
      alert('Admin access required');
      window.location.href = '{{ base_path }}/dashboard';
      return;
    }

    if (usersResponse.ok && agentsResponse.ok) {
      allUsers = await usersResponse.json();
      allAgents = await agentsResponse.json();
      
      updateStatistics();
      displayUsers(allUsers);
      displayAgents(allAgents);
    } else {
      throw new Error('Failed to load admin data');
    }
  } catch (error) {
    console.error('Error loading admin data:', error);
    showError('Failed to load admin data');
  }
}

function updateStatistics() {
  // These two are still fed from the users/agents lists for the management tabs
  // The stat cards are now primarily updated by loadAnalytics()
  // Keep this as a fallback for basic counts from the existing load
}

function updateAnalyticsStats(data) {
  document.getElementById('totalUsers').textContent = formatNumber(data.total_users || 0);
  document.getElementById('totalAgents').textContent = formatNumber(data.total_agents || 0);
  document.getElementById('totalMessages').textContent = formatNumber(data.summary.total_messages || 0);
  document.getElementById('totalTokens').textContent = formatNumber(data.summary.total_tokens || 0);
  document.getElementById('totalConversations').textContent = formatNumber(data.summary.conversation_count || 0);
  document.getElementById('totalUniqueUsers').textContent = formatNumber(data.summary.unique_users || 0);
}

function formatNumber(n) {
  if (n >= 1000000000) return (n / 1000000000).toFixed(1) + 'B';
  if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
  if (n >= 1000) return (n / 1000).toFixed(1) + 'K';
  return n.toString();
}

function displayUsers(users) {
  const tbody = document.getElementById('usersTableBody');

  if (users.length === 0) {
    tbody.innerHTML = '<tr><td colspan="7" class="text-center py-4">No users found</td></tr>';
    return;
  }

  const usersHtml = users.map(user => {
    const userAgents = allAgents.filter(agent => agent.created_by === user.email).length;
    const authProvider = user.auth_provider || 'local';
    const isLocalAuth = authProvider === 'local';
    return `
      <tr>
        <td>
          <div class="d-flex align-items-center">
            <div class="user-avatar-sm me-2">
              ${(user.full_name || user.email)[0].toUpperCase()}
            </div>
            <div>
              <div class="fw-medium">${user.full_name || 'No Name'}</div>
            </div>
          </div>
        </td>
        <td>${user.email}</td>
        <td>
          <span class="badge ${isLocalAuth ? 'bg-secondary' : 'bg-info'}">
            ${isLocalAuth ? 'Local' : 'SSO'}
          </span>
        </td>
        <td>
          ${(() => {
            const role = user.role || (user.is_admin ? 'admin' : 'user');
            if (role === 'admin') return '<span class="badge bg-danger">Admin</span>';
            if (role === 'readonly_admin') return '<span class="badge bg-warning text-dark">Read-Only Admin</span>';
            return '<span class="badge bg-primary">User</span>';
          })()}
        </td>
        <td>
          <span class="badge ${user.is_active ? 'bg-success' : 'bg-secondary'}">
            ${user.is_active ? 'Active' : 'Inactive'}
          </span>
        </td>
        <td>
          <span class="badge bg-info">${userAgents}</span>
        </td>
        <td>
          <button class="btn btn-outline-primary btn-sm me-1" onclick="viewUserDetails('${user.email}')" title="View">
            <i class="fas fa-eye"></i>
          </button>
          <button class="btn btn-outline-warning btn-sm me-1 admin-write-action" onclick="editUser('${user.email}')" title="Edit">
            <i class="fas fa-edit"></i>
          </button>
          <button class="btn btn-outline-secondary btn-sm admin-write-action" onclick="toggleUserStatus('${user.email}')" title="${user.is_active ? 'Deactivate' : 'Activate'}">
            <i class="fas fa-${user.is_active ? 'ban' : 'check'}"></i>
          </button>
        </td>
      </tr>
    `;
  }).join('');

  tbody.innerHTML = usersHtml;
}

function displayAgents(agents) {
  const tbody = document.getElementById('agentsTableBody');
  
  if (agents.length === 0) {
    tbody.innerHTML = '<tr><td colspan="5" class="text-center py-4">No agents found</td></tr>';
    return;
  }
  
  const agentsHtml = agents.map(agent => {
    const owner = allUsers.find(u => u.email === agent.created_by);
    const ownerName = owner?.full_name || agent.agent_contact_person || 'Unknown';
    const ownerEmail = owner?.email || agent.created_by;
    const avatarText = (owner?.full_name || agent.agent_contact_person || 'U')[0].toUpperCase();
    
    return `
      <tr>
        <td>
          <div class="fw-medium">${agent.agent_name}
            ${agent.verification_status === 'needs_verification' ? ' <span class="badge bg-warning text-dark" style="font-size:0.65em;">Needs Verification</span>' : ''}
            ${agent.verification_status === 'verified' ? ' <span class="badge bg-success" style="font-size:0.65em;">Verified</span>' : ''}
          </div>
          <small class="text-muted">${agent.agent_description || 'No description'}</small>
        </td>
        <td>
          <div class="d-flex align-items-center">
            <div class="user-avatar-sm me-2">
              ${avatarText}
            </div>
            <div>
              <div class="fw-medium">${ownerName}</div>
              <small class="text-muted">${ownerEmail}</small>
            </div>
          </div>
        </td>
        <td>${agent.agent_version || 'N/A'}</td>
        <td>
          <small class="text-muted">${formatDate(agent.agent_created_at)}</small>
        </td>
        <td>
          <button class="btn btn-outline-primary btn-sm me-1" onclick="viewAgentDetails('${agent.agent_id}')">
            <i class="fas fa-eye"></i>
          </button>
          <button class="btn btn-outline-warning btn-sm me-1 admin-write-action" onclick="editAgentAdmin('${agent.agent_id}')">
            <i class="fas fa-edit"></i>
          </button>
          <button class="btn btn-outline-danger btn-sm admin-write-action" onclick="deleteAgentAdmin('${agent.agent_id}')">
            <i class="fas fa-trash"></i>
          </button>
        </td>
      </tr>
    `;
  }).join('');
  
  tbody.innerHTML = agentsHtml;
}

function filterUsers() {
  const searchTerm = document.getElementById('userSearch').value.toLowerCase();
  const filtered = allUsers.filter(user => 
    (user.full_name || '').toLowerCase().includes(searchTerm) ||
    user.email.toLowerCase().includes(searchTerm)
  );
  displayUsers(filtered);
}

function filterAgents() {
  const searchTerm = document.getElementById('agentSearch').value.toLowerCase();
  const statusFilter = document.getElementById('agentStatusFilter').value;
  const auditFilter = document.getElementById('agentAuditFilter').value;

  let filtered = allAgents.filter(agent => {
    const matchesSearch = agent.agent_name.toLowerCase().includes(searchTerm) ||
                         (agent.agent_description || '').toLowerCase().includes(searchTerm);
    const matchesStatus = !statusFilter || agent.agent_status === statusFilter;
    const matchesAudit = !auditFilter ||
      (auditFilter === 'audited' && agent.quality_audit_status) ||
      (auditFilter === 'not_audited' && !agent.quality_audit_status);
    return matchesSearch && matchesStatus && matchesAudit;
  });

  displayAgents(filtered);
}

function viewUserDetails(email) {
  const user = allUsers.find(u => u.email === email);
  const userAgents = allAgents.filter(agent => agent.created_by === email);
  
  alert(`User Details:\nName: ${user.full_name || 'No Name'}\nEmail: ${user.email}\nType: ${user.is_admin ? 'Admin' : 'User'}\nStatus: ${user.is_active ? 'Active' : 'Inactive'}\nAgents Created: ${userAgents.length}`);
}

async function viewAgentDetails(agentId) {
  try {
    console.log('DEBUG: Admin fetching fresh agent details for ID:', agentId);
    
    // Fetch fresh agent data from server
    const response = await fetch(`{{ base_path }}/api/agents/${agentId}`, {
      credentials: 'include'
    });
    
    if (!response.ok) {
      if (response.status === 401) {
        window.location.href = '{{ base_path }}/login';
        return;
      } else if (response.status === 403) {
        showError('Not authorized to view this agent');
        return;
      } else {
        showError('Failed to load agent details');
        return;
      }
    }
    
    const agent = await response.json();
    console.log('DEBUG: Admin fresh agent data loaded:', agent);
    
    const qualityAuditText = agent.quality_audit_status ? 'Audited' : 'Not Audited';
    const auditTrail = agent.quality_audit_updated_by_name && agent.quality_audit_updated_at ? 
      `\nQuality Audit: ${qualityAuditText} by ${agent.quality_audit_updated_by_name} on ${formatDate(agent.quality_audit_updated_at)}` : 
      `\nQuality Audit: ${qualityAuditText}`;
    
    const lastEditedText = agent.last_edited_by ? `\nLast Edited By: ${agent.last_edited_by}` : '';
    alert(`Agent Details:\nName: ${agent.agent_name}\nStatus: ${agent.agent_status || 'Development'}\nVersion: ${agent.agent_version || 'N/A'}\nDescription: ${agent.agent_description || 'No description'}\nOwner: ${agent.created_by}${lastEditedText}${auditTrail}`);
    
  } catch (error) {
    console.error('Error loading agent details:', error);
    showError('Failed to load agent details. Please try again.');
  }
}

function editUser(email) {
  const user = allUsers.find(u => u.email === email);
  if (!user) return;

  const authProvider = user.auth_provider || 'local';
  const isLocalAuth = authProvider === 'local';

  // Determine role from user data
  const userRole = user.role || (user.is_admin ? 'admin' : 'user');

  // Populate the edit form
  document.getElementById('editUserId').value = user.email;
  document.getElementById('editUserEmail').value = user.email;
  document.getElementById('editUserFullName').value = user.full_name || '';
  document.getElementById('editUserIsActive').checked = user.is_active;
  document.getElementById('editUserIsAdmin').checked = user.is_admin;
  document.getElementById('editUserRole').value = userRole;
  document.getElementById('editUserAuthProvider').value = authProvider;

  // Update auth display
  const authDisplay = document.getElementById('editUserAuthDisplay');
  if (isLocalAuth) {
    authDisplay.innerHTML = '<span class="badge bg-secondary"><i class="fas fa-key me-1"></i>Local (Email/Password)</span>';
  } else {
    authDisplay.innerHTML = '<span class="badge bg-info"><i class="fab fa-microsoft me-1"></i>Microsoft SSO</span>';
  }

  // Show/hide password reset section based on auth provider
  const passwordResetSection = document.getElementById('passwordResetSection');
  passwordResetSection.style.display = isLocalAuth ? 'block' : 'none';

  // Show the modal
  const modal = new bootstrap.Modal(document.getElementById('editUserModal'));
  modal.show();
}

async function toggleUserStatus(email) {
  const user = allUsers.find(u => u.email === email);
  if (!user) return;
  
  const newStatus = !user.is_active;
  const action = newStatus ? 'activate' : 'deactivate';
  
  if (!confirm(`Are you sure you want to ${action} this user?`)) {
    return;
  }
  
  try {
    const response = await fetch(`{{ base_path }}/api/admin/users/${encodeURIComponent(email)}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      credentials: 'include',
      body: JSON.stringify({
        full_name: user.full_name,
        is_active: newStatus,
        is_admin: user.is_admin,
        role: user.role || (user.is_admin ? 'admin' : 'user')
      })
    });
    
    if (response.ok) {
      await loadAdminData();
      showSuccess(`User ${action}d successfully`);
    } else {
      const error = await response.json();
      showError(error.detail || `Failed to ${action} user`);
    }
  } catch (error) {
    showError(`Failed to ${action} user`);
  }
}

async function deleteAgentAdmin(agentId) {
  if (!confirm('Are you sure you want to delete this agent? This action cannot be undone.')) {
    return;
  }
  
  try {
    const response = await fetch(`{{ base_path }}/api/agents/${agentId}`, {
      method: 'DELETE',
      credentials: 'include'
    });
    
    if (response.ok) {
      await loadAdminData();
      showSuccess('Agent deleted successfully');
    } else {
      const error = await response.json();
      showError(error.detail || 'Failed to delete agent');
    }
  } catch (error) {
    showError('Failed to delete agent');
  }
}

function formatDate(dateString) {
  if (!dateString) return 'N/A';
  const date = new Date(dateString);
  return date.toLocaleDateString();
}

function getRiskFactorLabel(riskFactor) {
  const labels = {
    1: '1 - Very Low Risk',
    2: '2 - Low Risk', 
    3: '3 - Medium Risk',
    4: '4 - High Risk',
    5: '5 - Very High Risk'
  };
  return labels[riskFactor] || 'Not Set';
}

function toggleAdminRiskFactor() {
  const qualityAuditStatus = document.getElementById('editQualityAuditStatus');
  const riskFactorSection = document.getElementById('editRiskFactorSection');
  const riskFactor = document.getElementById('editRiskFactor');
  
  if (qualityAuditStatus.checked) {
    riskFactorSection.style.display = 'block';
    riskFactor.required = true;
  } else {
    riskFactorSection.style.display = 'none';
    riskFactor.required = false;
    riskFactor.value = '';
  }
}

function showSuccess(message) {
  alert(message);
}

function showError(message) {
  alert('Error: ' + message);
}

async function handleEditUserSubmit(e) {
  e.preventDefault();

  const email = document.getElementById('editUserId').value;
  const fullName = document.getElementById('editUserFullName').value;
  const isActive = document.getElementById('editUserIsActive').checked;
  const role = document.getElementById('editUserRole').value;
  const isAdmin = (role === 'admin');

  try {
    const response = await fetch(`{{ base_path }}/api/admin/users/${encodeURIComponent(email)}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      credentials: 'include',
      body: JSON.stringify({
        full_name: fullName,
        is_active: isActive,
        is_admin: isAdmin,
        role: role
      })
    });
    
    if (response.ok) {
      // Hide the modal
      const modal = bootstrap.Modal.getInstance(document.getElementById('editUserModal'));
      modal.hide();
      
      // Reload data and show success
      await loadAdminData();
      showSuccess('User updated successfully');
    } else {
      const error = await response.json();
      showError(error.detail || 'Failed to update user');
    }
  } catch (error) {
    showError('Failed to update user');
  }
}

async function editAgentAdmin(agentId) {
  try {
    console.log('DEBUG: Admin fetching fresh agent data for editing:', agentId);
    
    // Fetch fresh agent data from server
    const response = await fetch(`{{ base_path }}/api/agents/${agentId}`, {
      credentials: 'include'
    });
    
    if (!response.ok) {
      if (response.status === 401) {
        window.location.href = '{{ base_path }}/login';
        return;
      } else if (response.status === 403) {
        showError('Not authorized to edit this agent');
        return;
      } else {
        showError('Failed to load agent for editing');
        return;
      }
    }
    
    const agent = await response.json();
    console.log('DEBUG: Admin fresh agent data for editing:', agent);
  
  // Populate edit form
  document.getElementById('editAgentId').value = agent.agent_id;
  document.getElementById('editAgentName').value = agent.agent_name;
  document.getElementById('editAgentTool').value = agent.agent_tool || '';
  document.getElementById('editAgentStatus').value = agent.agent_status || 'Development';
  document.getElementById('editAgentDescription').value = agent.agent_description || '';
  document.getElementById('editAgentPurpose').value = agent.agent_purpose || '';
  document.getElementById('editAgentVersion').value = agent.agent_version || '';
  document.getElementById('editAgentLocation').value = agent.agent_location || '';
  document.getElementById('editAgentDepartment').value = agent.agent_department || '';
  document.getElementById('editAgentContact').value = agent.agent_contact_person || '';
  document.getElementById('editAgentTags').value = agent.agent_tags ? agent.agent_tags.join(', ') : '';
  document.getElementById('editAgentUserbase').value = agent.agent_userbase ? agent.agent_userbase.join(', ') : '';
  document.getElementById('editAgentCapabilities').value = agent.agent_capabilities ? agent.agent_capabilities.join(', ') : '';
  document.getElementById('editAgentDiscipline').value = agent.discipline || '';

  // Handle Quality Audit field (admin always has access)
  document.getElementById('editQualityAuditStatus').checked = agent.quality_audit_status || false;
  
  // Update the note with audit trail information
  let noteHtml = 'Check this box if the agent has passed quality audit review.';
  if (agent.quality_audit_updated_by_name && agent.quality_audit_updated_at) {
    const action = agent.quality_audit_status ? 'checked' : 'unchecked';
    const date = formatDate(agent.quality_audit_updated_at);
    noteHtml += `<br><br><small class="text-info"><i class="fas fa-history me-1"></i><strong>${agent.quality_audit_updated_by_name}</strong> ${action} Quality Audit on ${date}</small>`;
  } else {
    noteHtml += '<br><br><small class="text-muted"><i class="fas fa-info-circle me-1"></i>No quality audit changes recorded yet.</small>';
  }
  document.getElementById('editQualityAuditNote').innerHTML = noteHtml;
  
  // Handle Risk Factor field
  const riskFactorSection = document.getElementById('editRiskFactorSection');
  const riskFactor = document.getElementById('editRiskFactor');
  riskFactor.value = agent.risk_factor || '';
  
  if (agent.quality_audit_status) {
    riskFactorSection.style.display = 'block';
    riskFactor.required = true;
  } else {
    riskFactorSection.style.display = 'none';
    riskFactor.required = false;
  }
  
    // Show edit modal
    const modal = new bootstrap.Modal(document.getElementById('editAgentModal'));
    modal.show();
    
  } catch (error) {
    console.error('Error loading agent for editing:', error);
    showError('Failed to load agent for editing. Please try again.');
  }
}

async function handleEditAgentSubmit(e) {
  e.preventDefault();
  
  const agentId = document.getElementById('editAgentId').value;
  const agentData = {
    agent_name: document.getElementById('editAgentName').value,
    agent_tool: document.getElementById('editAgentTool').value,
    agent_status: document.getElementById('editAgentStatus').value,
    agent_description: document.getElementById('editAgentDescription').value,
    agent_purpose: document.getElementById('editAgentPurpose').value,
    agent_version: document.getElementById('editAgentVersion').value,
    agent_location: document.getElementById('editAgentLocation').value,
    agent_department: document.getElementById('editAgentDepartment').value,
    agent_contact_person: document.getElementById('editAgentContact').value,
    agent_tags: document.getElementById('editAgentTags').value.split(',').map(s => s.trim()).filter(s => s),
    agent_userbase: document.getElementById('editAgentUserbase').value.split(',').map(s => s.trim()).filter(s => s),
    agent_capabilities: document.getElementById('editAgentCapabilities').value.split(',').map(s => s.trim()).filter(s => s),
    discipline: document.getElementById('editAgentDiscipline').value || null,
    quality_audit_status: document.getElementById('editQualityAuditStatus').checked
  };

  // Add Risk Factor
  const riskFactorValue = document.getElementById('editRiskFactor').value;
  agentData.risk_factor = riskFactorValue ? parseInt(riskFactorValue) : null;
  
  // Validate Risk Factor if Quality Audit is checked
  if (agentData.quality_audit_status && (!agentData.risk_factor || agentData.risk_factor < 1 || agentData.risk_factor > 5)) {
    showError('Risk Factor is required when Quality Audit is checked!');
    return;
  }
  
  try {
    const response = await fetch(`{{ base_path }}/api/agents/${agentId}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      credentials: 'include',
      body: JSON.stringify(agentData)
    });
    
    if (response.ok) {
      // Hide the modal
      const modal = bootstrap.Modal.getInstance(document.getElementById('editAgentModal'));
      modal.hide();
      
      // Reload data and show success
      await loadAdminData();
      showSuccess('Agent updated successfully');
    } else {
      const error = await response.json();
      showError(error.detail || 'Failed to update agent');
    }
  } catch (error) {
    showError('Failed to update agent');
  }
}

function logout() {
  localStorage.removeItem('access_token');
  window.location.href = '{{ base_path }}/';
}

// Create User Functions
function showCreateUserModal() {
  // Clear the form
  document.getElementById('createUserForm').reset();

  // Show the modal
  const modal = new bootstrap.Modal(document.getElementById('createUserModal'));
  modal.show();
}

async function handleCreateUserSubmit(e) {
  e.preventDefault();

  const email = document.getElementById('createUserEmail').value;
  const fullName = document.getElementById('createUserFullName').value;
  const password = document.getElementById('createUserPassword').value;
  const passwordConfirm = document.getElementById('createUserPasswordConfirm').value;
  const isAdmin = document.getElementById('createUserIsAdmin').checked;

  // Validate passwords match
  if (password !== passwordConfirm) {
    showError('Passwords do not match');
    return;
  }

  // Validate password length
  if (password.length < 8) {
    showError('Password must be at least 8 characters');
    return;
  }

  try {
    const response = await fetch('{{ base_path }}/api/admin/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      credentials: 'include',
      body: JSON.stringify({
        email: email,
        full_name: fullName || null,
        password: password,
        is_admin: isAdmin
      })
    });

    if (response.ok) {
      // Hide the modal
      const modal = bootstrap.Modal.getInstance(document.getElementById('createUserModal'));
      modal.hide();

      // Reload data and show success
      await loadAdminData();
      showSuccess('User created successfully');
    } else {
      const error = await response.json();
      showError(error.detail || 'Failed to create user');
    }
  } catch (error) {
    showError('Failed to create user');
  }
}

// Reset Password Functions
function showResetPasswordModal() {
  const email = document.getElementById('editUserId').value;

  // Set the email in the reset password modal
  document.getElementById('resetPasswordEmail').value = email;
  document.getElementById('resetPasswordUserEmail').textContent = email;

  // Clear password fields
  document.getElementById('newPassword').value = '';
  document.getElementById('newPasswordConfirm').value = '';

  // Hide edit modal and show reset password modal
  const editModal = bootstrap.Modal.getInstance(document.getElementById('editUserModal'));
  editModal.hide();

  const resetModal = new bootstrap.Modal(document.getElementById('resetPasswordModal'));
  resetModal.show();
}

async function handleResetPasswordSubmit(e) {
  e.preventDefault();

  const email = document.getElementById('resetPasswordEmail').value;
  const newPassword = document.getElementById('newPassword').value;
  const newPasswordConfirm = document.getElementById('newPasswordConfirm').value;

  // Validate passwords match
  if (newPassword !== newPasswordConfirm) {
    showError('Passwords do not match');
    return;
  }

  // Validate password length
  if (newPassword.length < 8) {
    showError('Password must be at least 8 characters');
    return;
  }

  try {
    const response = await fetch(`{{ base_path }}/api/admin/users/${encodeURIComponent(email)}/reset-password`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      credentials: 'include',
      body: JSON.stringify({
        new_password: newPassword
      })
    });

    if (response.ok) {
      // Hide the modal
      const modal = bootstrap.Modal.getInstance(document.getElementById('resetPasswordModal'));
      modal.hide();

      showSuccess('Password reset successfully');
    } else {
      const error = await response.json();
      showError(error.detail || 'Failed to reset password');
    }
  } catch (error) {
    showError('Failed to reset password');
  }
}

// ===================== Analytics =====================
let analyticsCharts = {};

function destroyChart(key) {
  if (analyticsCharts[key]) {
    analyticsCharts[key].destroy();
    analyticsCharts[key] = null;
  }
}

const STATUS_COLORS = {
  'Active': '#28a745',
  'Development': '#ffc107',
  'Inactive': '#dc3545',
  'Deprecated': '#6c757d'
};

const DISCIPLINE_COLORS = [
  '#f3ae3e', '#4e79a7', '#59a14f', '#e15759', '#76b7b2', '#edc949', '#af7aa1'
];

async function loadAnalytics() {
  try {
    const status = document.getElementById('analyticsStatusFilter').value;
    const discipline = document.getElementById('analyticsDisciplineFilter').value;
    const days = document.getElementById('analyticsTimeRange').value;

    const params = new URLSearchParams();
    if (status) params.set('status', status);
    if (discipline) params.set('discipline', discipline);
    params.set('days', days);

    const qs = params.toString();
    const url = '{{ base_path }}/api/admin/analytics' + (qs ? '?' + qs : '');
    const response = await fetch(url, { credentials: 'include' });
    if (!response.ok) return;
    const data = await response.json();

    // Update time range label in chart header
    const label = document.getElementById('timeRangeLabel');
    if (label) label.textContent = '(Last ' + days + ' Days)';

    updateAnalyticsStats(data);
    renderUsageTimeline(data.usage_timeline);
    renderTokenBreakdown(data.summary.prompt_tokens, data.summary.completion_tokens);
    renderStatusBreakdown(data.status_breakdown);
    renderDisciplineBreakdown(data.discipline_breakdown);
    renderRatingDistribution(data.rating_distribution);
    renderTopTable('topMessagesTbody', data.top_by_messages, 'total_messages');
    renderTopTable('topTokensTbody', data.top_by_tokens, 'total_tokens');
    renderRecentlyActive(data.recently_active);
  } catch (err) {
    console.error('Failed to load analytics:', err);
  }
}

function renderUsageTimeline(timeline) {
  destroyChart('usageTimeline');
  const canvas = document.getElementById('usageTimelineChart');
  const emptyEl = document.getElementById('usageTimelineEmpty');

  if (!timeline || timeline.length === 0) {
    canvas.style.display = 'none';
    emptyEl.style.display = 'block';
    return;
  }
  canvas.style.display = 'block';
  emptyEl.style.display = 'none';

  const labels = timeline.map(t => t.date);
  const messages = timeline.map(t => t.message_count);
  const tokens = timeline.map(t => t.token_count);
  const hasTokens = tokens.some(v => v > 0);

  const datasets = [{
    label: 'Messages',
    data: messages,
    borderColor: '#4e79a7',
    backgroundColor: 'rgba(78,121,167,0.1)',
    fill: true,
    tension: 0.3,
    yAxisID: 'y'
  }];

  const scales = {
    y: { beginAtZero: true, title: { display: true, text: 'Messages' }, position: 'left' },
    x: { ticks: { maxTicksLimit: 12 } }
  };

  if (hasTokens) {
    datasets.push({
      label: 'Tokens',
      data: tokens,
      borderColor: '#f3ae3e',
      backgroundColor: 'rgba(243,174,62,0.1)',
      fill: true,
      tension: 0.3,
      yAxisID: 'y1'
    });
    scales.y1 = { beginAtZero: true, title: { display: true, text: 'Tokens' }, position: 'right', grid: { drawOnChartArea: false } };
  }

  analyticsCharts.usageTimeline = new Chart(canvas, {
    type: 'line',
    data: { labels, datasets },
    options: {
      responsive: true,
      maintainAspectRatio: true,
      interaction: { mode: 'index', intersect: false },
      plugins: { legend: { position: 'top' } },
      scales
    }
  });
}

function renderTokenBreakdown(prompt, completion) {
  destroyChart('tokenBreakdown');
  const canvas = document.getElementById('tokenBreakdownChart');
  const emptyEl = document.getElementById('tokenBreakdownEmpty');

  if (!prompt && !completion) {
    canvas.style.display = 'none';
    emptyEl.style.display = 'block';
    return;
  }
  canvas.style.display = 'block';
  emptyEl.style.display = 'none';

  analyticsCharts.tokenBreakdown = new Chart(canvas, {
    type: 'doughnut',
    data: {
      labels: ['Prompt (Input)', 'Completion (Output)'],
      datasets: [{ data: [prompt, completion], backgroundColor: ['#4e79a7', '#f3ae3e'] }]
    },
    options: {
      responsive: true,
      plugins: { legend: { position: 'bottom' } }
    }
  });
}

function renderStatusBreakdown(statusData) {
  destroyChart('statusBreakdown');
  const canvas = document.getElementById('statusBreakdownChart');
  const emptyEl = document.getElementById('statusBreakdownEmpty');

  const entries = Object.entries(statusData || {}).filter(([, v]) => v > 0);
  if (entries.length === 0) {
    canvas.style.display = 'none';
    emptyEl.style.display = 'block';
    return;
  }
  canvas.style.display = 'block';
  emptyEl.style.display = 'none';

  analyticsCharts.statusBreakdown = new Chart(canvas, {
    type: 'doughnut',
    data: {
      labels: entries.map(([k]) => k || 'Unknown'),
      datasets: [{
        data: entries.map(([, v]) => v),
        backgroundColor: entries.map(([k]) => STATUS_COLORS[k] || '#adb5bd')
      }]
    },
    options: {
      responsive: true,
      plugins: { legend: { position: 'bottom' } }
    }
  });
}

function renderDisciplineBreakdown(disciplineData) {
  destroyChart('disciplineBreakdown');
  const canvas = document.getElementById('disciplineBreakdownChart');
  const emptyEl = document.getElementById('disciplineBreakdownEmpty');

  const entries = Object.entries(disciplineData || {}).filter(([, v]) => v > 0);
  if (entries.length === 0) {
    canvas.style.display = 'none';
    emptyEl.style.display = 'block';
    return;
  }
  canvas.style.display = 'block';
  emptyEl.style.display = 'none';

  analyticsCharts.disciplineBreakdown = new Chart(canvas, {
    type: 'doughnut',
    data: {
      labels: entries.map(([k]) => k),
      datasets: [{
        data: entries.map(([, v]) => v),
        backgroundColor: entries.map((_, i) => DISCIPLINE_COLORS[i % DISCIPLINE_COLORS.length])
      }]
    },
    options: {
      responsive: true,
      plugins: { legend: { position: 'bottom' } }
    }
  });
}

function renderRatingDistribution(ratingData) {
  destroyChart('ratingDist');
  const canvas = document.getElementById('ratingDistChart');
  const emptyEl = document.getElementById('ratingDistEmpty');

  const values = [1, 2, 3, 4, 5].map(k => (ratingData || {})[k] || 0);
  if (values.every(v => v === 0)) {
    canvas.style.display = 'none';
    emptyEl.style.display = 'block';
    return;
  }
  canvas.style.display = 'block';
  emptyEl.style.display = 'none';

  analyticsCharts.ratingDist = new Chart(canvas, {
    type: 'bar',
    data: {
      labels: ['1 Star', '2 Stars', '3 Stars', '4 Stars', '5 Stars'],
      datasets: [{
        label: 'Agents',
        data: values,
        backgroundColor: '#f3ae3e',
        borderRadius: 6
      }]
    },
    options: {
      responsive: true,
      plugins: { legend: { display: false } },
      scales: {
        y: { beginAtZero: true, ticks: { stepSize: 1 } }
      }
    }
  });
}

function renderTopTable(tbodyId, agents, field) {
  const tbody = document.getElementById(tbodyId);
  if (!agents || agents.length === 0) {
    tbody.innerHTML = '<tr><td colspan="4" class="text-center text-muted py-3">No data</td></tr>';
    return;
  }
  tbody.innerHTML = agents.map((a, i) => `
    <tr>
      <td><span class="rank-badge">${i + 1}</span></td>
      <td class="fw-medium">${a.agent_name}</td>
      <td><span class="badge status-${a.agent_status || 'Development'}">${a.agent_status || 'Development'}</span></td>
      <td class="fw-bold">${formatNumber(a[field] || 0)}</td>
    </tr>
  `).join('');
}

function renderRecentlyActive(agents) {
  const tbody = document.getElementById('recentlyActiveTbody');
  if (!agents || agents.length === 0) {
    tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-3">No recently active agents</td></tr>';
    return;
  }
  tbody.innerHTML = agents.map(a => `
    <tr>
      <td class="fw-medium">${a.agent_name}</td>
      <td><span class="badge status-${a.agent_status || 'Development'}">${a.agent_status || 'Development'}</span></td>
      <td>${a.discipline || '<span class="text-muted">-</span>'}</td>
      <td>${formatNumber(a.total_messages || 0)}</td>
      <td>${formatNumber(a.total_tokens || 0)}</td>
      <td>${formatDate(a.last_used)}</td>
    </tr>
  `).join('');
}


// ===== Verification Tab Functions =====

async function loadVerificationData() {
  try {
    const response = await fetch('{{ base_path }}/api/admin/agents/pending-verification', {
      credentials: 'include'
    });
    if (!response.ok) return;
    verificationAgents = await response.json();

    // Update badge count
    const pending = verificationAgents.filter(a => a.verification_status === 'needs_verification');
    const badge = document.getElementById('verificationPendingBadge');
    if (pending.length > 0) {
      badge.textContent = pending.length;
      badge.style.display = 'inline';
    } else {
      badge.style.display = 'none';
    }

    filterVerificationAgents();
  } catch (error) {
    console.error('Error loading verification data:', error);
  }
}

function filterVerificationAgents() {
  const filter = document.getElementById('verificationFilter').value;
  let filtered = verificationAgents;
  if (filter !== 'all') {
    filtered = verificationAgents.filter(a => a.verification_status === filter);
  }
  displayVerificationAgents(filtered);
}

function displayVerificationAgents(agents) {
  const tbody = document.getElementById('verificationTableBody');
  if (!agents.length) {
    tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted py-4">No agents to display</td></tr>';
    return;
  }

  tbody.innerHTML = agents.map(agent => {
    const statusBadge = agent.verification_status === 'verified'
      ? '<span class="badge bg-success">Verified</span>'
      : '<span class="badge bg-warning text-dark">Needs Verification</span>';

    const actionBtn = agent.verification_status === 'needs_verification' && !isReadonlyAdmin
      ? `<button class="btn btn-success btn-sm admin-write-action" onclick="approveAgent('${agent.agent_id}')">
           <i class="fas fa-check me-1"></i>Approve
         </button>`
      : (agent.verified_by ? `<small class="text-muted">by ${agent.verified_by}<br>${formatDate(agent.verified_date)}</small>` : '');

    return `<tr>
      <td class="fw-medium">${agent.agent_name || 'N/A'}</td>
      <td>${agent.client_name || 'N/A'}</td>
      <td>${agent.studio_name || 'N/A'}</td>
      <td>${agent.created_by || 'N/A'}</td>
      <td>${formatDate(agent.created_at)}</td>
      <td>${statusBadge}</td>
      <td>${actionBtn}</td>
    </tr>`;
  }).join('');
}

async function approveAgent(agentId) {
  if (!confirm('Are you sure you want to verify this agent?')) return;

  try {
    const response = await fetch(`{{ base_path }}/api/admin/agents/${agentId}/verify`, {
      method: 'PUT',
      credentials: 'include'
    });

    if (response.ok) {
      showSuccess('Agent verified successfully');
      await loadVerificationData();
      await loadAdminData();
    } else {
      const error = await response.json();
      showError(error.detail || 'Failed to verify agent');
    }
  } catch (error) {
    showError('Failed to verify agent');
  }
}

</script>
{% endblock %}