{% extends "base.html" %}

{% block title %}User Management - Enterprise VPN Hub{% endblock %}

{% block content %}
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
    <div>
        <h1 style="font-size: 1.6rem; font-weight: 700;">VPN User Management</h1>
        <p style="color: var(--text-muted); font-size: 0.9rem;">Create, edit, delete users and set permitted VPN protocols per user</p>
    </div>
    <button onclick="document.getElementById('create-modal').style.display='block'" class="btn btn-primary">
        ➕ Create New User
    </button>
</div>

<!-- Users List Card -->
<div class="card">
    <div class="card-header">
        <h2 class="card-title">Configured Users ({{ users|length }})</h2>
    </div>

    {% if users %}
    <div style="overflow-x: auto;">
        <table>
            <thead>
                <tr>
                    <th>Username</th>
                    <th>Status</th>
                    <th>Allowed Protocols</th>
                    <th>Assigned IPs</th>
                    <th>Created</th>
                    <th>Last Login</th>
                    <th style="text-align: right;">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for u in users %}
                <tr>
                    <td><strong>{{ u['username'] }}</strong></td>
                    <td>
                        {% if u['is_active'] == 1 %}
                            <span class="badge badge-success">Active</span>
                        {% else %}
                            <span class="badge badge-danger">Disabled</span>
                        {% endif %}
                    </td>
                    <td>
                        <div style="display: flex; gap: 0.35rem;">
                            {% if u['allowed_wireguard'] == 1 %}
                                <span class="badge badge-primary">WireGuard</span>
                            {% endif %}
                            {% if u['allowed_openvpn'] == 1 %}
                                <span class="badge badge-info">OpenVPN</span>
                            {% endif %}
                            {% if u['allowed_wireguard'] != 1 and u['allowed_openvpn'] != 1 %}
                                <span class="badge badge-warning">None</span>
                            {% endif %}
                        </div>
                    </td>
                    <td>
                        <div style="font-size: 0.8rem;">
                            {% if u['wg_ip'] %}<div>WG: <code>{{ u['wg_ip'] }}</code></div>{% endif %}
                            {% if u['ovpn_ip'] %}<div>OVPN: <code>{{ u['ovpn_ip'] }}</code></div>{% endif %}
                        </div>
                    </td>
                    <td style="color: var(--text-muted); font-size: 0.8rem;">{{ u['created_at'][:16] if u['created_at'] else '-' }}</td>
                    <td style="color: var(--text-muted); font-size: 0.8rem;">{{ u['last_login'][:16] if u['last_login'] else 'Never' }}</td>
                    <td style="text-align: right;">
                        <button onclick="openEditModal({{ u['id'] }}, '{{ u['username'] }}', {{ u['allowed_wireguard'] }}, {{ u['allowed_openvpn'] }}, {{ u['is_active'] }})" class="btn btn-secondary btn-sm">
                            Edit
                        </button>
                        <form method="POST" action="/admin/users/delete/{{ u['id'] }}" style="display: inline-block;" onsubmit="return confirm('Are you sure you want to delete user \'{{ u['username'] }}\'?');">
                            <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div style="text-align: center; padding: 2rem; color: var(--text-muted);">
        No individual VPN users created yet. Click "Create New User" above to add one.
    </div>
    {% endif %}
</div>

