const connectionCards = document.querySelectorAll(".connection-card");
const activeConnection = document.getElementById("active-connection");
const detailTarget = document.getElementById("detail-target");
const runQueryButton = document.getElementById("run-query");
const executionBanner = document.getElementById("execution-banner");
const executionTitle = document.getElementById("execution-title");
const executionCopy = document.getElementById("execution-copy");
const durationValue = document.getElementById("duration-value");
const rowCount = document.getElementById("row-count");
const bottomTabs = document.querySelectorAll(".bottom-tab");
const tabContents = document.querySelectorAll(".tab-content");

connectionCards.forEach((card) => {
  card.addEventListener("click", () => {
    connectionCards.forEach((item) => item.classList.remove("is-active"));
    card.classList.add("is-active");

    const target = card.dataset.connection;
    activeConnection.textContent = target;
    detailTarget.textContent = target;
  });
});

runQueryButton.addEventListener("click", () => {
  const isError = executionBanner.classList.contains("is-error");

  if (isError) {
    executionBanner.classList.remove("is-error");
    executionTitle.textContent = "Last run succeeded";
    executionCopy.textContent = "50 rows returned in 182 ms. Export is available.";
    durationValue.textContent = "182 ms";
    rowCount.textContent = "50";
    return;
  }

  executionBanner.classList.add("is-error");
  executionTitle.textContent = "Last run failed";
  executionCopy.textContent = "Syntax error near `form`. The error summary should stay visible in the workspace.";
  durationValue.textContent = "21 ms";
  rowCount.textContent = "0";
});

bottomTabs.forEach((tab) => {
  tab.addEventListener("click", () => {
    bottomTabs.forEach((item) => item.classList.remove("is-active"));
    tabContents.forEach((item) => item.classList.remove("is-active"));

    tab.classList.add("is-active");
    document
      .querySelector(`[data-content="${tab.dataset.tab}"]`)
      .classList.add("is-active");
  });
});