// ================= CONFIG =================
const baseUrl = 'http://localhost:8000'; // Base URL for all resources

const config = {
  cssUrl: `${baseUrl}/agent.css`, // CSS file
  api: `https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/702862fd-dd17-4a34-8efb-e9056d2c50df/chat`, // Backend webhook endpoint
  buttonImage: `${baseUrl}/images/4.svg`, // Chat toggle button image
  logoImage: `${baseUrl}/images/logo.svg`,  // Logo image for chat widget
  preamble: 'Hallo! Wie kann ich Ihnen helfen?' // Initial bot message
};

// ================= WIDGET HTML =================
const widgetHTML = `
  <div id="cw-chatWidget">
    <div class="cw-header">
      <img src="${config.logoImage}" alt="Logo" class="cw-logo"/>
    </div>
    <div id="cw-chatMessages" class="cw-messages"></div>
    <form id="cw-chatForm" class="cw-form">
      <input type="text" id="cw-chatInput" placeholder="Type your message..." />
      <button type="submit">Send</button>
    </form>
    <div id="cw-status" class="cw-status"></div>
  </div>
  <button id="cw-chatToggle">
    <img src="${config.buttonImage}" alt="Chat"/>
  </button>
`;

// ================= UTILS =================
function loadCSS(url) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = url;
  document.head.appendChild(link);
}

function appendMessage(chatMessages, text, sender) {
  const msg = document.createElement('div');
  msg.classList.add('cw-message', sender === 'user' ? 'user' : 'bot');
  msg.innerHTML = text;
  chatMessages.appendChild(msg);
  chatMessages.scrollTop = chatMessages.scrollHeight;
}

// ================= MAIN =================
document.addEventListener('DOMContentLoaded', () => {
  try {
    // Load CSS
    loadCSS(config.cssUrl);

    // Inject chat widget HTML
    document.body.insertAdjacentHTML('beforeend', widgetHTML);
    document.dispatchEvent(new CustomEvent('JSsucks'));

    // ================= DOM REFERENCES =================
    const chatToggle = document.getElementById('cw-chatToggle');
    const chatWidget = document.getElementById('cw-chatWidget');
    const chatForm = document.getElementById('cw-chatForm');
    const chatInput = document.getElementById('cw-chatInput');
    const chatMessages = document.getElementById('cw-chatMessages');
    const statusDiv = document.getElementById('cw-status');

    const chatid = crypto.randomUUID();
    let chatOpened = false;

    // ================= BOT COMMUNICATION =================
    async function sendMessageToBot(messageText) {
      chatWidget.classList.add('active');
      appendMessage(chatMessages, messageText, 'user');
      chatInput.value = '';
      chatInput.focus();

      try {
        const res = await fetch(config.api, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            action: 'sendMessage',
            chatid,
            chatInput: messageText
          })
        });

        const data = await res.json();

        if (data.status) {
          statusDiv.innerHTML = data.status;
          requestAnimationFrame(() => {
            statusDiv.style.maxHeight = statusDiv.scrollHeight + 'px';
            statusDiv.style.padding = '10px';
          });
        } else {
          statusDiv.style.maxHeight = '0';
          statusDiv.style.padding = '0 10px';
        }

        appendMessage(chatMessages, data.output, 'bot');
      } catch (error) {
        appendMessage(chatMessages, 'Fehler beim Verbinden mit dem Server. Bitte versuchen Sie es später erneut.', 'bot');
        console.error(error);
      }
    }

    window.sendMessageToBot = sendMessageToBot;

    // ================= EVENT LISTENERS =================
    chatToggle.addEventListener('click', () => {
      const isVisible = chatWidget.classList.contains('active');
      chatWidget.classList.toggle('active', !isVisible);

      if (!isVisible && !chatOpened) {
        appendMessage(chatMessages, config.preamble, 'bot');
        chatOpened = true;
      }
    });

    chatForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const input = chatInput.value.trim();
      if (input) sendMessageToBot(input);
    });

  } catch (err) {
    console.error('Failed to initialize chat widget:', err);
  }
});