(() => {
  const list = document.querySelector("#chatMessages");
  const form = document.querySelector("#chatForm");
  const nickname = document.querySelector("#chatNickname");
  const message = document.querySelector("#chatMessage");
  const status = document.querySelector("#chatStatus");

  if (!list || !form || !nickname || !message || !status) {
    return;
  }

  nickname.value =
    localStorage.getItem("ashley_chat_nickname") || "";

  const formatTime = value =>
    new Intl.DateTimeFormat("en", {
      hour: "2-digit",
      minute: "2-digit",
      month: "short",
      day: "numeric"
    }).format(new Date(Number(value) * 1000));

  function render(messages) {
    list.replaceChildren();

    if (!messages.length) {
      const empty = document.createElement("p");
      empty.className = "chat-info";
      empty.textContent =
        "No transmissions yet. Be the first.";
      list.append(empty);
      return;
    }

    messages.forEach(item => {
      const article = document.createElement("article");
      article.className = "chat-message";

      const header = document.createElement("header");

      const name = document.createElement("b");
      name.textContent = item.nickname;

      const sent = document.createElement("time");
      sent.dateTime = new Date(
        Number(item.created_at) * 1000
      ).toISOString();
      sent.textContent = formatTime(item.created_at);

      const body = document.createElement("p");
      body.textContent = item.message;

      header.append(name, sent);
      article.append(header, body);
      list.append(article);
    });

    list.scrollTop = list.scrollHeight;
  }

  async function loadMessages() {
    try {
      const response = await fetch("/api/chat", {
        cache: "no-store"
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || "Chat unavailable");
      }

      render(data.messages || []);
      status.textContent = "";
      status.className = "chat-status";
    } catch (error) {
      status.textContent = error.message;
      status.className = "chat-status error";
    }
  }

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

    status.textContent = "Sending…";
    status.className = "chat-status";

    localStorage.setItem(
      "ashley_chat_nickname",
      nickname.value.trim()
    );

    try {
      const response = await fetch("/api/chat", {
        method: "POST",
        headers: {
          "content-type": "application/json"
        },
        body: JSON.stringify({
          nickname: nickname.value,
          message: message.value
        })
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(
          data.error || "Message not sent"
        );
      }

      message.value = "";
      await loadMessages();
    } catch (error) {
      status.textContent = error.message;
      status.className = "chat-status error";
    }
  });

  loadMessages();
  setInterval(loadMessages, 10000);
})();