{% extends 'layout/base.html' %}
{% block content %}

<style>
  .temp-user-card {
    background: #fdfdfd;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    transition: box-shadow 0.3s ease;
  }

  .temp-user-card:hover {
    box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  }

  .user-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 15px;
  }

  .user-actions .btn {
    border-radius: 30px;
    font-size: 14px;
    padding: 6px 14px;
    transition: all 0.2s ease-in-out;
  }

  .user-actions .btn:hover {
    transform: translateY(-1px);
  }

  .role-badge {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 13px;
    margin-left: 8px;
    color: #fff;
  }

  .role-operator { background-color: #0d6efd; }
  .role-accounts { background-color: #fd7e14; }
  .role-ca { background-color: #20c997; }

  .accordion-button {
    font-weight: 600;
    border-radius: 8px !important;
  }

  .accordion-item {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.04);
  }

  .accordion-body ul {
    padding-left: 0;
  }

  .accordion-body .list-group-item {
    border: none;
    border-bottom: 1px solid #eee;
    padding: 10px 12px;
  }

  .form-check-input:checked {
    background-color: #198754;
    border-color: #198754;
  }

  .modal-header, .modal-footer {
    border: none;
  }

  .modal-content {
    border-radius: 16px;
    overflow: hidden;
  }

  .modal-title {
    font-weight: bold;
  }

  .form-label {
    font-weight: 500;
  }

  .list-group-item:last-child {
    border-bottom: none;
  }
</style>

<div class="container mt-5">
  <h2 class="mb-4">👥 Manage Temporary Users</h2>

  {% set temp_roles = ['operator', 'accounts'] %}
  {% set temp_users = users|selectattr("role", "in", temp_roles)|list %}

  {% for user in temp_users %}
    <div class="temp-user-card">
      <h5>{{ user.name }}
  {% set role_class = 'role-' + user.role %}
  <span class="role-badge {{ role_class }}">
    {% if user.role == 'accounts' %}Auditor{% else %}{{ user.role|capitalize }}{% endif %}
  </span>
  
  {% if user.is_active %}
    <span class="badge bg-success ms-2">✅ Active</span>
  {% else %}
    <span class="badge bg-danger ms-2">❌ Inactive</span>
  {% endif %}
</h5>
      <p><strong>Email:</strong> {{ user.email }}</p>

      <div class="user-actions">
        <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editAccessModal{{ user.id }}">✏️ Edit Access</button>
        {% if current_user.role == 'admin' %}
          <button class="btn btn-sm btn-outline-warning" data-bs-toggle="modal" data-bs-target="#editUserModal{{ user.id }}">🛠️ Edit User</button>
        {% endif %}
        <button onclick="confirmDelete({{ user.id }})" class="btn btn-sm btn-outline-danger">🗑️ Delete</button>
      </div>

      <!-- Activity Logs Accordion -->
      <div class="accordion mt-4" id="activityAccordion{{ user.id }}">
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingActivity{{ user.id }}">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseActivity{{ user.id }}" aria-expanded="false" aria-controls="collapseActivity{{ user.id }}">
              📊 View Activity Logs
            </button>
          </h2>
          <div id="collapseActivity{{ user.id }}" class="accordion-collapse collapse" aria-labelledby="headingActivity{{ user.id }}" data-bs-parent="#activityAccordion{{ user.id }}">
            <div class="accordion-body">
              {% if activities_by_user.get(user.id) %}
                <ul class="list-group">
                  {% for activity in activities_by_user[user.id][:20] %}
                    <li class="list-group-item">
                      <strong>{{ activity.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</strong><br>
                      {{ activity.path }} ({{ activity.method }})<br>
                      <small class="text-muted">{{ activity.ip_address }} | {{ activity.user_agent[:50] }}...</small>
                    </li>
                  {% endfor %}
                </ul>
              {% else %}
                <p class="text-muted">No activity recorded.</p>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Edit Access Modal -->
    <div class="modal fade" id="editAccessModal{{ user.id }}" tabindex="-1" aria-labelledby="editAccessModalLabel{{ user.id }}" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content border-0 shadow-lg rounded-4">
      <form action="{{ url_for('uploader.edit_temp_user', user_id=user.id) }}" method="POST">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        
        <!-- ✅ Preserve essential user fields -->
        <input type="hidden" name="name" value="{{ user.name }}">
        <input type="hidden" name="role" value="{{ user.role }}">
        <input type="hidden" name="is_active" value="{% if user.is_active %}1{% else %}0{% endif %}">
        
        <div class="modal-header bg-primary text-white rounded-top-4">
          <h5 class="modal-title" id="editAccessModalLabel{{ user.id }}">
            🔐 Edit Access for <strong>{{ user.name }}</strong>
          </h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" style="max-height: 500px; overflow-y: auto;">
          <p class="mb-3 text-muted">Select the folders this user can access (grouped by company):</p>

          {% set grouped = {} %}
          {% for access in all_access_options %}
            {% set key = access.company_name %}
            {% set _ = grouped.setdefault(key, []).append(access) %}
          {% endfor %}

          <div class="accordion" id="accessAccordion{{ user.id }}">
            {% for company_name, accesses in grouped.items() %}
              <div class="accordion-item">
                <h2 class="accordion-header" id="heading{{ loop.index }}">
                  <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ user.id }}{{ loop.index }}" aria-expanded="false" aria-controls="collapse{{ user.id }}{{ loop.index }}">
                    🏢 {{ company_name }}
                  </button>
                </h2>
                <div id="collapse{{ user.id }}{{ loop.index }}" class="accordion-collapse collapse" aria-labelledby="heading{{ loop.index }}" data-bs-parent="#accessAccordion{{ user.id }}">
                  <div class="accordion-body row">
                    {% for access in accesses %}
                      <div class="col-md-6 col-lg-4 mb-2">
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" name="access_ids"
                                 value="{{ access.id }}"
                                 {% if user.id in user_access_ids and access.id in user_access_ids[user.id] %}checked{% endif %}>
                          <label class="form-check-label">{{ access.year_label }}</label>
                        </div>
                      </div>
                    {% endfor %}
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
        </div>
        <div class="modal-footer bg-light rounded-bottom-4">
          <button type="submit" class="btn btn-success">💾 Save Changes</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        </div>
      </form>
    </div>
  </div>
</div>

    <!-- Edit User Modal -->
    {% if current_user.role == 'admin' %}
    <div class="modal fade" id="editUserModal{{ user.id }}" tabindex="-1" aria-labelledby="editUserModalLabel{{ user.id }}" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content border-0 shadow-lg rounded-4">
          <form action="{{ url_for('uploader.edit_temp_user', user_id=user.id) }}" method="POST">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div class="modal-header bg-warning text-dark rounded-top-4">
              <h5 class="modal-title" id="editUserModalLabel{{ user.id }}">
                🛠️ Edit Details for <strong>{{ user.name }}</strong>
              </h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <div class="mb-3">
                <label class="form-label">Name</label>
                <input type="text" name="name" class="form-control" value="{{ user.name }}" required>
              </div>

              <div class="mb-3">
                <label class="form-label">Email</label>
                <input type="email" class="form-control" value="{{ user.email }}" disabled>
              </div>

              <div class="mb-3">
                <label class="form-label">Role</label>
                <select name="role" class="form-select" required>
                  {% for role in ['operator', 'accounts', 'ca'] %}
                    <option value="{{ role }}" {% if user.role == role %}selected{% endif %}>
                      {% if role == 'accounts' %}Auditor{% else %}{{ role|capitalize }}{% endif %}
                    </option>
                  {% endfor %}
                </select>
              </div>

              <div class="mb-3">
                <label class="form-label">New Password <small class="text-muted">(Leave blank to keep current)</small></label>
                <input type="password" name="password" class="form-control" placeholder="New password">
              </div>

              <div class="mb-3">
                <label class="form-label">Confirm Password</label>
                <input type="password" name="confirm_password" class="form-control" placeholder="Confirm password">
              </div>

              <div class="form-check form-switch mt-3">
                <input class="form-check-input" type="checkbox" name="is_active" id="activeSwitch{{ user.id }}" {% if user.is_active %}checked{% endif %}>
                <label class="form-check-label" for="activeSwitch{{ user.id }}">
                  {{ 'Enabled' if user.is_active else 'Disabled' }}
                </label>
              </div>
            </div>
            <div class="modal-footer bg-light rounded-bottom-4">
              <button type="submit" class="btn btn-success">💾 Save Changes</button>
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    {% endif %}
  {% else %}
    <p class="text-muted">No temporary users found.</p>
  {% endfor %}
</div>
<input type="hidden" id="csrf_token" value="{{ csrf_token() }}">
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
function confirmDelete(userId) {
  Swal.fire({
    title: 'Are you sure?',
    text: "This user and their access will be permanently deleted.",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#d33',
    cancelButtonColor: '#3085d6',
    confirmButtonText: 'Yes, delete!'
  }).then((result) => {
    if (result.isConfirmed) {
      const form = document.createElement('form');
      form.method = 'POST';
      form.action = `/uploader/delete-temp-user/${userId}`;

      // Add CSRF token input
      const csrfToken = document.getElementById('csrf_token').value;
      const csrfInput = document.createElement('input');
      csrfInput.type = 'hidden';
      csrfInput.name = 'csrf_token';
      csrfInput.value = csrfToken;
      form.appendChild(csrfInput);

      document.body.appendChild(form);
      form.submit();
    }
  });
}
</script>

<script>
document.addEventListener("DOMContentLoaded", function () {
  // ✅ Password & name/email validation for edit user modals
  document.querySelectorAll('[id^="editUserModal"]').forEach(modal => {
    const form = modal.querySelector('form');
    const roleSelect = form.querySelector('select[name="role"]');
    const userId = modal.id.replace('editUserModal', '');
    const accessModal = document.getElementById('editAccessModal' + userId);

    form.addEventListener('submit', function (e) {
      const passwordInput = form.querySelector('input[name="password"]');
      const confirmPasswordInput = form.querySelector('input[name="confirm_password"]');
      const name = form.querySelector('input[name="name"]').value.trim().toLowerCase();
      const email = form.querySelector('input[disabled]').value.trim().toLowerCase();

      const password = passwordInput.value;
      const confirmPassword = confirmPasswordInput.value;

      if (password.length > 0) {
        const strongPasswordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

        if (password !== confirmPassword) {
          e.preventDefault();
          return Swal.fire({
            icon: 'error',
            title: 'Password Mismatch',
            text: '❌ Password and Confirm Password do not match.',
            confirmButtonColor: '#d33'
          });
        }

        if (!strongPasswordRegex.test(password)) {
          e.preventDefault();
          return Swal.fire({
            icon: 'warning',
            title: 'Weak Password',
            html: `
              Your password must include:<br><br>
              <ul style="text-align:left">
                <li>✅ At least 8 characters</li>
                <li>✅ One uppercase letter</li>
                <li>✅ One lowercase letter</li>
                <li>✅ One digit</li>
                <li>✅ One special character (@$!%*?&)</li>
              </ul>
            `,
            confirmButtonColor: '#d33'
          });
        }

        if (password.toLowerCase() === name || password.toLowerCase() === email) {
          e.preventDefault();
          return Swal.fire({
            icon: 'error',
            title: 'Weak Password',
            text: '⚠️ Your password should not be the same as the user\'s name or email.',
            confirmButtonColor: '#d33'
          });
        }
      }
    });

    // ✅ Auto-check all active access checkboxes if role changes to Auditor
    if (roleSelect && accessModal) {
      roleSelect.addEventListener('change', function () {
        const yearCheckboxes = accessModal.querySelectorAll('input[name="access_ids"]');
        if (this.value === 'accounts') {
          yearCheckboxes.forEach(cb => {
            if (!cb.disabled) cb.checked = true;
          });
        }
      });
    }
  });
});
</script>
{% endblock %}