const welcomeScreen = document.getElementById("welcomeScreen");
const chatScreen = document.getElementById("chatScreen");
const chatMessages = document.getElementById("chatMessages");
const welcomeInput = document.getElementById("welcomeInput");
const chatInput = document.getElementById("chatInput");

let isInChat = false;

function switchToChat() {
  welcomeScreen.classList.add("hidden");
  chatScreen.classList.remove("hidden");
  chatInput.focus();
  isInChat = true;
}

function addMessage(text, type = "user") {
  const msg = document.createElement("div");
  msg.className = `message ${type}`;
  msg.innerHTML = `<div class="message-text">${escapeHtml(text)}</div>`;
  chatMessages.appendChild(msg);
  scrollToBottom();
}

function showTyping() {
  const typing = document.createElement("div");
  typing.className = "message assistant";
  typing.id = "typing";
  typing.innerHTML = `
        <div class="message-text">
            <div class="typing">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    `;
  chatMessages.appendChild(typing);
  scrollToBottom();
}

function hideTyping() {
  const typing = document.getElementById("typing");
  if (typing) typing.remove();
}

function scrollToBottom() {
  chatMessages.scrollTop = chatMessages.scrollHeight;
}

function escapeHtml(text) {
  const div = document.createElement("div");
  div.textContent = text;
  return div.innerHTML;
}

function sendMessage(text) {
  if (!text.trim()) return;

  if (!isInChat) {
    switchToChat();
  }

  addMessage(text, "user");
  chatInput.value = "";
  chatInput.disabled = true;

  showTyping();

  setTimeout(() => {
    hideTyping();
    addMessage(
      "I'm DevDen - your AI assistant. Soon I'll be connected to your knowledge base!",
      "assistant",
    );
    chatInput.disabled = false;
    chatInput.focus();
  }, 1000);
}

// Welcome screen input handler
welcomeInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    e.preventDefault();
    const text = welcomeInput.value.trim();
    if (text) {
      sendMessage(text);
    }
  }
});

// Chat input handler
chatInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    e.preventDefault();
    sendMessage(chatInput.value);
  }
});