/* Settings Module JavaScript */

(function () {
  "use strict";

  var STORAGE_KEYS = {
    LOCALE: "gb-locale",
    DATE_FORMAT: "gb-date-format",
    TIME_FORMAT: "gb-time-format",
    THEME: "gb-theme",
    COMPACT_MODE: "gb-compact-mode",
    ANIMATIONS: "gb-animations",
  };

  var API_ENDPOINTS = {
    USERS_LIST: "/users/list",
    USERS_CREATE: "/users/create",
    USERS_UPDATE: "/users/:user_id/update",
    USERS_DELETE: "/users/:user_id/delete",
    USERS_PROFILE: "/users/:user_id/profile",
    USERS_ASSIGN_ORG: "/users/:user_id/organization",
    USERS_MEMBERSHIPS: "/users/:user_id/memberships",
    GROUPS_LIST: "/groups/list",
    GROUPS_CREATE: "/groups/create",
    GROUPS_UPDATE: "/groups/:group_id/update",
    GROUPS_DELETE: "/groups/:group_id/delete",
    GROUPS_MEMBERS: "/groups/:group_id/members",
    GROUPS_ADD_MEMBER: "/groups/:group_id/members/add",
    GROUPS_REMOVE_MEMBER: "/groups/:group_id/members/remove",
    ORGS_LIST: "/organizations/list",
    CURRENT_USER: "/api/auth/me",
    LOGOUT: "/api/auth/logout",
  };

  var currentUser = null;
  var currentOrgId = null;
  var usersData = [];
  var groupsData = [];
  var organizationsData = [];

  function getAuthToken() {
    return localStorage.getItem("gb-access-token");
  }

  function apiUrl(endpoint) {
    return "/api/directory" + endpoint;
  }

  function init() {
    bindNavigation();
    bindToggles();
    bindThemeSelector();
    bindAvatarUpload();
    bindFormValidation();
    initLanguageSettings();
    loadSavedSettings();
    initUserManagement();
    initGroupManagement();
    loadCurrentUser();
  }

  function loadCurrentUser() {
    var token = getAuthToken();
    if (!token) return;

    fetch(API_ENDPOINTS.CURRENT_USER, {
      headers: { Authorization: "Bearer " + token },
    })
      .then(function (r) { return r.ok ? r.json() : null; })
      .then(function (user) {
        if (user) {
          currentUser = user;
          currentOrgId = user.organization_id;
          updateUserDisplay();
          checkAdminAccess();
        }
      })
      .catch(function (e) { console.warn("Failed to load user:", e); });
  }

  function updateUserDisplay() {
    if (!currentUser) return;
    var displayNameEl = document.getElementById("user-display-name");
    var emailEl = document.getElementById("user-email");
    if (displayNameEl) {
      displayNameEl.textContent = currentUser.display_name || currentUser.username || "";
    }
    if (emailEl) {
      emailEl.textContent = currentUser.email || "";
    }
  }

  function getInitials(name) {
    if (!name) return "??";
    var parts = name.split(" ");
    if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
    return name.substring(0, 2).toUpperCase();
  }

  function checkAdminAccess() {
    if (!currentUser || !currentUser.roles) return;
    var isAdmin = currentUser.roles.some(function (r) {
      var rl = r.toLowerCase();
      return rl.indexOf("admin") !== -1 || rl.indexOf("super") !== -1;
    });
    var adminSections = document.querySelectorAll('[data-admin-only="true"], .admin-only');
    var adminNavItems = document.querySelectorAll('.nav-item[href="#users"], .nav-item[href="#groups"]');
    adminSections.forEach(function (s) { s.style.display = isAdmin ? "" : "none"; });
    adminNavItems.forEach(function (i) { i.style.display = isAdmin ? "" : "none"; });
    if (isAdmin) {
      loadUsers();
      loadGroups();
    }
  }

  function bindNavigation() {
    document.querySelectorAll(".settings-nav-item").forEach(function (item) {
      item.addEventListener("click", function (e) {
        e.preventDefault();
        document.querySelectorAll(".settings-nav-item").forEach(function (i) { i.classList.remove("active"); });
        this.classList.add("active");
      });
    });
  }

  function bindToggles() {
    document.querySelectorAll(".toggle-switch input").forEach(function (toggle) {
      toggle.addEventListener("change", function () {
        saveSetting(this.dataset.setting, this.checked);
      });
    });
  }

  function bindThemeSelector() {
    document.querySelectorAll(".theme-option input").forEach(function (option) {
      option.addEventListener("change", function () {
        document.body.setAttribute("data-theme", this.value);
        saveSetting("theme", this.value);
      });
    });
  }

  function bindAvatarUpload() {
    var avatarInput = document.getElementById("avatar-input");
    if (avatarInput) {
      avatarInput.addEventListener("change", function (e) {
        var file = e.target.files[0];
        if (file) {
          var reader = new FileReader();
          reader.onload = function (ev) {
            var preview = document.querySelector(".avatar-preview img");
            if (preview) preview.src = ev.target.result;
          };
          reader.readAsDataURL(file);
        }
      });
    }
  }

  function bindFormValidation() {
    document.querySelectorAll(".settings-form").forEach(function (form) {
      form.addEventListener("submit", function (e) {
        var inputs = form.querySelectorAll("[required]");
        var valid = true;
        inputs.forEach(function (input) {
          if (!input.value.trim()) {
            valid = false;
            input.classList.add("error");
          } else {
            input.classList.remove("error");
          }
        });
        if (!valid) e.preventDefault();
      });
    });
  }

  function initLanguageSettings() {
    var languageSelect = document.getElementById("language-select");
    var savedLocale = localStorage.getItem(STORAGE_KEYS.LOCALE) || "en";
    if (languageSelect) languageSelect.value = savedLocale;
    document.querySelectorAll(".language-option").forEach(function (opt) {
      opt.classList.toggle("active", opt.dataset.locale === savedLocale);
    });
  }

  function loadSavedSettings() {
    var theme = localStorage.getItem(STORAGE_KEYS.THEME);
    if (theme) {
      document.body.setAttribute("data-theme", theme);
      var themeOption = document.querySelector('.theme-option[data-theme="' + theme + '"]');
      if (themeOption) themeOption.classList.add("active");
    }
    var compactMode = localStorage.getItem(STORAGE_KEYS.COMPACT_MODE) === "true";
    var compactToggle = document.querySelector('[name="compact_mode"]');
    if (compactToggle) {
      compactToggle.checked = compactMode;
      if (compactMode) document.body.classList.add("compact-mode");
    }
    var animations = localStorage.getItem(STORAGE_KEYS.ANIMATIONS) !== "false";
    var animationsToggle = document.querySelector('[name="animations"]');
    if (animationsToggle) {
      animationsToggle.checked = animations;
      if (!animations) document.body.classList.add("no-animations");
    }
  }

  function saveSetting(key, value) {
    try { localStorage.setItem(key, JSON.stringify(value)); }
    catch (e) { console.warn("Failed to save setting:", key, e); }
  }

  function initUserManagement() {
    var addUserBtn = document.getElementById("add-user-btn");
    if (addUserBtn) addUserBtn.addEventListener("click", openAddUserDialog);
    var userSearchInput = document.getElementById("user-search");
    if (userSearchInput) {
      userSearchInput.addEventListener("input", debounce(function () { loadUsers(this.value); }, 300));
    }
    var addUserForm = document.getElementById("add-user-form");
    if (addUserForm) addUserForm.addEventListener("submit", handleAddUser);
  }

  function initGroupManagement() {
    var addGroupBtn = document.getElementById("add-group-btn");
    if (addGroupBtn) addGroupBtn.addEventListener("click", openAddGroupDialog);
    var groupSearchInput = document.getElementById("group-search");
    if (groupSearchInput) {
      groupSearchInput.addEventListener("input", debounce(function () { loadGroups(this.value); }, 300));
    }
    var addGroupForm = document.getElementById("add-group-form");
    if (addGroupForm) addGroupForm.addEventListener("submit", handleAddGroup);
  }

  function loadUsers(search) {
    var container = document.getElementById("users-list");
    if (!container) return;
    container.innerHTML = '<div class="loading-state"><div class="spinner"></div><p>Loading...</p></div>';
    var params = new URLSearchParams();
    params.append("per_page", "50");
    if (search) params.append("search", search);
    if (currentOrgId) params.append("organization_id", currentOrgId);
    var token = getAuthToken();
    fetch(apiUrl(API_ENDPOINTS.USERS_LIST) + "?" + params.toString(), {
      headers: { Authorization: "Bearer " + token },
    })
      .then(function (r) { if (!r.ok) throw new Error("Failed"); return r.json(); })
      .then(function (data) { usersData = data.users || []; renderUsers(container); })
      .catch(function () { container.innerHTML = '<div class="error-state"><p>Failed to load users.</p></div>'; });
  }

  function renderUsers(container) {
    if (usersData.length === 0) {
      container.innerHTML = '<div class="empty-state"><p>No users found</p></div>';
      return;
    }
    var html = '<table class="data-table users-table"><thead><tr><th>User</th><th>Email</th><th>Organization</th><th>Roles</th><th>Status</th><th>Actions</th></tr></thead><tbody>';
    usersData.forEach(function (user) {
      var initials = getInitials(user.username || user.email);
      var displayName = user.display_name || user.username || user.email;
      var isActive = user.state === "active" || user.state === "USER_STATE_ACTIVE";
      var roles = (user.roles || []).join(", ") || "user";
      var orgId = user.organization_id || "-";
      html += "<tr>";
      html += '<td class="user-cell"><div class="user-avatar">' + initials + '</div><div class="user-info"><span class="user-name">' + escapeHtml(displayName) + '</span><span class="user-username">@' + escapeHtml(user.username || "") + '</span></div></td>';
      html += "<td>" + escapeHtml(user.email || "") + "</td>";
      html += "<td>" + escapeHtml(orgId) + "</td>";
      html += "<td>" + escapeHtml(roles) + "</td>";
      html += '<td><span class="status-badge ' + (isActive ? 'status-active' : 'status-inactive') + '">' + (isActive ? 'Active' : 'Inactive') + '</span></td>';
      html += '<td class="actions-cell">';
      html += '<button class="btn-icon" onclick="SettingsModule.editUser(\'' + user.id + '\')" title="Edit"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></button>';
      html += '<button class="btn-icon btn-danger" onclick="SettingsModule.deleteUser(\'' + user.id + '\')" title="Delete"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></button>';
      html += '</td></tr>';
    });
    html += "</tbody></table>";
    container.innerHTML = html;
  }

  function loadGroups(search) {
    var container = document.getElementById("groups-list");
    if (!container) return;
    container.innerHTML = '<div class="loading-state"><div class="spinner"></div><p>Loading...</p></div>';
    var params = new URLSearchParams();
    params.append("per_page", "50");
    if (search) params.append("search", search);
    var token = getAuthToken();
    fetch(apiUrl(API_ENDPOINTS.GROUPS_LIST) + "?" + params.toString(), {
      headers: { Authorization: "Bearer " + token },
    })
      .then(function (r) { if (!r.ok) throw new Error("Failed"); return r.json(); })
      .then(function (data) { groupsData = data.groups || []; renderGroups(container); })
      .catch(function () { container.innerHTML = '<div class="error-state"><p>Failed to load groups.</p></div>'; });
  }

  function renderGroups(container) {
    if (groupsData.length === 0) {
      container.innerHTML = '<div class="empty-state"><p>No groups found</p></div>';
      return;
    }
    var html = '<div class="groups-grid">';
    groupsData.forEach(function (group) {
      html += '<div class="group-card" data-group-id="' + group.id + '">';
      html += '<div class="group-header"><h3 class="group-name">' + escapeHtml(group.name) + '</h3><span class="member-count">' + (group.member_count || 0) + ' members</span></div>';
      if (group.description) html += '<p class="group-description">' + escapeHtml(group.description) + '</p>';
      html += '<div class="group-actions">';
      html += '<button class="btn-secondary btn-sm" onclick="SettingsModule.viewGroupMembers(\'' + group.id + '\')">View Members</button>';
      html += '<button class="btn-icon" onclick="SettingsModule.editGroup(\'' + group.id + '\')" title="Edit"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></button>';
      html += '<button class="btn-icon btn-danger" onclick="SettingsModule.deleteGroup(\'' + group.id + '\')" title="Delete"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></button>';
      html += '</div></div>';
    });
    html += '</div>';
    container.innerHTML = html;
  }

  function openAddUserDialog() {
    var dialog = document.getElementById("add-user-dialog");
    if (dialog) dialog.showModal();
  }

  function closeAddUserDialog() {
    var dialog = document.getElementById("add-user-dialog");
    if (dialog) { dialog.close(); var f = document.getElementById("add-user-form"); if (f) f.reset(); }
  }

  function openAddGroupDialog() {
    var dialog = document.getElementById("add-group-dialog");
    if (dialog) dialog.showModal();
  }

  function closeAddGroupDialog() {
    var dialog = document.getElementById("add-group-dialog");
    if (dialog) { dialog.close(); var f = document.getElementById("add-group-form"); if (f) f.reset(); }
  }

  function handleAddUser(e) {
    e.preventDefault();
    var form = e.target, btn = form.querySelector('button[type="submit"]'), orig = btn.textContent;
    btn.disabled = true; btn.textContent = "Creating...";
    
    var userData = {
      username: form.username.value,
      email: form.email.value,
      password: form.password ? form.password.value : null,
      first_name: form.first_name.value,
      last_name: form.last_name.value,
      role: form.role ? form.role.value : "user",
      organization_id: currentOrgId || (form.organization_id ? form.organization_id.value : null),
      roles: form.roles ? [form.roles.value] : ["user"]
    };

    fetch(apiUrl(API_ENDPOINTS.USERS_CREATE), {
      method: "POST",
      headers: { "Content-Type": "application/json", Authorization: "Bearer " + getAuthToken() },
      body: JSON.stringify(userData)
    })
      .then(function (r) { if (!r.ok) return r.json().then(function (err) { throw new Error(err.error || "Failed"); }); return r.json(); })
      .then(function () { showToast("User created and added to organization", "success"); closeAddUserDialog(); loadUsers(); })
      .catch(function (e) { showToast(e.message, "error"); })
      .finally(function () { btn.disabled = false; btn.textContent = orig; });
  }

  function handleAddGroup(e) {
    e.preventDefault();
    var form = e.target, btn = form.querySelector('button[type="submit"]'), orig = btn.textContent;
    btn.disabled = true; btn.textContent = "Creating...";
    var groupData = { name: form.name.value, description: form.description ? form.description.value : "" };
    fetch(apiUrl(API_ENDPOINTS.GROUPS_CREATE), {
      method: "POST",
      headers: { "Content-Type": "application/json", Authorization: "Bearer " + getAuthToken() },
      body: JSON.stringify(groupData)
    })
      .then(function (r) { if (!r.ok) return r.json().then(function (err) { throw new Error(err.error || "Failed"); }); return r.json(); })
      .then(function () { showToast("Group created successfully", "success"); closeAddGroupDialog(); loadGroups(); })
      .catch(function (e) { showToast(e.message, "error"); })
      .finally(function () { btn.disabled = false; btn.textContent = orig; });
  }

  function editUser(userId) {
    var user = usersData.find(function (u) { return u.id === userId; });
    if (!user) return;
    var d = document.getElementById("edit-user-dialog");
    if (d) d.showModal();
  }

  function deleteUser(userId) {
    if (!confirm("Delete this user?")) return;
    fetch(apiUrl(API_ENDPOINTS.USERS_DELETE.replace(":user_id", userId)), {
      method: "DELETE",
      headers: { Authorization: "Bearer " + getAuthToken() }
    })
      .then(function (r) { if (!r.ok) throw new Error("Failed"); showToast("User deleted", "success"); loadUsers(); })
      .catch(function (e) { showToast(e.message, "error"); });
  }

  function editGroup(groupId) {
    var group = groupsData.find(function (g) { return g.id === groupId; });
    if (!group) return;
    var d = document.getElementById("edit-group-dialog");
    if (d) d.showModal();
  }

  function deleteGroup(groupId) {
    if (!confirm("Delete this group?")) return;
    fetch(apiUrl(API_ENDPOINTS.GROUPS_DELETE.replace(":group_id", groupId)), {
      method: "DELETE",
      headers: { Authorization: "Bearer " + getAuthToken() }
    })
      .then(function (r) { if (!r.ok) throw new Error("Failed"); showToast("Group deleted", "success"); loadGroups(); })
      .catch(function (e) { showToast(e.message, "error"); });
  }

  function viewGroupMembers(groupId) {
    var d = document.getElementById("group-members-dialog");
    if (d) d.showModal();
  }

  function removeGroupMember(groupId, userId) {
    if (!confirm("Remove member?")) return;
    fetch(apiUrl(API_ENDPOINTS.GROUPS_REMOVE_MEMBER.replace(":group_id", groupId)), {
      method: "POST",
      headers: { "Content-Type": "application/json", Authorization: "Bearer " + getAuthToken() },
      body: JSON.stringify({ user_id: userId })
    })
      .then(function (r) { if (!r.ok) throw new Error("Failed"); showToast("Member removed", "success"); loadGroups(); })
      .catch(function (e) { showToast(e.message, "error"); });
  }

  function handleLogout() {
    var token = getAuthToken();
    if (token) fetch(API_ENDPOINTS.LOGOUT, { method: "POST", headers: { Authorization: "Bearer " + token } }).catch(function () {});
    localStorage.removeItem("gb-access-token");
    localStorage.removeItem("gb-refresh-token");
    localStorage.removeItem("gb-token-expires");
    localStorage.removeItem("gb-user-data");
    window.location.href = "/auth/login";
  }

  function escapeHtml(text) { if (!text) return ""; var d = document.createElement("div"); d.textContent = text; return d.innerHTML; }
  function debounce(func, wait) { var timeout; return function () { var ctx = this, args = arguments; clearTimeout(timeout); timeout = setTimeout(function () { func.apply(ctx, args); }, wait); }; }
  
  function showToast(message, type) {
    type = type || "success";
    var existing = document.querySelector(".toast");
    if (existing) existing.remove();
    var toast = document.createElement("div");
    toast.className = "toast toast-" + type;
    toast.innerHTML = '<span class="toast-message">' + message + '</span><button class="toast-close" onclick="this.parentElement.remove()"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>';
    document.body.appendChild(toast);
    requestAnimationFrame(function () { toast.classList.add("show"); });
    setTimeout(function () { toast.classList.remove("show"); setTimeout(function () { toast.remove(); }, 300); }, 3000);
  }

  window.changeLanguage = function (locale) { localStorage.setItem(STORAGE_KEYS.LOCALE, locale); document.documentElement.lang = locale; showToast("Language changed"); setTimeout(function () { location.reload(); }, 500); };
  window.selectLanguage = function (locale, element) { document.querySelectorAll(".language-option").forEach(function (o) { o.classList.remove("active"); }); if (element) element.classList.add("active"); changeLanguage(locale); };
  window.changeDateFormat = function (format) { localStorage.setItem(STORAGE_KEYS.DATE_FORMAT, format); showToast("Date format updated"); };
  window.changeTimeFormat = function (format) { localStorage.setItem(STORAGE_KEYS.TIME_FORMAT, format); showToast("Time format updated"); };
  window.setTheme = function (theme, element) { document.body.setAttribute("data-theme", theme); localStorage.setItem(STORAGE_KEYS.THEME, theme); document.querySelectorAll(".theme-option").forEach(function (o) { o.classList.remove("active"); }); if (element) element.classList.add("active"); showToast("Theme updated"); };
  window.toggleCompactMode = function (checkbox) { var enabled = checkbox.checked; localStorage.setItem(STORAGE_KEYS.COMPACT_MODE, enabled); document.body.classList.toggle("compact-mode", enabled); showToast(enabled ? "Compact mode enabled" : "Compact mode disabled"); };
  window.toggleAnimations = function (checkbox) { var enabled = checkbox.checked; localStorage.setItem(STORAGE_KEYS.ANIMATIONS, enabled); document.body.classList.toggle("no-animations", !enabled); showToast(enabled ? "Animations enabled" : "Animations disabled"); };
  window.showSection = function (sectionId, navElement) { document.querySelectorAll(".settings-section").forEach(function (s) { s.classList.remove("active"); }); document.querySelectorAll(".nav-item").forEach(function (i) { i.classList.remove("active"); }); var section = document.getElementById(sectionId + "-section"); if (section) section.classList.add("active"); if (navElement) navElement.classList.add("active"); history.replaceState(null, "", "#" + sectionId); };
  window.showToast = showToast;
  window.previewAvatar = function (input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { var avatar = document.getElementById("current-avatar"); if (avatar) avatar.innerHTML = '<img src="' + e.target.result + '" alt="Avatar">'; }; reader.readAsDataURL(input.files[0]); } };
  window.removeAvatar = function () { var avatar = document.getElementById("current-avatar"); if (avatar) avatar.innerHTML = "<span>JD</span>"; showToast("Avatar removed"); };

  function initFromHash() { var hash = window.location.hash.slice(1); if (hash) { var navItem = document.querySelector('.nav-item[href="#' + hash + '"]'); if (navItem) showSection(hash, navItem); } }

  window.SettingsModule = {
    init: init, changeLanguage: window.changeLanguage, changeDateFormat: window.changeDateFormat, changeTimeFormat: window.changeTimeFormat, setTheme: window.setTheme, showToast: showToast,
    editUser: editUser, deleteUser: deleteUser, editGroup: editGroup, deleteGroup: deleteGroup, viewGroupMembers: viewGroupMembers, removeGroupMember: removeGroupMember, logout: handleLogout
  };

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", function () { init(); initFromHash(); });
  } else {
    init();
    initFromHash();
  }
})();