{% extends "base.html" %}
{% block title %}User Management{% endblock %}
{% block page_title %}User Management{% endblock %}
{% block content %}
<style>
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }
    .stat-card {
        background: white;
        padding: 20px;
        border-radius: 15px;
        text-align: center;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    .stat-number {
        font-size: 32px;
        font-weight: bold;
        color: #FF6B35;
    }
    .btn-add {
        background: #28a745;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        margin-bottom: 20px;
    }
    .table-container {
        background: white;
        border-radius: 15px;
        overflow-x: auto;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    .users-table {
        width: 100%;
        border-collapse: collapse;
        min-width: 800px;
    }
    .users-table th, .users-table td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #eee;
    }
    .users-table th {
        background: #FF6B35;
        color: white;
    }
    .role-badge {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 15px;
        font-size: 11px;
    }
    .role-admin { background: #dc3545; color: white; }
    .role-hr_manager { background: #fd7e14; color: white; }
    .role-accountant { background: #17a2b8; color: white; }
    .role-management { background: #6f42c1; color: white; }
    .role-employee { background: #28a745; color: white; }
    .status-active { color: #28a745; }
    .status-inactive { color: #dc3545; }
    .btn-edit {
        background: #ffc107;
        color: #333;
        padding: 4px 10px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin: 2px;
    }
    .btn-password {
        background: #17a2b8;
        color: white;
        padding: 4px 10px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin: 2px;
    }
    .btn-delete {
        background: #dc3545;
        color: white;
        padding: 4px 10px;
        border-radius: 5px;
        text-decoration: none;
        display: inline-block;
        margin: 2px;
        font-size: 11px;
    }
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1000;
    }
    .modal-content {
        background: white;
        max-width: 500px;
        margin: 50px auto;
        padding: 25px;
        border-radius: 15px;
    }
    .modal-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #eee;
    }
    .close {
        font-size: 24px;
        cursor: pointer;
    }
    .form-group {
        margin-bottom: 15px;
    }
    .form-group label {
        display: block;
        font-weight: 600;
        margin-bottom: 5px;
    }
    .form-group input, .form-group select {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    .form-group input:read-only {
        background: #f5f5f5;
    }
    .btn-submit {
        background: #28a745;
        color: white;
        padding: 10px;
        border: none;
        border-radius: 5px;
        width: 100%;
        cursor: pointer;
    }
    .auto-generated {
        font-size: 11px;
        color: #28a745;
        margin-top: 5px;
    }
    .dept-search-container {
        position: relative;
    }
    .dept-suggestions {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 1px solid #ddd;
        border-radius: 5px;
        max-height: 200px;
        overflow-y: auto;
        z-index: 1001;
        display: none;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .dept-suggestion-item {
        padding: 10px;
        cursor: pointer;
        border-bottom: 1px solid #eee;
    }
    .dept-suggestion-item:hover {
        background: #f0f0ff;
    }
    @media (max-width: 768px) {
        .stats-grid { grid-template-columns: 1fr 1fr; }
    }
</style>

<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-number">{{ users|length }}</div>
        <div>Total Users</div>
    </div>
    <div class="stat-card">
        <div class="stat-number">
            {% set admin_count = 0 %}
            {% for u in users %}{% if u[6] == 'admin' %}{% set admin_count = admin_count + 1 %}{% endif %}{% endfor %}
            {{ admin_count }}
        </div>
        <div>Admins</div>
    </div>
    <div class="stat-card">
        <div class="stat-number">
            {% set employee_count = 0 %}
            {% for u in users %}{% if u[6] == 'employee' %}{% set employee_count = employee_count + 1 %}{% endif %}{% endfor %}
            {{ employee_count }}
        </div>
        <div>Employees</div>
    </div>
    <div class="stat-card">
        <div class="stat-number">
            {% set active_count = 0 %}
            {% for u in users %}{% if u[8] == 1 %}{% set active_count = active_count + 1 %}{% endif %}{% endfor %}
            {{ active_count }}
        </div>
        <div>Active Users</div>
    </div>
</div>

<button class="btn-add" onclick="openAddModal()">➕ Add New User</button>

<div class="table-container">
    <table class="users-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Username</th>
                <th>Full Name</th>
                <th>Email</th>
                <th>Role</th>
                <th>Department</th>
                <th>Status</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            {% for user in users %}
            <tr>
                <td>{{ user[0] }}</td>
                <td><strong>{{ user[1] }}</strong></td>
                <td>{{ user[3] }}</td>
                <td>{{ user[4] }}</td>
                <td>
                    {% if user[6] == 'admin' %}
                        <span class="role-badge role-admin">👑 Admin</span>
                    {% elif user[6] == 'hr_manager' %}
                        <span class="role-badge role-hr_manager">👥 HR Manager</span>
                    {% elif user[6] == 'accountant' %}
                        <span class="role-badge role-accountant">💰 Accountant</span>
                    {% elif user[6] == 'management' %}
                        <span class="role-badge role-management">📊 Management</span>
                    {% else %}
                        <span class="role-badge role-employee">👤 Employee</span>
                    {% endif %}
                </span>
                <td>
                    {% if user[6] == 'employee' and user[5] %}
                        {{ user[7] }} (ID: {{ user[5] }})
                    {% else %}
                        {{ user[7] or '-' }}
                    {% endif %}
                </td>
                <td>
                    {% if user[8] == 1 %}
                        <span class="status-active">✅ Active</span>
                    {% else %}
                        <span class="status-inactive">❌ Inactive</span>
                    {% endif %}
                </td>
                <td>
                    <button class="btn-edit" onclick="editUser({{ user[0] }}, '{{ user[3] }}', '{{ user[4] }}', '{{ user[6] }}', '{{ user[7] }}', {{ user[8] }})">✏️ Edit</button>
                    <button class="btn-password" onclick="changePassword({{ user[0] }})">🔐 Password</button>
                    <a href="/delete-user/{{ user[0] }}" class="btn-delete" onclick="return confirm('Delete this user?')">🗑️ Delete</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Add User Modal with Auto-Generate -->
<div id="addModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>➕ Add New User</h3>
            <span class="close" onclick="closeAddModal()">&times;</span>
        </div>
        <form method="post" action="/add-user" id="addUserForm">
            <!-- Full Name - First field -->
            <div class="form-group">
                <label>Full Name *</label>
                <input type="text" name="full_name" id="fullName" required onkeyup="autoGenerate()" placeholder="e.g., Talha Arif">
            </div>
            
            <!-- Username - Auto-generated (readonly) -->
            <div class="form-group">
                <label>Username *</label>
                <input type="text" name="username" id="username" required readonly style="background:#f5f5f5;">
                <div class="auto-generated">✨ Auto-generated from full name</div>
            </div>
            
            <!-- Password - Auto-generated (readonly) -->
            <div class="form-group">
                <label>Password *</label>
                <input type="password" name="password" id="password" required readonly style="background:#f5f5f5;">
                <div class="auto-generated">✨ Auto-generated: username + "123"</div>
            </div>
            
            <!-- Email - Auto-generated (readonly) -->
            <div class="form-group">
                <label>Email</label>
                <input type="email" name="email" id="email" readonly style="background:#f5f5f5;">
                <div class="auto-generated">✨ Auto-generated: username@auratoolkit360.com</div>
            </div>
            
            <!-- Employee ID - Auto-generated -->
            <div class="form-group">
                <label>Employee ID (for employee role)</label>
                <input type="number" name="employee_id" id="employeeId" value="{{ next_employee_id }}" readonly style="background:#f5f5f5;">
                <div class="auto-generated">✨ Auto-assigned next available ID</div>
            </div>
            
            <!-- Role - User selects -->
            <div class="form-group">
                <label>Role</label>
                <select name="role" id="roleSelect">
                    <option value="admin">👑 Admin (Full Access)</option>
                    <option value="hr_manager">👥 HR Manager (HR + Approvals)</option>
                    <option value="accountant">💰 Accountant (Payroll Only)</option>
                    <option value="management">📊 Management (Approvals + View)</option>
                    <option value="employee">👤 Employee (Self Service)</option>
                </select>
            </div>
            
            <!-- Department -->
            <div class="form-group">
                <label>Department</label>
                <div class="dept-search-container">
                    <input type="text" name="department" id="departmentInput" placeholder="Type to search department..." autocomplete="off" onkeyup="searchDepartments()">
                    <div id="deptSuggestions" class="dept-suggestions"></div>
                </div>
            </div>
            
            <button type="submit" class="btn-submit">✅ Add User</button>
        </form>
    </div>
</div>

<!-- Edit User Modal -->
<div id="editModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>✏️ Edit User</h3>
            <span class="close" onclick="closeEditModal()">&times;</span>
        </div>
        <form method="post" id="editForm">
            <div class="form-group">
                <label>Full Name</label>
                <input type="text" name="full_name" id="editFullName" required>
            </div>
            <div class="form-group">
                <label>Email</label>
                <input type="email" name="email" id="editEmail">
            </div>
            <div class="form-group">
                <label>Role</label>
                <select name="role" id="editRole">
                    <option value="admin">👑 Admin (Full Access)</option>
                    <option value="hr_manager">👥 HR Manager (HR + Approvals)</option>
                    <option value="accountant">💰 Accountant (Payroll Only)</option>
                    <option value="management">📊 Management (Approvals + View)</option>
                    <option value="employee">👤 Employee (Self Service)</option>
                </select>
            </div>
            <div class="form-group">
                <label>Department</label>
                <div class="dept-search-container">
                    <input type="text" name="department" id="editDepartment" placeholder="Type to search department..." autocomplete="off" onkeyup="searchEditDepartments()">
                    <div id="editDeptSuggestions" class="dept-suggestions"></div>
                </div>
            </div>
            <div class="form-group">
                <label>Status</label>
                <select name="is_active" id="editStatus">
                    <option value="1">✅ Active</option>
                    <option value="0">❌ Inactive</option>
                </select>
            </div>
            <button type="submit" class="btn-submit">💾 Save Changes</button>
        </form>
    </div>
</div>

<!-- Change Password Modal -->
<div id="passwordModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>🔐 Change Password</h3>
            <span class="close" onclick="closePasswordModal()">&times;</span>
        </div>
        <form method="post" id="passwordForm">
            <div class="form-group">
                <label>New Password *</label>
                <input type="password" name="new_password" required>
            </div>
            <div class="form-group">
                <label>Confirm Password *</label>
                <input type="password" name="confirm_password" required>
            </div>
            <button type="submit" class="btn-submit">✅ Change Password</button>
        </form>
    </div>
</div>

<script>
    // Auto-generate username, password, email from full name
    function autoGenerate() {
        const fullName = document.getElementById('fullName').value;
        if (fullName) {
            // Generate username: remove spaces, lowercase
            let username = fullName.toLowerCase().replace(/\s+/g, '');
            document.getElementById('username').value = username;
            
            // Generate password: username + "123"
            document.getElementById('password').value = username + '123';
            
            // Generate email: username@webbuggs.com
            document.getElementById('email').value = username + '@auratoolkit360.com';
        } else {
            document.getElementById('username').value = '';
            document.getElementById('password').value = '';
            document.getElementById('email').value = '';
        }
    }
    
    // Department suggestions
    const departmentList = [
        'Webbuggs', 'Simpli Plugin', 'BuggByte Studios',
        'Admin', 'HR', 'Finance', 'IT', 'Management',
        'Web Team', 'App Team', 'BD Team', 'Game Team', 'Design Team',
        'Marketing', 'Sales', 'Customer Support', 'Operations'
    ];
    
    function searchDepartments() {
        const input = document.getElementById('departmentInput');
        const searchTerm = input.value.toLowerCase();
        const suggestionsDiv = document.getElementById('deptSuggestions');
        
        if (searchTerm.length === 0) {
            suggestionsDiv.style.display = 'none';
            return;
        }
        
        const filtered = departmentList.filter(dept => 
            dept.toLowerCase().includes(searchTerm)
        );
        
        if (filtered.length > 0) {
            suggestionsDiv.style.display = 'block';
            suggestionsDiv.innerHTML = filtered.map(dept => `
                <div class="dept-suggestion-item" onclick="selectDepartment('${dept}')">
                    🏢 ${dept}
                </div>
            `).join('');
        } else {
            suggestionsDiv.style.display = 'none';
        }
    }
    
    function searchEditDepartments() {
        const input = document.getElementById('editDepartment');
        const searchTerm = input.value.toLowerCase();
        const suggestionsDiv = document.getElementById('editDeptSuggestions');
        
        if (searchTerm.length === 0) {
            suggestionsDiv.style.display = 'none';
            return;
        }
        
        const filtered = departmentList.filter(dept => 
            dept.toLowerCase().includes(searchTerm)
        );
        
        if (filtered.length > 0) {
            suggestionsDiv.style.display = 'block';
            suggestionsDiv.innerHTML = filtered.map(dept => `
                <div class="dept-suggestion-item" onclick="selectEditDepartment('${dept}')">
                    🏢 ${dept}
                </div>
            `).join('');
        } else {
            suggestionsDiv.style.display = 'none';
        }
    }
    
    function selectDepartment(dept) {
        document.getElementById('departmentInput').value = dept;
        document.getElementById('deptSuggestions').style.display = 'none';
    }
    
    function selectEditDepartment(dept) {
        document.getElementById('editDepartment').value = dept;
        document.getElementById('editDeptSuggestions').style.display = 'none';
    }
    
    function openAddModal() {
        document.getElementById('addModal').style.display = 'block';
        document.getElementById('fullName').value = '';
        document.getElementById('username').value = '';
        document.getElementById('password').value = '';
        document.getElementById('email').value = '';
        document.getElementById('departmentInput').value = '';
        document.getElementById('deptSuggestions').style.display = 'none';
    }
    function closeAddModal() {
        document.getElementById('addModal').style.display = 'none';
    }
    
    function editUser(id, fullName, email, role, department, isActive) {
        document.getElementById('editForm').action = '/edit-user/' + id;
        document.getElementById('editFullName').value = fullName;
        document.getElementById('editEmail').value = email;
        document.getElementById('editRole').value = role;
        document.getElementById('editDepartment').value = department;
        document.getElementById('editStatus').value = isActive;
        document.getElementById('editDeptSuggestions').style.display = 'none';
        document.getElementById('editModal').style.display = 'block';
    }
    function closeEditModal() {
        document.getElementById('editModal').style.display = 'none';
    }
    
    function changePassword(id) {
        document.getElementById('passwordForm').action = '/change-user-password/' + id;
        document.getElementById('passwordModal').style.display = 'block';
    }
    function closePasswordModal() {
        document.getElementById('passwordModal').style.display = 'none';
    }
    
    // Close suggestions when clicking outside
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.dept-search-container')) {
            document.getElementById('deptSuggestions').style.display = 'none';
            document.getElementById('editDeptSuggestions').style.display = 'none';
        }
    });
    
    window.onclick = function(e) {
        if (e.target == document.getElementById('addModal')) closeAddModal();
        if (e.target == document.getElementById('editModal')) closeEditModal();
        if (e.target == document.getElementById('passwordModal')) closePasswordModal();
    }
</script>
{% endblock %}