// Get references to the page elements we need to update.
const form = 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");

// Listen for the form submission.
form.addEventListener("submit", async (event) => {
  // Prevent the browser from reloading the page.
  event.preventDefault();

  const url = urlInput.value.trim();

  // Reset the interface before starting a new check.
  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();

    // Handle API-level errors.
    if (!response.ok) {
      throw new Error(result.error || "The request failed.");
    }

    // Handle unreachable or blocked destinations.
    if (!result.online) {
      throw new Error(result.error || "The website could not be reached.");
    }

    // Fill in the successful result.
    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) {
    // Show a safe, readable message to the user.
    statusMessage.textContent = error.message;
    statusMessage.className = "status-message error";

    onlineBadge.textContent = "Offline";
    onlineBadge.className = "status-badge offline";
  } finally {
    // Restore the button whether the request succeeded or failed.
    checkButton.disabled = false;
    checkButton.textContent = "Check Website";
  }
});