{% extends "base.html" %}

{% block content %}
<div style="padding: 30px;">
    <h1>👥 User Management</h1>
    
    <div style="background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 30px;">
        <h2 style="margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #eee;">Add/Edit User</h2>
        
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
            <div>
                <label style="display: block; margin-bottom: 5px; font-weight: bold;">Username:</label>
                <input type="text" id="username" 
                       style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
            </div>
            
            <div>
                <label style="display: block; margin-bottom: 5px; font-weight: bold;">Role:</label>
                <select id="role" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                    <option value="Administrator">Administrator</option>
                    <option value="Doctor">Doctor</option>
                    <option value="Receptionist">Receptionist</option>
                    <option value="Pharmacist">Pharmacist</option>
                </select>
            </div>
            
            <div style="grid-column: span 2;">
                <label style="display: block; margin-bottom: 5px; font-weight: bold;">Password (leave blank to keep current):</label>
                <input type="password" id="password" 
                       style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
            </div>
        </div>
        
        <div style="display: flex; gap: 10px; margin-top: 20px;">
            <button onclick="addUser()" class="btn btn-success" style="flex: 1; padding: 12px; font-size: 16px;">➕ Add User</button>
            <button onclick="updateUser()" class="btn btn-accent" style="flex: 1; padding: 12px; font-size: 16px;">🔄 Update User</button>
            <button onclick="deleteUser()" class="btn btn-danger" style="flex: 1; padding: 12px; font-size: 16px;">🗑️ Delete User</button>
            <button onclick="clearForm()" class="btn btn-warning" style="flex: 1; padding: 12px; font-size: 16px;">🧹 Clear</button>
        </div>
    </div>
    
    <div style="background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
        <h2 style="margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #eee;">Users List</h2>
        
        <div style="display: flex; justify-content: flex-end; margin-bottom: 20px;">
            <button onclick="loadUsers()" class="btn btn-accent" style="padding: 8px 20px;">🔄 Refresh</button>
        </div>
        
        {% if users %}
            <div style="overflow-x: auto;">
                <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
                    <thead>
                        <tr style="background: #f8f9fa; border-bottom: 2px solid #dee2e6;">
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">ID</th>
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Username</th>
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Role</th>
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Created Date</th>
                            <th style="padding: 12px; text-align: left;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for user in users %}
                        <tr style="border-bottom: 1px solid #dee2e6; cursor: pointer;" 
                            onclick="selectUser('{{ user.id }}', '{{ user.username }}', '{{ user.role }}')"
                            onmouseover="this.style.backgroundColor='#f8f9fa'" 
                            onmouseout="this.style.backgroundColor='white'">
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">{{ user.id }}</td>
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">{{ user.username }}</td>
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">
                                <span style="padding: 4px 8px; border-radius: 4px; font-size: 12px;
                                    {% if user.role == 'Administrator' %}background: #dc3545; color: white;
                                    {% elif user.role == 'Doctor' %}background: #007bff; color: white;
                                    {% elif user.role == 'Receptionist' %}background: #28a745; color: white;
                                    {% elif user.role == 'Pharmacist' %}background: #ffc107; color: black;
                                    {% endif %}">
                                    {{ user.role }}
                                </span>
                            </td>
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">{{ user.created_date.split(' ')[0] if user.created_date else 'N/A' }}</td>
                            <td style="padding: 12px;">
                                <button onclick="event.stopPropagation(); deleteUser('{{ user.id }}')" class="btn btn-sm btn-danger" style="padding: 5px 10px; font-size: 12px;">🗑️ Delete</button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <p style="text-align: center; padding: 40px; color: #666;">No users found.</p>
        {% endif %}
    </div>
</div>

<script>
let selectedUserId = null;

function selectUser(userId, username, role) {
    selectedUserId = userId;
    document.getElementById('username').value = username;
    document.getElementById('role').value = role;
    document.getElementById('password').value = '';
}

function addUser() {
    const username = document.getElementById('username').value.trim();
    const password = document.getElementById('password').value.trim();
    const role = document.getElementById('role').value;
    
    if (!username || !password || !role) {
        alert('Please fill all fields');
        return;
    }
    
    fetch('/admin/users/add', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&role=${encodeURIComponent(role)}`
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            alert(data.error);
        } else {
            alert('User added successfully!');
            clearForm();
            loadUsers();
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to add user');
    });
}

function updateUser() {
    if (!selectedUserId) {
        alert('Please select a user to update');
        return;
    }
    
    const username = document.getElementById('username').value.trim();
    const password = document.getElementById('password').value.trim();
    const role = document.getElementById('role').value;
    
    if (!username || !role) {
        alert('Please fill username and role fields');
        return;
    }
    
    fetch('/admin/users/update', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `user_id=${selectedUserId}&username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&role=${encodeURIComponent(role)}`
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            alert(data.error);
        } else {
            alert('User updated successfully!');
            clearForm();
            loadUsers();
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to update user');
    });
}

function deleteUser(userId = null) {
    const id = userId || selectedUserId;
    if (!id) {
        alert('Please select a user to delete');
        return;
    }
    
    if (!confirm('Are you sure you want to delete this user?\n\nThis action cannot be undone!')) {
        return;
    }
    
    fetch('/admin/users/delete', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `user_id=${id}`
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            alert(data.error);
        } else {
            alert('User deleted successfully!');
            clearForm();
            loadUsers();
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to delete user');
    });
}

function clearForm() {
    document.getElementById('username').value = '';
    document.getElementById('password').value = '';
    document.getElementById('role').value = 'Receptionist';
    selectedUserId = null;
}

function loadUsers() {
    window.location.reload();
}
</script>

<style>
.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
}
</style>
{% endblock %}