document.addEventListener('DOMContentLoaded', function () {
  // Créer la popup
  var popup = document.createElement('div');
  popup.id = 'chat-popup';
  popup.style = `
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 400px;
    height: 600px;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    display: none;
    z-index: 10000;
    overflow: hidden;
  `;

  // Ajouter le composant Django
  var djangoApp = document.createElement('django-app');
  djangoApp.id = 'django-app';
  djangoApp.setAttribute('username', 'Vous');
  djangoApp.setAttribute(
    'user-avatar',
    'https://roadbook.golfedumorbihan.bzh/app/dist/golfedumorbihan/addons/woody-addon-roadbook/img/v2/avatar1.png'
  );
  djangoApp.setAttribute('instance', '30581');
  djangoApp.setAttribute('show-header', 'true');
  popup.appendChild(djangoApp);

  // Charger dynamiquement le script
  var script = document.createElement('script');
  script.src = 'https://chat.django.travel/static/webcomponent/webcomponent.js';
  document.body.appendChild(script);

  // Ajouter la popup au DOM
  document.body.appendChild(popup);

  // Ajouter un bouton pour ouvrir/fermer la popup
  var bubble = document.createElement('div');
  bubble.id = 'chat-bubble';
  bubble.style = `
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #007bff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    overflow: hidden;
  `;

  // Ajouter l'icône SVG externe
  var svg = document.createElement('img');
  svg.src = 'https://example.com/path/to/your-icon.svg'; // Remplacez par l'URL de votre fichier SVG
  svg.alt = 'Chat';
  svg.style = 'width: 35px; height: 35px;'; // Ajustez les dimensions si nécessaire
  bubble.appendChild(svg);

  // Ajouter un événement au clic
  bubble.addEventListener('click', function () {
    popup.style.display = popup.style.display === 'none' || popup.style.display === '' ? 'block' : 'none';
  });

  document.body.appendChild(bubble);
});