(function () {
  const storageProviderSelects = document.querySelectorAll("[data-storage-provider]");

  function syncStorageProvider(select) {
    const formScope = select.closest("form");
    if (!formScope) {
      return;
    }
    const provider = select.value;
    const isContabo = provider === "contabo";
    formScope.querySelectorAll("[data-provider-fields]").forEach((group) => {
      const providers = (group.getAttribute("data-provider-fields") || "").split(/\s+/);
      const active = providers.includes(provider);
      group.hidden = !active;
      group.querySelectorAll("input, select, textarea").forEach((input) => {
        input.disabled = !active;
      });
    });
    const tls = formScope.querySelector('input[name="use_ssl"]');
    const pathStyle = formScope.querySelector('input[name="path_style"]');
    if (tls) {
      tls.checked = isContabo || tls.checked;
      tls.disabled = isContabo;
    }
    if (pathStyle) {
      pathStyle.checked = isContabo || pathStyle.checked;
      pathStyle.disabled = isContabo;
    }
  }

  storageProviderSelects.forEach((select) => {
    select.addEventListener("change", () => syncStorageProvider(select));
    syncStorageProvider(select);
  });

  document.querySelectorAll(".storage-edit-trigger").forEach((button) => {
    button.addEventListener("click", () => {
      const card = button.closest(".storage-card");
      if (!card) {
        return;
      }
      card.classList.add("is-editing");
      const providerSelect = card.querySelector("[data-storage-provider]");
      if (providerSelect) {
        syncStorageProvider(providerSelect);
      }
    });
  });

  document.querySelectorAll(".storage-cancel-trigger").forEach((button) => {
    button.addEventListener("click", () => {
      const card = button.closest(".storage-card");
      if (!card) {
        return;
      }
      const form = card.querySelector("form");
      if (form) {
        form.reset();
      }
      card.classList.remove("is-editing");
    });
  });

  const storageAddTrigger = document.querySelector(".storage-add-trigger");
  const storageTypePicker = document.querySelector(".storage-type-picker");
  const storageNewCard = document.querySelector(".storage-new-card");

  const providerLabels = {
    s3: "S3 bucket",
    contabo: "Contabo Object Storage",
    sftp: "SFTP",
    smb: "Samba",
    webdav: "WebDAV",
  };

  if (storageAddTrigger && storageTypePicker) {
    storageAddTrigger.addEventListener("click", () => {
      storageTypePicker.hidden = !storageTypePicker.hidden;
      if (storageNewCard && !storageTypePicker.hidden) {
        storageNewCard.hidden = true;
      }
    });

    storageTypePicker.querySelectorAll(".storage-type-option").forEach((option) => {
      option.addEventListener("click", () => {
        const provider = option.dataset.provider;
        if (!storageNewCard) {
          return;
        }

        const providerSelect = storageNewCard.querySelector("[data-storage-provider]");
        if (providerSelect) {
          providerSelect.value = provider;
          syncStorageProvider(providerSelect);
        }

        const typeBadge = storageNewCard.querySelector(".storage-new-type-badge");
        if (typeBadge) {
          typeBadge.textContent = providerLabels[provider] || provider;
        }

        const iconEl = storageNewCard.querySelector(".storage-new-icon");
        const optIcon = option.querySelector("svg");
        if (iconEl && optIcon) {
          iconEl.innerHTML = optIcon.outerHTML;
        }

        storageTypePicker.hidden = true;
        storageNewCard.hidden = false;
      });
    });
  }

  if (storageNewCard) {
    const cancelBtn = storageNewCard.querySelector(".storage-new-cancel");
    if (cancelBtn) {
      cancelBtn.addEventListener("click", () => {
        storageNewCard.hidden = true;
        if (storageTypePicker) {
          storageTypePicker.hidden = true;
        }
      });
    }
  }
})();