document.addEventListener('DOMContentLoaded', async () => {
  try {
    let id = window.location.hostname || "localhost";
    console.log("Detected domain ID:", id); 
  

    const configUrl = `http://localhost:8000/widget/custom/${id}.json`;
    console.log(configUrl)
    const response = await fetch(configUrl);
    if (!response.ok) throw new Error(`Config not found at ${configUrl}`);

    const config = await response.json();
    const { widgetHTML, preamble, api } = config;

    if (!widgetHTML || !api) {
      console.error('Invalid config format. Expected widgetHTML and api.');
      return;
    }

    // Step 3: Inject HTML into page
    document.body.insertAdjacentHTML('beforeend', widgetHTML);

    // Step 4: Select DOM elements
    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 sessionId = crypto.randomUUID();
    let chatOpened = false;

    // Step 5: Utility to append message
    function appendMessage(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;
    }

    // Step 6: Toggle chat visibility
    chatToggle.addEventListener('click', () => {
      const isVisible = chatWidget.style.display === 'block';
      chatWidget.style.display = isVisible ? 'none' : 'block';

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

    // Step 7: Handle form submission
    chatForm.addEventListener('submit', async (e) => {
      e.preventDefault();
      const input = chatInput.value.trim();
      if (!input) return;

      appendMessage(input, 'user');
      chatInput.value = '';
      chatInput.focus();

      try {
        const res = await fetch(api, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            action: 'sendMessage',
            sessionId,
            chatInput: input
          })
        });
 console.log(res)
        const data = await res.json();

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

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

    // Step 8: Attach pricing buttons if they exist
    function handleBuyClick(buttonId, message) {
      const btn = document.getElementById(buttonId);
      if (!btn) return;

      btn.addEventListener('click', (e) => {
        e.preventDefault();

        if (chatWidget.style.display !== 'block') {
          chatWidget.style.display = 'block';
          if (!chatOpened) {
            appendMessage(preamble, 'bot');
            chatOpened = true;
          }
        }

        appendMessage(message, 'user');

        fetch(api, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            action: 'sendMessage',
            sessionId,
            chatInput: message
          })
        })
          .then(res => res.json())
          .then(data => {
            appendMessage(data.output, 'bot');
          })
          .catch(err => {
            appendMessage('Fehler beim Verbinden mit dem Server. Bitte versuchen Sie es später erneut.', 'bot');
            console.error(err);
          });
      });
    }

    handleBuyClick('buy-3h', 'I want to buy the 3 Hours pack for $450.');
    handleBuyClick('buy-5h', 'I want to buy the 5 Hours pack for $675.');
    handleBuyClick('buy-10h', 'I want to buy the 10 Hours pack for $1200.');
    handleBuyClick('buy-bundle', 'I want to buy the ODOO and N8N bundle for $395 per year.');
  } catch (err) {
    console.error('Failed to initialize chat widget:', err);
  }
});