{% extends 'base.html.twig' %}
{% block title %}User Management{% endblock %}

{% block body %}
  {% set createPanelOpen = form.vars.submitted and not form.vars.valid %}
  <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
    <h1 class="h4 mb-0">User management</h1>
    <button class="btn btn-accent" type="button" data-bs-toggle="collapse" data-bs-target="#create-user-panel" aria-expanded="{{ createPanelOpen ? 'true' : 'false' }}" aria-controls="create-user-panel">
      Create user
    </button>
  </div>
  <div class="row g-4">
    <div class="col-12">
      <div class="collapse {{ createPanelOpen ? 'show' : '' }}" id="create-user-panel">
        <div class="card h-100">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
              <h2 class="h6 mb-0">Create user</h2>
              <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#create-user-panel" aria-controls="create-user-panel">
                Close
              </button>
            </div>
            {{ form_start(form, {attr: {novalidate: 'novalidate'}}) }}
              <div class="mb-3">
                {{ form_label(form.email, null, {label_attr: {class: 'form-label'}}) }}
                {{ form_widget(form.email, {attr: {class: 'form-control'}}) }}
                {{ form_errors(form.email) }}
              </div>
              <div class="mb-3">
                {{ form_label(form.displayName, null, {label_attr: {class: 'form-label'}}) }}
                {{ form_widget(form.displayName, {attr: {class: 'form-control'}}) }}
                {{ form_errors(form.displayName) }}
              </div>
              <div class="mb-3">
                {{ form_label(form.plainPassword.first, null, {label_attr: {class: 'form-label'}}) }}
                {{ form_widget(form.plainPassword.first, {attr: {class: 'form-control'}}) }}
                {{ form_errors(form.plainPassword.first) }}
              </div>
              <div class="mb-3">
                {{ form_label(form.plainPassword.second, null, {label_attr: {class: 'form-label'}}) }}
                {{ form_widget(form.plainPassword.second, {attr: {class: 'form-control'}}) }}
                {{ form_errors(form.plainPassword.second) }}
              </div>
              {{ form_errors(form.plainPassword) }}
              <button class="btn btn-success w-100" type="submit">Create account</button>
            {{ form_end(form) }}
          </div>
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="card">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <h2 class="h6 mb-0">Accounts</h2>
            <span class="text-secondary small">{{ rows|length }} total</span>
          </div>
          <div class="mui-table-wrapper">
            <table class="mui-table">
              <thead>
                <tr>
                  <th scope="col">Name</th>
                  <th scope="col">Email</th>
                  <th scope="col">Roles</th>
                  <th scope="col" class="text-center">Albums</th>
                  <th scope="col" class="text-center">Reviews</th>
                  <th scope="col" class="text-end">Actions</th>
                </tr>
              </thead>
              <tbody>
                {% for row in rows %}
                  {% set user = row.user %}
                  {% set isSelf = app.user and app.user.id == user.id %}
                  {% set isAdminUser = 'ROLE_ADMIN' in user.roles %}
                  {% set canDelete = (not isSelf) and (not isAdminUser) %}
                  {% set isModerator = 'ROLE_MODERATOR' in user.roles %}
                  {% set canPromote = is_granted('ROLE_ADMIN') and not isAdminUser %}
                  {% set promoteReason = '' %}
                  {% if not canPromote %}
                    {% if not is_granted('ROLE_ADMIN') %}
                      {% set promoteReason = 'Only administrators can update roles.' %}
                    {% else %}
                      {% set promoteReason = isModerator ? 'Demote not available.' : 'Promotion not available.' %}
                    {% endif %}
                  {% endif %}
                  {% set deleteReason = '' %}
                  {% if not canDelete %}
                    {% if isSelf %}
                      {% set deleteReason = 'You cannot delete your own account.' %}
                    {% elseif isAdminUser %}
                      {% set deleteReason = 'Administrators cannot be deleted.' %}
                    {% else %}
                      {% set deleteReason = 'Delete not available.' %}
                    {% endif %}
                  {% endif %}
                  <tr>
                    <td>
                      <div class="mui-table__title-avatar">
                        {% set avatar = user.profileImagePath %}
                        {% if avatar %}
                          <img src="{{ avatar }}" alt="Avatar for {{ user.displayName ?? user.email }}">
                        {% else %}
                          <div class="rounded-3 bg-secondary-subtle text-secondary fw-semibold d-flex align-items-center justify-content-center" style="width:40px;height:40px;">
                            {{ (user.displayName ?? user.email)|slice(0,1)|upper }}
                          </div>
                        {% endif %}
                        <div>
                          <div class="mui-table__title">{{ user.displayName ?? '—' }}</div>
                          <div class="mui-table__subtitle d-md-none">{{ user.email }}</div>
                        </div>
                      </div>
                    </td>
                    <td class="align-middle d-none d-md-table-cell">{{ user.email }}</td>
                    <td class="align-middle">
                      {% for role in user.roles %}
                        {% if role == 'ROLE_ADMIN' %}
                          <span class="badge text-bg-danger">Admin</span>
                        {% elseif role == 'ROLE_MODERATOR' %}
                          <span class="badge text-bg-primary">Moderator</span>
                        {% elseif role == 'ROLE_USER' %}
                          <span class="badge text-bg-secondary">User</span>
                        {% endif %}
                      {% endfor %}
                    </td>
                    <td class="mui-table__metric">{{ row.albumCount }}</td>
                    <td class="mui-table__metric">{{ row.reviewCount }}</td>
                    <td class="text-end">
                      <div class="d-flex gap-2 justify-content-end">
                        <form method="post" action="{{ path('admin_users_promote', {id: user.id}) }}" onsubmit="return confirm('{% if isModerator %}Remove moderator access from {{ user.email }}?{% else %}Promote {{ user.email }} to moderator?{% endif %}');">
                          <input type="hidden" name="_token" value="{{ csrf_token('promote-user-' ~ user.id) }}">
                          <span class="d-inline-block" {% if not canPromote %}data-bs-toggle="tooltip" data-bs-placement="top" title="{{ promoteReason }}" tabindex="0"{% endif %}>
                            <button class="btn btn-sm btn-outline-primary" type="submit" {% if not canPromote %}disabled aria-disabled="true"{% endif %}>
                              {% if isModerator %}Demote{% else %}Promote{% endif %}
                            </button>
                          </span>
                        </form>
                        <form method="post" action="{{ path('admin_users_delete', {id: user.id}) }}" onsubmit="return confirm('Delete {{ user.email }}? This cannot be undone.');">
                          <input type="hidden" name="_token" value="{{ csrf_token('delete-user-' ~ user.id) }}">
                          <span class="d-inline-block" {% if not canDelete %}data-bs-toggle="tooltip" data-bs-placement="top" title="{{ deleteReason }}" tabindex="0"{% endif %}>
                            <button class="btn btn-sm btn-outline-danger" type="submit" {% if not canDelete %}disabled aria-disabled="true"{% endif %}>Delete</button>
                          </span>
                        </form>
                      </div>
                    </td>
                  </tr>
                {% else %}
                  <tr>
                    <td colspan="6" class="text-center text-secondary py-4">No users found.</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const tooltips = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
      tooltips.forEach(function (el) {
        if (!el.getAttribute('data-bs-original-title')) {
          bootstrap.Tooltip.getOrCreateInstance(el);
        }
      });
    });
  </script>
{% endblock %}