{% extends 'base.html.twig' %}
{% block title %}Users – Rise Mailer{% endblock %}

{% block stylesheets %}
<style>
:root{--primary:#7c3aed;--secondary:#ec4899}
.pg-wrap{max-width:1100px;margin:0 auto}
.tc{background:#fff;border-radius:1.1rem;box-shadow:0 4px 18px rgba(0,0,0,.07);overflow:hidden;margin-bottom:1.25rem}
.tc-head{padding:1rem 1.35rem;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.tc-head h3{font-size:.95rem;font-weight:700;color:#1e293b;margin:0;display:flex;align-items:center;gap:.4rem}
.trk-table{width:100%;border-collapse:collapse}
.trk-table thead tr{background:linear-gradient(135deg,#7c3aed,#ec4899)}
.trk-table thead th{padding:.65rem 1rem;font-size:.72rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.04em;border:none}
.trk-table tbody tr{border-bottom:1px solid #f1f5f9;transition:background .15s}
.trk-table tbody tr:last-child{border-bottom:none}
.trk-table tbody tr:hover{background:#fafafa}
.trk-table tbody td{padding:.75rem 1rem;font-size:.84rem;color:#334155;vertical-align:middle}
.avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--secondary));
        display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.85rem;flex-shrink:0}
.btn-primary-g{background:linear-gradient(135deg,var(--primary),var(--secondary));border:none;border-radius:.65rem;
               padding:.55rem 1.1rem;color:#fff;font-weight:600;font-size:.875rem;cursor:pointer;
               display:inline-flex;align-items:center;gap:.4rem;transition:opacity .2s}
.btn-primary-g:hover{opacity:.88;color:#fff}
.btn-icon{width:32px;height:32px;border-radius:8px;border:none;display:inline-flex;align-items:center;justify-content:center;
          cursor:pointer;font-size:.85rem;transition:all .2s}
.btn-icon-edit{background:#ede9fe;color:#7c3aed}
.btn-icon-edit:hover{background:#7c3aed;color:#fff}
.btn-icon-del{background:#fee2e2;color:#ef4444}
.btn-icon-del:hover{background:#ef4444;color:#fff}
.btn-icon-active{background:#dcfce7;color:#16a34a}
.btn-icon-active:hover{background:#16a34a;color:#fff}
.btn-icon-inactive{background:#fee2e2;color:#ef4444}
.btn-icon-inactive:hover{background:#ef4444;color:#fff}
.role-admin{background:#ede9fe;color:#7c3aed;border-radius:999px;padding:.2rem .7rem;font-size:.72rem;font-weight:700}
.role-manager{background:#e0f2fe;color:#0369a1;border-radius:999px;padding:.2rem .7rem;font-size:.72rem;font-weight:700}
.role-user{background:#f1f5f9;color:#475569;border-radius:999px;padding:.2rem .7rem;font-size:.72rem;font-weight:700}
.badge-active{background:#dcfce7;color:#15803d;border-radius:999px;padding:.15rem .55rem;font-size:.68rem;font-weight:700}
.badge-inactive{background:#fee2e2;color:#b91c1c;border-radius:999px;padding:.15rem .55rem;font-size:.68rem;font-weight:700}
.badge-verified{background:#dbeafe;color:#1d4ed8;border-radius:999px;padding:.15rem .55rem;font-size:.68rem;font-weight:700}
.badge-unverified{background:#fef3c7;color:#92400e;border-radius:999px;padding:.15rem .55rem;font-size:.68rem;font-weight:700}
.form-ctrl{border:1.5px solid #e2e8f0;border-radius:.65rem;padding:.55rem .85rem;font-size:.875rem;
           font-family:inherit;color:#1e293b;background:#fff;transition:border-color .2s;width:100%;outline:none}
.form-ctrl:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,58,237,.1)}
.fl{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1rem}
.fl label{font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em}
.role-hint{font-size:.72rem;color:#94a3b8;margin-top:.3rem}
.limit-wrap{display:flex;align-items:center;gap:.35rem}
.limit-input{width:72px;border:1.5px solid #e2e8f0;border-radius:.5rem;padding:.3rem .5rem;font-size:.8rem;
             font-family:inherit;color:#1e293b;text-align:center;outline:none}
.limit-input:focus{border-color:var(--primary)}
.btn-set-limit{background:#ede9fe;color:#7c3aed;border:none;border-radius:.5rem;padding:.3rem .55rem;
               font-size:.72rem;font-weight:600;cursor:pointer;transition:all .2s}
.btn-set-limit:hover{background:#7c3aed;color:#fff}
.today-count{font-weight:600;color:#1e293b}
</style>
{% endblock %}

{% block body %}
<div class="pg-wrap">

<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;flex-wrap:wrap;gap:.5rem">
    <h1 style="font-size:1.5rem;font-weight:700;color:#fff;margin:0;display:flex;align-items:center;gap:.5rem">
        <i class="bi bi-people-fill"></i> User Management
    </h1>
    <button class="btn-primary-g" onclick="openNewModal()">
        <i class="bi bi-person-plus"></i> Add User
    </button>
</div>

<div class="tc animate-fade-in">
    <div class="tc-head">
        <h3><i class="bi bi-shield-lock-fill"></i> Team Members</h3>
        <span style="font-size:.75rem;color:#94a3b8">{{ users|length }} user{{ users|length != 1 ? 's' : '' }}</span>
    </div>
    <div style="overflow-x:auto">
        <table class="trk-table" id="usersTable">
            <thead>
                <tr>
                    <th>User</th>
                    <th>Role</th>
                    <th>Status</th>
                    <th style="text-align:center">Today's Emails</th>
                    <th style="text-align:center">Daily Limit</th>
                    <th style="text-align:center">Actions</th>
                </tr>
            </thead>
            <tbody>
            {% for user in users %}
            <tr id="user-row-{{ user.id }}">
                <td>
                    <div style="display:flex;align-items:center;gap:.65rem">
                        <div class="avatar">{{ user.displayName|first|upper }}</div>
                        <div>
                            <div style="font-weight:600;color:#1e293b;font-size:.84rem">{{ user.displayName }}</div>
                            <div style="font-size:.73rem;color:#94a3b8">{{ user.email }}</div>
                        </div>
                    </div>
                </td>
                <td>
                    {% if 'ROLE_ADMIN' in user.roles %}
                        <span class="role-admin"><i class="bi bi-shield-fill me-1"></i>Admin</span>
                    {% elseif 'ROLE_MANAGER' in user.roles %}
                        <span class="role-manager"><i class="bi bi-person-badge-fill me-1"></i>Manager</span>
                    {% else %}
                        <span class="role-user"><i class="bi bi-person-fill me-1"></i>User</span>
                    {% endif %}
                </td>
                <td>
                    <div style="display:flex;flex-direction:column;gap:.25rem">
                        {% if user.isActive %}
                            <span class="badge-active" id="badge-active-{{ user.id }}"><i class="bi bi-check-circle-fill me-1"></i>Active</span>
                        {% else %}
                            <span class="badge-inactive" id="badge-active-{{ user.id }}"><i class="bi bi-x-circle-fill me-1"></i>Inactive</span>
                        {% endif %}
                        {% if user.isVerified %}
                            <span class="badge-verified" id="badge-verified-{{ user.id }}"><i class="bi bi-patch-check-fill me-1"></i>Verified</span>
                        {% else %}
                            <span class="badge-unverified" id="badge-verified-{{ user.id }}"><i class="bi bi-clock me-1"></i>Unverified</span>
                            <button class="btn-icon" id="verify-btn-{{ user.id }}" title="Mark as verified"
                                    style="background:#dbeafe;color:#1d4ed8;width:auto;padding:0 .45rem;font-size:.68rem;font-weight:700;border-radius:999px"
                                    onclick="verifyUser({{ user.id }})">
                                <i class="bi bi-patch-check"></i> Verify
                            </button>
                        {% endif %}
                    </div>
                </td>
                <td style="text-align:center">
                    <span class="today-count" id="today-count-{{ user.id }}">{{ emailsToday[user.id] ?? 0 }}</span>
                    <span style="font-size:.72rem;color:#94a3b8"> / {{ user.dailyEmailLimit }}</span>
                </td>
                <td style="text-align:center">
                    <div class="limit-wrap" style="justify-content:center">
                        <input type="number" class="limit-input" id="limit-{{ user.id }}"
                               value="{{ user.dailyEmailLimit }}" min="0" max="100000">
                        <button class="btn-set-limit" onclick="setLimit({{ user.id }})">Set</button>
                    </div>
                </td>
                <td style="text-align:center">
                    <div style="display:flex;gap:.4rem;justify-content:center">
                        <button class="btn-icon btn-icon-edit" title="Edit"
                            onclick='openEditModal({{ {id: user.id, email: user.email, name: user.name, role: (("ROLE_ADMIN" in user.roles) ? "ROLE_ADMIN" : (("ROLE_MANAGER" in user.roles) ? "ROLE_MANAGER" : "ROLE_USER"))}|json_encode|raw }})'>
                            <i class="bi bi-pencil-fill"></i>
                        </button>
                        {% if app.user.userIdentifier != user.email %}
                        <button class="btn-icon {% if user.isActive %}btn-icon-active{% else %}btn-icon-inactive{% endif %}"
                                id="toggle-btn-{{ user.id }}"
                                title="{% if user.isActive %}Deactivate{% else %}Activate{% endif %}"
                                onclick="toggleActive({{ user.id }}, {{ user.isActive ? 'true' : 'false' }})">
                            <i class="bi {% if user.isActive %}bi-toggle2-on{% else %}bi-toggle2-off{% endif %}" id="toggle-icon-{{ user.id }}"></i>
                        </button>
                        <button class="btn-icon btn-icon-del" title="Delete" onclick="deleteUser({{ user.id }})">
                            <i class="bi bi-trash-fill"></i>
                        </button>
                        {% endif %}
                    </div>
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="6" style="text-align:center;padding:2.5rem;color:#94a3b8">No users found.</td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{# ── Role Permissions Matrix ── #}
<div class="tc animate-fade-in" style="animation-delay:.1s">
    <div class="tc-head">
        <h3><i class="bi bi-table"></i> Role Permissions</h3>
    </div>
    <div style="overflow-x:auto;padding:0 1.35rem 1.35rem">
        <table class="trk-table" style="margin-top:.75rem">
            <thead>
                <tr>
                    <th>Permission</th>
                    <th style="text-align:center">Admin</th>
                    <th style="text-align:center">Manager</th>
                    <th style="text-align:center">User</th>
                </tr>
            </thead>
            <tbody>
            {% set perms = [
                ['View Dashboard', true, true, true],
                ['View Clients & Tracking', true, true, true],
                ['Add / Edit Clients', true, true, false],
                ['Import Clients', true, true, false],
                ['View Templates', true, true, true],
                ['Create / Edit Templates', true, true, false],
                ['Create Campaigns', true, true, false],
                ['Delete Campaigns', true, false, false],
                ['User Management', true, false, false],
            ] %}
            {% for row in perms %}
            <tr>
                <td style="font-weight:500">{{ row[0] }}</td>
                {% for i in 1..3 %}
                <td style="text-align:center">
                    {% if row[i] %}
                        <i class="bi bi-check-circle-fill" style="color:#10b981;font-size:1rem"></i>
                    {% else %}
                        <i class="bi bi-x-circle-fill" style="color:#e2e8f0;font-size:1rem"></i>
                    {% endif %}
                </td>
                {% endfor %}
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>

</div>{# /pg-wrap #}

{# ── User 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 btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4">
                <input type="hidden" id="userId">
                <div class="fl">
                    <label>Display Name (Optional)</label>
                    <input type="text" class="form-ctrl" id="userName" placeholder="e.g. John Doe">
                </div>
                <div class="fl">
                    <label>Email <span style="color:#ef4444">*</span></label>
                    <input type="email" class="form-ctrl" id="userEmail" required placeholder="user@example.com">
                </div>
                <div class="fl">
                    <label>Password <span id="pwdRequired" style="color:#ef4444">*</span></label>
                    <input type="password" class="form-ctrl" id="userPassword" placeholder="Leave blank to keep current">
                    <div class="role-hint" id="pwdHint">Minimum 8 characters</div>
                </div>
                <div class="fl">
                    <label>Role <span style="color:#ef4444">*</span></label>
                    <select class="form-ctrl" id="userRole">
                        <option value="ROLE_USER">User — view only</option>
                        <option value="ROLE_MANAGER">Manager — can create/edit</option>
                        <option value="ROLE_ADMIN">Admin — full access</option>
                    </select>
                </div>
                <div id="modalError" class="alert alert-danger d-none py-2 small"></div>
            </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>
{% endblock %}

{% block javascripts %}
<script>
async function getCsrfToken(tokenId) {
    const res  = await fetch(`/csrf-token/${tokenId}`, { credentials: 'same-origin' });
    const data = await res.json();
    return data.token;
}

function escHtml(str) {
    return String(str||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

function roleHtml(role) {
    if (role === 'ROLE_ADMIN')   return '<span class="role-admin"><i class="bi bi-shield-fill me-1"></i>Admin</span>';
    if (role === 'ROLE_MANAGER') return '<span class="role-manager"><i class="bi bi-person-badge-fill me-1"></i>Manager</span>';
    return '<span class="role-user"><i class="bi bi-person-fill me-1"></i>User</span>';
}

function openNewModal() {
    document.getElementById('userId').value = '';
    document.getElementById('userName').value = '';
    document.getElementById('userEmail').value = '';
    document.getElementById('userPassword').value = '';
    document.getElementById('userRole').value = 'ROLE_USER';
    document.getElementById('userModalTitle').textContent = 'Add User';
    document.getElementById('pwdRequired').style.display = '';
    document.getElementById('pwdHint').textContent = 'Minimum 8 characters';
    document.getElementById('modalError').classList.add('d-none');
    new bootstrap.Modal(document.getElementById('userModal')).show();
}

function openEditModal(user) {
    document.getElementById('userId').value = user.id;
    document.getElementById('userName').value = user.name || '';
    document.getElementById('userEmail').value = user.email || '';
    document.getElementById('userPassword').value = '';
    document.getElementById('userRole').value = user.role || 'ROLE_USER';
    document.getElementById('userModalTitle').textContent = 'Edit User';
    document.getElementById('pwdRequired').style.display = 'none';
    document.getElementById('pwdHint').textContent = 'Leave blank to keep current password';
    document.getElementById('modalError').classList.add('d-none');
    new bootstrap.Modal(document.getElementById('userModal')).show();
}

async function saveUser() {
    const id       = document.getElementById('userId').value;
    const name     = document.getElementById('userName').value.trim();
    const email    = document.getElementById('userEmail').value.trim();
    const password = document.getElementById('userPassword').value;
    const role     = document.getElementById('userRole').value;
    const errEl    = document.getElementById('modalError');
    errEl.classList.add('d-none');

    const url     = id ? `/users/${id}/edit` : '/users/new';
    const tokenId = id ? `user_edit_${id}` : 'user_new';

    try {
        const token = await getCsrfToken(tokenId);
        const res   = await fetch(url, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            credentials: 'same-origin',
            body: JSON.stringify({ name, email, password, role, _token: token })
        });
        const data = await res.json();
        if (data.success) {
            bootstrap.Modal.getInstance(document.getElementById('userModal'))?.hide();
            location.reload();
        } else {
            errEl.textContent = data.error || 'Error saving user';
            errEl.classList.remove('d-none');
        }
    } catch (e) {
        errEl.textContent = 'Network error, please try again.';
        errEl.classList.remove('d-none');
    }
}

async function toggleActive(id, currentlyActive) {
    try {
        const token = await getCsrfToken(`user_toggle_${id}`);
        const res   = await fetch(`/users/${id}/toggle-active`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            credentials: 'same-origin',
            body: JSON.stringify({ _token: token })
        });
        const data = await res.json();
        if (data.success) {
            const btn   = document.getElementById(`toggle-btn-${id}`);
            const icon  = document.getElementById(`toggle-icon-${id}`);
            const badge = document.getElementById(`badge-active-${id}`);
            if (data.isActive) {
                btn.className   = 'btn-icon btn-icon-active';
                btn.title       = 'Deactivate';
                icon.className  = 'bi bi-toggle2-on';
                badge.className = 'badge-active';
                badge.innerHTML = '<i class="bi bi-check-circle-fill me-1"></i>Active';
            } else {
                btn.className   = 'btn-icon btn-icon-inactive';
                btn.title       = 'Activate';
                icon.className  = 'bi bi-toggle2-off';
                badge.className = 'badge-inactive';
                badge.innerHTML = '<i class="bi bi-x-circle-fill me-1"></i>Inactive';
            }
        } else {
            alert(data.error || 'Error toggling account status');
        }
    } catch (e) {
        alert('Network error, please try again.');
    }
}

async function setLimit(id) {
    const input = document.getElementById(`limit-${id}`);
    const limit = parseInt(input.value, 10);
    if (isNaN(limit) || limit < 0) { alert('Please enter a valid limit (0 or more).'); return; }
    try {
        const token = await getCsrfToken(`user_limit_${id}`);
        const res   = await fetch(`/users/${id}/set-limit`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            credentials: 'same-origin',
            body: JSON.stringify({ limit, _token: token })
        });
        const data = await res.json();
        if (!data.success) {
            alert(data.error || 'Error saving limit');
        }
    } catch (e) {
        alert('Network error, please try again.');
    }
}

async function verifyUser(id) {
    if (!confirm('Mark this user as verified? They will be able to log in.')) return;
    try {
        const token = await getCsrfToken(`user_verify_${id}`);
        const res   = await fetch(`/users/${id}/verify`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            credentials: 'same-origin',
            body: JSON.stringify({ _token: token })
        });
        const data = await res.json();
        if (data.success) {
            const badge = document.getElementById(`badge-verified-${id}`);
            const btn   = document.getElementById(`verify-btn-${id}`);
            if (badge) { badge.className = 'badge-verified'; badge.innerHTML = '<i class="bi bi-patch-check-fill me-1"></i>Verified'; }
            if (btn) btn.remove();
        } else {
            alert(data.error || 'Error verifying user');
        }
    } catch (e) {
        alert('Network error, please try again.');
    }
}

async function deleteUser(id) {
    if (!confirm('Delete this user? This cannot be undone.')) return;
    try {
        const token = await getCsrfToken(`user_delete_${id}`);
        const res   = await fetch(`/users/${id}/delete`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            credentials: 'same-origin',
            body: JSON.stringify({ _token: token })
        });
        const data = await res.json();
        if (data.success) {
            document.getElementById(`user-row-${id}`)?.remove();
        } else {
            alert(data.error || 'Error deleting user');
        }
    } catch (e) {
        alert('Network error, please try again.');
    }
}
</script>
{% endblock %}