{% extends "base.html" %}

{% block title %}System Administration{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1><i class="fas fa-cogs"></i> System Administration</h1>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-outline-info" onclick="refreshDashboard()">
                        <i class="fas fa-sync-alt"></i> Refresh
                    </button>
                    <button type="button" class="btn btn-outline-success" onclick="createBackup()">
                        <i class="fas fa-download"></i> Create Backup
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- System Health Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-primary">
                <div class="card-body text-center">
                    <div id="system-status" class="display-6 mb-2">
                        <i class="fas fa-circle text-success"></i>
                    </div>
                    <h6 class="card-title">System Status</h6>
                    <p class="card-text small" id="system-status-text">Healthy</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-info">
                <div class="card-body text-center">
                    <div class="display-6 mb-2">
                        <i class="fas fa-users"></i>
                    </div>
                    <h6 class="card-title">Total Users</h6>
                    <p class="card-text h4" id="total-users">0</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-warning">
                <div class="card-body text-center">
                    <div class="display-6 mb-2">
                        <i class="fas fa-database"></i>
                    </div>
                    <h6 class="card-title">Database Size</h6>
                    <p class="card-text h6" id="db-size">0 MB</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-success">
                <div class="card-body text-center">
                    <div class="display-6 mb-2">
                        <i class="fas fa-clock"></i>
                    </div>
                    <h6 class="card-title">System Uptime</h6>
                    <p class="card-text small" id="system-uptime">Unknown</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Navigation Tabs -->
    <ul class="nav nav-tabs mb-4" id="adminTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" 
                type="button" role="tab">
                <i class="fas fa-tachometer-alt"></i> Overview
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="users-tab" data-bs-toggle="tab" data-bs-target="#users" 
                type="button" role="tab">
                <i class="fas fa-users"></i> User Management
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" 
                type="button" role="tab">
                <i class="fas fa-sliders-h"></i> System Settings
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="maintenance-tab" data-bs-toggle="tab" data-bs-target="#maintenance" 
                type="button" role="tab">
                <i class="fas fa-tools"></i> Maintenance
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="issues-tab" data-bs-toggle="tab" data-bs-target="#issues" 
                type="button" role="tab">
                <i class="fas fa-bug"></i> Issue Tracking
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="import-tab" data-bs-toggle="tab" data-bs-target="#import" 
                type="button" role="tab">
                <i class="bi bi-upload"></i> Data Import
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="backup-tab" data-bs-toggle="tab" data-bs-target="#backup" 
                type="button" role="tab">
                <i class="fas fa-hdd"></i> Backup & Restore
            </button>
        </li>
    </ul>

    <!-- Tab Content -->
    <div class="tab-content" id="adminTabContent">
        <!-- Overview Tab -->
        <div class="tab-pane fade show active" id="overview" role="tabpanel">
            <div class="row">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-chart-bar"></i> System Statistics</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-6 mb-3">
                                    <strong>Total Customers:</strong>
                                    <span id="stat-customers" class="float-end">0</span>
                                </div>
                                <div class="col-sm-6 mb-3">
                                    <strong>Total Files:</strong>
                                    <span id="stat-files" class="float-end">0</span>
                                </div>
                                <div class="col-sm-6 mb-3">
                                    <strong>Total Transactions:</strong>
                                    <span id="stat-transactions" class="float-end">0</span>
                                </div>
                                <div class="col-sm-6 mb-3">
                                    <strong>Total QDROs:</strong>
                                    <span id="stat-qdros" class="float-end">0</span>
                                </div>
                                <div class="col-sm-6 mb-3">
                                    <strong>Active Users:</strong>
                                    <span id="stat-active-users" class="float-end">0</span>
                                </div>
                                <div class="col-sm-6 mb-3">
                                    <strong>Admin Users:</strong>
                                    <span id="stat-admins" class="float-end">0</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-exclamation-triangle"></i> System Alerts</h5>
                        </div>
                        <div class="card-body">
                            <div id="system-alerts">
                                <p class="text-muted">No alerts</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-history"></i> Recent Activity</h5>
                        </div>
                        <div class="card-body">
                            <div id="recent-activity">
                                <p class="text-muted">Loading recent activity...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Users Tab -->
        <div class="tab-pane fade" id="users" role="tabpanel">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-users"></i> User Management</h5>
                    <button type="button" class="btn btn-primary btn-sm" onclick="showCreateUserModal()">
                        <i class="fas fa-plus"></i> Add User
                    </button>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="user-search" 
                                placeholder="Search users..." onkeyup="searchUsers()">
                        </div>
                        <div class="col-md-3">
                            <select class="form-select" id="user-filter" onchange="filterUsers()">
                                <option value="all">All Users</option>
                                <option value="active">Active Only</option>
                                <option value="admin">Admins Only</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <button type="button" class="btn btn-outline-secondary" onclick="loadUsers()">
                                <i class="fas fa-sync"></i> Refresh
                            </button>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead class="table-dark">
                                <tr>
                                    <th>Username</th>
                                    <th>Email</th>
                                    <th>Name</th>
                                    <th>Status</th>
                                    <th>Role</th>
                                    <th>Last Login</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="users-table-body">
                                <tr>
                                    <td colspan="7" class="text-center">Loading users...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <nav>
                        <ul class="pagination justify-content-center" id="users-pagination">
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

        <!-- Settings Tab -->
        <div class="tab-pane fade" id="settings" role="tabpanel">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-sliders-h"></i> System Settings</h5>
                    <button type="button" class="btn btn-primary btn-sm" onclick="showCreateSettingModal()">
                        <i class="fas fa-plus"></i> Add Setting
                    </button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead class="table-dark">
                                <tr>
                                    <th>Setting Key</th>
                                    <th>Value</th>
                                    <th>Type</th>
                                    <th>Description</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="settings-table-body">
                                <tr>
                                    <td colspan="5" class="text-center">Loading settings...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Maintenance Tab -->
        <div class="tab-pane fade" id="maintenance" role="tabpanel">
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-database"></i> Database Maintenance</h5>
                        </div>
                        <div class="card-body">
                            <p class="card-text">Optimize database performance and clean up data.</p>
                            <div class="d-grid gap-2">
                                <button type="button" class="btn btn-warning" onclick="vacuumDatabase()">
                                    <i class="fas fa-compress-alt"></i> Vacuum Database
                                </button>
                                <button type="button" class="btn btn-info" onclick="analyzeDatabase()">
                                    <i class="fas fa-chart-line"></i> Analyze Statistics
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-table"></i> Lookup Tables</h5>
                        </div>
                        <div class="card-body">
                            <div id="lookup-tables">
                                <p class="text-muted">Loading lookup table information...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-history"></i> Maintenance Log</h5>
                        </div>
                        <div class="card-body">
                            <div id="maintenance-log">
                                <p class="text-muted">No maintenance operations performed yet.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Backup Tab -->
        <div class="tab-pane fade" id="backup" role="tabpanel">
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-download"></i> Create Backup</h5>
                        </div>
                        <div class="card-body">
                            <p class="card-text">Create a manual backup of the database.</p>
                            <button type="button" class="btn btn-success btn-lg w-100" onclick="createBackup()">
                                <i class="fas fa-download"></i> Create Backup Now
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-info-circle"></i> Backup Information</h5>
                        </div>
                        <div class="card-body">
                            <p><strong>Last Backup:</strong> <span id="last-backup">Unknown</span></p>
                            <p><strong>Backup Location:</strong> ./backups/</p>
                            <p><strong>Retention:</strong> 10 most recent backups</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-list"></i> Available Backups</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead class="table-dark">
                                        <tr>
                                            <th>Filename</th>
                                            <th>Size</th>
                                            <th>Created</th>
                                            <th>Type</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody id="backup-list">
                                        <tr>
                                            <td colspan="5" class="text-center">Loading backups...</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Issues Tab -->
        <div class="tab-pane fade" id="issues" role="tabpanel">
            <div class="row mb-4">
                <!-- Issue Statistics Cards -->
                <div class="col-md-3">
                    <div class="card border-danger">
                        <div class="card-body text-center">
                            <h2 class="text-danger" id="high-priority-count">0</h2>
                            <h6>High Priority</h6>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card border-warning">
                        <div class="card-body text-center">
                            <h2 class="text-warning" id="open-issues-count">0</h2>
                            <h6>Open Issues</h6>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card border-info">
                        <div class="card-body text-center">
                            <h2 class="text-info" id="in-progress-count">0</h2>
                            <h6>In Progress</h6>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card border-success">
                        <div class="card-body text-center">
                            <h2 class="text-success" id="resolved-count">0</h2>
                            <h6>Resolved</h6>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Issue Management -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-bug"></i> Internal Issues & Bugs</h5>
                    <div>
                        <button type="button" class="btn btn-outline-primary btn-sm me-2" onclick="loadIssues()">
                            <i class="fas fa-sync"></i> Refresh
                        </button>
                        <button type="button" class="btn btn-primary btn-sm" onclick="openSupportModal()">
                            <i class="fas fa-plus"></i> New Issue
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Filters -->
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <select class="form-select form-select-sm" id="issueStatusFilter" onchange="filterIssues()">
                                <option value="">All Statuses</option>
                                <option value="open">Open</option>
                                <option value="in_progress">In Progress</option>
                                <option value="resolved">Resolved</option>
                                <option value="closed">Closed</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select class="form-select form-select-sm" id="issuePriorityFilter" onchange="filterIssues()">
                                <option value="">All Priorities</option>
                                <option value="urgent">Urgent</option>
                                <option value="high">High</option>
                                <option value="medium">Medium</option>
                                <option value="low">Low</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select class="form-select form-select-sm" id="issueCategoryFilter" onchange="filterIssues()">
                                <option value="">All Categories</option>
                                <option value="bug_report">Bug Reports</option>
                                <option value="qa_issue">QA Issues</option>
                                <option value="feature_request">Feature Requests</option>
                                <option value="database_issue">Database Issues</option>
                                <option value="system_error">System Errors</option>
                                <option value="performance">Performance</option>
                                <option value="user_access">User Access</option>
                                <option value="configuration">Configuration</option>
                                <option value="documentation">Documentation</option>
                                <option value="testing">Testing</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="assignedToMeFilter" onchange="filterIssues()">
                                <label class="form-check-label" for="assignedToMeFilter">
                                    Assigned to me
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Issues Table -->
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead class="table-dark">
                                <tr>
                                    <th>ID</th>
                                    <th>Type</th>
                                    <th>Priority</th>
                                    <th>Subject</th>
                                    <th>Reporter</th>
                                    <th>Status</th>
                                    <th>Assigned</th>
                                    <th>Created</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="issues-table-body">
                                <tr>
                                    <td colspan="9" class="text-center">Loading issues...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Issue Detail Modal -->
<div class="modal fade" id="issueDetailModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="issueDetailModalTitle">
                    <i class="fas fa-bug me-2"></i>Issue Details
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <!-- Left Column - Issue Details -->
                    <div class="col-md-8">
                        <div class="card mb-3">
                            <div class="card-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <span class="badge bg-primary me-2" id="issueDetailNumber">ST-2025-XXXX</span>
                                        <span class="badge" id="issueDetailCategory">category</span>
                                        <span class="badge ms-2" id="issueDetailPriority">priority</span>
                                    </div>
                                    <span class="badge fs-6" id="issueDetailStatus">status</span>
                                </div>
                            </div>
                            <div class="card-body">
                                <h5 id="issueDetailSubject">Issue subject</h5>
                                <div class="mt-3">
                                    <h6>Description:</h6>
                                    <div id="issueDetailDescription" style="white-space: pre-wrap; background: #f8f9fa; padding: 1rem; border-radius: 0.375rem;"></div>
                                </div>
                                <div class="mt-3">
                                    <h6>Context Information:</h6>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <small><strong>Page:</strong> <span id="issueDetailPage">-</span></small>
                                        </div>
                                        <div class="col-md-6">
                                            <small><strong>Browser:</strong> <span id="issueDetailBrowser">-</span></small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Responses Section -->
                        <div class="card">
                            <div class="card-header">
                                <h6 class="mb-0">Comments & Updates</h6>
                            </div>
                            <div class="card-body">
                                <div id="issueResponses">
                                    <p class="text-muted">No comments yet.</p>
                                </div>
                                
                                <!-- Add Response Form -->
                                <div class="mt-3 border-top pt-3">
                                    <textarea class="form-control mb-2" id="newResponseText" rows="3" placeholder="Add a comment..."></textarea>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="internalResponseCheck">
                                            <label class="form-check-label" for="internalResponseCheck">
                                                Internal note (not visible to reporter)
                                            </label>
                                        </div>
                                        <button type="button" class="btn btn-primary btn-sm" onclick="addResponse()">
                                            <i class="fas fa-comment"></i> Add Comment
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Right Column - Issue Management -->
                    <div class="col-md-4">
                        <div class="card mb-3">
                            <div class="card-header">
                                <h6 class="mb-0">Issue Management</h6>
                            </div>
                            <div class="card-body">
                                <form id="issueUpdateForm">
                                    <input type="hidden" id="currentIssueId">
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Status</label>
                                        <select class="form-select form-select-sm" id="updateStatus">
                                            <option value="open">Open</option>
                                            <option value="in_progress">In Progress</option>
                                            <option value="resolved">Resolved</option>
                                            <option value="closed">Closed</option>
                                        </select>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Priority</label>
                                        <select class="form-select form-select-sm" id="updatePriority">
                                            <option value="low">Low</option>
                                            <option value="medium">Medium</option>
                                            <option value="high">High</option>
                                            <option value="urgent">Urgent</option>
                                        </select>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Assign To</label>
                                        <select class="form-select form-select-sm" id="updateAssignee">
                                            <option value="">Unassigned</option>
                                            <!-- Will be populated with users -->
                                        </select>
                                    </div>
                                    
                                    <button type="button" class="btn btn-success btn-sm w-100" onclick="updateIssue()">
                                        <i class="fas fa-save"></i> Update Issue
                                    </button>
                                </form>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <h6 class="mb-0">Issue Info</h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-2">
                                    <small class="text-muted">Reporter:</small><br>
                                    <span id="issueDetailReporter">-</span>
                                </div>
                                <div class="mb-2">
                                    <small class="text-muted">Email:</small><br>
                                    <span id="issueDetailEmail">-</span>
                                </div>
                                <div class="mb-2">
                                    <small class="text-muted">Created:</small><br>
                                    <span id="issueDetailCreated">-</span>
                                </div>
                                <div class="mb-2">
                                    <small class="text-muted">Last Updated:</small><br>
                                    <span id="issueDetailUpdated">-</span>
                                </div>
                                <div class="mb-2" id="issueResolvedInfo" style="display: none;">
                                    <small class="text-muted">Resolved:</small><br>
                                    <span id="issueDetailResolved">-</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- User Management Modal -->
<div class="modal fade" id="userModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="userModalTitle">Add User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="userForm">
                    <input type="hidden" id="userId">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="username" class="form-label">Username *</label>
                            <input type="text" class="form-control" id="username" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="email" class="form-label">Email *</label>
                            <input type="email" class="form-control" id="email" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="firstName" class="form-label">First Name</label>
                            <input type="text" class="form-control" id="firstName">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="lastName" class="form-label">Last Name</label>
                            <input type="text" class="form-control" id="lastName">
                        </div>
                    </div>
                    <div class="mb-3" id="passwordFields">
                        <label for="password" class="form-label">Password *</label>
                        <input type="password" class="form-control" id="password" required>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="isAdmin">
                                <label class="form-check-label" for="isAdmin">
                                    Administrator
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="isActive" checked>
                                <label class="form-check-label" for="isActive">
                                    Active
                                </label>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="saveUser()">Save</button>
            </div>
        </div>
    </div>
</div>

<!-- Settings Modal -->
<div class="modal fade" id="settingModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="settingModalTitle">Add Setting</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="settingForm">
                    <div class="mb-3">
                        <label for="settingKey" class="form-label">Setting Key *</label>
                        <input type="text" class="form-control" id="settingKey" required>
                    </div>
                    <div class="mb-3">
                        <label for="settingValue" class="form-label">Setting Value *</label>
                        <input type="text" class="form-control" id="settingValue" required>
                    </div>
                    <div class="mb-3">
                        <label for="settingType" class="form-label">Setting Type</label>
                        <select class="form-select" id="settingType">
                            <option value="STRING">String</option>
                            <option value="INTEGER">Integer</option>
                            <option value="FLOAT">Float</option>
                            <option value="BOOLEAN">Boolean</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="settingDescription" class="form-label">Description</label>
                        <textarea class="form-control" id="settingDescription" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="saveSetting()">Save</button>
            </div>
        </div>
    </div>
</div>

<!-- Password Reset Modal -->
<div class="modal fade" id="passwordModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reset Password</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="passwordForm">
                    <input type="hidden" id="resetUserId">
                    <div class="mb-3">
                        <label for="newPassword" class="form-label">New Password *</label>
                        <input type="password" class="form-control" id="newPassword" required>
                    </div>
                    <div class="mb-3">
                        <label for="confirmPassword" class="form-label">Confirm Password *</label>
                        <input type="password" class="form-control" id="confirmPassword" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="resetPassword()">Reset Password</button>
            </div>
        </div>
    </div>
</div>

<script>
// Global variables
let currentUsers = [];
let currentSettings = [];
let userPagination = { page: 1, limit: 10 };

// Helper function for authenticated API calls
function getAuthHeaders() {
    const token = localStorage.getItem('auth_token');
    return {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json'
    };
}

// Initialize admin dashboard
document.addEventListener('DOMContentLoaded', function() {
    loadSystemHealth();
    loadSystemStats();
    loadUsers();
    loadSettings();
    loadLookupTables();
    loadBackups();
    loadIssues();
    loadIssueStats();
    
    // Auto-refresh every 5 minutes
    setInterval(loadSystemHealth, 300000);
    
    // Load issue stats when Issue Tracking tab is clicked
    document.getElementById('issues-tab').addEventListener('shown.bs.tab', function() {
        loadIssues();
        loadIssueStats();
    });
});

// System Health Functions
async function loadSystemHealth() {
    try {
        const response = await fetch('/api/admin/health', {
            headers: getAuthHeaders()
        });
        const data = await response.json();
        
        // Update status indicator
        const statusElement = document.getElementById('system-status');
        const statusTextElement = document.getElementById('system-status-text');
        
        if (data.status === 'healthy') {
            statusElement.innerHTML = '<i class="fas fa-circle text-success"></i>';
            statusTextElement.textContent = 'Healthy';
        } else {
            statusElement.innerHTML = '<i class="fas fa-circle text-danger"></i>';
            statusTextElement.textContent = 'Unhealthy';
        }
        
        // Update system info
        document.getElementById('system-uptime').textContent = data.uptime;
        
        // Update alerts
        const alertsElement = document.getElementById('system-alerts');
        if (data.alerts && data.alerts.length > 0) {
            alertsElement.innerHTML = data.alerts.map(alert => 
                '<div class="alert alert-warning alert-sm mb-1">' + alert + '</div>'
            ).join('');
        } else {
            alertsElement.innerHTML = '<p class="text-muted">No alerts</p>';
        }
        
    } catch (error) {
        console.error('Failed to load system health:', error);
        showAlert('Failed to load system health', 'error');
    }
}

async function loadSystemStats() {
    try {
        const response = await fetch('/api/admin/stats', {
            headers: getAuthHeaders()
        });
        const data = await response.json();
        
        // Update dashboard cards
        document.getElementById('total-users').textContent = data.total_users;
        document.getElementById('db-size').textContent = data.database_size;
        
        // Update detailed stats
        document.getElementById('stat-customers').textContent = data.total_customers.toLocaleString();
        document.getElementById('stat-files').textContent = data.total_files.toLocaleString();
        document.getElementById('stat-transactions').textContent = data.total_transactions.toLocaleString();
        document.getElementById('stat-qdros').textContent = data.total_qdros.toLocaleString();
        document.getElementById('stat-active-users').textContent = data.total_active_users;
        document.getElementById('stat-admins').textContent = data.total_admins;
        
        // Update recent activity
        const activityElement = document.getElementById('recent-activity');
        if (data.recent_activity && data.recent_activity.length > 0) {
            activityElement.innerHTML = data.recent_activity.map(activity => 
                '<div class="border-bottom pb-2 mb-2">' +
                '<small class="text-muted">' + (activity.timestamp ? new Date(activity.timestamp).toLocaleString() : 'Recent') + '</small><br>' +
                activity.description +
                '</div>'
            ).join('');
        } else {
            activityElement.innerHTML = '<p class="text-muted">No recent activity</p>';
        }
        
    } catch (error) {
        console.error('Failed to load system stats:', error);
        showAlert('Failed to load system statistics', 'error');
    }
}

// User Management Functions
async function loadUsers() {
    try {
        const search = document.getElementById('user-search').value;
        const filter = document.getElementById('user-filter').value;
        
        let url = '/api/admin/users?';
        if (search) url += 'search=' + encodeURIComponent(search) + '&';
        if (filter === 'active') url += 'active_only=true&';
        
        const response = await fetch(url, {
            headers: getAuthHeaders()
        });
        const users = await response.json();
        currentUsers = users;
        
        renderUsersTable(users);
        
    } catch (error) {
        console.error('Failed to load users:', error);
        showAlert('Failed to load users', 'error');
    }
}

function renderUsersTable(users) {
    const tbody = document.getElementById('users-table-body');
    
    if (users.length === 0) {
        tbody.innerHTML = '<tr><td colspan="7" class="text-center">No users found</td></tr>';
        return;
    }
    
    tbody.innerHTML = users.map(user => `
        <tr>
            <td>${user.username}</td>
            <td>${user.email}</td>
            <td>${(user.first_name || '') + ' ' + (user.last_name || '')}</td>
            <td>
                <span class="badge ${user.is_active ? 'bg-success' : 'bg-secondary'}">
                    ${user.is_active ? 'Active' : 'Inactive'}
                </span>
            </td>
            <td>
                <span class="badge ${user.is_admin ? 'bg-primary' : 'bg-secondary'}">
                    ${user.is_admin ? 'Admin' : 'User'}
                </span>
            </td>
            <td>${user.last_login ? new Date(user.last_login).toLocaleDateString() : 'Never'}</td>
            <td>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-outline-primary" onclick="editUser(${user.id})" title="Edit">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn btn-outline-warning" onclick="showPasswordModal(${user.id})" title="Reset Password">
                        <i class="fas fa-key"></i>
                    </button>
                    <button class="btn btn-outline-danger" onclick="deactivateUser(${user.id})" title="Deactivate">
                        <i class="fas fa-user-times"></i>
                    </button>
                </div>
            </td>
        </tr>
    `).join('');
}

function showCreateUserModal() {
    document.getElementById('userModalTitle').textContent = 'Add User';
    document.getElementById('userForm').reset();
    document.getElementById('userId').value = '';
    document.getElementById('passwordFields').style.display = 'block';
    document.getElementById('isActive').checked = true;
    new bootstrap.Modal(document.getElementById('userModal')).show();
}

async function editUser(userId) {
    try {
        const response = await fetch('/api/admin/users/' + userId, {
            headers: getAuthHeaders()
        });
        const user = await response.json();
        
        document.getElementById('userModalTitle').textContent = 'Edit User';
        document.getElementById('userId').value = user.id;
        document.getElementById('username').value = user.username;
        document.getElementById('email').value = user.email;
        document.getElementById('firstName').value = user.first_name || '';
        document.getElementById('lastName').value = user.last_name || '';
        document.getElementById('isAdmin').checked = user.is_admin;
        document.getElementById('isActive').checked = user.is_active;
        document.getElementById('passwordFields').style.display = 'none';
        
        new bootstrap.Modal(document.getElementById('userModal')).show();
        
    } catch (error) {
        console.error('Failed to load user:', error);
        showAlert('Failed to load user details', 'error');
    }
}

async function saveUser() {
    const userId = document.getElementById('userId').value;
    const isEdit = !!userId;
    
    const userData = {
        username: document.getElementById('username').value,
        email: document.getElementById('email').value,
        first_name: document.getElementById('firstName').value,
        last_name: document.getElementById('lastName').value,
        is_admin: document.getElementById('isAdmin').checked,
        is_active: document.getElementById('isActive').checked
    };
    
    if (!isEdit) {
        userData.password = document.getElementById('password').value;
    }
    
    try {
        const url = isEdit ? '/api/admin/users/' + userId : '/api/admin/users';
        const method = isEdit ? 'PUT' : 'POST';
        
        const response = await fetch(url, {
            method: method,
            headers: getAuthHeaders(),
            body: JSON.stringify(userData)
        });
        
        if (response.ok) {
            bootstrap.Modal.getInstance(document.getElementById('userModal')).hide();
            showAlert(isEdit ? 'User updated successfully' : 'User created successfully', 'success');
            loadUsers();
        } else {
            const error = await response.json();
            showAlert(error.detail || 'Failed to save user', 'error');
        }
        
    } catch (error) {
        console.error('Failed to save user:', error);
        showAlert('Failed to save user', 'error');
    }
}

function showPasswordModal(userId) {
    document.getElementById('resetUserId').value = userId;
    document.getElementById('passwordForm').reset();
    new bootstrap.Modal(document.getElementById('passwordModal')).show();
}

async function resetPassword() {
    const userId = document.getElementById('resetUserId').value;
    const newPassword = document.getElementById('newPassword').value;
    const confirmPassword = document.getElementById('confirmPassword').value;
    
    if (newPassword !== confirmPassword) {
        showAlert('Passwords do not match', 'error');
        return;
    }
    
    try {
        const response = await fetch('/api/admin/users/' + userId + '/reset-password', {
            method: 'POST',
            headers: getAuthHeaders(),
            body: JSON.stringify({
                new_password: newPassword,
                confirm_password: confirmPassword
            })
        });
        
        if (response.ok) {
            bootstrap.Modal.getInstance(document.getElementById('passwordModal')).hide();
            showAlert('Password reset successfully', 'success');
        } else {
            const error = await response.json();
            showAlert(error.detail || 'Failed to reset password', 'error');
        }
        
    } catch (error) {
        console.error('Failed to reset password:', error);
        showAlert('Failed to reset password', 'error');
    }
}

async function deactivateUser(userId) {
    if (!confirm('Are you sure you want to deactivate this user?')) return;
    
    try {
        const response = await fetch('/api/admin/users/' + userId, {
            method: 'DELETE',
            headers: getAuthHeaders()
        });
        
        if (response.ok) {
            showAlert('User deactivated successfully', 'success');
            loadUsers();
        } else {
            const error = await response.json();
            showAlert(error.detail || 'Failed to deactivate user', 'error');
        }
        
    } catch (error) {
        console.error('Failed to deactivate user:', error);
        showAlert('Failed to deactivate user', 'error');
    }
}

// Settings Management Functions
async function loadSettings() {
    try {
        const response = await fetch('/api/admin/settings', {
            headers: getAuthHeaders()
        });
        const data = await response.json();
        currentSettings = data.settings;
        
        renderSettingsTable(data.settings);
        
    } catch (error) {
        console.error('Failed to load settings:', error);
        showAlert('Failed to load settings', 'error');
    }
}

function renderSettingsTable(settings) {
    const tbody = document.getElementById('settings-table-body');
    
    if (settings.length === 0) {
        tbody.innerHTML = '<tr><td colspan="5" class="text-center">No settings found</td></tr>';
        return;
    }
    
    tbody.innerHTML = settings.map(setting => `
        <tr>
            <td><code>${setting.setting_key}</code></td>
            <td>${setting.setting_value}</td>
            <td><span class="badge bg-secondary">${setting.setting_type}</span></td>
            <td>${setting.description || '-'}</td>
            <td>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-outline-primary" onclick="editSetting('${setting.setting_key}')" title="Edit">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn btn-outline-danger" onclick="deleteSetting('${setting.setting_key}')" title="Delete">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </td>
        </tr>
    `).join('');
}

function showCreateSettingModal() {
    document.getElementById('settingModalTitle').textContent = 'Add Setting';
    document.getElementById('settingForm').reset();
    document.getElementById('settingKey').readOnly = false;
    new bootstrap.Modal(document.getElementById('settingModal')).show();
}

async function editSetting(settingKey) {
    try {
        const response = await fetch('/api/admin/settings/' + encodeURIComponent(settingKey), {
            headers: getAuthHeaders()
        });
        const setting = await response.json();
        
        document.getElementById('settingModalTitle').textContent = 'Edit Setting';
        document.getElementById('settingKey').value = setting.setting_key;
        document.getElementById('settingKey').readOnly = true;
        document.getElementById('settingValue').value = setting.setting_value;
        document.getElementById('settingType').value = setting.setting_type;
        document.getElementById('settingDescription').value = setting.description || '';
        
        new bootstrap.Modal(document.getElementById('settingModal')).show();
        
    } catch (error) {
        console.error('Failed to load setting:', error);
        showAlert('Failed to load setting details', 'error');
    }
}

async function saveSetting() {
    const settingKey = document.getElementById('settingKey').value;
    const isEdit = document.getElementById('settingKey').readOnly;
    
    const settingData = {
        setting_key: settingKey,
        setting_value: document.getElementById('settingValue').value,
        setting_type: document.getElementById('settingType').value,
        description: document.getElementById('settingDescription').value
    };
    
    try {
        const url = isEdit ? '/api/admin/settings/' + encodeURIComponent(settingKey) : '/api/admin/settings';
        const method = isEdit ? 'PUT' : 'POST';
        
        const response = await fetch(url, {
            method: method,
            headers: getAuthHeaders(),
            body: JSON.stringify(isEdit ? {
                setting_value: settingData.setting_value,
                description: settingData.description
            } : settingData)
        });
        
        if (response.ok) {
            bootstrap.Modal.getInstance(document.getElementById('settingModal')).hide();
            showAlert(isEdit ? 'Setting updated successfully' : 'Setting created successfully', 'success');
            loadSettings();
        } else {
            const error = await response.json();
            showAlert(error.detail || 'Failed to save setting', 'error');
        }
        
    } catch (error) {
        console.error('Failed to save setting:', error);
        showAlert('Failed to save setting', 'error');
    }
}

async function deleteSetting(settingKey) {
    if (!confirm('Are you sure you want to delete this setting?')) return;
    
    try {
        const response = await fetch('/api/admin/settings/' + encodeURIComponent(settingKey), {
            method: 'DELETE',
            headers: getAuthHeaders()
        });
        
        if (response.ok) {
            showAlert('Setting deleted successfully', 'success');
            loadSettings();
        } else {
            const error = await response.json();
            showAlert(error.detail || 'Failed to delete setting', 'error');
        }
        
    } catch (error) {
        console.error('Failed to delete setting:', error);
        showAlert('Failed to delete setting', 'error');
    }
}

// Maintenance Functions
async function loadLookupTables() {
    try {
        const response = await fetch('/api/admin/lookups/tables', {
            headers: getAuthHeaders()
        });
        const data = await response.json();
        
        const element = document.getElementById('lookup-tables');
        element.innerHTML = data.tables.map(table => `
            <div class="d-flex justify-content-between align-items-center border-bottom pb-2 mb-2">
                <div>
                    <strong>${table.display_name}</strong><br>
                    <small class="text-muted">${table.description}</small>
                </div>
                <span class="badge bg-info">${table.record_count} records</span>
            </div>
        `).join('');
        
    } catch (error) {
        console.error('Failed to load lookup tables:', error);
        document.getElementById('lookup-tables').innerHTML = '<p class="text-danger">Failed to load lookup tables</p>';
    }
}

async function vacuumDatabase() {
    if (!confirm('This will optimize the database. Continue?')) return;
    
    try {
        const response = await fetch('/api/admin/maintenance/vacuum', { 
            method: 'POST',
            headers: getAuthHeaders()
        });
        const result = await response.json();
        
        if (response.ok) {
            showAlert('Database vacuum completed in ' + result.duration_seconds.toFixed(2) + ' seconds', 'success');
            addMaintenanceLog('Database Vacuum', 'Completed successfully');
        } else {
            showAlert(result.detail || 'Database vacuum failed', 'error');
        }
        
    } catch (error) {
        console.error('Failed to vacuum database:', error);
        showAlert('Failed to vacuum database', 'error');
    }
}

async function analyzeDatabase() {
    if (!confirm('This will analyze database statistics. Continue?')) return;
    
    try {
        const response = await fetch('/api/admin/maintenance/analyze', { 
            method: 'POST',
            headers: getAuthHeaders()
        });
        const result = await response.json();
        
        if (response.ok) {
            showAlert('Database analysis completed in ' + result.duration_seconds.toFixed(2) + ' seconds', 'success');
            addMaintenanceLog('Database Analysis', 'Completed successfully');
        } else {
            showAlert(result.detail || 'Database analysis failed', 'error');
        }
        
    } catch (error) {
        console.error('Failed to analyze database:', error);
        showAlert('Failed to analyze database', 'error');
    }
}

function addMaintenanceLog(operation, message) {
    const logElement = document.getElementById('maintenance-log');
    const timestamp = new Date().toLocaleString();
    const logEntry = `
        <div class="border-bottom pb-2 mb-2">
            <small class="text-muted">${timestamp}</small><br>
            <strong>${operation}:</strong> ${message}
        </div>
    `;
    
    if (logElement.innerHTML.includes('No maintenance operations')) {
        logElement.innerHTML = logEntry;
    } else {
        logElement.innerHTML = logEntry + logElement.innerHTML;
    }
}

// Backup Functions
async function loadBackups() {
    try {
        const response = await fetch('/api/admin/backup/list', {
            headers: getAuthHeaders()
        });
        const data = await response.json();
        
        const tbody = document.getElementById('backup-list');
        
        if (data.backups.length === 0) {
            tbody.innerHTML = '<tr><td colspan="5" class="text-center">No backups found</td></tr>';
            return;
        }
        
        tbody.innerHTML = data.backups.map(backup => `
            <tr>
                <td><code>${backup.filename}</code></td>
                <td>${backup.size}</td>
                <td>${new Date(backup.created_at).toLocaleString()}</td>
                <td><span class="badge ${backup.backup_type === 'manual' ? 'bg-primary' : 'bg-secondary'}">${backup.backup_type}</span></td>
                <td>
                    <button class="btn btn-outline-success btn-sm" onclick="downloadBackup('${backup.filename}')" title="Download">
                        <i class="fas fa-download"></i>
                    </button>
                </td>
            </tr>
        `).join('');
        
        // Update last backup info
        if (data.backups.length > 0) {
            document.getElementById('last-backup').textContent = new Date(data.backups[0].created_at).toLocaleString();
        }
        
    } catch (error) {
        console.error('Failed to load backups:', error);
        document.getElementById('backup-list').innerHTML = '<tr><td colspan="5" class="text-center text-danger">Failed to load backups</td></tr>';
    }
}

async function createBackup() {
    if (!confirm('Create a new database backup?')) return;
    
    try {
        const response = await fetch('/api/admin/backup/create', { 
            method: 'POST',
            headers: getAuthHeaders()
        });
        const result = await response.json();
        
        if (response.ok) {
            showAlert('Backup created successfully: ' + result.backup_info.filename, 'success');
            loadBackups();
        } else {
            showAlert(result.detail || 'Failed to create backup', 'error');
        }
        
    } catch (error) {
        console.error('Failed to create backup:', error);
        showAlert('Failed to create backup', 'error');
    }
}

function downloadBackup(filename) {
    window.open('/api/admin/backup/download', '_blank');
}

// Utility Functions
function refreshDashboard() {
    loadSystemHealth();
    loadSystemStats();
    loadUsers();
    loadSettings();
    loadLookupTables();
    loadBackups();
    loadIssues();
    showAlert('Dashboard refreshed', 'info');
}

// Issue Tracking Functions
let currentIssues = [];
let allUsers = [];

async function loadIssues() {
    try {
        const statusFilter = document.getElementById('issueStatusFilter').value;
        const priorityFilter = document.getElementById('issuePriorityFilter').value;
        const categoryFilter = document.getElementById('issueCategoryFilter').value;
        const assignedToMe = document.getElementById('assignedToMeFilter').checked;
        
        let url = '/api/support/tickets?';
        if (statusFilter) url += 'status=' + encodeURIComponent(statusFilter) + '&';
        if (priorityFilter) url += 'priority=' + encodeURIComponent(priorityFilter) + '&';
        if (categoryFilter) url += 'category=' + encodeURIComponent(categoryFilter) + '&';
        if (assignedToMe) url += 'assigned_to_me=true&';
        
        const response = await fetch(url, {
            headers: getAuthHeaders()
        });
        
        if (!response.ok) {
            throw new Error('Failed to load issues');
        }
        
        const issues = await response.json();
        currentIssues = issues;
        
        renderIssuesTable(issues);
        
    } catch (error) {
        console.error('Failed to load issues:', error);
        document.getElementById('issues-table-body').innerHTML = '<tr><td colspan="9" class="text-center text-danger">Failed to load issues</td></tr>';
        showAlert('Failed to load issues', 'error');
    }
}

async function loadIssueStats() {
    try {
        const response = await fetch('/api/support/stats', {
            headers: getAuthHeaders()
        });
        
        if (!response.ok) {
            throw new Error('Failed to load issue stats');
        }
        
        const stats = await response.json();
        
        // Update dashboard cards
        document.getElementById('high-priority-count').textContent = stats.high_priority_tickets + stats.urgent_tickets;
        document.getElementById('open-count').textContent = stats.open_tickets;
        document.getElementById('in-progress-count').textContent = stats.in_progress_tickets;
        document.getElementById('resolved-count').textContent = stats.resolved_tickets;
        
    } catch (error) {
        console.error('Failed to load issue stats:', error);
        showAlert('Failed to load issue statistics', 'error');
    }
}

function renderIssuesTable(issues) {
    const tbody = document.getElementById('issues-table-body');
    
    if (issues.length === 0) {
        tbody.innerHTML = '<tr><td colspan="9" class="text-center">No issues found</td></tr>';
        return;
    }
    
    tbody.innerHTML = issues.map(issue => {
        const priorityClass = {
            'urgent': 'bg-danger',
            'high': 'bg-warning',
            'medium': 'bg-info', 
            'low': 'bg-secondary'
        }[issue.priority] || 'bg-secondary';
        
        const statusClass = {
            'open': 'bg-danger',
            'in_progress': 'bg-warning',
            'resolved': 'bg-success',
            'closed': 'bg-secondary'
        }[issue.status] || 'bg-secondary';
        
        const categoryDisplay = {
            'bug_report': 'Bug Report',
            'qa_issue': 'QA Issue',
            'feature_request': 'Feature Request',
            'database_issue': 'Database Issue',
            'system_error': 'System Error',
            'user_access': 'User Access',
            'performance': 'Performance',
            'documentation': 'Documentation',
            'configuration': 'Configuration',
            'testing': 'Testing'
        }[issue.category] || issue.category;
        
        return `
        <tr>
            <td><strong>${issue.ticket_number}</strong></td>
            <td>
                <span class="badge bg-primary">${categoryDisplay}</span>
            </td>
            <td>
                <span class="badge ${priorityClass}">${issue.priority.toUpperCase()}</span>
            </td>
            <td>
                <div style="max-width: 200px; overflow: hidden; text-overflow: ellipsis;">
                    ${issue.subject}
                </div>
            </td>
            <td>${issue.contact_name}</td>
            <td>
                <span class="badge ${statusClass}">${issue.status.replace('_', ' ').toUpperCase()}</span>
            </td>
            <td>${issue.assigned_admin_name || 'Unassigned'}</td>
            <td>${new Date(issue.created_at).toLocaleDateString()}</td>
            <td>
                <button class="btn btn-outline-primary btn-sm" onclick="viewIssue(${issue.id})" title="View Details">
                    <i class="fas fa-eye"></i>
                </button>
            </td>
        </tr>
        `;
    }).join('');
}

function filterIssues() {
    loadIssues();
}

async function viewIssue(issueId) {
    try {
        const response = await fetch('/api/support/tickets/' + issueId, {
            headers: getAuthHeaders()
        });
        
        if (!response.ok) {
            throw new Error('Failed to load issue details');
        }
        
        const issue = await response.json();
        
        // Populate issue detail modal
        document.getElementById('issueDetailNumber').textContent = issue.ticket_number;
        document.getElementById('issueDetailSubject').textContent = issue.subject;
        document.getElementById('issueDetailDescription').textContent = issue.description;
        
        // Update badges
        const categoryDisplay = {
            'bug_report': 'Bug Report',
            'qa_issue': 'QA Issue',
            'feature_request': 'Feature Request',
            'database_issue': 'Database Issue',
            'system_error': 'System Error',
            'user_access': 'User Access',
            'performance': 'Performance',
            'documentation': 'Documentation',
            'configuration': 'Configuration',
            'testing': 'Testing'
        }[issue.category] || issue.category;
        
        document.getElementById('issueDetailCategory').textContent = categoryDisplay;
        document.getElementById('issueDetailCategory').className = 'badge bg-primary';
        
        document.getElementById('issueDetailPriority').textContent = issue.priority.toUpperCase();
        document.getElementById('issueDetailPriority').className = 'badge ms-2 ' + ({
            'urgent': 'bg-danger',
            'high': 'bg-warning',
            'medium': 'bg-info',
            'low': 'bg-secondary'
        }[issue.priority] || 'bg-secondary');
        
        document.getElementById('issueDetailStatus').textContent = issue.status.replace('_', ' ').toUpperCase();
        document.getElementById('issueDetailStatus').className = 'badge fs-6 ' + ({
            'open': 'bg-danger',
            'in_progress': 'bg-warning', 
            'resolved': 'bg-success',
            'closed': 'bg-secondary'
        }[issue.status] || 'bg-secondary');
        
        // Update context info
        document.getElementById('issueCurrentPage').textContent = issue.current_page || 'Unknown';
        document.getElementById('issueBrowserInfo').textContent = issue.browser_info || 'Unknown';
        document.getElementById('issueIpAddress').textContent = issue.ip_address || 'Unknown';
        
        // Update sidebar info
        document.getElementById('issueDetailReporter').textContent = issue.contact_name;
        document.getElementById('issueDetailEmail').textContent = issue.contact_email;
        document.getElementById('issueDetailCreated').textContent = new Date(issue.created_at).toLocaleString();
        document.getElementById('issueDetailUpdated').textContent = issue.updated_at ? new Date(issue.updated_at).toLocaleString() : 'Never';
        
        if (issue.resolved_at) {
            document.getElementById('issueDetailResolved').textContent = new Date(issue.resolved_at).toLocaleString();
            document.getElementById('issueResolvedInfo').style.display = 'block';
        } else {
            document.getElementById('issueResolvedInfo').style.display = 'none';
        }
        
        // Update form fields for editing
        document.getElementById('updateStatus').value = issue.status;
        document.getElementById('updatePriority').value = issue.priority;
        document.getElementById('updateAssignee').value = issue.assigned_to || '';
        
        // Store current issue ID for updates
        window.currentIssueId = issue.id;
        
        // Load users for assignment dropdown
        await loadUsersForAssignment();
        
        // Load and display responses
        displayIssueResponses(issue.responses);
        
        // Show modal
        new bootstrap.Modal(document.getElementById('issueDetailModal')).show();
        
    } catch (error) {
        console.error('Failed to load issue details:', error);
        showAlert('Failed to load issue details', 'error');
    }
}

async function loadUsersForAssignment() {
    try {
        if (allUsers.length === 0) {
            const response = await fetch('/api/admin/users', {
                headers: getAuthHeaders()
            });
            allUsers = await response.json();
        }
        
        const select = document.getElementById('updateAssignee');
        select.innerHTML = '<option value="">Unassigned</option>';
        
        allUsers.filter(user => user.is_admin && user.is_active).forEach(user => {
            select.innerHTML += `<option value="${user.id}">${user.first_name} ${user.last_name} (${user.username})</option>`;
        });
        
    } catch (error) {
        console.error('Failed to load users for assignment:', error);
    }
}

function displayIssueResponses(responses) {
    const container = document.getElementById('issueResponsesList');
    
    if (responses.length === 0) {
        container.innerHTML = '<p class="text-muted">No responses yet.</p>';
        return;
    }
    
    container.innerHTML = responses.map(response => {
        const isInternal = response.is_internal;
        const badgeClass = isInternal ? 'bg-warning' : 'bg-primary';
        const badgeText = isInternal ? 'Internal' : 'Public';
        
        return `
        <div class="border rounded p-3 mb-3">
            <div class="d-flex justify-content-between align-items-start mb-2">
                <div>
                    <strong>${response.author_name}</strong>
                    <span class="badge ${badgeClass} ms-2">${badgeText}</span>
                </div>
                <small class="text-muted">${new Date(response.created_at).toLocaleString()}</small>
            </div>
            <div style="white-space: pre-wrap;">${response.message}</div>
        </div>
        `;
    }).join('');
}

async function updateIssue() {
    if (!window.currentIssueId) {
        showAlert('No issue selected for update', 'error');
        return;
    }
    
    try {
        const updateData = {
            status: document.getElementById('updateStatus').value,
            priority: document.getElementById('updatePriority').value,
            assigned_to: document.getElementById('updateAssignee').value || null
        };
        
        const response = await fetch('/api/support/tickets/' + window.currentIssueId, {
            method: 'PUT',
            headers: getAuthHeaders(),
            body: JSON.stringify(updateData)
        });
        
        if (!response.ok) {
            throw new Error('Failed to update issue');
        }
        
        showAlert('Issue updated successfully', 'success');
        
        // Refresh the issue details and table
        await viewIssue(window.currentIssueId);
        await loadIssues();
        await loadIssueStats();
        
    } catch (error) {
        console.error('Failed to update issue:', error);
        showAlert('Failed to update issue', 'error');
    }
}

async function addResponse() {
    const message = document.getElementById('newResponseMessage').value.trim();
    const isInternal = document.getElementById('newResponseInternal').checked;
    
    if (!message) {
        showAlert('Please enter a response message', 'error');
        return;
    }
    
    if (!window.currentIssueId) {
        showAlert('No issue selected for response', 'error');
        return;
    }
    
    try {
        const response = await fetch('/api/support/tickets/' + window.currentIssueId + '/responses', {
            method: 'POST',
            headers: getAuthHeaders(),
            body: JSON.stringify({
                message: message,
                is_internal: isInternal
            })
        });
        
        if (!response.ok) {
            throw new Error('Failed to add response');
        }
        
        showAlert('Response added successfully', 'success');
        
        // Clear form
        document.getElementById('newResponseMessage').value = '';
        document.getElementById('newResponseInternal').checked = false;
        
        // Refresh the issue details
        await viewIssue(window.currentIssueId);
        
    } catch (error) {
        console.error('Failed to add response:', error);
        showAlert('Failed to add response', 'error');
    }
}

function searchUsers() {
    const searchTerm = document.getElementById('user-search').value.toLowerCase();
    const filteredUsers = currentUsers.filter(user => 
        user.username.toLowerCase().includes(searchTerm) ||
        user.email.toLowerCase().includes(searchTerm) ||
        (user.first_name && user.first_name.toLowerCase().includes(searchTerm)) ||
        (user.last_name && user.last_name.toLowerCase().includes(searchTerm))
    );
    renderUsersTable(filteredUsers);
}

function filterUsers() {
    loadUsers(); // Reload with current filter
}

function showAlert(message, type = 'info') {
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type === 'error' ? 'danger' : type} alert-dismissible fade show position-fixed`;
    alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; max-width: 400px;';
    
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.body.appendChild(alertDiv);
    
    // Auto-remove after 5 seconds
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.parentNode.removeChild(alertDiv);
        }
    }, 5000);
}
</script>
{% endblock %}