document.addEventListener("DOMContentLoaded", async () => {
  const chipBtn = document.getElementById("persona-chip");
  const dropdown = document.getElementById("account-dropdown");
  if (!chipBtn || !dropdown) return;

  const me = await pidGetMe();
  if (!me) return;

  const chipLabel = document.getElementById("persona-chip-label");
  const nameEl = document.getElementById("account-name");
  const profileEl = document.getElementById("account-profile");
  const manageLink = document.getElementById("account-manage-link");
  const manageAccountBtn = document.getElementById("account-manage-account-btn");

  const profiles = me.perfis || [];

  if (chipLabel) chipLabel.textContent = me.nome;
  if (nameEl) nameEl.textContent = me.nome;
  if (profileEl) {
    profileEl.textContent = profiles.length ? profiles.map((p) => p.nome).join(", ") : "Sem perfil vinculado";
  }
  if (manageLink) manageLink.hidden = !me.gerencia_permissoes;

  const themeSwatchesEl = document.getElementById("theme-swatches");
  if (themeSwatchesEl) {
    const renderSwatches = () => {
      const active = pidGetColorTheme();
      themeSwatchesEl.innerHTML = PID_COLOR_THEMES.map(
        (t) => `
          <button type="button" class="theme-swatch ${t.key === active ? "is-active" : ""}" data-theme-choice="${t.key}" style="background:${t.swatch}" aria-label="Tema ${t.label}" title="${t.label}">
            ${
              t.key === active
                ? '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6L9 17l-5-5" stroke-linecap="round" stroke-linejoin="round"/></svg>'
                : ""
            }
          </button>`
      ).join("");
    };

    renderSwatches();

    themeSwatchesEl.addEventListener("click", (event) => {
      const btn = event.target.closest("[data-theme-choice]");
      if (!btn) return;
      pidSetColorTheme(btn.getAttribute("data-theme-choice"));
      renderSwatches();
    });
  }

  chipBtn.addEventListener("click", (event) => {
    event.stopPropagation();
    dropdown.hidden = !dropdown.hidden;
  });

  document.addEventListener("click", (event) => {
    if (!dropdown.hidden && !dropdown.contains(event.target) && event.target !== chipBtn) {
      dropdown.hidden = true;
    }
  });

  const manageAccountModal = document.getElementById("manage-account-modal");
  const manageAccountModalCard = document.getElementById("manage-account-modal-card");
  const manageAccountChangePasswordBtn = document.getElementById("manage-account-change-password-btn");
  const manageAccountCloseBtn = document.getElementById("manage-account-close-btn");
  const manageAccountLideradosField = document.getElementById("manage-account-liderados-field");
  const manageAccountLideradosError = document.getElementById("manage-account-liderados-error");
  const manageAccountSaveBtn = document.getElementById("manage-account-save-btn");

  if (manageAccountBtn && manageAccountModal) {
    function departamentosTexto(usuario) {
      return (usuario.departamentos || []).map((d) => d.nome).join(", ");
    }

    const seletorLiderados = pidCriarSeletorDuplo({
      available: {
        selectAll: document.getElementById("manage-account-liderados-available-select-all"),
        sortHeader: document.getElementById("manage-account-liderados-available-sort-nome"),
        searchPrincipal: document.getElementById("manage-account-liderados-available-search-nome"),
        searchSecundaria: document.getElementById("manage-account-liderados-available-search-departamento"),
        body: document.getElementById("manage-account-liderados-available-body"),
        footer: document.getElementById("manage-account-liderados-available-footer"),
        acaoBtn: document.getElementById("manage-account-liderados-available-link-btn"),
      },
      linked: {
        selectAll: document.getElementById("manage-account-liderados-linked-select-all"),
        sortHeader: document.getElementById("manage-account-liderados-linked-sort-nome"),
        searchPrincipal: document.getElementById("manage-account-liderados-linked-search-nome"),
        searchSecundaria: document.getElementById("manage-account-liderados-linked-search-departamento"),
        body: document.getElementById("manage-account-liderados-linked-body"),
        footer: document.getElementById("manage-account-liderados-linked-footer"),
        acaoBtn: document.getElementById("manage-account-liderados-linked-unlink-btn"),
      },
      secundariaValor: departamentosTexto,
    });

    manageAccountBtn.addEventListener("click", async () => {
      dropdown.hidden = true;
      manageAccountLideradosError.textContent = "";
      if (me.lideranca) {
        manageAccountLideradosField.hidden = false;
        manageAccountSaveBtn.hidden = false;
        manageAccountModalCard.classList.add("modal-card--wide");
        const candidatos = (await pidApiRequest("/usuarios-resumo/"))
          .filter((u) => u.id !== me.id)
          .slice()
          .sort((a, b) => a.nome.localeCompare(b.nome));
        seletorLiderados.setDados(candidatos, (me.liderados || []).map((u) => u.id));
      } else {
        manageAccountLideradosField.hidden = true;
        manageAccountSaveBtn.hidden = true;
        manageAccountModalCard.classList.remove("modal-card--wide");
      }
      manageAccountModal.hidden = false;
    });

    manageAccountCloseBtn.addEventListener("click", () => {
      manageAccountModal.hidden = true;
    });

    manageAccountSaveBtn.addEventListener("click", async () => {
      const liderados = seletorLiderados.getVinculadosIds();
      try {
        const atualizados = await pidApiRequest("/me/liderados/", { method: "PATCH", body: { liderados } });
        me.liderados = atualizados;
        manageAccountModal.hidden = true;
      } catch (e) {
        manageAccountLideradosError.textContent = e.message;
      }
    });
  }

  const passwordModal = document.getElementById("password-modal");
  if (!passwordModal || !manageAccountChangePasswordBtn) return;

  const currentInput = document.getElementById("pwd-current");
  const newInput = document.getElementById("pwd-new");
  const confirmInput = document.getElementById("pwd-confirm");
  const pwdError = document.getElementById("pwd-error");
  const pwdSaveBtn = document.getElementById("pwd-save-btn");
  const pwdCancelBtn = document.getElementById("pwd-cancel-btn");

  pidBindPasswordToggle(document.getElementById("pwd-current-toggle"), currentInput);
  pidBindPasswordToggle(document.getElementById("pwd-new-toggle"), newInput);
  pidBindPasswordToggle(document.getElementById("pwd-confirm-toggle"), confirmInput);

  function closePasswordModal() {
    passwordModal.hidden = true;
  }

  manageAccountChangePasswordBtn.addEventListener("click", () => {
    manageAccountModal.hidden = true;
    currentInput.value = "";
    newInput.value = "";
    confirmInput.value = "";
    currentInput.type = "password";
    newInput.type = "password";
    confirmInput.type = "password";
    pwdError.textContent = "";
    passwordModal.hidden = false;
    currentInput.focus();
  });

  pwdCancelBtn.addEventListener("click", closePasswordModal);

  pwdSaveBtn.addEventListener("click", async () => {
    const current = currentInput.value;
    const next = newInput.value;
    const confirmValue = confirmInput.value;

    if (!next) {
      pwdError.textContent = "Informe a nova senha.";
      return;
    }
    if (next !== confirmValue) {
      pwdError.textContent = "A confirmação não corresponde à nova senha.";
      return;
    }

    try {
      await pidApiRequest("/me/senha/", {
        method: "POST",
        body: { senha_atual: current, nova_senha: next },
      });
      closePasswordModal();
    } catch (e) {
      pwdError.textContent = e.message;
    }
  });
});