<!-- Modal: Create User -->
<div id="create-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 200; overflow-y: auto;">
    <div style="max-width: 480px; margin: 5% auto; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; padding: 1.5rem; position: relative;">
        <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--card-border); padding-bottom: 0.75rem; margin-bottom: 1rem;">
            <h3 style="color: #fff;">Create New VPN User</h3>
            <button onclick="document.getElementById('create-modal').style.display='none'" style="background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer;">&times;</button>
        </div>

        <form method="POST" action="/admin/users/create">
            <div class="form-group">
                <label for="c_username">Username</label>
                <input type="text" id="c_username" name="username" required placeholder="e.g. john.doe">
            </div>

            <div class="form-group">
                <label for="c_password">Password</label>
                <input type="password" id="c_password" name="password" required placeholder="Initial password">
            </div>

            <div class="form-group">
                <label>Permitted Protocols</label>
                <div style="background: rgba(0,0,0,0.25); border-radius: 6px; padding: 0.85rem; display: flex; flex-direction: column; gap: 0.6rem;">
                    <label class="checkbox-group" style="margin: 0; cursor: pointer;">
                        <input type="checkbox" name="allowed_wireguard" value="1" checked>
                        <span>Allow <strong>WireGuard</strong> access (Fast, modern)</span>
                    </label>
                    <label class="checkbox-group" style="margin: 0; cursor: pointer;">
                        <input type="checkbox" name="allowed_openvpn" value="1" checked>
                        <span>Allow <strong>OpenVPN</strong> access (Standard, enterprise)</span>
                    </label>
                </div>
                <small style="color: var(--text-muted); display: block; margin-top: 0.4rem;">
                    The user will only be allowed to download configs and connect using checked protocols.
                </small>
            </div>

            <div style="display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem;">
                <button type="button" onclick="document.getElementById('create-modal').style.display='none'" class="btn btn-secondary">Cancel</button>
                <button type="submit" class="btn btn-primary">Create User</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal: Edit User -->
<div id="edit-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 200; overflow-y: auto;">
    <div style="max-width: 480px; margin: 5% auto; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; padding: 1.5rem; position: relative;">
        <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--card-border); padding-bottom: 0.75rem; margin-bottom: 1rem;">
            <h3 style="color: #fff;">Edit User: <span id="e_username_title"></span></h3>
            <button onclick="document.getElementById('edit-modal').style.display='none'" style="background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer;">&times;</button>
        </div>

        <form id="edit-form" method="POST" action="">
            <div class="form-group">
                <label for="e_new_password">Reset Password (leave empty to keep current)</label>
                <input type="password" id="e_new_password" name="new_password" placeholder="New password">
            </div>

            <div class="form-group">
                <label>Permitted Protocols</label>
                <div style="background: rgba(0,0,0,0.25); border-radius: 6px; padding: 0.85rem; display: flex; flex-direction: column; gap: 0.6rem;">
                    <label class="checkbox-group" style="margin: 0; cursor: pointer;">
                        <input type="checkbox" id="e_allowed_wg" name="allowed_wireguard" value="1">
                        <span>Allow <strong>WireGuard</strong> access</span>
                    </label>
                    <label class="checkbox-group" style="margin: 0; cursor: pointer;">
                        <input type="checkbox" id="e_allowed_ovpn" name="allowed_openvpn" value="1">
                        <span>Allow <strong>OpenVPN</strong> access</span>
                    </label>
                </div>
            </div>

            <div class="form-group">
                <label class="checkbox-group" style="cursor: pointer;">
                    <input type="checkbox" id="e_is_active" name="is_active" value="1">
                    <span>Account Active (Uncheck to suspend access)</span>
                </label>
            </div>

            <div style="display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem;">
                <button type="button" onclick="document.getElementById('edit-modal').style.display='none'" class="btn btn-secondary">Cancel</button>
                <button type="submit" class="btn btn-primary">Save Changes</button>
            </div>
        </form>
    </div>
</div>

<script>
function openEditModal(userId, username, allowedWg, allowedOvpn, isActive) {
    document.getElementById('e_username_title').textContent = username;
    document.getElementById('edit-form').action = '/admin/users/edit/' + userId;
    document.getElementById('e_allowed_wg').checked = (allowedWg === 1);
    document.getElementById('e_allowed_ovpn').checked = (allowedOvpn === 1);
    document.getElementById('e_is_active').checked = (isActive === 1);
    document.getElementById('e_new_password').value = '';
    document.getElementById('edit-modal').style.display = 'block';
}
</script>
{% endblock %}