// ---------------------------------------------------------
// Tool tab navigation
// ---------------------------------------------------------

const toolTabs = document.querySelectorAll(".tool-tab");
const toolPanels = document.querySelectorAll(".tool-panel");

toolTabs.forEach((tab) => {
  tab.addEventListener("click", () => {
    const selectedToolId = tab.dataset.tool;

    // Update the active tab.
    toolTabs.forEach((currentTab) => {
      currentTab.classList.toggle("active", currentTab === tab);
    });

    // Show only the selected tool panel.
    toolPanels.forEach((panel) => {
      panel.hidden = panel.id !== selectedToolId;
    });
  });
});


// ---------------------------------------------------------
// Website Status Checker
// ---------------------------------------------------------

const uptimeForm = document.getElementById("uptime-form");
const urlInput = document.getElementById("url-input");
const checkButton = document.getElementById("check-button");
const statusMessage = document.getElementById("status-message");
const resultPanel = document.getElementById("result-panel");

const onlineBadge = document.getElementById("online-badge");
const statusCode = document.getElementById("status-code");
const responseTime = document.getElementById("response-time");
const redirectCount = document.getElementById("redirect-count");
const checkedAt = document.getElementById("checked-at");
const finalUrl = document.getElementById("final-url");

uptimeForm.addEventListener("submit", async (event) => {
  event.preventDefault();

  const url = urlInput.value.trim();

  statusMessage.textContent = "Checking website...";
  statusMessage.className = "status-message";
  resultPanel.hidden = true;
  checkButton.disabled = true;
  checkButton.textContent = "Checking...";

  try {
    const response = await fetch("/api/uptime", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ url }),
    });

    const result = await response.json();

    if (!response.ok) {
      throw new Error(result.error || "The request failed.");
    }

    if (!result.online) {
      throw new Error(result.error || "The website could not be reached.");
    }

    onlineBadge.textContent = "Online";
    onlineBadge.className = "status-badge online";

    statusCode.textContent = result.statusCode;
    responseTime.textContent = `${result.responseTimeMs} ms`;
    redirectCount.textContent = result.redirectCount;
    checkedAt.textContent = new Date(result.checkedAt).toLocaleString();

    finalUrl.textContent = result.finalUrl;
    finalUrl.href = result.finalUrl;

    statusMessage.textContent = "Website check completed.";
    resultPanel.hidden = false;
  } catch (error) {
    statusMessage.textContent = error.message;
    statusMessage.className = "status-message error";
  } finally {
    checkButton.disabled = false;
    checkButton.textContent = "Check Website";
  }
});


// ---------------------------------------------------------
// DNS Lookup
// ---------------------------------------------------------

const dnsForm = document.getElementById("dns-form");
const hostnameInput = document.getElementById("hostname-input");
const dnsButton = document.getElementById("dns-button");
const dnsMessage = document.getElementById("dns-message");
const dnsResultPanel = document.getElementById("dns-result-panel");
const dnsHostname = document.getElementById("dns-hostname");
const dnsRecords = document.getElementById("dns-records");
const dnsCheckedAt = document.getElementById("dns-checked-at");

// Convert one DNS record into readable text.
function formatDnsRecord(recordType, record) {
  if (recordType === "MX" && typeof record === "object") {
    return `${record.exchange} (priority ${record.priority})`;
  }

  return String(record);
}

// Build one visible record group.
function createDnsRecordGroup(recordType, records) {
  const group = document.createElement("section");
  group.className = "dns-record-group";

  const heading = document.createElement("h4");
  heading.textContent = recordType;
  group.appendChild(heading);

  if (!Array.isArray(records) || records.length === 0) {
    const emptyMessage = document.createElement("p");
    emptyMessage.className = "empty-record";
    emptyMessage.textContent = "No records found.";
    group.appendChild(emptyMessage);

    return group;
  }

  const list = document.createElement("ul");
  list.className = "dns-record-list";

  records.forEach((record) => {
    const item = document.createElement("li");
    item.textContent = formatDnsRecord(recordType, record);
    list.appendChild(item);
  });

  group.appendChild(list);

  return group;
}

dnsForm.addEventListener("submit", async (event) => {
  event.preventDefault();

  const hostname = hostnameInput.value.trim();

  dnsMessage.textContent = "Looking up DNS records...";
  dnsMessage.className = "status-message";
  dnsResultPanel.hidden = true;
  dnsButton.disabled = true;
  dnsButton.textContent = "Looking Up...";

  try {
    const response = await fetch("/api/dns", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ hostname }),
    });

    const result = await response.json();

    if (!response.ok) {
      throw new Error(result.error || "The DNS lookup failed.");
    }

    dnsHostname.textContent = result.hostname;
    dnsRecords.replaceChildren();

    const recordOrder = ["A", "AAAA", "CNAME", "MX", "TXT", "NS"];

    recordOrder.forEach((recordType) => {
      const group = createDnsRecordGroup(
        recordType,
        result.records[recordType]
      );

      dnsRecords.appendChild(group);
    });

    dnsCheckedAt.textContent =
      `Checked ${new Date(result.checkedAt).toLocaleString()}`;

    dnsMessage.textContent = "DNS lookup completed.";
    dnsResultPanel.hidden = false;
  } catch (error) {
    dnsMessage.textContent = error.message;
    dnsMessage.className = "status-message error";
  } finally {
    dnsButton.disabled = false;
    dnsButton.textContent = "Look Up DNS";
  }
});