// Charger la configuration globale de l'API
const script = document.createElement("script");
// script.src = "/wp-content/plugins/ai-builder/config.js";
document.head.appendChild(script);

// Charger CodeMirror pour l'édition de code avec coloration syntaxique
(function loadCodeMirror() {
  // CSS de CodeMirror
  const cmCSS = document.createElement("link");
  cmCSS.rel = "stylesheet";
  cmCSS.href = "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css";
  document.head.appendChild(cmCSS);

  // Thème Material Darker
  const cmTheme = document.createElement("link");
  cmTheme.rel = "stylesheet";
  cmTheme.href = "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/material-darker.min.css";
  document.head.appendChild(cmTheme);

  // Script CodeMirror core
  const cmScript = document.createElement("script");
  cmScript.src = "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js";
  cmScript.onload = () => {
    // Charger le mode CSS
    const cssMode = document.createElement("script");
    cssMode.src = "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/css/css.min.js";
    document.head.appendChild(cssMode);

    // Charger le mode JavaScript
    const jsMode = document.createElement("script");
    jsMode.src = "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/javascript/javascript.min.js";
    document.head.appendChild(jsMode);

    console.info("AI Builder: CodeMirror loaded");
    window.codeMirrorReady = true;
  };
  document.head.appendChild(cmScript);
})();

// Récupération des variables injectées par wp_localize_script (admin)
if (typeof window.aiBuilderVars !== "undefined") {
  // Forcer l'utilisation d'une URL relative pour éviter les erreurs CORS
  window.ajaxurl = '/wp-admin/admin-ajax.php';
  window.aiBuilderNonce = window.aiBuilderVars.nonce;
} else {
  // Fallback pour éviter les erreurs CORS
  window.ajaxurl = '/wp-admin/admin-ajax.php';
  window.aiBuilderNonce = '';
}

document.addEventListener("DOMContentLoaded", () => {
  // Fonction pour vérifier si le widget doit être affiché dans le site editor
  function shouldShowWidgetInSiteEditor() {
    const isSiteEditor = window.location.pathname.includes('site-editor.php');
    if (!isSiteEditor) {
      return true; // Toujours afficher en dehors du site editor
    }

    const urlParams = new URLSearchParams(window.location.search);
    const pParam = urlParams.get('p'); // URLSearchParams.get() décode automatiquement %2F en /

    // Ne pas afficher le widget si :
    // 1. Aucun paramètre p n'est présent
    // 2. p est exactement '/pattern' (page de sélection des patterns)
    if (!pParam || pParam === '/pattern') {
      return false; // Ne pas afficher le chat widget
    }
    // Sinon, si p contient un template/pattern spécifique (ex: /wp_template_part/...), afficher le widget
    return true;
  }

  // Charger le CSS des témoignages
  const style = document.createElement("link");
  style.rel = "stylesheet";
  style.href = "/wp-content/plugins/ai-builder/assets/css/cards.css";
  document.head.appendChild(style);

  document.body.insertAdjacentHTML(
    "beforeend",
    `
      <div id="chat-toggle">AI Builder</div>
      <div id="chat-box">
        <div id="chat-header">
          <div id="chat-header-left">
            <h3>AI Page Builder</h3>
          </div>
          <div id="chat-header-actions">
            <div id="chat-header-tools">
              <button id="js-edit-button" title="Edit JS">
                <span>JS</span>
              </button>
              <button id="css-edit-button" title="Edit CSS">
                <img src="/wp-content/plugins/ai-builder/assets/images/css-edit-icon.png" alt="Edit CSS" width="16" height="16">
              </button>
            </div>
            <button id="headers-footers-button" title="Headers & Footers">
              Header/Footer
            </button>
          </div>
          <button type="button" id="chat-close" class="chat-close" aria-label="Close chat">&times;</button>
        </div>
        <div id="chat-messages"></div>
        <div id="chat-style-picker" class="chat-style-picker">
          <div class="chat-style-picker-head">
            <button type="button" id="chat-style-trigger" class="chat-style-trigger" aria-expanded="false">
              <span id="chat-style-trigger-label">Need inspiration? Try a style</span>
              <span id="chat-style-trigger-chevron" class="chat-style-trigger-chevron" aria-hidden="true">▴</span>
            </button>
            <button type="button" id="chat-style-remove" class="chat-style-remove" hidden aria-label="Remove style">Remove</button>
          </div>
          <div id="chat-style-slider-outer" class="chat-style-slider-outer" hidden>
            <div id="chat-style-slider" class="chat-style-slider" role="listbox" aria-label="Visual styles"></div>
          </div>
        </div>
        <div id="chat-input">
          <div class="chat-input-wrap">
            <textarea placeholder="Create a modern pricing page with 3 plans and call-to-action buttons..." rows="2" maxlength="4000"></textarea>
            <button type="button" id="chat-expand-input" class="chat-expand-input" aria-label="Expand prompt editor" title="Expand"></button>
          </div>
          <div id="chat-char-counter">0/4000</div>
          <div class="chat-actions">
            <button type="button" id="chat-generate-page">Generate page</button>
            <button type="button" id="chat-generate-block" class="chat-generate-block">Generate block</button>
            <button id="chat-undo" style="display: none;">Undo</button>
          </div>
        </div>
      </div>
      <div id="chat-expand-modal" class="chat-expand-modal" hidden aria-hidden="true">
        <button type="button" class="chat-expand-backdrop" id="chat-expand-backdrop" aria-label="Close editor"></button>
        <div class="chat-expand-panel" role="dialog" aria-modal="true" aria-labelledby="chat-expand-title">
          <div class="chat-expand-head">
            <h3 id="chat-expand-title" class="chat-expand-title">Edit prompt</h3>
            <button type="button" class="chat-expand-close" id="chat-expand-close" aria-label="Close">&times;</button>
          </div>
          <textarea id="chat-expand-textarea" class="chat-expand-textarea" maxlength="4000"></textarea>
          <div class="chat-expand-foot">
            <div class="chat-expand-hint"><span id="chat-expand-counter">0/4000</span></div>
            <button type="button" class="chat-expand-done" id="chat-expand-done">Done</button>
          </div>
        </div>
      </div>
      <div id="chat-style-detail-modal" class="chat-style-detail-modal" hidden aria-hidden="true">
        <button type="button" class="chat-style-detail-backdrop" id="chat-style-detail-backdrop" aria-label="Close preview"></button>
        <div class="chat-style-detail-panel" role="dialog" aria-modal="true" aria-labelledby="chat-style-detail-title">
          <button type="button" class="chat-style-detail-close" id="chat-style-detail-close" aria-label="Close">&times;</button>
          <h3 id="chat-style-detail-title" class="chat-style-detail-title"></h3>
          <div class="chat-style-detail-image-wrap">
            <img id="chat-style-detail-img" alt="" />
          </div>
          <p class="chat-style-detail-intro">Prompt sent to the AI when this style is selected:</p>
          <div id="chat-style-detail-prompt" class="chat-style-detail-prompt"></div>
        </div>
      </div>
      <!-- Modale CSS -->
      <div id="css-modal" style="display: none;">
        <div id="css-modal-content">
          <div id="css-modal-header">
            <h3>Edit CSS</h3>
            <button id="css-modal-close">&times;</button>
          </div>
          <div id="css-modal-body">
            <textarea id="css-editor"></textarea>
          </div>
          <div id="css-modal-footer">
            <button id="css-save">Save CSS</button>
            <button id="css-cancel">Cancel</button>
          </div>
        </div>
      </div>
      <!-- Modale JS -->
      <div id="js-modal" style="display: none;">
        <div id="js-modal-content">
          <div id="js-modal-header">
            <h3>Edit JS</h3>
            <button id="js-modal-close">&times;</button>
          </div>
          <div id="js-modal-body">
            <textarea id="js-editor"></textarea>
          </div>
          <div id="js-modal-footer">
            <button id="js-save">Save JS</button>
            <button id="js-cancel">Cancel</button>
          </div>
        </div>
      </div>
      
    `
  );

  const toggle = document.getElementById("chat-toggle");
  const box = document.getElementById("chat-box");
  const messages = document.getElementById("chat-messages");
  const input = document.querySelector("#chat-input textarea");
  const pageGenerateBtn = document.getElementById("chat-generate-page");
  const charCounter = document.getElementById("chat-char-counter");
  const undoBtn = document.getElementById("chat-undo");
  const closeChatBtn = document.getElementById("chat-close");
  const expandBtn = document.getElementById("chat-expand-input");
  const expandModal = document.getElementById("chat-expand-modal");
  const expandBackdrop = document.getElementById("chat-expand-backdrop");
  const expandClose = document.getElementById("chat-expand-close");
  const expandDone = document.getElementById("chat-expand-done");
  const expandTextarea = document.getElementById("chat-expand-textarea");
  const expandCounter = document.getElementById("chat-expand-counter");
  let chatHistory = [];

  // Fonction pour afficher/masquer le widget selon l'URL dans le site editor
  function updateWidgetVisibility() {
    const shouldShow = shouldShowWidgetInSiteEditor();
    if (toggle && box) {
      if (shouldShow) {
        toggle.style.display = 'inline-block';
        // Si le widget était ouvert, le garder ouvert
      } else {
        toggle.style.display = 'none';
        box.style.display = 'none'; // Fermer aussi la boîte si elle était ouverte
      }
    }
  }

  // Mettre à jour la visibilité au chargement initial
  updateWidgetVisibility();

  // Close button (keeps toggle visible)
  if (closeChatBtn && box) {
    closeChatBtn.addEventListener("click", () => {
      box.style.display = "none";
      try { closeExpandModal(); } catch (e) { }
    });
  }

  // Écouter les changements d'URL dans le site editor (navigation JavaScript)
  if (window.location.pathname.includes('site-editor.php')) {
    // Observer les changements d'URL via popstate (navigation navigateur)
    window.addEventListener('popstate', updateWidgetVisibility);

    // Observer les changements d'URL via l'API History (pushState/replaceState)
    const originalPushState = history.pushState;
    const originalReplaceState = history.replaceState;

    history.pushState = function () {
      originalPushState.apply(history, arguments);
      setTimeout(updateWidgetVisibility, 100); // Petit délai pour laisser WordPress mettre à jour l'URL
    };

    history.replaceState = function () {
      originalReplaceState.apply(history, arguments);
      setTimeout(updateWidgetVisibility, 100);
    };

    // Observer les changements dans le DOM (WordPress peut changer l'URL sans utiliser l'API History)
    const urlObserver = new MutationObserver(() => {
      updateWidgetVisibility();
    });

    // Observer les changements dans l'URL de la page
    let lastUrl = location.href;
    setInterval(() => {
      const currentUrl = location.href;
      if (currentUrl !== lastUrl) {
        lastUrl = currentUrl;
        updateWidgetVisibility();
      }
    }, 500); // Vérifier toutes les 500ms
  }

  const MAX_CHAT_CHARS = 4000;
  let isSyncingExpandedPrompt = false;

  // Met à jour le compteur de caractères du chat
  function updateChatCharCounter() {
    if (!input || !charCounter) return;
    const currentLength = input.value.length;
    // Sécurité : tronquer si, pour une raison quelconque, on dépasse la limite
    if (currentLength > MAX_CHAT_CHARS) {
      input.value = input.value.slice(0, MAX_CHAT_CHARS);
    }
    charCounter.textContent = `${input.value.length}/${MAX_CHAT_CHARS}`;
    // If the expanded editor is open, keep it in sync even for programmatic changes.
    if (isExpandModalOpen && typeof isExpandModalOpen === "function" && isExpandModalOpen() && expandTextarea && !isSyncingExpandedPrompt) {
      isSyncingExpandedPrompt = true;
      expandTextarea.value = input.value.slice(0, MAX_CHAT_CHARS);
      updateExpandedCounter();
      isSyncingExpandedPrompt = false;
    }
  }

  function updateExpandedCounter() {
    if (!expandTextarea || !expandCounter) return;
    expandCounter.textContent = `${expandTextarea.value.length}/${MAX_CHAT_CHARS}`;
  }

  function isExpandModalOpen() {
    return !!expandModal && !expandModal.hasAttribute("hidden");
  }

  function openExpandModal() {
    if (!expandModal || !expandTextarea) return;
    expandModal.removeAttribute("hidden");
    expandModal.setAttribute("aria-hidden", "false");
    expandTextarea.value = (input ? input.value : "").slice(0, MAX_CHAT_CHARS);
    updateExpandedCounter();
    // Focus after paint to ensure cursor placement
    window.setTimeout(() => {
      try {
        expandTextarea.focus();
        expandTextarea.selectionStart = expandTextarea.value.length;
        expandTextarea.selectionEnd = expandTextarea.value.length;
      } catch (e) { }
    }, 0);
  }

  function closeExpandModal() {
    if (!expandModal) return;
    expandModal.setAttribute("hidden", "");
    expandModal.setAttribute("aria-hidden", "true");
    // keep focus in the main input for quick send
    try { if (input) input.focus(); } catch (e) { }
  }

  if (input) {
    input.addEventListener("input", updateChatCharCounter);
    input.addEventListener("input", () => {
      if (!isExpandModalOpen() || !expandTextarea) return;
      if (isSyncingExpandedPrompt) return;
      isSyncingExpandedPrompt = true;
      expandTextarea.value = input.value.slice(0, MAX_CHAT_CHARS);
      updateExpandedCounter();
      isSyncingExpandedPrompt = false;
    });
    // Initialiser l'affichage du compteur
    updateChatCharCounter();
  }

  if (expandTextarea) {
    expandTextarea.addEventListener("input", () => {
      if (!input) return;
      if (isSyncingExpandedPrompt) return;
      isSyncingExpandedPrompt = true;
      input.value = expandTextarea.value.slice(0, MAX_CHAT_CHARS);
      updateChatCharCounter();
      updateExpandedCounter();
      isSyncingExpandedPrompt = false;
    });
    expandTextarea.addEventListener("paste", () => setTimeout(() => {
      updateExpandedCounter();
    }, 0));
    updateExpandedCounter();
  }

  if (expandBtn) {
    expandBtn.addEventListener("click", () => {
      openExpandModal();
    });
  }
  if (expandBackdrop) expandBackdrop.addEventListener("click", closeExpandModal);
  if (expandClose) expandClose.addEventListener("click", closeExpandModal);
  if (expandDone) expandDone.addEventListener("click", closeExpandModal);
  document.addEventListener("keydown", (e) => {
    if (e.key !== "Escape") return;
    if (!isExpandModalOpen()) return;
    e.preventDefault();
    closeExpandModal();
  });

  // Indicateur de saisie de l'IA (3 points animés)
  let stopChatGenerationStatusMessages = null;

  function startChatGenerationStatusMessages(indicatorEl) {
    if (!indicatorEl) return function () { };
    const statusEl = indicatorEl.querySelector(".chat-gen-status");
    if (!statusEl) return function () { };

    const steps = [
      { text: "Analyzing your prompt…", ms: 5000 },
      { text: "Designing your page structure…", ms: 7000 },
      { text: "Selecting the best blocks for your content…", ms: 7000 },
      { text: "Generating block content…", ms: 15000 },
      { text: "Crafting your custom CSS styles…", ms: 10000 },
      { text: "Optimizing for responsive layouts…", ms: 5000 },
      { text: "Fine-tuning typography and spacing…", ms: 5000 },
      { text: "Harmonizing your color palette…", ms: 5000 },
      { text: "Adding accessibility attributes…", ms: 4000 },
      { text: "Polishing visual details…", ms: 5000 },
      { text: "Running final quality checks…", ms: 4000 },
      { text: "Almost there, preparing your page…", ms: Infinity },
    ];

    let i = 0;
    const timeouts = [];
    let stopped = false;

    function setTextWithFade(nextText) {
      if (stopped) return;
      statusEl.classList.add("is-fading");
      window.setTimeout(function () {
        if (stopped) return;
        statusEl.textContent = nextText;
        statusEl.classList.remove("is-fading");
      }, 180);
    }

    // initialize immediately
    statusEl.textContent = steps[0].text;
    statusEl.classList.remove("is-fading");

    function scheduleNext() {
      if (stopped) return;
      const step = steps[i];
      if (!step || !Number.isFinite(step.ms)) {
        return;
      }
      const tid = window.setTimeout(function () {
        if (stopped) return;
        i = Math.min(i + 1, steps.length - 1);
        setTextWithFade(steps[i].text);
        scheduleNext();
      }, step.ms);
      timeouts.push(tid);
    }

    scheduleNext();

    return function stop() {
      stopped = true;
      while (timeouts.length) {
        try {
          window.clearTimeout(timeouts.pop());
        } catch (e) { }
      }
    };
  }

  function createTypingIndicator() {
    if (!messages) return null;
    let indicator = document.getElementById("chat-typing-indicator");
    if (!indicator) {
      indicator = document.createElement("div");
      indicator.id = "chat-typing-indicator";
      indicator.innerHTML = `
        <span class="typing-dots" aria-hidden="true">
          <span class="typing-dot"></span>
          <span class="typing-dot"></span>
          <span class="typing-dot"></span>
        </span>
        <span class="chat-gen-status chat-gen-status--init" aria-hidden="true">Analyzing your prompt…</span>
      `;
    }
    return indicator;
  }

  function showTypingIndicator() {
    if (!messages) return;
    const indicator = createTypingIndicator();
    if (!indicator) return;
    if (!messages.contains(indicator)) {
      messages.appendChild(indicator);
    }
    if (typeof stopChatGenerationStatusMessages === "function") {
      stopChatGenerationStatusMessages();
    }
    stopChatGenerationStatusMessages = startChatGenerationStatusMessages(indicator);
  }

  function hideTypingIndicator() {
    if (typeof stopChatGenerationStatusMessages === "function") {
      stopChatGenerationStatusMessages();
    }
    stopChatGenerationStatusMessages = null;
    const indicator = document.getElementById("chat-typing-indicator");
    if (indicator && indicator.parentNode) {
      indicator.parentNode.removeChild(indicator);
    }
  }

  function getChatStorageKey() {
    const prefix = "aiBuilderChatHistory";
    const postId =
      wp?.data?.select("core/editor")?.getCurrentPostId?.() ||
      new URL(window.location.href, window.location.origin).searchParams.get("post") ||
      new URL(window.location.href, window.location.origin).searchParams.get("postId") ||
      new URL(window.location.href, window.location.origin).searchParams.get("p");
    if (postId) {
      return `${prefix}_post_${postId}`;
    }
    const patternName = getPatternName();
    if (patternName) {
      return `${prefix}_pattern_${patternName}`;
    }
    return `${prefix}_${window.location.pathname}`;
  }

  // Fonction pour migrer l'historique de post-new.php vers l'ID du post
  function migrateChatHistoryFromNewPost() {
    if (!window.localStorage) return;

    const prefix = "aiBuilderChatHistory";
    const newPostKey = `${prefix}_/wp-admin/post-new.php`;
    const currentKey = getChatStorageKey();

    // Si on est déjà sur la clé post-new.php, pas besoin de migrer
    if (currentKey === newPostKey) return;

    // Si la clé actuelle est basée sur un ID de post, vérifier s'il y a un historique à migrer
    if (currentKey.startsWith(`${prefix}_post_`)) {
      try {
        const oldHistory = window.localStorage.getItem(newPostKey);
        if (oldHistory) {
          const parsedHistory = JSON.parse(oldHistory);
          if (Array.isArray(parsedHistory) && parsedHistory.length > 0) {
            // Fusionner avec l'historique existant (s'il y en a un)
            const existingHistory = chatHistory.length > 0 ? chatHistory : [];
            chatHistory = [...existingHistory, ...parsedHistory];

            // Sauvegarder avec la nouvelle clé
            window.localStorage.setItem(currentKey, JSON.stringify(chatHistory));

            // Supprimer l'ancienne clé
            window.localStorage.removeItem(newPostKey);

            console.log("AI Builder: Chat history migrated from post-new.php to post ID");

            // Re-rendre l'historique
            renderChatHistory();
          }
        }
      } catch (error) {
        console.warn("AI Builder: Error migrating chat history", error);
      }
    }
  }

  // Éléments CSS
  const cssEditButton = document.getElementById("css-edit-button");
  const cssModal = document.getElementById("css-modal");
  const cssEditor = document.getElementById("css-editor");
  const cssSaveBtn = document.getElementById("css-save");
  const cssCancelBtn = document.getElementById("css-cancel");
  const cssModalClose = document.getElementById("css-modal-close");

  // Éléments JS
  const jsEditButton = document.getElementById("js-edit-button");
  const jsModal = document.getElementById("js-modal");
  const jsEditor = document.getElementById("js-editor");
  const jsSaveBtn = document.getElementById("js-save");
  const jsCancelBtn = document.getElementById("js-cancel");
  const jsModalClose = document.getElementById("js-modal-close");

  // Bouton Header/Footer
  const headersFootersButton = document.getElementById("headers-footers-button");
  if (headersFootersButton) {
    headersFootersButton.addEventListener("click", () => {
      const headersFootersUrl = "/wp-admin/admin.php?page=aibui-headers-footers";
      window.open(headersFootersUrl, "_blank");
    });
  }

  toggle.onclick = () => {
    const isOpening = box.style.display !== "flex";
    box.style.display = box.style.display === "flex" ? "none" : "flex";
    box.style.flexDirection = "column";

    // Scroller vers le bas quand on ouvre le chat
    if (isOpening && messages) {
      // Petit délai pour s'assurer que le DOM est mis à jour
      setTimeout(() => {
        messages.scrollTop = messages.scrollHeight;
      }, 100);
    }
  };

  // Logique pour la modale CSS
  let currentCSSContent = "";
  const AIBUI_COMBINED_PAGE_MARKER = "/* === AI Builder: Page CSS === */";
  const AIBUI_COMBINED_BLOCKS_MARKER = "/* === AI Builder: Blocks CSS === */";

  // Initialiser les variables CSS globales
  window.aiBuilderPageCSS = window.aiBuilderPageCSS || "";
  window.aiBuilderBlockCSS = window.aiBuilderBlockCSS || "";

  function buildCombinedCSSValue(pageCss, blockCss) {
    const p = (pageCss || "").trimEnd();
    const b = (blockCss || "").trimEnd();
    return (
      AIBUI_COMBINED_PAGE_MARKER +
      "\n" +
      p +
      "\n\n" +
      AIBUI_COMBINED_BLOCKS_MARKER +
      "\n" +
      b +
      "\n"
    );
  }

  function splitCombinedCSSValue(combinedText) {
    const raw = String(combinedText || "");
    const iPage = raw.indexOf(AIBUI_COMBINED_PAGE_MARKER);
    const iBlocks = raw.indexOf(AIBUI_COMBINED_BLOCKS_MARKER);

    // If markers are missing, treat as page CSS and preserve existing blocks CSS
    if (iPage === -1 || iBlocks === -1 || iBlocks < iPage) {
      return {
        pageCss: raw,
        blockCss: window.aiBuilderBlockCSS || "",
      };
    }

    const pageStart = iPage + AIBUI_COMBINED_PAGE_MARKER.length;
    const blocksStart = iBlocks + AIBUI_COMBINED_BLOCKS_MARKER.length;
    const pageCss = raw.slice(pageStart, iBlocks).replace(/^\s*\n/, "");
    const blockCss = raw.slice(blocksStart).replace(/^\s*\n/, "");
    return { pageCss, blockCss };
  }

  function saveChatHistory() {
    if (!window.localStorage) return;
    try {
      const key = getChatStorageKey();
      window.localStorage.setItem(key, JSON.stringify(chatHistory));
    } catch (error) {
      console.warn("AI Builder: Unable to persist chat history", error);
    }
  }

  function loadChatHistoryFromStorage() {
    if (!window.localStorage) return;
    try {
      const key = getChatStorageKey();
      console.log("Loading chat history from storage:", key);
      const storedHistory = window.localStorage.getItem(key);
      if (!storedHistory) return;
      const parsedHistory = JSON.parse(storedHistory);
      if (Array.isArray(parsedHistory)) {
        chatHistory = parsedHistory;
      }
    } catch (error) {
      console.warn("AI Builder: Unable to read chat history", error);
    }
  }

  function renderChatHistory() {
    if (!messages) return;
    messages.innerHTML = "";
    chatHistory.forEach(({ type, message }) => {
      addMessage(message, type, { persist: false });
    });
    // Scroller vers le bas après avoir rendu l'historique
    if (chatHistory.length > 0) {
      setTimeout(() => {
        messages.scrollTop = messages.scrollHeight;
      }, 50);
    }
  }

  function getConversationHistoryString(limit = 4) {
    if (!chatHistory.length) return "";
    const recentMessages = chatHistory.slice(-limit);
    const segments = recentMessages.map(({ type, message }) => {
      const label = type === "user" ? "User question" : "AI Response";
      return `${label} : ${message}`;
    });
    return segments.join(". ") + (segments.length ? "." : "");
  }

  // Fonction pour ajouter des messages dans le chat
  function addMessage(message, type = "assistant", options = {}) {
    const { persist = true } = options;
    if (!messages) return;

    // Si un indicateur de saisie est présent, le garder toujours en bas
    const typingIndicator = document.getElementById("chat-typing-indicator");
    if (typingIndicator && typingIndicator.parentNode === messages) {
      messages.removeChild(typingIndicator);
    }

    const messageDiv = document.createElement("div");
    messageDiv.className = type === "assistant" ? "ai-message" : "user-message";

    if (type === "assistant") {
      messageDiv.innerHTML = `${message}`;
    } else {
      messageDiv.innerHTML = `${message}`;
    }

    messages.appendChild(messageDiv);

    // Ré‑ajouter l'indicateur de saisie en bas si nécessaire
    if (typingIndicator) {
      messages.appendChild(typingIndicator);
    }
    messages.scrollTop = messages.scrollHeight;

    if (persist) {
      chatHistory.push({ type, message });
      saveChatHistory();
    }
  }

  loadChatHistoryFromStorage();
  renderChatHistory();

  // Migrer l'historique de post-new.php vers l'ID du post si nécessaire
  migrateChatHistoryFromNewPost();

  // Surveiller les changements d'ID de post (pour les drafts créés après le chargement)
  let lastKnownPostId = null;
  let lastKnownKey = getChatStorageKey();

  function checkPostIdChange() {
    try {
      const currentPostId = wp?.data?.select("core/editor")?.getCurrentPostId?.();
      const currentKey = getChatStorageKey();

      if (currentPostId && currentPostId !== lastKnownPostId) {
        // L'ID a changé, mettre à jour la clé de stockage
        if (currentKey !== lastKnownKey && window.localStorage) {
          // Migrer l'historique vers la nouvelle clé
          const oldHistory = window.localStorage.getItem(lastKnownKey);
          if (oldHistory) {
            try {
              const parsedHistory = JSON.parse(oldHistory);
              if (Array.isArray(parsedHistory) && parsedHistory.length > 0) {
                chatHistory = parsedHistory;
                window.localStorage.setItem(currentKey, oldHistory);
                // Ne pas supprimer l'ancienne clé immédiatement, au cas où
                console.log("AI Builder: Chat history migrated to new post ID:", currentPostId);
                renderChatHistory();
              }
            } catch (e) {
              console.warn("AI Builder: Error migrating history on ID change", e);
            }
          }
        }

        lastKnownPostId = currentPostId;
        lastKnownKey = currentKey;
      } else if (currentKey !== lastKnownKey) {
        // La clé a changé même si l'ID n'a pas changé (changement d'URL)
        lastKnownKey = currentKey;
        // Recharger l'historique avec la nouvelle clé
        loadChatHistoryFromStorage();
        renderChatHistory();
        migrateChatHistoryFromNewPost();
      }
    } catch (e) {
      // Ignorer les erreurs si wp.data n'est pas encore disponible
    }
  }

  // Vérifier l'ID initial
  setTimeout(() => {
    try {
      lastKnownPostId = wp?.data?.select("core/editor")?.getCurrentPostId?.();
    } catch (e) { }
  }, 1000);

  // Surveiller les changements d'ID toutes les 2 secondes
  setInterval(checkPostIdChange, 2000);

  // Fonction pour assurer un minimum de lignes dans CodeMirror
  function ensureMinLines(cm, minLines) {
    const lineCount = cm.lineCount();
    if (lineCount < minLines) {
      const linesToAdd = minLines - lineCount;
      const padding = "\n".repeat(linesToAdd);
      const currentValue = cm.getValue();
      // Ne pas modifier si déjà suffisant
      if (currentValue.split("\n").length < minLines) {
        // On ne modifie pas le contenu, on utilise le CSS pour le padding
      }
    }
    // Refresh pour s'assurer que l'affichage est correct
    cm.refresh();
  }

  // Instance CodeMirror pour CSS
  let cssCodeMirror = null;

  // Initialiser CodeMirror pour CSS quand il est prêt
  function initCSSCodeMirror() {
    if (cssCodeMirror) return;
    if (typeof CodeMirror === "undefined") {
      setTimeout(initCSSCodeMirror, 100);
      return;
    }
    cssCodeMirror = CodeMirror.fromTextArea(cssEditor, {
      mode: "css",
      theme: "material-darker",
      lineNumbers: true,
      lineWrapping: true,
      tabSize: 2,
      indentWithTabs: false,
      autoCloseBrackets: true,
      viewportMargin: Infinity,
    });
    cssCodeMirror.setSize("100%", "400px");
    // Assurer un minimum de 10 lignes visibles
    ensureMinLines(cssCodeMirror, 10);
  }

  // Ouvrir la modale CSS
  cssEditButton.onclick = () => {
    cssModal.style.display = "flex";
    initCSSCodeMirror();
    // Charger le CSS combiné (page + blocks)
    const combined = buildCombinedCSSValue(window.aiBuilderPageCSS || "", window.aiBuilderBlockCSS || "");
    if (cssCodeMirror) {
      cssCodeMirror.setValue(combined);
      setTimeout(() => cssCodeMirror.refresh(), 10);
    } else {
      cssEditor.value = combined;
    }
    setTimeout(() => {
      if (cssCodeMirror) cssCodeMirror.focus();
    }, 100);
  };

  // Fermer la modale CSS
  function closeCSSModal() {
    cssModal.style.display = "none";
  }

  cssModalClose.onclick = closeCSSModal;
  cssCancelBtn.onclick = closeCSSModal;

  // Sauvegarder le CSS
  cssSaveBtn.onclick = async () => {
    const newCSSContent = cssCodeMirror ? cssCodeMirror.getValue() : cssEditor.value;
    const parts = splitCombinedCSSValue(newCSSContent);
    window.aiBuilderPageCSS = parts.pageCss;
    window.aiBuilderBlockCSS = parts.blockCss;

    // Save both storages (replace = true since it's a manual edit)
    await saveCSSInPostMeta(parts.pageCss, "page", true);
    await saveCSSInPostMeta(parts.blockCss, "block", true);

    // Recharger le CSS combiné depuis le serveur après sauvegarde
    await loadCSSFromPostMeta();

    closeCSSModal();
  };

  // Fermer la modale en cliquant à l'extérieur
  cssModal.onclick = (e) => {
    if (e.target === cssModal) {
      closeCSSModal();
    }
  };

  // Global: open CSS modal and scroll/highlight a specific class
  window.openCSSModalForClass = function (classNames) {
    if (!classNames) return;

    const classes = classNames.split(/\s+/).filter(Boolean);
    if (!classes.length) return;

    cssModal.style.display = "flex";
    initCSSCodeMirror();
    const combined = buildCombinedCSSValue(window.aiBuilderPageCSS || "", window.aiBuilderBlockCSS || "");
    if (cssCodeMirror) {
      cssCodeMirror.setValue(combined);
      setTimeout(() => cssCodeMirror.refresh(), 10);
    } else {
      cssEditor.value = combined;
    }

    // Helper: find and highlight all matching rules in the current CodeMirror content
    function findAndHighlight() {
      if (!cssCodeMirror) return;
      cssCodeMirror.refresh();

      // Clear previous highlights
      if (window._cssClassMarks) {
        window._cssClassMarks.forEach((m) => m.clear());
      }
      window._cssClassMarks = [];

      const content = cssCodeMirror.getValue();
      let firstMatchLine = null;

      for (const cls of classes) {
        const selector = "." + cls;
        // Search line by line
        for (let line = 0; line < cssCodeMirror.lineCount(); line++) {
          const lineText = cssCodeMirror.getLine(line);
          if (lineText.includes(selector)) {
            if (firstMatchLine === null) firstMatchLine = line;

            // Find the full CSS rule block: from this selector line to closing }
            let ruleStart = line;
            let ruleEnd = line;

            for (let i = line; i < cssCodeMirror.lineCount(); i++) {
              if (cssCodeMirror.getLine(i).includes("{")) {
                let depth = 0;
                for (let j = i; j < cssCodeMirror.lineCount(); j++) {
                  const lt = cssCodeMirror.getLine(j);
                  for (const ch of lt) {
                    if (ch === "{") depth++;
                    if (ch === "}") depth--;
                  }
                  if (depth <= 0) {
                    ruleEnd = j;
                    break;
                  }
                }
                break;
              }
            }

            const mark = cssCodeMirror.markText(
              { line: ruleStart, ch: 0 },
              { line: ruleEnd, ch: cssCodeMirror.getLine(ruleEnd).length },
              { className: "css-class-highlight" }
            );
            window._cssClassMarks.push(mark);
          }
        }
      }

      if (firstMatchLine !== null) {
        cssCodeMirror.setCursor({ line: firstMatchLine, ch: 0 });
        cssCodeMirror.scrollIntoView({ line: firstMatchLine, ch: 0 }, 120);
      }
    }

    // Wait for CodeMirror to fully render before searching
    setTimeout(findAndHighlight, 300);
  };

  // Logique pour la modale JS
  let currentJSContent = "";
  const AIBUI_COMBINED_PAGE_JS_MARKER = "/* === AI Builder: Page JS === */";
  const AIBUI_COMBINED_BLOCKS_JS_MARKER = "/* === AI Builder: Blocks JS === */";

  // Initialiser les variables JS globales
  window.aiBuilderPageJS = window.aiBuilderPageJS || "";
  window.aiBuilderBlockJS = window.aiBuilderBlockJS || "";

  // Instance CodeMirror pour JS
  let jsCodeMirror = null;

  // Initialiser CodeMirror pour JS quand il est prêt
  function initJSCodeMirror() {
    if (jsCodeMirror) return;
    if (typeof CodeMirror === "undefined") {
      setTimeout(initJSCodeMirror, 100);
      return;
    }
    jsCodeMirror = CodeMirror.fromTextArea(jsEditor, {
      mode: "javascript",
      theme: "material-darker",
      lineNumbers: true,
      lineWrapping: true,
      tabSize: 2,
      indentWithTabs: false,
      autoCloseBrackets: true,
      viewportMargin: Infinity,
    });
    jsCodeMirror.setSize("100%", "400px");
    // Assurer un minimum de 10 lignes visibles
    ensureMinLines(jsCodeMirror, 10);
  }

  // Ouvrir la modale JS
  jsEditButton.onclick = () => {
    jsModal.style.display = "flex";
    initJSCodeMirror();
    const combined = (
      AIBUI_COMBINED_PAGE_JS_MARKER +
      "\n" +
      String(window.aiBuilderPageJS || "").trimEnd() +
      "\n\n" +
      AIBUI_COMBINED_BLOCKS_JS_MARKER +
      "\n" +
      String(window.aiBuilderBlockJS || "").trimEnd() +
      "\n"
    );
    if (jsCodeMirror) {
      jsCodeMirror.setValue(combined);
      setTimeout(() => jsCodeMirror.refresh(), 10);
    } else {
      jsEditor.value = combined;
    }
    setTimeout(() => {
      if (jsCodeMirror) jsCodeMirror.focus();
    }, 100);
  };

  // Fermer la modale JS
  function closeJSModal() {
    jsModal.style.display = "none";
  }

  jsModalClose.onclick = closeJSModal;
  jsCancelBtn.onclick = closeJSModal;

  // Sauvegarder le JS
  jsSaveBtn.onclick = async () => {
    const newJSContent = jsCodeMirror ? jsCodeMirror.getValue() : jsEditor.value;
    const raw = String(newJSContent || "");
    const iPage = raw.indexOf(AIBUI_COMBINED_PAGE_JS_MARKER);
    const iBlocks = raw.indexOf(AIBUI_COMBINED_BLOCKS_JS_MARKER);
    let pageJs = raw;
    let blockJs = window.aiBuilderBlockJS || "";
    if (iPage !== -1 && iBlocks !== -1 && iBlocks > iPage) {
      const pageStart = iPage + AIBUI_COMBINED_PAGE_JS_MARKER.length;
      const blocksStart = iBlocks + AIBUI_COMBINED_BLOCKS_JS_MARKER.length;
      pageJs = raw.slice(pageStart, iBlocks).replace(/^\s*\n/, "");
      blockJs = raw.slice(blocksStart).replace(/^\s*\n/, "");
    }
    window.aiBuilderPageJS = pageJs;
    window.aiBuilderBlockJS = blockJs;

    // Save both storages (replace = true since it's a manual edit)
    await saveJSInPostMeta(pageJs, "page", true);
    await saveJSInPostMeta(blockJs, "block", true);

    // Recharger le JS combiné depuis le serveur après sauvegarde
    await loadJSFromPostMeta();

    closeJSModal();
  };

  // Fermer la modale JS en cliquant à l'extérieur
  jsModal.onclick = (e) => {
    if (e.target === jsModal) {
      closeJSModal();
    }
  };

  function buildBlock(block) {
    if (!block) return null;
    const { blockName, attrs = {}, innerBlocks = [] } = block;
    const nextAttrs = { ...(attrs || {}) };

    // API sometimes returns text payload as `content` (not in attrs).
    // Map it to the common Gutenberg attribute key so text doesn't disappear.
    if (typeof block.content === "string" && typeof nextAttrs.content !== "string") {
      nextAttrs.content = block.content;
    }
    // Common variants some generators use.
    if (typeof block.value === "string" && typeof nextAttrs.value !== "string") {
      nextAttrs.value = block.value;
    }
    if (typeof block.values === "string" && typeof nextAttrs.values !== "string") {
      nextAttrs.values = block.values;
    }

    return wp.blocks.createBlock(
      blockName,
      nextAttrs,
      (innerBlocks || []).map(buildBlock) // récursivité ici
    );
  }

  function getAibuiAccountAdminUrl() {
    const base =
      typeof aiBuilderVars !== "undefined" && aiBuilderVars.adminBaseUrl
        ? String(aiBuilderVars.adminBaseUrl).replace(/\/?$/, "/")
        : "/wp-admin/";
    return base + "admin.php?page=aibui-assistant";
  }

  function getAibuiCreditsAdminUrl() {
    const base =
      typeof aiBuilderVars !== "undefined" && aiBuilderVars.adminBaseUrl
        ? String(aiBuilderVars.adminBaseUrl).replace(/\/?$/, "/")
        : "/wp-admin/";
    return base + "admin.php?page=aibui-credits";
  }

  function aibuiAuthRequiredError(message) {
    const e = new Error(message);
    e.aibuiAuthRequired = true;
    return e;
  }

  /** HTML for in-chat message when the user must sign in / create an AI Builder account */
  function getAccountRequiredChatMessageHtml() {
    const url = getAibuiAccountAdminUrl().replace(/&/g, "&amp;");
    return (
      '<div style="display:flex;flex-direction:column;align-items:center;gap:12px;">' +
      '<div style="line-height:1.55;color:inherit;">You are not signed in to an AI Builder account. Open the account page to sign in or create an account first, then you can use the AI Page Builder.</div>' +
      '<a href="' +
      url +
      '" target="_blank" rel="noopener noreferrer" style="display:inline-block;background:#00b87c;color:#fff;padding:8px 18px;border-radius:8px;text-decoration:none;font-weight:600;transition:background 0.2s;">Go to Account</a>' +
      "</div>"
    );
  }

  /** HTML for in-chat message when the user is out of credits */
  function getCreditsRequiredChatMessageHtml() {
    const url = getAibuiCreditsAdminUrl().replace(/&/g, "&amp;");
    return (
      '<div style="display:flex;flex-direction:column;align-items:center;gap:12px;">' +
      '<div style="line-height:1.55;color:inherit;">You don\'t have enough credits to generate more content. Open the credits page to purchase or manage your credits.</div>' +
      '<a href="' +
      url +
      '" target="_blank" rel="noopener noreferrer" style="display:inline-block;background:#00b87c;color:#fff;padding:8px 18px;border-radius:8px;text-decoration:none;font-weight:600;transition:background 0.2s;">Go to Credits</a>' +
      "</div>"
    );
  }

  // Utilitaire pour récupérer le token JWT via AJAX WordPress
  async function getJwtToken() {
    if (!window.ajaxurl || !window.aiBuilderNonce) {
      console.warn("AI Builder: Missing AJAX URL or nonce");
      showAIMissingAccountToast();
      throw aibuiAuthRequiredError("Missing AJAX URL or nonce");
    }

    let timeoutId;
    try {
      // Create AbortController for timeout
      const controller = new AbortController();
      timeoutId = setTimeout(() => controller.abort(), 20000); // 20 second timeout

      const res = await fetch(window.ajaxurl, {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: `action=aibui_get_token&nonce=${window.aiBuilderNonce}`,
        signal: controller.signal,
      });

      clearTimeout(timeoutId);

      if (!res.ok) {
        // Handle 500 errors specifically
        if (res.status === 500) {
          throw new Error("Server error: The request took too long or encountered an error. Please try again.");
        }
        console.log('res.status: ', res.status);
        if (res.status === 401 || res.status === 403) {
          showAIMissingAccountToast();
          throw aibuiAuthRequiredError(
            "You need to have an account and be logged in to use AI features."
          );
        }
        throw new Error(`HTTP error! status: ${res.status}`);
      }

      const data = await res.json();
      console.log("token res: ", data);
      if (data.success && data.data.token) {
        return data.data.token;
      }
      showAIMissingAccountToast();
      throw aibuiAuthRequiredError(
        "You need to have an account and be logged in to use AI features."
      );
    } catch (error) {
      if (timeoutId) {
        clearTimeout(timeoutId);
      }
      console.error("Error fetching JWT token:", error);

      // Handle timeout/abort errors
      if (error.name === 'AbortError' || error.message.includes('timeout')) {
        throw new Error("Request timeout: The server took too long to respond. Please check your connection and try again.");
      }

      if (error.aibuiAuthRequired) {
        throw error;
      }

      showAIMissingAccountToast();
      throw error;
    }
  }

  // Fonction utilitaire pour afficher un toast UX si l'utilisateur n'a pas de compte/connexion
  function showAIMissingAccountToast() {
    if (document.getElementById("ai-missing-account-toast")) return; // Pas de doublon
    const accountUrl = getAibuiAccountAdminUrl();
    const toast = document.createElement("div");
    toast.id = "ai-missing-account-toast";
    toast.innerHTML = `
      <div style="display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:420px;width:90vw;background:#23272f;color:#fff;padding:18px 24px;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,0.18);font-size:16px;position:fixed;left:50%;bottom:32px;transform:translateX(-50%);z-index:99999;flex-wrap:wrap;">
        <span style='flex:1 1 200px;min-width:180px;'>You need to have an account and be logged in to use AI features.</span>
        <a href="${accountUrl}" style='background:#00b87c;color:#fff;padding:8px 18px;border-radius:8px;text-decoration:none;font-weight:600;transition:background 0.2s;' target='_blank' rel="noopener noreferrer">Go to Account</a>
      </div>
    `;
    document.body.appendChild(toast);
    setTimeout(() => {
      if (toast.parentNode) toast.parentNode.removeChild(toast);
    }, 8000);
  }

  function showNotEnoughCreditsToast() {
    if (document.getElementById("ai-missing-account-toast")) return; // Pas de doublon
    const toast = document.createElement("div");
    toast.id = "ai-missing-account-toast";
    toast.innerHTML = `
      <div style="display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:420px;width:90vw;background:#23272f;color:#fff;padding:18px 24px;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,0.18);font-size:16px;position:fixed;left:50%;bottom:32px;transform:translateX(-50%);z-index:99999;flex-wrap:wrap;">
        <span style='flex:1 1 200px;min-width:180px;'>You don't have enough credits.</span>
        <a href='/wp-admin/admin.php?page=aibui-credits' style='background:#00b87c;color:#fff;padding:8px 18px;border-radius:8px;text-decoration:none;font-weight:600;transition:background 0.2s;' target='_blank'>Go to credits page</a>
      </div>
    `;
    document.body.appendChild(toast);
    setTimeout(() => {
      if (toast.parentNode) toast.parentNode.removeChild(toast);
    }, 8000);
  }

  // Fonction pour afficher le nombre de crédits sous le titre ET sous le bouton
  function updateCreditsDisplay(credits) {
    // Sous le titre du chat
    let creditsElem = document.getElementById("ai-credits-display");
    if (!creditsElem) {
      const header = document.querySelector("#chat-header-left");
      if (header) {
        creditsElem = document.createElement("div");
        creditsElem.id = "ai-credits-display";
        creditsElem.style.fontSize = "12px";
        creditsElem.style.color = "#cccccc";
        creditsElem.style.marginTop = "2px";
        creditsElem.style.textAlign = "left";
        header.appendChild(creditsElem);
      }
    }
    if (creditsElem) {
      creditsElem.textContent =
        credits !== null ? `${credits} credits left` : "- credits left";
    }

    // À l'intérieur du bouton toggle
    const toggle = document.getElementById("chat-toggle");
    if (toggle) {
      let span = toggle.querySelector(".ai-credits-inside");
      if (!span) {
        span = document.createElement("span");
        span.className = "ai-credits-inside";
        span.style.display = "block";
        span.style.fontSize = "10px";
        span.style.color = "#cccccc";
        span.style.marginTop = "0px";
        span.style.textAlign = "center";
        toggle.appendChild(span);
      }
      span.textContent = credits !== null ? `${credits} credits` : "- credits";
    }
  }

  window.updateAICreditsDisplay = updateCreditsDisplay;

  // Fonction pour charger les crédits utilisateur
  async function loadUserCredits() {
    let timeoutId;
    try {
      const jwtToken = await getJwtToken();

      // Create AbortController for timeout
      const controller = new AbortController();
      timeoutId = setTimeout(() => controller.abort(), 20000); // 20 second timeout

      const res = await fetch(window.config.apiUrl + "/user/profile", {
        method: "GET",
        headers: {
          Authorization: `Bearer ${jwtToken}`,
          "Content-Type": "application/json",
        },
        signal: controller.signal,
      });

      clearTimeout(timeoutId);

      if (!res.ok) {
        if (res.status === 500) {
          throw new Error("Server error: The request took too long or encountered an error.");
        }
        throw new Error("Failed to load profile");
      }

      const data = await res.json();
      const aiCredits = data.user?.aiCredits || {};
      const totalCredits =
        (aiCredits.onAccountCreation || 0) +
        (aiCredits.monthlySubscription || 0) +
        (aiCredits.paid || 0);
      console.log("Credits loaded:", totalCredits, "from:", aiCredits);
      updateCreditsDisplay(totalCredits);
    } catch (e) {
      if (timeoutId) {
        clearTimeout(timeoutId);
      }
      console.error("Error loading credits:", e);

      // Handle timeout/abort errors
      if (e.name === 'AbortError' || e.message.includes('timeout')) {
        console.warn("Credits loading timeout - will retry on next action");
      }

      updateCreditsDisplay(null);
    }
  }

  // Retourne la liste des documents cibles pour l'injection :
  //  - le document principal de l'admin
  //  - le(s) document(s) à l'intérieur des iframes du canvas d'édition
  //    (Site Editor, Post Editor iso-mode, etc.).
  // Certains navigateurs ou modes peuvent retourner null pour contentDocument
  // (sécurité cross-origin) : on filtre silencieusement.
  function getEditorTargetDocuments() {
    const docs = [];
    try { if (document) docs.push(document); } catch (e) { /* ignore */ }
    try {
      const selectors = [
        'iframe[name="editor-canvas"]',
        'iframe.editor-canvas__iframe',
        '.block-editor-iframe__container iframe',
        '.edit-post-visual-editor iframe',
        '.edit-site-visual-editor iframe',
        '.interface-interface-skeleton__content iframe',
      ];
      const iframes = document.querySelectorAll(selectors.join(','));
      iframes.forEach((iframe) => {
        try {
          const doc = iframe.contentDocument;
          if (doc && doc.head) docs.push(doc);
        } catch (e) { /* ignore */ }
      });
    } catch (e) { /* ignore */ }
    return docs;
  }

  // Signature légère d'un contenu pour détecter les changements sans recalcul.
  function computeContentSignature(content) {
    const s = String(content == null ? '' : content);
    return s.length + ':' + s.slice(0, 32);
  }

  // Injecte ou met à jour un <style> donné dans tous les documents cibles.
  // Utilise data-aibui-sig pour éviter les write inutiles (qui ne changent
  // rien visuellement mais déclenchent des mutations du DOM).
  function upsertStyleInAllDocs(styleId, cssContent) {
    const sig = computeContentSignature(cssContent);
    getEditorTargetDocuments().forEach((doc) => {
      try {
        let el = doc.getElementById(styleId);
        if (el && el.getAttribute('data-aibui-sig') === sig) return;
        if (!el) {
          el = doc.createElement('style');
          el.id = styleId;
          el.type = 'text/css';
          (doc.head || doc.documentElement).appendChild(el);
        }
        el.textContent = cssContent || '';
        el.setAttribute('data-aibui-sig', sig);
      } catch (e) { /* ignore single doc failures */ }
    });
  }

  // Injecte ou met à jour un <script> donné dans tous les documents cibles.
  // data-aibui-sig évite la ré-exécution du code lorsque rien n'a changé
  // (important : le MutationObserver observe le DOM et pourrait sinon
  // rejouer le script à chaque micro-changement de l'éditeur).
  function upsertScriptInAllDocs(scriptId, jsContent) {
    const sig = computeContentSignature(jsContent);
    getEditorTargetDocuments().forEach((doc) => {
      try {
        const previous = doc.getElementById(scriptId);
        if (previous && previous.getAttribute('data-aibui-sig') === sig) return;
        if (previous && previous.parentNode) {
          previous.parentNode.removeChild(previous);
        }
        if (!jsContent) return;
        const script = doc.createElement('script');
        script.id = scriptId;
        script.type = 'text/javascript';
        script.setAttribute('data-aibui-sig', sig);
        // IIFE + try/catch pour isoler les erreurs du code utilisateur.
        script.textContent = '(function(){ try { '
          + jsContent
          + ' } catch(e){ if (window.console) console.error("ai-builder editor JS error", e); } })();';
        (doc.head || doc.documentElement).appendChild(script);
      } catch (e) { /* ignore single doc failures */ }
    });
  }

  // Mémoriser les derniers contenus pour permettre la ré-injection automatique
  // quand un nouvel iframe est créé (changement de template dans le Site Editor).
  let lastInjectedEditorCSS = '';
  let lastInjectedEditorJS = '';

  function injectCSSInEditor(cssContent) {
    lastInjectedEditorCSS = cssContent || '';
    upsertStyleInAllDocs('ai-builder-editor-css', lastInjectedEditorCSS);
  }

  // Fonction pour injecter le CSS dans le frontend
  function injectCSSInFrontend(cssContent) {
    // Créer un style tag pour le frontend
    const styleId = "ai-builder-frontend-css";
    let styleElement = document.getElementById(styleId);

    if (!styleElement) {
      styleElement = document.createElement("style");
      styleElement.id = styleId;
      styleElement.type = "text/css";
      document.head.appendChild(styleElement);
    }

    styleElement.textContent = cssContent;
  }

  // Fonction pour sauvegarder le CSS dans les meta du post via AJAX WordPress
  async function saveCSSInPostMeta(cssContent, cssType = "page", replace = false) {
    try {
      const postId = (typeof getEditorTargetId === 'function')
        ? getEditorTargetId()
        : wp.data.select("core/editor").getCurrentPostId();
      if (!postId) return;

      const formData = new FormData();
      formData.append("action", "aibui_save_post_css");
      formData.append("nonce", window.aiBuilderNonce);
      formData.append("post_id", postId);
      formData.append("css_content", cssContent);
      formData.append("css_type", cssType);
      formData.append("replace", replace ? "1" : "0");

      await fetch(window.ajaxurl, {
        method: "POST",
        body: formData,
      });
    } catch (err) {
      console.error("Error saving CSS to post meta:", err);
    }
  }

  function injectJSInEditor(jsContent) {
    lastInjectedEditorJS = jsContent || '';
    upsertScriptInAllDocs('ai-builder-editor-js', lastInjectedEditorJS);
  }

  // Observe l'apparition / changement d'iframes dans l'admin pour ré-injecter
  // automatiquement le CSS / JS dès que l'éditeur (re)crée son canvas.
  (function setupEditorReinjectionObserver() {
    try {
      const observe = () => {
        const observer = new MutationObserver(() => {
          // On attend un micro-délai pour laisser l'iframe charger son document.
          clearTimeout(window.__aiBuilderReinjectTimer);
          window.__aiBuilderReinjectTimer = setTimeout(() => {
            try {
              if (lastInjectedEditorCSS) {
                upsertStyleInAllDocs('ai-builder-editor-css', lastInjectedEditorCSS);
              }
              if (lastInjectedEditorJS) {
                upsertScriptInAllDocs('ai-builder-editor-js', lastInjectedEditorJS);
              }
            } catch (err) { /* ignore */ }
          }, 250);
        });
        observer.observe(document.body, { childList: true, subtree: true });
      };
      if (document.body) {
        observe();
      } else {
        document.addEventListener('DOMContentLoaded', observe, { once: true });
      }
    } catch (e) { /* ignore */ }
  })();

  // Fonction pour injecter le JS dans le frontend
  function injectJSInFrontend(jsContent) {
    // Créer un script tag pour le frontend
    const scriptId = "ai-builder-frontend-js";
    let scriptElement = document.getElementById(scriptId);

    if (!scriptElement) {
      scriptElement = document.createElement("script");
      scriptElement.id = scriptId;
      scriptElement.type = "text/javascript";
      document.head.appendChild(scriptElement);
    }

    scriptElement.textContent = jsContent;
  }

  // Fonction pour sauvegarder le JS dans les meta du post via AJAX WordPress
  async function saveJSInPostMeta(jsContent, jsType = "page", replace = false) {
    try {
      const postId = (typeof getEditorTargetId === 'function')
        ? getEditorTargetId()
        : wp.data.select("core/editor").getCurrentPostId();
      if (!postId) return;

      const formData = new FormData();
      formData.append("action", "aibui_save_post_js");
      formData.append("nonce", window.aiBuilderNonce);
      formData.append("post_id", postId);
      formData.append("js_content", jsContent);
      formData.append("js_type", jsType);
      formData.append("replace", replace ? "1" : "0");

      await fetch(window.ajaxurl, {
        method: "POST",
        body: formData,
      });
    } catch (err) {
      console.error("Error saving JS to post meta:", err);
    }
  }

  // Fonction pour charger le JS depuis les meta du post via AJAX WordPress
  async function loadJSFromPostMeta() {
    try {
      const postId = (typeof getEditorTargetId === 'function')
        ? getEditorTargetId()
        : wp.data.select("core/editor").getCurrentPostId();
      if (!postId) return;

      const formData = new FormData();
      formData.append("action", "aibui_get_post_js");
      formData.append("nonce", window.aiBuilderNonce);
      formData.append("post_id", postId);

      const res = await fetch(window.ajaxurl, {
        method: "POST",
        body: formData,
      });

      if (res.ok) {
        const data = await res.json();
        if (data.success && data.data) {
          // Stocker les JS séparément
          window.aiBuilderPageJS = data.data.pageJS || "";
          window.aiBuilderBlockJS = data.data.blockJS || "";

          // Utiliser le JS combiné pour l'affichage
          const combinedJS = data.data.combinedJS || "";
          currentJSContent = combinedJS;

          // Injecter le JS dans l'éditeur et le frontend
          injectJSInEditor(combinedJS);
          injectJSInFrontend(combinedJS);

          // Les boutons JS et CSS sont toujours visibles

          console.log(
            "JS loaded - Page:",
            window.aiBuilderPageJS.length,
            "chars, Blocks:",
            window.aiBuilderBlockJS.length,
            "chars"
          );
        }
      }
    } catch (err) {
      console.error("Error loading JS from post meta:", err);
    }
  }



  // Set the meta description field by id once (no retry)
  async function setMetaDescriptionField(value) {
    const el = document.getElementById('aibui_meta_description_field');
    if (!el) return false;
    el.value = value || '';
    const evt = new Event('input', { bubbles: true });
    el.dispatchEvent(evt);
    return true;
  }

  // Update post title locally in the editor
  function updatePostTitle(title) {
    if (!title) return false;
    try {
      // Update the title in WordPress editor state
      wp.data.dispatch('core/editor').editPost({ title: title });
      return true;
    } catch (err) {
      console.error('Error updating post title:', err);
      return false;
    }
  }

  // Mark page as created via AI
  async function markPageAsAICreated() {
    try {
      const postId =
        wp?.data?.select("core/editor")?.getCurrentPostId?.() ||
        new URL(window.location.href, window.location.origin).searchParams.get("post") ||
        new URL(window.location.href, window.location.origin).searchParams.get("postId") ||
        new URL(window.location.href, window.location.origin).searchParams.get("p");

      if (!postId) {
        console.log("No post ID found to mark as AI-created");
        return;
      }

      const formData = new FormData();
      formData.append("action", "aibui_mark_ai_created");
      formData.append("post_id", postId);
      formData.append("nonce", aiBuilderVars.nonce);

      const response = await fetch(ajaxurl, {
        method: "POST",
        body: formData,
      });

      const result = await response.json();
      if (result.success) {
        console.log("Page marked as AI-created");
        // Injecter le CSS admin immédiatement après marquage
        injectAICreatedAdminCSS();
      } else {
        console.error("Failed to mark page as AI-created:", result);
      }
    } catch (error) {
      console.error("Error marking page as AI-created:", error);
    }
  }

  // Injecter le CSS admin pour masquer le titre
  function injectAICreatedAdminCSS() {
    // Vérifier si le style existe déjà
    if (document.getElementById("aibui-hide-ai-title-admin")) {
      return;
    }

    const style = document.createElement("style");
    style.id = "aibui-hide-ai-title-admin";
    style.type = "text/css";
    style.textContent = `
      /* Masquer le titre dans l'éditeur Gutenberg */
      .editor-post-title,
      .editor-post-title__input,
      .edit-post-visual-editor__post-title-wrapper,
      .editor-post-title__block,
      .wp-block[data-type="core/post-title"],
      .block-editor-block-list__block[data-type="core/post-title"],
      .wp-block-post-title.editor-post-title__block {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
      }
      
      .edit-post-visual-editor__post-title-wrapper {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
      }
    `;
    document.head.appendChild(style);
  }

  // Save meta description in post meta via WordPress AJAX
  async function saveMetaDescriptionInPostMeta(metaDesc) {
    try {
      const postId = wp.data.select("core/editor").getCurrentPostId();
      const formData = new FormData();
      formData.append("action", "aibui_save_meta_description");
      formData.append("nonce", window.aiBuilderNonce);
      formData.append("post_id", postId);
      formData.append("meta_desc", metaDesc || "");
      await fetch(window.ajaxurl, { method: "POST", body: formData });
    } catch (err) {
      console.error("Error saving meta description:", err);
    }
  }

  // Attendre que l'ID du post soit disponible (l'éditeur met un peu de temps à charger)
  async function waitForCurrentPostId(maxAttempts = 50, intervalMs = 100) {
    for (let attemptIndex = 0; attemptIndex < maxAttempts; attemptIndex++) {
      try {
        const postId = wp?.data?.select("core/editor")?.getCurrentPostId?.();
        if (postId) return postId;
      } catch (e) { }
      await new Promise((resolve) => setTimeout(resolve, intervalMs));
    }
    return null;
  }

  // Récupérer l'identifiant cible pour la sauvegarde / lecture du CSS et du JS.
  // - Pour une page / article : ID numérique du post.
  // - Pour un template ou un template part (Site Editor) : chaîne composite
  //   "theme//slug" (ex : "twentytwentyfive//404") qui est gérée côté serveur
  //   par AIBUI_Template_Assets.
  // Cette fonction est robuste : tombe en sécurité sur null si aucune source
  // fiable n'est disponible, les consommateurs doivent vérifier la valeur.
  function getEditorTargetId() {
    const isSiteEditor = (typeof window !== 'undefined')
      && typeof window.location !== 'undefined'
      && typeof window.location.pathname === 'string'
      && window.location.pathname.indexOf('site-editor.php') !== -1;

    // 1) Dans le Site Editor : essayer d'obtenir la clé "theme//slug".
    if (isSiteEditor) {
      try {
        const editSite = wp && wp.data && typeof wp.data.select === 'function'
          ? wp.data.select('core/edit-site')
          : null;
        if (editSite && typeof editSite.getEditedPostId === 'function') {
          const edited = editSite.getEditedPostId();
          if (typeof edited === 'string' && edited.indexOf('//') !== -1) {
            return edited;
          }
        }
      } catch (e) { /* ignore */ }

      // Fallback : lire les paramètres URL. WordPress encode la barre en %2F ;
      // URLSearchParams décode automatiquement, donc on obtient le bon texte.
      try {
        const url = new URL(window.location.href);
        const rawP = url.searchParams.get('p') || url.searchParams.get('postId');
        if (typeof rawP === 'string' && rawP.indexOf('//') !== -1) {
          // Format possible : "/wp_template/theme//slug" → on retire le préfixe de type.
          const stripped = rawP.replace(/^\/(wp_template|wp_template_part|pattern)\//, '');
          if (stripped.indexOf('//') !== -1) return stripped;
        }
      } catch (e) { /* ignore */ }
    }

    // 2) Cas standard : ID numérique fourni par core/editor.
    try {
      const id = wp && wp.data && typeof wp.data.select === 'function'
        ? wp.data.select('core/editor').getCurrentPostId()
        : null;
      if (id) return id;
    } catch (e) { /* ignore */ }

    return null;
  }
  // Exposer le helper pour d'autres scripts du plugin si besoin.
  try { window.aiBuilderGetEditorTargetId = getEditorTargetId; } catch (e) { /* ignore */ }

  // Fonction pour charger le CSS depuis les meta du post via AJAX WordPress
  async function loadCSSFromPostMeta() {
    try {
      const postId = getEditorTargetId();
      if (!postId) return;

      const formData = new FormData();
      formData.append("action", "aibui_get_post_css");
      formData.append("nonce", window.aiBuilderNonce);
      formData.append("post_id", postId);

      const res = await fetch(window.ajaxurl, {
        method: "POST",
        body: formData,
      });

      if (res.ok) {
        const data = await res.json();
        if (data.success && data.data) {
          // Stocker les CSS séparément
          window.aiBuilderPageCSS = data.data.pageCss || "";
          window.aiBuilderBlockCSS = data.data.blockCss || "";

          // Utiliser le CSS combiné pour l'affichage
          const combinedCSS = data.data.combinedCss || "";
          currentCSSContent = combinedCSS;

          // Injecter le CSS dans l'éditeur et le frontend
          injectCSSInEditor(combinedCSS);
          injectCSSInFrontend(combinedCSS);

          // Les boutons CSS et JS sont toujours visibles

          console.log(
            "CSS loaded - Page:",
            window.aiBuilderPageCSS.length,
            "chars, Blocks:",
            window.aiBuilderBlockCSS.length,
            "chars"
          );
        }
      }
    } catch (err) {
      console.error("Error loading CSS from post meta:", err);
    }
  }



  // Initialiser le chargement du CSS une fois que l'ID du post est prêt
  (async function initEditorCssLoad() {
    // Vérifier que les variables AJAX sont disponibles
    if (!window.ajaxurl || !window.aiBuilderNonce) {
      console.warn("AI Builder: AJAX variables not available, skipping CSS load");
      return;
    }

    // Attendre un peu pour que WordPress soit complètement chargé
    await new Promise(resolve => setTimeout(resolve, 1000));

    const postId = await waitForCurrentPostId();
    if (postId) {
      loadCSSFromPostMeta();
      loadJSFromPostMeta();
    } else {
      console.warn(
        "AI Builder: unable to resolve current post ID to load CSS/JS."
      );
    }
  })();

  /**
   * Build a compact structural summary of the current page for AI context.
   *
   * The summary describes the existing blocks, custom CSS and JS so the AI
   * understands what is already on the page without receiving every raw byte.
   * The result is capped at PAGE_CONTEXT_MAX_CHARS characters so the token
   * overhead remains predictable.
   *
   * Format (plain text, easy to read by the LLM):
   *
   *   Page title: <title>
   *   Post type: page | post | ...
   *   Blocks (N total):
   *   [0] core/group (align:full) > core/heading(1): "Hero title" | core/paragraph: "Subtitle…"
   *   [1] core/columns > col0: core/image | col1: core/paragraph: "Team member…"
   *   ...
   *   Custom CSS: yes (<N> chars) | none
   *   Custom JS: yes (<N> chars) | none
   */
  const PAGE_CONTEXT_MAX_CHARS = 3000;

  function buildPageContext() {
    try {
      if (
        !window.wp ||
        !wp.data ||
        !wp.data.select("core/block-editor") ||
        !wp.data.select("core/editor")
      ) {
        return "";
      }

      const title =
        wp.data.select("core/editor").getEditedPostAttribute("title") || "";
      const postType =
        wp.data.select("core/editor").getCurrentPostType() || "";
      const blocks = wp.data.select("core/block-editor").getBlocks() || [];

      // --- CSS hint (length only, not the full content) ---
      const cssLength =
        (window.aiBuilderPageCSS ? window.aiBuilderPageCSS.length : 0) +
        (window.aiBuilderBlockCSS ? window.aiBuilderBlockCSS.length : 0);

      // --- JS hint: length + function names ---
      const jsStyleEl = document.getElementById("ai-builder-editor-js");
      const jsSource = jsStyleEl ? (jsStyleEl.textContent || "") : "";
      const jsLength = jsSource.length;

      // Extract declared function names (named functions, arrow/const/let/var assignments)
      const jsFunctionNames = [];
      if (jsLength > 0) {
        const fnPatterns = [
          /\bfunction\s+([A-Za-z_$][A-Za-z0-9_$]*)\s*\(/g,
          /\b(?:const|let|var)\s+([A-Za-z_$][A-Za-z0-9_$]*)\s*=\s*(?:async\s+)?(?:function|\([^)]*\)\s*=>|\w+\s*=>)/g,
        ];
        for (const re of fnPatterns) {
          let m;
          while ((m = re.exec(jsSource)) !== null) {
            if (!jsFunctionNames.includes(m[1])) {
              jsFunctionNames.push(m[1]);
            }
          }
        }
      }

      // --- Block tree summariser ---
      function summariseBlock(block, depth) {
        if (!block || !block.name) return "";

        const name = block.name; // e.g. "core/heading"
        const attrs = block.attributes || {};

        // Extract the most useful attributes compactly
        const attrParts = [];
        if (attrs.level) attrParts.push("h" + attrs.level);
        if (attrs.align) attrParts.push("align:" + attrs.align);
        if (attrs.textAlign) attrParts.push("textAlign:" + attrs.textAlign);
        if (attrs.layout && attrs.layout.type)
          attrParts.push("layout:" + attrs.layout.type);
        if (attrs.className) attrParts.push("." + attrs.className);
        if (attrs.style && attrs.style.color && attrs.style.color.background)
          attrParts.push("bg:" + attrs.style.color.background);

        // Extra detail for core/cover: overlay color and gradient
        if (name === "core/cover") {
          if (attrs.customGradient) {
            attrParts.push("gradient:" + attrs.customGradient);
          } else if (attrs.gradient) {
            attrParts.push("gradient-slug:" + attrs.gradient);
          }
          if (attrs.customOverlayColor) {
            attrParts.push("overlay:" + attrs.customOverlayColor);
          } else if (attrs.overlayColor) {
            attrParts.push("overlay-slug:" + attrs.overlayColor);
          }
          if (typeof attrs.dimRatio === "number") {
            attrParts.push("dim:" + attrs.dimRatio + "%");
          }
        }

        const attrStr = attrParts.length ? "(" + attrParts.join(",") + ")" : "";

        // Extract visible text content (first 80 chars)
        let textHint = "";
        if (attrs.content) {
          const raw = String(attrs.content).replace(/<[^>]*>/g, "");
          if (raw.trim()) textHint = ': "' + raw.trim().slice(0, 80) + '"';
        } else if (attrs.value) {
          const raw = String(attrs.value).replace(/<[^>]*>/g, "");
          if (raw.trim()) textHint = ': "' + raw.trim().slice(0, 80) + '"';
        } else if (attrs.text) {
          const raw = String(attrs.text).replace(/<[^>]*>/g, "");
          if (raw.trim()) textHint = ': "' + raw.trim().slice(0, 80) + '"';
        } else if (attrs.alt) {
          textHint = ': [img alt="' + String(attrs.alt).slice(0, 60) + '"]';
        } else if (attrs.url && name === "core/image") {
          textHint = ": [image]";
        }

        const shortName = name.replace("core/", "").replace("ai-builder/", "aibui/");
        let line = shortName + attrStr + textHint;

        // Recurse into inner blocks (max depth 3 to stay compact)
        if (
          Array.isArray(block.innerBlocks) &&
          block.innerBlocks.length > 0 &&
          depth < 3
        ) {
          const children = block.innerBlocks
            .map((b) => summariseBlock(b, depth + 1))
            .filter(Boolean)
            .join(" | ");
          if (children) line += " > " + children;
        }

        return line;
      }

      // Build block list lines
      const blockLines = blocks.map((block, idx) => {
        const summary = summariseBlock(block, 0);
        return "[" + idx + "] " + summary;
      });

      const cssHint =
        cssLength > 0 ? "yes (" + cssLength + " chars)" : "none";
      let jsHint = "none";
      if (jsLength > 0) {
        jsHint = "yes (" + jsLength + " chars)";
        if (jsFunctionNames.length > 0) {
          jsHint += " — functions: " + jsFunctionNames.join(", ");
        }
      }

      let context =
        "Page title: " +
        title +
        "\n" +
        "Post type: " +
        postType +
        "\n" +
        "Blocks (" +
        blocks.length +
        " total):\n" +
        blockLines.join("\n") +
        "\n" +
        "Custom CSS: " +
        cssHint +
        "\n" +
        "Custom JS: " +
        jsHint;

      // Cap to PAGE_CONTEXT_MAX_CHARS
      if (context.length > PAGE_CONTEXT_MAX_CHARS) {
        context =
          context.slice(0, PAGE_CONTEXT_MAX_CHARS - 40) +
          "\n[... context truncated at " +
          PAGE_CONTEXT_MAX_CHARS +
          " chars]";
      }

      console.log("context: ", context);

      return context;
    } catch (e) {
      console.warn("AI Builder: could not build page context", e);
      return "";
    }
  }

  function getPatternName() {
    try {
      const isPatternEditor = (typeof aiBuilderVars !== 'undefined' && !!aiBuilderVars.isPatternEditor) || window.location.pathname.includes('site-editor.php');
      if (!isPatternEditor) return '';
      const url = new URL(window.location.href);
      const p = url.searchParams.get('p') || url.searchParams.get('postId');
      if (!p) return '';
      const decoded = decodeURIComponent(p);
      // Use correct WordPress terminology: template part (header/footer)
      return decoded;
    } catch (e) {
      return '';
    }
  }

  // --- Visual style presets for the chat widget ---
  // Style preview images live in WordPress Media Library (same folder / filenames).
  const CHAT_STYLES_CDN =
    "https://website-ai-builder.com/wp-content/uploads/2026/04/";

  const CHAT_VISUAL_STYLES = [
    {
      id: "neobrutalism",
      label: "Neobrutalism",
      image: CHAT_STYLES_CDN + "neobrutalism.jpg",
      prompt: `Build a SaaS landing page in strict neobrutalism. Every card, button, and image has a 3px solid black border plus a hard offset shadow (6px 6px, no blur, solid black). Flat fills only, no gradients. Palette: bright yellow #FFD700, hot pink #FF6B9D, electric blue #4361EE on cream #FAF9F6. Massive bold sans-serif headlines in Archivo Black or Space Grotesk, oversized. Asymmetric layout with generous 32px padding. Sections: chunky hero with huge heading, 3 feature cards in a row. Corners square or 8px max.`,
    },
    {
      id: "premium-dark",
      label: "Premium Dark Mode",
      image: CHAT_STYLES_CDN + "premium-dark.jpg",
      prompt: `Design a premium SaaS landing page in dark mode. Background near-black #0A0A0B with subtle section variation #141416. Single accent: vibrant gradient violet #8B5CF6 to pink #EC4899, used only on primary CTAs and headline highlights. Soft glow under buttons. Text white #F5F5F7 primary, muted #94949C secondary. Inter or Geist font, tight letter-spacing -0.02em. Hero with floating dashboard mockup, 3 minimal feature cards with 1px border #27272A and dark fill #111114, logo cloud, testimonial, pricing table with middle plan glow-highlighted.`,
    },
    {
      id: "modern-minimalist",
      label: "Modern Minimalist",
      image: CHAT_STYLES_CDN + "modern-mini.jpg",
      prompt: `Create a minimalist landing page with extreme whitespace. Pure white background #FFFFFF, single accent deep navy #0F172A. Inter or Helvetica Neue: body 16px regular, headlines 64-80px in light weight 300. No borders, no shadows, no gradients, no illustrations. Hero with one huge headline, one-line subtitle, one black pill button. 3 feature blocks separated by thin 1px hairlines #E5E5E5, no cards. Typographic testimonial as a single quote. Pricing as 3 plain columns separated by hairlines. Vertical spacing 120px+ between every section.`,
    },
    {
      id: "editorial-typography",
      label: "Editorial Typography",
      image: CHAT_STYLES_CDN + "edito.jpg",
      prompt: `Design a magazine-style editorial landing page. Serif display headlines in Playfair Display or Fraunces, 80-120px, mixing weights and italic. Body in Inter or Source Serif. Asymmetric grid with large drop caps, oversized italic pull quotes, occasional 2-column text. Off-white background #FBFAF7, ink #1A1A1A, single ochre accent #B8860B. Hero with massive headline broken across 3 lines plus a byline. Sections framed like articles with column rules, captions in small caps, classic page-number style markers, generous outer margins.`,
    },
    {
      id: "organic-nature",
      label: "Organic & Nature",
      image: CHAT_STYLES_CDN + "orga-nat.jpg",
      prompt: `Build an organic, nature-inspired landing page. Earthy palette: sage green #87A878, warm cream #F5EFE0, terracotta #C97D5D, deep forest #2F4F2F. Soft rounded corners 16-24px everywhere, wavy SVG dividers between sections. Cormorant or Lora for headlines, Nunito for body. Botanical leaf SVG accents in corners. Hero with curved background shape and a nature photo right. Feature cards with rounded blob backgrounds and gentle shadows. Testimonial section with circular avatars. Pricing in soft cream cards with terracotta CTAs. No sharp edges anywhere.`,
    },
    {
      id: "retrofuturism",
      label: "Retrofuturism",
      image: CHAT_STYLES_CDN + "retrofut.jpg",
      prompt: `Create an 80s retrofuturism synthwave landing page. Dark navy #0B0B2E with a perspective neon grid floor in magenta #FF006E and cyan #00F5FF. Headlines in chrome or magenta-to-purple gradient with soft pink glow. Display font Monoton, Audiowide or Orbitron. Sun/horizon imagery, scanline overlay, geometric triangles, palm tree silhouettes. Hero with massive glowing headline over the grid. Feature cards with neon 2px borders and dark fills #1A0B3E. CTAs with chrome gradient and pink outer glow. Pricing table with neon-outlined plans, VHS-style testimonial section.`,
    },
    {
      id: "saas-tech",
      label: "SaaS / Tech Startup",
      image: CHAT_STYLES_CDN + "saas-tech.jpg",
      prompt: `Design a clean modern SaaS landing page. White background #FFFFFF, primary indigo #4F46E5, secondary mint #10B981, neutral gray scale. Inter font throughout, headlines 48-64px weight 600. Hero: large headline left, animated product screenshot right, indigo CTA button with subtle shadow. Logo cloud bar below. 3-column features with small colored icon, bold title, gray description. Centered testimonial carousel with circular avatars. Pricing table 3 plans, middle highlighted with indigo border and "Most popular" badge. FAQ accordion. Rounded 12px corners, soft shadows, subtle gradient feature backgrounds.`,
    },
    {
      id: "luxury",
      label: "Luxury & High-End",
      image: CHAT_STYLES_CDN + "luxury.jpg",
      prompt: `Build a luxury brand landing page. Palette: matte black #0E0E0E, ivory #F5F1E8, brushed gold #C5A572. Generous whitespace, no clutter. Headlines in Didot, Bodoni or Italiana at 96px+ in weight 300 with wide letter-spacing 0.05em. Body in Cormorant Garamond or Montserrat weight 200. Hero: full-bleed editorial image with minimal headline overlay and a thin-outline gold CTA button. Sections divided by thin 1px gold hairlines. Editorial image grids. Testimonial as a single italic serif quote centered. No icons, no shadows, no gradients.`,
    },
    {
      id: "bento-grid",
      label: "Bento Grid",
      image: CHAT_STYLES_CDN + "bento.jpg",
      prompt: `Create a modern landing page using a bento grid layout. Hero is one large rounded card with the headline. Below: a 4-column bento grid with cards of varying spans — some 2x2, some 1x1, some 2x1 — each rounded 20px with consistent 16px gaps. Background #FAFAFA, white cards #FFFFFF with 0.5px border #E5E5E5 and very subtle shadow. Each card showcases one feature: large icon or screenshot, short bold headline, one-line description. Mix in 2-3 dark cards (#0F172A with white text) for rhythm. Inter font, asymmetric balance, glanceable.`,
    },
    {
      id: "y2k-revival",
      label: "Y2K Revival",
      image: CHAT_STYLES_CDN + "y2k.jpg",
      prompt: `Design a Y2K revival landing page. Glossy chrome and bubble aesthetic. Palette: chrome silver gradients, baby blue #A8DADC, bubblegum pink #FFB6D9, lime green #C8FF6B, lilac #C8A4D4. Bubbly rounded buttons with chrome gradient and inner highlight. Display font with bubble feel (Modak, Bungee or bold Quicksand). Hero with reflective metallic headline, sticker-style icons, star and sparkle SVG accents floating around. Glossy 3D blob shapes scattered as background. Feature cards as iridescent rounded rectangles. Testimonials in chat-bubble style. Pricing as glossy chrome-bordered plan cards.`,
    },
    {
      id: "swiss-typographic",
      label: "Swiss / Intl Style",
      image: CHAT_STYLES_CDN + "swiss.jpg",
      prompt: `Build a landing page in pure Swiss International style. Strict 12-column grid, asymmetric balance. Palette: white #FFFFFF, pure black #000000, single accent red #E63946. Helvetica or Neue Haas Grotesk throughout. Headlines flush-left, 72-96px weight 700, generous leading. Body 16px weight 400. Zero ornaments — no shadows, gradients, illustrations, icons or rounded corners. Strong 1px black horizontal rules dividing sections. Hero with massive left-aligned headline and a 2-column supporting paragraph. Features as a numbered list 01 / 02 / 03.`,
    },
    {
      id: "claymorphism",
      label: "Claymorphism",
      image: CHAT_STYLES_CDN + "clay.jpg",
      prompt: `Design a soft claymorphism landing page. Pastel palette: lavender #E0D7FF, peach #FFD4C4, mint #C7F0DB, butter #FFF3B0, on background #F8F4FF. All elements have a soft 3D clay look: rounded 24-32px corners, subtle inner highlights, outer shadows in matching pastel tones (never black). No flat surfaces — everything looks puffy and squishable. Rounded sans-serif DM Sans or Quicksand weight 600. Hero with a 3D clay illustration. Feature cards as plump pastel pills. CTA buttons look pressable with soft inner glow. Friendly, playful, cozy mood throughout.`,
    },
  ];

  function buildChatStyleStorageKey() {
    try {
      const id = wp?.data?.select("core/editor")?.getCurrentPostId?.();
      if (id && Number(id) > 0) {
        return "aibui_chat_visual_style_v1_post_" + id;
      }
    } catch (e) { }
    const raw = (window.location.pathname || "") + (window.location.search || "");
    try {
      return (
        "aibui_chat_visual_style_v1_ctx_" +
        btoa(unescape(encodeURIComponent(raw)))
          .replace(/\+/g, "-")
          .replace(/\//g, "_")
          .replace(/=+$/, "")
      );
    } catch (e2) {
      return "aibui_chat_visual_style_v1_fallback";
    }
  }

  let chatSelectedVisualStyleId = null;
  let chatStylePanelOpen = false;
  let chatStyleStoragePollKey = "";

  function loadChatVisualStyleFromStorage() {
    try {
      const raw = localStorage.getItem(buildChatStyleStorageKey());
      if (!raw) {
        chatSelectedVisualStyleId = null;
        return;
      }
      const data = JSON.parse(raw);
      const id = data && data.id ? String(data.id) : "";
      if (id && CHAT_VISUAL_STYLES.some((s) => s.id === id)) {
        chatSelectedVisualStyleId = id;
      } else {
        chatSelectedVisualStyleId = null;
      }
    } catch (e) {
      chatSelectedVisualStyleId = null;
    }
  }

  function saveChatVisualStyleToStorage() {
    try {
      const key = buildChatStyleStorageKey();
      if (!chatSelectedVisualStyleId) {
        localStorage.removeItem(key);
      } else {
        localStorage.setItem(
          key,
          JSON.stringify({ id: chatSelectedVisualStyleId })
        );
      }
    } catch (e) { }
  }

  function getVisualStylePromptForApi() {
    const s = CHAT_VISUAL_STYLES.find((x) => x.id === chatSelectedVisualStyleId);
    return s ? s.prompt : undefined;
  }

  // --- AI Block modifier (Group block mini-panel) ---
  const AIBUI_BLOCK_CSS_START = "/* AIBUI_BLOCK_CSS_START";
  const AIBUI_BLOCK_CSS_END = "/* AIBUI_BLOCK_CSS_END";
  const AIBUI_BLOCK_ID_CLASS_PREFIX = "aibui-bid-";
  const AIBUI_BLOCK_MODIFY_ENDPOINT = "/ai-transform-page/v2-transform-single-block";

  function aibuiSafeTruncate(str, maxChars) {
    const s = String(str || "");
    if (s.length <= maxChars) return s;
    return s.slice(0, maxChars - 40) + "\n/* …truncated… */\n";
  }

  function aibuiShortIdFromClientId(clientId) {
    const raw = String(clientId || "").replace(/[^a-zA-Z0-9]/g, "");
    return raw.slice(0, 10) || "block";
  }

  function aibuiEnsureBlockIdClass(block) {
    try {
      const className = (block && block.attributes && block.attributes.className) ? String(block.attributes.className) : "";
      const existing = className.split(/\s+/).find((c) => c.startsWith(AIBUI_BLOCK_ID_CLASS_PREFIX));
      if (existing) return existing;
      const bid = AIBUI_BLOCK_ID_CLASS_PREFIX + aibuiShortIdFromClientId(block.clientId);
      const next = (className ? className + " " : "") + bid;
      wp.data.dispatch("core/block-editor").updateBlockAttributes(block.clientId, { className: next });
      return bid;
    } catch (e) {
      return "";
    }
  }

  function aibuiFindCssSegment(cssText, bidClass) {
    const css = String(cssText || "");
    if (!bidClass) return null;
    const startRe = new RegExp("/\\*\\s*AIBUI_BLOCK_CSS_START\\s+bid=" + bidClass.replace(/[.*+?^${}()|[\\]\\\\]/g, "\\$&") + "\\s*\\*\\/");
    const endRe = new RegExp("/\\*\\s*AIBUI_BLOCK_CSS_END\\s+bid=" + bidClass.replace(/[.*+?^${}()|[\\]\\\\]/g, "\\$&") + "\\s*\\*\\/");
    const mStart = startRe.exec(css);
    if (!mStart) return null;
    const startIdx = mStart.index + mStart[0].length;
    const mEnd = endRe.exec(css.slice(startIdx));
    if (!mEnd) return null;
    const endIdx = startIdx + mEnd.index;
    return { startIdx: mStart.index, endIdx: endIdx + mEnd[0].length, inner: css.slice(startIdx, endIdx).trim() };
  }

  function aibuiExtractRelatedCssForApi(bidClass) {
    const pageCss = window.aiBuilderPageCSS || "";
    const blockCss = window.aiBuilderBlockCSS || "";

    // Prefer explicit segments if present.
    const segPage = aibuiFindCssSegment(pageCss, bidClass);
    if (segPage) return { origin: "page", css: segPage.inner };
    const segBlock = aibuiFindCssSegment(blockCss, bidClass);
    if (segBlock) return { origin: "block", css: segBlock.inner };

    // Heuristic fallback: collect small windows around occurrences of the class selector.
    const selector = "." + bidClass;
    const sources = [
      { origin: "page", text: pageCss },
      { origin: "block", text: blockCss },
    ];
    for (const src of sources) {
      if (!src.text || !src.text.includes(selector)) continue;
      const chunks = [];
      let idx = 0;
      while (idx < src.text.length) {
        const at = src.text.indexOf(selector, idx);
        if (at === -1) break;
        const from = Math.max(0, at - 600);
        const to = Math.min(src.text.length, at + 1400);
        chunks.push(src.text.slice(from, to));
        idx = at + selector.length;
        if (chunks.join("\n").length > 5200) break;
      }
      const combined = chunks.join("\n/* … */\n");
      return { origin: src.origin, css: combined };
    }

    return { origin: "block", css: "" };
  }

  async function aibuiUpsertBlockCssSegment(bidClass, newInnerCss, origin) {
    const cssKey = origin === "page" ? "aiBuilderPageCSS" : "aiBuilderBlockCSS";
    const current = window[cssKey] || "";
    const existing = aibuiFindCssSegment(current, bidClass);
    const startMarker = `/* AIBUI_BLOCK_CSS_START bid=${bidClass} */`;
    const endMarker = `/* AIBUI_BLOCK_CSS_END bid=${bidClass} */`;
    const nextSegment = `${startMarker}\n${String(newInnerCss || "").trim()}\n${endMarker}\n`;

    let next;
    if (existing) {
      next = current.slice(0, existing.startIdx) + nextSegment + current.slice(existing.endIdx);
    } else {
      next = (String(current || "").trimEnd() + "\n\n" + nextSegment).trimEnd() + "\n";
    }

    window[cssKey] = next;
    await saveCSSInPostMeta(next, origin === "page" ? "page" : "block", true);
    await loadCSSFromPostMeta();
  }

  async function aibuiRemoveBlockCssSegmentMarkers(bidClass, origin) {
    const cssKey = origin === "page" ? "aiBuilderPageCSS" : "aiBuilderBlockCSS";
    const current = window[cssKey] || "";
    const existing = aibuiFindCssSegment(current, bidClass);
    if (!existing) return;

    const cleanedSegment = String(existing.inner || "").trim();
    const before = current.slice(0, existing.startIdx).trimEnd();
    const after = current.slice(existing.endIdx).trimStart();
    const parts = [];

    if (before) parts.push(before);
    if (cleanedSegment) parts.push(cleanedSegment);
    if (after) parts.push(after);

    const next = parts.join("\n\n").trim();
    window[cssKey] = next ? next + "\n" : "";
    await saveCSSInPostMeta(window[cssKey], origin === "page" ? "page" : "block", true);
    await loadCSSFromPostMeta();
  }

  const AIBUI_BM_PROMPT_MAX_CHARS = 1000;

  function aibuiEnsureBlockModifierPanel() {
    let el = document.getElementById("aibui-block-modifier");
    if (el) return el;
    el = document.createElement("div");
    el.id = "aibui-block-modifier";
    el.setAttribute("hidden", "");
    el.innerHTML = `
      <div class="aibui-bm-head">
        <div class="aibui-bm-title">Modify</div>
        <button type="button" class="aibui-bm-close" aria-label="Close" data-aibui-bm-close>&times;</button>
      </div>
      <div class="aibui-bm-body">
        <label class="aibui-bm-label" for="aibui-bm-prompt">Instruction</label>
        <textarea id="aibui-bm-prompt" class="aibui-bm-prompt" rows="3" maxlength="${AIBUI_BM_PROMPT_MAX_CHARS}" placeholder='Add the text "hello world" and change the block color to red'></textarea>
        <div class="aibui-bm-meta" aria-live="polite">
          <span data-aibui-bm-count>0</span>/${AIBUI_BM_PROMPT_MAX_CHARS}
        </div>

        <div class="aibui-bm-actions">
          <button type="button" class="aibui-bm-btn aibui-bm-btn--primary" data-aibui-bm-submit>Modify</button>
        </div>
        <div class="aibui-bm-status" role="status" aria-live="polite" data-aibui-bm-status>
          <span class="aibui-bm-status-dots" aria-hidden="true" hidden>
            <span class="typing-dot"></span>
            <span class="typing-dot"></span>
            <span class="typing-dot"></span>
          </span>
          <span class="aibui-bm-status-text" data-aibui-bm-status-text></span>
        </div>
      </div>
    `;
    document.body.appendChild(el);

    const promptEl = el.querySelector("#aibui-bm-prompt");
    const countEl = el.querySelector("[data-aibui-bm-count]");
    const metaEl = el.querySelector(".aibui-bm-meta");
    const syncCount = () => {
      if (!promptEl || !countEl) return;
      if (promptEl.value.length > AIBUI_BM_PROMPT_MAX_CHARS) {
        promptEl.value = promptEl.value.slice(0, AIBUI_BM_PROMPT_MAX_CHARS);
      }
      countEl.textContent = String(promptEl.value.length);
      if (metaEl) {
        metaEl.classList.toggle("aibui-bm-meta--max", promptEl.value.length >= AIBUI_BM_PROMPT_MAX_CHARS);
      }
    };
    if (promptEl) {
      promptEl.addEventListener("input", syncCount);
      promptEl.addEventListener("paste", () => setTimeout(syncCount, 0));
      syncCount();
    }

    const closeBtn = el.querySelector("[data-aibui-bm-close]");
    if (closeBtn) {
      closeBtn.addEventListener("click", () => {
        el.setAttribute("hidden", "");
        if (window._aibuiBlockModifierState) {
          window._aibuiBlockModifierState.panelOpen = false;
        }
      });
    }

    return el;
  }

  function aibuiEnsureBlockModifierButton() {
    let el = document.getElementById("aibui-block-modifier-btn");
    if (el) return el;
    el = document.createElement("button");
    el.type = "button";
    el.id = "aibui-block-modifier-btn";
    el.className = "aibui-bm-fab";
    el.setAttribute("hidden", "");
    el.textContent = "Modify with AI";
    document.body.appendChild(el);
    return el;
  }

  function aibuiGetCanvasBlockEl(clientId) {
    const id = String(clientId || "");
    if (!id) return null;

    function pickBestMatch(nodes) {
      if (!nodes || !nodes.length) return null;
      // Prefer elements in the writing flow / block list, and avoid list view tree.
      let best = null;
      for (const el of nodes) {
        if (!el || !el.getBoundingClientRect) continue;
        // Ignore hidden/non-rendered nodes.
        const rect = el.getBoundingClientRect();
        if (!rect || rect.width <= 0 || rect.height <= 0) continue;
        if (el.closest && el.closest(".block-editor-list-view-tree")) continue;
        if (el.closest && el.closest(".block-editor-list-view-leaf")) continue;
        const score =
          (el.closest && (el.closest(".block-editor-writing-flow") || el.closest(".block-editor-block-list__layout")) ? 100 : 0) +
          (el.classList && el.classList.contains("block-editor-block-list__block") ? 50 : 0) +
          Math.max(0, 20 - Math.min(20, rect.top / 50));
        if (!best || score > best.score) {
          best = { el, score };
        }
      }
      return best ? best.el : null;
    }

    try {
      const nodes = Array.from(document.querySelectorAll(`[data-block="${id}"]`));
      const picked = pickBestMatch(nodes);
      if (picked) return { el: picked, iframe: null };
    } catch (e) { }

    // If the editor canvas lives in an iframe, try to find the block there.
    try {
      const iframes = Array.from(document.querySelectorAll("iframe"));
      for (const frame of iframes) {
        try {
          const doc = frame.contentDocument;
          if (!doc) continue;
          const nodes = Array.from(doc.querySelectorAll(`[data-block="${id}"]`));
          const picked = pickBestMatch(nodes);
          if (picked) return { el: picked, iframe: frame };
        } catch (e2) {
          // cross-origin or unavailable iframe
        }
      }
    } catch (e3) { }

    return null;
  }

  function aibuiPositionPanelNextToBlock(panelEl, clientId) {
    try {
      const found = aibuiGetCanvasBlockEl(clientId);
      if (!found || !found.el) return;
      const blockEl = found.el;
      const rect = blockEl.getBoundingClientRect();
      const frameRect = found.iframe ? found.iframe.getBoundingClientRect() : null;
      const panelWidth = 320;
      const gap = 8;
      const top = Math.max(12, Math.min(window.innerHeight - 260, rect.top + 55));
      let left = rect.left + gap;
      if (left + panelWidth > window.innerWidth - 12) {
        left = Math.max(12, rect.right - panelWidth - gap);
      }
      const absTop = (frameRect ? frameRect.top : 0) + top;
      const absLeft = (frameRect ? frameRect.left : 0) + Math.max(12, left);
      panelEl.style.transform = `translate3d(${absLeft}px, ${absTop}px, 0)`;
    } catch (e) { }
  }

  function aibuiPositionButtonNextToBlock(btnEl, clientId) {
    try {
      const found = aibuiGetCanvasBlockEl(clientId);
      if (!found || !found.el) return;
      const blockEl = found.el;
      const rect = blockEl.getBoundingClientRect();
      const frameRect = found.iframe ? found.iframe.getBoundingClientRect() : null;
      const gap = 8;
      const btnWidth = 120;
      const btnHeight = 32;
      // Emulate "position: sticky" but anchored to the selected block:
      // top = min( max(blockTop+offset, stickyTop), blockBottom - height - offset )
      const stickyTop = 12;
      const offset = 8;
      const topMin = rect.top + offset;
      const topMax = rect.bottom - btnHeight - offset;
      let top = Math.min(Math.max(topMin, stickyTop), topMax);
      top = Math.max(12, Math.min(window.innerHeight - btnHeight - 12, top));

      // If the block is fully above the sticky line, fade out the button (still selected).
      if (rect.bottom < stickyTop + 2) {
        btnEl.style.opacity = "0";
        btnEl.style.pointerEvents = "none";
      } else {
        btnEl.style.opacity = "1";
        btnEl.style.pointerEvents = "";
      }
      let left = rect.left + 8;
      if (left + btnWidth > window.innerWidth - 12) left = Math.max(12, rect.right - btnWidth - gap);
      const absTop = (frameRect ? frameRect.top : 0) + top;
      const absLeft = (frameRect ? frameRect.left : 0) + Math.max(12, left);
      btnEl.style.transform = `translate3d(${absLeft}px, ${absTop}px, 0)`;
    } catch (e) { }
  }

  function aibuiEnsureClassOnBlockObject(blockObj, bidClass) {
    try {
      if (!blockObj || !bidClass) return blockObj;
      const attrs = blockObj.attributes || {};
      const cur = attrs.className ? String(attrs.className) : "";
      if (cur.split(/\s+/).includes(bidClass)) return blockObj;
      blockObj.attributes = {
        ...attrs,
        className: (cur ? cur + " " : "") + bidClass,
      };
      return blockObj;
    } catch (e) {
      return blockObj;
    }
  }

  async function aibuiModifySelectedBlock(clientId) {
    const panel = aibuiEnsureBlockModifierPanel();
    const promptEl = panel.querySelector("#aibui-bm-prompt");
    const statusEl = panel.querySelector("[data-aibui-bm-status]");
    const statusTextEl = panel.querySelector("[data-aibui-bm-status-text]");
    const statusDotsEl = panel.querySelector(".aibui-bm-status-dots");
    const submitBtn = panel.querySelector("[data-aibui-bm-submit]");

    const userPrompt = (promptEl ? promptEl.value : "").trim();
    if (!userPrompt) {
      if (statusDotsEl) statusDotsEl.hidden = true;
      if (statusTextEl) statusTextEl.textContent = "Please enter an instruction.";
      else if (statusEl) statusEl.textContent = "Please enter an instruction.";
      return;
    }
    if (userPrompt.length > AIBUI_BM_PROMPT_MAX_CHARS) {
      if (statusDotsEl) statusDotsEl.hidden = true;
      const msg = `Please keep your instruction under ${AIBUI_BM_PROMPT_MAX_CHARS} characters.`;
      if (statusTextEl) statusTextEl.textContent = msg;
      else if (statusEl) statusEl.textContent = msg;
      return;
    }

    try {
      if (submitBtn) submitBtn.disabled = true;
      if (statusDotsEl) statusDotsEl.hidden = false;
      if (statusTextEl) statusTextEl.textContent = "Modifying block…";
      else if (statusEl) statusEl.textContent = "Modifying block…";

      let jwtToken = "";
      try {
        jwtToken = await getJwtToken();
      } catch (e) {
        if (statusDotsEl) statusDotsEl.hidden = true;
        const msg = "You need to connect your account. Go to your WordPress Dashboard → AI Builder → Account.";
        if (statusTextEl) statusTextEl.textContent = msg;
        else if (statusEl) statusEl.textContent = msg;
        return;
      }
      const block = wp.data.select("core/block-editor").getBlock(clientId);
      if (!block) throw new Error("Missing block");
      const bidClass = aibuiEnsureBlockIdClass(block);
      const cssInfo = aibuiExtractRelatedCssForApi(bidClass);
      const cssForApi = aibuiSafeTruncate(cssInfo.css, 5000);

      const blockJson = (() => {
        try { return JSON.stringify(block); } catch (e) { return ""; }
      })();
      const blockSerialized = (() => {
        try { return wp.blocks.serialize([block]); } catch (e) { return ""; }
      })();
      const blockContentForApi = aibuiSafeTruncate(blockSerialized || blockJson, 14000);

      const sitePlugins = (typeof aiBuilderVars !== 'undefined' && Array.isArray(aiBuilderVars.sitePlugins)) ? aiBuilderVars.sitePlugins.slice(0, 15) : [];
      const wordpressVersion = (typeof aiBuilderVars !== 'undefined' && aiBuilderVars.wordpressVersion) ? String(aiBuilderVars.wordpressVersion) : '';
      const activeThemeName = (typeof aiBuilderEditorVars !== 'undefined' && aiBuilderEditorVars.activeThemeName)
        ? aiBuilderEditorVars.activeThemeName
        : ((typeof aiBuilderVars !== 'undefined' && aiBuilderVars.activeThemeName) ? aiBuilderVars.activeThemeName : '');
      const conversationHistory = getConversationHistoryString(6);

      const res = await fetch(
        window.config.apiUrl + AIBUI_BLOCK_MODIFY_ENDPOINT,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${jwtToken}`,
          },
          body: JSON.stringify({
            userPrompt,
            activeThemeName,
            sitePlugins,
            wordpressVersion,
            conversationHistory,
            blockContent: blockContentForApi,
            blockCss: cssForApi,
          }),
        }
      );

      const txt = await res.text();
      let data = {};
      try { data = txt ? JSON.parse(txt) : {}; } catch (e) { data = {}; }

      if (!res.ok) {
        if (statusDotsEl) statusDotsEl.hidden = true;
        const rawMsg =
          (data && typeof data === "object" && (data.message || data.error || data.data)) ? String(data.message || data.error || data.data)
            : (txt ? String(txt) : "");
        console.log("rawMsg: ", rawMsg);
        const msgLower = rawMsg.toLowerCase();

        if (res.status === 402 || (data && data.error === "not-enough-credits")) {
          // Credits exhausted
          try { showNotEnoughCreditsToast(); } catch (e) { }
          const msg = "You have no credits left. Please purchase more credits to continue.";
          if (statusTextEl) statusTextEl.textContent = msg;
          else if (statusEl) statusEl.textContent = msg;
          return;
        }

        if (msgLower.includes("no token found")) {
          const msg = "You need to connect your account. Go to your WordPress Dashboard → AI Builder → Account.";
          if (statusTextEl) statusTextEl.textContent = msg;
          else if (statusEl) statusEl.textContent = msg;
          return;
        }

        const msg = "Something went wrong. Please try again.";
        if (statusTextEl) statusTextEl.textContent = msg;
        else if (statusEl) statusEl.textContent = msg;
        return;
      }

      if (data.error === "not-enough-credits") {
        showNotEnoughCreditsToast();
        if (statusDotsEl) statusDotsEl.hidden = true;
        if (statusTextEl) statusTextEl.textContent = "";
        else if (statusEl) statusEl.textContent = "";
        return;
      }

      // Update block content if provided
      if (data.blockContent) {
        try {
          let newBlock = buildBlock(data.blockContent);
          // Preserve the bid class on the returned root block, so CSS scoping keeps working.
          newBlock = aibuiEnsureClassOnBlockObject(newBlock, bidClass);
          wp.data.dispatch("core/block-editor").replaceBlocks(clientId, [newBlock]);
        } catch (e) {
          // ignore if malformed; keep css update if any
        }
      }

      // Update only the related CSS segment if provided
      if (data.cssContent) {
        const origin = cssInfo && cssInfo.origin ? cssInfo.origin : "block";
        await aibuiUpsertBlockCssSegment(bidClass, data.cssContent, origin);
        await aibuiRemoveBlockCssSegmentMarkers(bidClass, origin);
      }

      if (typeof data.creditsLeft !== "undefined") {
        try { updateCreditsDisplay(data.creditsLeft); } catch (e) { }
      }

      if (statusDotsEl) statusDotsEl.hidden = true;
      if (statusTextEl) statusTextEl.textContent = "Done.";
      else if (statusEl) statusEl.textContent = "Done.";
    } catch (e) {
      if (statusDotsEl) statusDotsEl.hidden = true;
      if (statusTextEl) statusTextEl.textContent = "Something went wrong. Please try again.";
      else if (statusEl) statusEl.textContent = "Something went wrong. Please try again.";
    } finally {
      if (submitBtn) submitBtn.disabled = false;
      if (statusDotsEl) statusDotsEl.hidden = true;
    }
  }

  function initAibuiBlockModifier() {
    if (!wp || !wp.data || !wp.data.select) return;
    const panel = aibuiEnsureBlockModifierPanel();
    const btn = aibuiEnsureBlockModifierButton();
    let lastClientId = null;
    const state = (window._aibuiBlockModifierState = window._aibuiBlockModifierState || { panelOpen: false });
    let rafId = 0;

    function stopTracking() {
      if (rafId) {
        try { cancelAnimationFrame(rafId); } catch (e) { }
      }
      rafId = 0;
    }

    function track() {
      rafId = requestAnimationFrame(track);
      if (!lastClientId) return;
      if (!btn.hasAttribute("hidden")) aibuiPositionButtonNextToBlock(btn, lastClientId);
      if (!panel.hasAttribute("hidden")) aibuiPositionPanelNextToBlock(panel, lastClientId);
    }

    function ensureTrackingRunning() {
      if (rafId) return;
      rafId = requestAnimationFrame(track);
    }

    function isBlockTypeExcluded(blockName) {
      const name = String(blockName || "");
      if (!name) return true;
      // Exclusions: image blocks + text blocks (exception requested)
      const excluded = new Set([
        // Images / media-like
        "core/image",
        "core/gallery",
        "core/media-text",
        // Text
        "core/paragraph",
        "core/heading",
        "core/list",
        "core/quote",
        "core/pullquote",
        "core/preformatted",
        "core/code",
        "core/verse",
        "core/table",
        "core/button"
      ]);
      return excluded.has(name);
    }

    function updatePanelForSelection() {
      const cid = wp.data.select("core/block-editor").getSelectedBlockClientId();
      if (!cid) {
        lastClientId = null;
        state.panelOpen = false;
        panel.setAttribute("hidden", "");
        btn.setAttribute("hidden", "");
        stopTracking();
        return;
      }
      if (cid === lastClientId) return;
      lastClientId = cid;
      state.panelOpen = false;
      panel.setAttribute("hidden", "");

      const block = wp.data.select("core/block-editor").getBlock(cid);
      if (!block) {
        panel.setAttribute("hidden", "");
        btn.setAttribute("hidden", "");
        stopTracking();
        return;
      }
      if (isBlockTypeExcluded(block.name)) {
        panel.setAttribute("hidden", "");
        btn.setAttribute("hidden", "");
        stopTracking();
        return;
      }

      btn.removeAttribute("hidden");
      aibuiPositionButtonNextToBlock(btn, cid);
      ensureTrackingRunning();

      btn.onclick = () => {
        // Toggle panel on repeated clicks for the same selected block
        const isOpen = !panel.hasAttribute("hidden") && state.panelOpen === true;
        if (isOpen) {
          state.panelOpen = false;
          panel.setAttribute("hidden", "");
          return;
        }

        state.panelOpen = true;
        panel.removeAttribute("hidden");
        aibuiPositionPanelNextToBlock(panel, cid);
        ensureTrackingRunning();
        const submitBtn = panel.querySelector("[data-aibui-bm-submit]");
        if (submitBtn) submitBtn.onclick = () => aibuiModifySelectedBlock(cid);
      };
    }

    wp.data.subscribe(() => {
      try { updatePanelForSelection(); } catch (e) { }
    });

    // Keep lightweight listeners as fallbacks (rAF handles smooth tracking)
    window.addEventListener("scroll", () => { ensureTrackingRunning(); }, { passive: true });
    window.addEventListener("resize", () => { ensureTrackingRunning(); });
  }

  function syncChatStylePickerUI() {
    const trigger = document.getElementById("chat-style-trigger");
    const label = document.getElementById("chat-style-trigger-label");
    const chevron = document.getElementById("chat-style-trigger-chevron");
    const hint = document.getElementById("chat-style-swipe-hint");
    const removeBtn = document.getElementById("chat-style-remove");
    const outer = document.getElementById("chat-style-slider-outer");
    const slider = document.getElementById("chat-style-slider");
    if (!trigger || !label || !outer || !slider) return;

    if (chatSelectedVisualStyleId) {
      const sel = CHAT_VISUAL_STYLES.find((s) => s.id === chatSelectedVisualStyleId);
      label.textContent = sel
        ? "Style: " + sel.label
        : "Style applied";
    } else {
      label.textContent = "Need inspiration? Try a style";
    }

    if (removeBtn) {
      removeBtn.hidden = !chatSelectedVisualStyleId;
    }

    const showSlider = chatStylePanelOpen;
    outer.hidden = !showSlider;
    if (hint) {
      hint.hidden = !showSlider;
    }
    trigger.setAttribute("aria-expanded", showSlider ? "true" : "false");
    if (chevron) {
      chevron.textContent = showSlider ? "▾" : "▴";
    }

    slider.querySelectorAll(".chat-style-card").forEach((el) => {
      const sid = el.getAttribute("data-style-id");
      el.classList.toggle("is-selected", sid === chatSelectedVisualStyleId);
      el.setAttribute("aria-selected", sid === chatSelectedVisualStyleId ? "true" : "false");
    });
  }

  function initChatVisualStylePicker() {
    const picker = document.getElementById("chat-style-picker");
    const trigger = document.getElementById("chat-style-trigger");
    const removeBtn = document.getElementById("chat-style-remove");
    const slider = document.getElementById("chat-style-slider");
    if (!picker || !trigger || !slider) return;

    const eyeSvg =
      '<svg class="chat-style-preview-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/></svg>';
    slider.innerHTML = CHAT_VISUAL_STYLES.map((s) => {
      const safeLabel = String(s.label).replace(/"/g, "&quot;");
      return (
        `<div class="chat-style-card" data-style-id="${s.id}" role="option" tabindex="0" aria-selected="false" title="${safeLabel}">
          <div class="chat-style-card-inner">
            <img src="${s.image}" alt="" loading="lazy" width="100" height="100" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'"/>
            <span class="chat-style-card-fallback" style="display:none" aria-hidden="true"></span>
            <button type="button" class="chat-style-preview-btn" data-style-preview="${s.id}" aria-label="View full style and prompt" title="Preview">${eyeSvg}</button>
          </div>
          <span class="chat-style-card-label">${s.label}</span>
        </div>`
      );
    }).join("");

    slider.querySelectorAll(".chat-style-card-fallback").forEach((fb, i) => {
      const preset = CHAT_VISUAL_STYLES[i];
      if (preset) {
        fb.classList.add("chat-style-fallback--" + preset.id);
      }
    });

    function openChatStyleDetailModal(styleId) {
      const s = CHAT_VISUAL_STYLES.find((x) => x.id === styleId);
      if (!s) return;
      const modal = document.getElementById("chat-style-detail-modal");
      const imgEl = document.getElementById("chat-style-detail-img");
      const titleEl = document.getElementById("chat-style-detail-title");
      const promptEl = document.getElementById("chat-style-detail-prompt");
      if (!modal || !imgEl || !titleEl || !promptEl) return;
      titleEl.textContent = s.label;
      imgEl.src = s.image;
      imgEl.alt = s.label;
      promptEl.textContent = s.prompt;
      modal.removeAttribute("hidden");
      modal.setAttribute("aria-hidden", "false");
      const closeBtn = document.getElementById("chat-style-detail-close");
      if (closeBtn) closeBtn.focus();
    }

    function closeChatStyleDetailModal() {
      const modal = document.getElementById("chat-style-detail-modal");
      if (!modal) return;
      modal.setAttribute("hidden", "");
      modal.setAttribute("aria-hidden", "true");
    }

    const detailClose = document.getElementById("chat-style-detail-close");
    const detailBackdrop = document.getElementById("chat-style-detail-backdrop");
    if (detailClose) {
      detailClose.addEventListener("click", closeChatStyleDetailModal);
    }
    if (detailBackdrop) {
      detailBackdrop.addEventListener("click", closeChatStyleDetailModal);
    }
    document.addEventListener("keydown", function (ev) {
      if (ev.key !== "Escape") return;
      const modal = document.getElementById("chat-style-detail-modal");
      if (modal && !modal.hasAttribute("hidden")) {
        closeChatStyleDetailModal();
      }
    });

    loadChatVisualStyleFromStorage();
    chatStyleStoragePollKey = buildChatStyleStorageKey();
    chatStylePanelOpen = !!chatSelectedVisualStyleId;
    syncChatStylePickerUI();

    setInterval(function () {
      try {
        const k = buildChatStyleStorageKey();
        if (k !== chatStyleStoragePollKey) {
          chatStyleStoragePollKey = k;
          loadChatVisualStyleFromStorage();
          chatStylePanelOpen = !!chatSelectedVisualStyleId;
          syncChatStylePickerUI();
        }
      } catch (e) { }
    }, 1200);

    trigger.addEventListener("click", function () {
      chatStylePanelOpen = !chatStylePanelOpen;
      syncChatStylePickerUI();
    });

    if (removeBtn) {
      removeBtn.addEventListener("click", function (ev) {
        ev.stopPropagation();
        chatSelectedVisualStyleId = null;
        saveChatVisualStyleToStorage();
        chatStylePanelOpen = false;
        syncChatStylePickerUI();
      });
    }

    slider.addEventListener("click", function (ev) {
      if (ev.target.closest(".chat-style-preview-btn")) {
        ev.preventDefault();
        ev.stopPropagation();
        const btn = ev.target.closest(".chat-style-preview-btn");
        const sid = btn && btn.getAttribute("data-style-preview");
        if (sid) openChatStyleDetailModal(sid);
        return;
      }
      const card = ev.target.closest(".chat-style-card");
      if (!card) return;
      const sid = card.getAttribute("data-style-id");
      if (!sid) return;
      if (chatSelectedVisualStyleId === sid) {
        chatSelectedVisualStyleId = null;
      } else {
        chatSelectedVisualStyleId = sid;
        chatStylePanelOpen = true;
      }
      saveChatVisualStyleToStorage();
      syncChatStylePickerUI();
    });

    slider.addEventListener("keydown", function (ev) {
      const card = ev.target.closest(".chat-style-card");
      if (!card || document.activeElement !== card) return;
      if (ev.key !== "Enter" && ev.key !== " ") return;
      ev.preventDefault();
      const sid = card.getAttribute("data-style-id");
      if (!sid) return;
      if (chatSelectedVisualStyleId === sid) {
        chatSelectedVisualStyleId = null;
      } else {
        chatSelectedVisualStyleId = sid;
        chatStylePanelOpen = true;
      }
      saveChatVisualStyleToStorage();
      syncChatStylePickerUI();
    });
  }

  const CHAT_GENERIC_FAILURE_MSG =
    "Something went wrong and we couldn't complete your request. Please try again.";

  async function sendMessageAIV3() {
    const messages = document.getElementById("chat-messages");
    const input = document.querySelector("#chat-input textarea");
    // const undoBtn = document.getElementById("chat-undo");
    const sendBtn = document.getElementById("chat-generate-page");
    const blockBtn = document.getElementById("chat-generate-block");
    const toggleBtn = document.getElementById("chat-toggle");
    const question = input.value.trim();

    // Vérifier qu'un prompt est présent
    let finalQuestion = question;
    const patternName = getPatternName();
    if (!finalQuestion) {
      addMessage("Please enter a prompt first.", "assistant");
      return;
    }

    const conversationHistory = getConversationHistoryString(6);

    // 🔒 Désactiver le bouton + animation loading
    sendBtn.disabled = true;
    if (blockBtn) blockBtn.disabled = true;
    // sendBtn.classList.add("loading");
    sendBtn.textContent = "Generating...";

    // 🎨 Activer l'effet visuel sur le toggle
    if (toggleBtn) {
      toggleBtn.classList.add("generating");
    }

    // 👀 Afficher l'indicateur de saisie de l'IA
    if (typeof showTypingIndicator === "function") {
      showTypingIndicator();
    }

    // Ajouter le message utilisateur à l'historique
    addMessage(finalQuestion, "user");
    input.value = "";
    // Réinitialiser le compteur après envoi
    if (typeof updateChatCharCounter === "function") {
      updateChatCharCounter();
    }
    messages.scrollTop = messages.scrollHeight;

    // Sauvegarder les blocs actuels
    previousBlocks = wp.data.select("core/block-editor").getBlocks();

    try {
      const shouldProceed = await confirmReplacePageContentIfNeeded(previousBlocks);
      if (!shouldProceed) {
        return;
      }

      // Récupérer le token JWT
      const jwtToken = await getJwtToken();

      const wooCommerceInstalled = !!(typeof aiBuilderEditorVars !== 'undefined' && aiBuilderEditorVars.wooCommerceInstalled && aiBuilderEditorVars.wooCommerceInstalled !== '0');
      const activeThemeName = (typeof aiBuilderEditorVars !== 'undefined' && aiBuilderEditorVars.activeThemeName) ? aiBuilderEditorVars.activeThemeName : ((typeof aiBuilderVars !== 'undefined' && aiBuilderVars.activeThemeName) ? aiBuilderVars.activeThemeName : '');
      const sitePlugins = (typeof aiBuilderVars !== 'undefined' && Array.isArray(aiBuilderVars.sitePlugins)) ? aiBuilderVars.sitePlugins.slice(0, 15) : [];
      const wordpressVersion = (typeof aiBuilderVars !== 'undefined' && aiBuilderVars.wordpressVersion) ? String(aiBuilderVars.wordpressVersion) : '';
      const pageContext = buildPageContext();
      const visualStylePrompt = getVisualStylePromptForApi();
      // return;

      let res
      if (patternName) {
        const payload = {
          userPrompt: finalQuestion,
          // pageContent: pageContent,
          patternName: patternName,
          conversationHistory,
          wooCommerceInstalled: wooCommerceInstalled,
          activeThemeName: activeThemeName,
          sitePlugins: sitePlugins,
          wordpressVersion: wordpressVersion,
          pageContext: pageContext || undefined,
          visualStylePrompt: visualStylePrompt || undefined,
        };
        res = await fetch(
          window.config.apiUrl + "/ai-transform-page/generate-pattern",
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              Authorization: `Bearer ${jwtToken}`,
            },
            body: JSON.stringify(payload),
          }
        );
      } else {
        const payload = {
          userPrompt: finalQuestion,
          // pageContent: pageContent,
          conversationHistory,
          wooCommerceInstalled: wooCommerceInstalled,
          activeThemeName: activeThemeName,
          sitePlugins: sitePlugins,
          wordpressVersion: wordpressVersion,
          pageContext: pageContext || undefined,
          visualStylePrompt: visualStylePrompt || undefined,
        };
        res = await fetch(
          window.config.apiUrl + "/ai-transform-page/v2-page-generation",
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              Authorization: `Bearer ${jwtToken}`,
            },
            body: JSON.stringify(payload),
          }
        );
      }

      const responseText = await res.text();
      let data = {};
      try {
        data = responseText ? JSON.parse(responseText) : {};
      } catch (parseErr) {
        data = {};
      }

      // API auth (passport isAuthenticated): not logged in / not verified → 401 + redirectTo
      if (res.status === 401) {
        addMessage(getAccountRequiredChatMessageHtml(), "assistant");
        return;
      }

      // API billing: out of credits → 402
      if (res.status === 402) {
        addMessage(getCreditsRequiredChatMessageHtml(), "assistant");
        return;
      }

      if (!res.ok) {
        addMessage(CHAT_GENERIC_FAILURE_MSG, "assistant");
        return;
      }

      console.log("data: ", data);
      console.log(data.pageContent);
      if (data.error === "not-enough-credits") {
        showNotEnoughCreditsToast();
        return;
      }

      if (data.pageContent) {
        if (data.pageContent !== "[-no-content-to-return-]") {
          // Convertir chaque bloc JSON en bloc WordPress
          const newBlocks = data.pageContent.map(buildBlock);

          // 🔄 Supprimer tous les blocs existants
          wp.data.dispatch("core/block-editor").resetBlocks([]);
          // ➕ Insérer les nouveaux blocs
          wp.data.dispatch("core/block-editor").insertBlocks(newBlocks);
        }

        // Handle CSS if present
        if (data.cssContent && data.cssContent !== "[-no-content-to-return-]") {
          console.log("Injecting CSS...");

          // Sauvegarder le CSS dans les meta du post (type 'page')
          await saveCSSInPostMeta(data.cssContent, "page");

          // Recharger le CSS combiné depuis le serveur
          await loadCSSFromPostMeta();

          // Le bouton CSS est toujours visible
        }

        // Handle JS if present
        if (data.jsContent && data.jsContent !== "[-no-content-to-return-]") {
          console.log("Injecting JS...");

          // Sauvegarder le JS dans les meta du post (type 'page' pour le chat widget)
          await saveJSInPostMeta(data.jsContent, "page");

          // Recharger le JS combiné depuis le serveur
          await loadJSFromPostMeta();

          // Le bouton JS est toujours visible
        }

        // Handle meta description if present
        if (data.postMetaDesc && data.postMetaDesc !== "[-no-content-to-return-]") {
          // await saveMetaDescriptionInPostMeta(data.postMetaDesc);
          await setMetaDescriptionField(data.postMetaDesc);
        }

        // Handle title if present
        if (data.postTitle && data.postTitle !== "[-no-content-to-return-]") {
          updatePostTitle(data.postTitle);
        }

        let aiResponse =
          "Page content has been updated with AI-generated content.";
        if (data.aiResponse) {
          aiResponse = data.aiResponse;
        }

        addMessage(aiResponse, "assistant");

        // Marquer la page comme créée via IA
        await markPageAsAICreated();

        // undoBtn.style.display = "block"; // Affiche le bouton "Annuler"
        // Mettre à jour les crédits si la réponse contient creditsLeft
        if (typeof data.creditsLeft !== "undefined") {
          updateCreditsDisplay(data.creditsLeft);
        }
      } else {
        addMessage("Empty or invalid response.", "assistant");
      }
    } catch (err) {
      // WordPress has no stored API token / missing editor context (not linked to an AI Builder account)
      if (err && err.aibuiAuthRequired === true) {
        addMessage(getAccountRequiredChatMessageHtml(), "assistant");
      } else {
        addMessage(CHAT_GENERIC_FAILURE_MSG, "assistant");
      }
      console.log("err : ", err);
    } finally {
      // 🔓 Réactiver le bouton + retirer animation
      sendBtn.disabled = false;
      if (blockBtn) blockBtn.disabled = false;
      sendBtn.classList.remove("loading");
      sendBtn.textContent = "Generate page";
      messages.scrollTop = messages.scrollHeight;

      // 🎨 Désactiver l'effet visuel sur le toggle
      if (toggleBtn) {
        toggleBtn.classList.remove("generating");
      }

      // 👀 Masquer l'indicateur de saisie de l'IA
      if (typeof hideTypingIndicator === "function") {
        hideTypingIndicator();
      }
    }
  }

  async function sendBlockAIV3() {
    const messages = document.getElementById("chat-messages");
    const input = document.querySelector("#chat-input textarea");
    const pageBtn = document.getElementById("chat-generate-page");
    const blockBtn = document.getElementById("chat-generate-block");
    const toggleBtn = document.getElementById("chat-toggle");
    const question = input.value.trim();

    if (!question) {
      addMessage("Please enter a prompt first.", "assistant");
      return;
    }

    // Disable both buttons while generating
    if (pageBtn) pageBtn.disabled = true;
    if (blockBtn) blockBtn.disabled = true;
    if (blockBtn) blockBtn.textContent = "Generating...";

    if (toggleBtn) {
      toggleBtn.classList.add("generating");
    }
    if (typeof showTypingIndicator === "function") {
      showTypingIndicator();
    }

    // Add user message and clear input
    addMessage(question, "user");
    input.value = "";
    if (typeof updateChatCharCounter === "function") {
      updateChatCharCounter();
    }
    if (messages) messages.scrollTop = messages.scrollHeight;

    try {
      const jwtToken = await getJwtToken();

      const wooCommerceInstalled = !!(typeof aiBuilderEditorVars !== 'undefined' && aiBuilderEditorVars.wooCommerceInstalled && aiBuilderEditorVars.wooCommerceInstalled !== '0');
      const activeThemeName = (typeof aiBuilderEditorVars !== 'undefined' && aiBuilderEditorVars.activeThemeName)
        ? aiBuilderEditorVars.activeThemeName
        : ((typeof aiBuilderVars !== 'undefined' && aiBuilderVars.activeThemeName) ? aiBuilderVars.activeThemeName : '');
      const sitePlugins = (typeof aiBuilderVars !== 'undefined' && Array.isArray(aiBuilderVars.sitePlugins)) ? aiBuilderVars.sitePlugins.slice(0, 15) : [];
      const wordpressVersion = (typeof aiBuilderVars !== 'undefined' && aiBuilderVars.wordpressVersion) ? String(aiBuilderVars.wordpressVersion) : '';
      const conversationHistory = getConversationHistoryString(6);
      const visualStylePrompt = getVisualStylePromptForApi();

      const res = await fetch(
        window.config.apiUrl + "/ai-transform-page/v2-generate-single-block",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${jwtToken}`,
          },
          body: JSON.stringify({
            prompt: question,
            wooCommerceInstalled: wooCommerceInstalled,
            activeThemeName: activeThemeName,
            sitePlugins: sitePlugins,
            wordpressVersion: wordpressVersion,
            visualStylePrompt: visualStylePrompt || undefined,
          }),
        }
      );

      const responseText = await res.text();
      let data = {};
      try {
        data = responseText ? JSON.parse(responseText) : {};
      } catch (e) {
        data = {};
      }

      if (!res.ok) {
        addMessage(CHAT_GENERIC_FAILURE_MSG, "assistant");
        return;
      }

      if (data.error === "not-enough-credits") {
        showNotEnoughCreditsToast();
        return;
      }

      if (!data.blockContent) {
        addMessage("Empty or invalid response.", "assistant");
        return;
      }

      // Save and reload CSS/JS if provided (block-level)
      if (data.cssContent && data.cssContent !== "[-no-content-to-return-]") {
        await saveCSSInPostMeta(data.cssContent, "block");
        await loadCSSFromPostMeta();
      }
      if (data.jsContent && data.jsContent !== "[-no-content-to-return-]") {
        await saveJSInPostMeta(data.jsContent, "block");
        await loadJSFromPostMeta();
      }

      // Insert generated block at the bottom without touching existing content
      const newBlock = buildBlock(data.blockContent);
      const existing = wp.data.select("core/block-editor").getBlocks();
      const insertIndex = Array.isArray(existing) ? existing.length : undefined;
      wp.data.dispatch("core/block-editor").insertBlocks([newBlock], insertIndex);

      if (typeof data.creditsLeft !== "undefined") {
        try {
          updateCreditsDisplay(data.creditsLeft);
        } catch (e) { }
      }

      const aiResponse = data.aiResponse || "Block added to the bottom of the page.";
      addMessage(aiResponse, "assistant");
    } catch (err) {
      if (err && err.aibuiAuthRequired === true) {
        addMessage(getAccountRequiredChatMessageHtml(), "assistant");
      } else {
        addMessage(CHAT_GENERIC_FAILURE_MSG, "assistant");
      }
    } finally {
      if (pageBtn) pageBtn.disabled = false;
      if (blockBtn) blockBtn.disabled = false;
      if (blockBtn) blockBtn.textContent = "Generate block";
      if (toggleBtn) toggleBtn.classList.remove("generating");
      if (typeof hideTypingIndicator === "function") {
        hideTypingIndicator();
      }
      if (messages) messages.scrollTop = messages.scrollHeight;
    }
  }

  let cachedAICreatedStatus = null;

  async function getCurrentPostAICreatedStatus() {
    if (cachedAICreatedStatus !== null) return cachedAICreatedStatus;
    try {
      const postId =
        wp?.data?.select("core/editor")?.getCurrentPostId?.() ||
        new URL(window.location.href, window.location.origin).searchParams.get("post") ||
        new URL(window.location.href, window.location.origin).searchParams.get("postId") ||
        new URL(window.location.href, window.location.origin).searchParams.get("p");
      if (!postId) return false;

      const formData = new FormData();
      formData.append("action", "aibui_get_ai_created_status");
      formData.append("post_id", postId);
      formData.append("nonce", aiBuilderVars.nonce);

      const response = await fetch(ajaxurl, { method: "POST", body: formData });
      const result = await response.json();
      cachedAICreatedStatus = !!(result && result.success && result.data && result.data.isAICreated);
      return cachedAICreatedStatus;
    } catch (e) {
      return false;
    }
  }

  function doesPageHaveExistingContent(blocks) {
    try {
      if (!Array.isArray(blocks) || blocks.length === 0) return false;
      // Treat any non-empty block list as existing content.
      // (We can refine later to ignore purely empty placeholders.)
      return true;
    } catch (e) {
      return false;
    }
  }

  function ensureReplaceContentModal() {
    let modal = document.getElementById("aibui-replace-content-modal");
    if (modal) return modal;

    modal = document.createElement("div");
    modal.id = "aibui-replace-content-modal";
    modal.setAttribute("hidden", "");
    modal.innerHTML = `
      <div class="aibui-modal-backdrop" data-aibui-modal-close></div>
      <div class="aibui-modal-panel" role="dialog" aria-modal="true" aria-labelledby="aibui-replace-content-title">
        <h3 id="aibui-replace-content-title" class="aibui-modal-title">Warning</h3>
        <p class="aibui-modal-text">
          This page content will be replaced by AI-generated content.
          If you don’t want to replace it and would rather add new content, use <strong>Generate block</strong> to append content without overwriting what’s already on the page.
        </p>
        <div class="aibui-modal-actions">
          <button type="button" class="aibui-btn aibui-btn--ghost" data-aibui-cancel>Cancel</button>
          <button type="button" class="aibui-btn aibui-btn--primary" data-aibui-confirm>Replace content</button>
        </div>
      </div>
    `;
    document.body.appendChild(modal);
    return modal;
  }

  function openReplaceContentModal() {
    const modal = ensureReplaceContentModal();
    modal.removeAttribute("hidden");
    return modal;
  }

  function closeReplaceContentModal() {
    const modal = document.getElementById("aibui-replace-content-modal");
    if (!modal) return;
    modal.setAttribute("hidden", "");
  }

  async function confirmReplacePageContentIfNeeded(existingBlocks) {
    // Only warn if the editor already has content and it wasn't generated by AI Builder.
    if (!doesPageHaveExistingContent(existingBlocks)) return true;
    const isAICreated = await getCurrentPostAICreatedStatus();
    if (isAICreated) return true;

    const modal = openReplaceContentModal();

    return await new Promise((resolve) => {
      const confirmBtn = modal.querySelector("[data-aibui-confirm]");
      const cancelBtn = modal.querySelector("[data-aibui-cancel]");
      const backdrop = modal.querySelector("[data-aibui-modal-close]");

      function cleanup() {
        if (confirmBtn) confirmBtn.removeEventListener("click", onConfirm);
        if (cancelBtn) cancelBtn.removeEventListener("click", onCancel);
        if (backdrop) backdrop.removeEventListener("click", onCancel);
        document.removeEventListener("keydown", onKeyDown);
      }

      function onConfirm() {
        cleanup();
        closeReplaceContentModal();
        resolve(true);
      }

      function onCancel() {
        cleanup();
        closeReplaceContentModal();
        resolve(false);
      }

      function onKeyDown(ev) {
        if (ev.key === "Escape") onCancel();
      }

      if (confirmBtn) confirmBtn.addEventListener("click", onConfirm);
      if (cancelBtn) cancelBtn.addEventListener("click", onCancel);
      if (backdrop) backdrop.addEventListener("click", onCancel);
      document.addEventListener("keydown", onKeyDown);
    });
  }

  const pageBtn = document.getElementById("chat-generate-page");
  const generateBlockBtn = document.getElementById("chat-generate-block");
  if (pageBtn) pageBtn.onclick = sendMessageAIV3;
  if (generateBlockBtn) generateBlockBtn.onclick = sendBlockAIV3;
  input.addEventListener("keypress", (e) => {
    if (e.key === "Enter") sendMessageAIV3();
  });
  initChatVisualStylePicker();
  initAibuiBlockModifier();
  loadUserCredits();
  loadCSSFromPostMeta();
  loadJSFromPostMeta();
});

// Ajouter les styles CSS pour le bouton CSS et la modale
const cssStyles = document.createElement("style");
cssStyles.textContent = `
  /* Zone de saisie du chat */
  #chat-input {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  #chat-input .chat-input-wrap{
    position: relative;
    width: 100%;
  }

  #chat-input .chat-actions{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap: wrap;
  }

  #chat-input #chat-generate-page{
    flex: 1 1 auto;
    min-width: 160px;
  }

  #chat-input #chat-generate-block{
    flex: 0 0 auto;
  }

  #chat-input .chat-generate-block{
    background: rgba(255,255,255,0.9);
    border: 1px solid #e2e8f0;
    color: #0f172a;
  }

  #chat-input .chat-generate-block:hover{
    background: #ffffff;
  }

  #chat-input textarea {
    width: 100%;
    resize: vertical;
  }

  #chat-expand-input.chat-expand-input{
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    max-width: 26px;
    max-height: 26px;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.8);
    background: rgba(241, 245, 249, 0.95);
    color: #475569;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  }
  #chat-expand-input.chat-expand-input:hover{
    background: #ffffff;
    border-color: rgba(100, 116, 139, 0.6);
  }
  #chat-expand-input.chat-expand-input:active{
    transform: translateY(1px);
  }
  #chat-expand-input.chat-expand-input::before{
    content: "⤢";
    font-size: 14px;
    line-height: 1;
    display:block;
    transform: translateY(-1px);
  }

  #chat-char-counter {
    align-self: flex-end;
    font-size: 11px;
    color: #888;
  }

  /* Expanded prompt editor modal */
  #chat-expand-modal[hidden]{ display:none !important; }
  #chat-expand-modal.chat-expand-modal{
    position: fixed;
    inset: 0;
    z-index: 10020;
  }
  #chat-expand-modal .chat-expand-backdrop{
    position:absolute;
    inset:0;
    background: rgba(15, 23, 42, 0.55);
    border: none;
    padding: 0;
    cursor: default;
  }
  #chat-expand-modal .chat-expand-panel{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(900px, calc(100vw - 32px));
    height: min(70vh, 560px);
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 18px 60px rgba(0,0,0,0.24);
    display:flex;
    flex-direction: column;
    overflow:hidden;
  }
  #chat-expand-modal .chat-expand-head{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #eef2f7;
    background: #f8fafc;
  }
  #chat-expand-modal .chat-expand-title{
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color:#0f172a;
  }
  #chat-expand-modal .chat-expand-close{
    appearance:none;
    border:none;
    background:transparent;
    font-size: 22px;
    line-height: 1;
    cursor:pointer;
    color:#334155;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: 10px;
  }
  #chat-expand-modal .chat-expand-close:hover{ background:#e2e8f0; }
  #chat-expand-modal .chat-expand-textarea{
    flex: 1 1 auto;
    width: 100%;
    box-sizing: border-box;
    border: none;
    outline: none;
    padding: 14px;
    resize: none;
    font-size: 14px;
    line-height: 1.5;
  }
  #chat-expand-modal .chat-expand-foot{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid #eef2f7;
    background: #ffffff;
  }
  #chat-expand-modal .chat-expand-hint{
    font-size: 12px;
    color:#64748b;
  }
  #chat-expand-modal .chat-expand-done{
    appearance:none;
    border: 1px solid #0ea5e9;
    background: #0ea5e9;
    color: #fff;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
  }
  #chat-expand-modal .chat-expand-done:hover{ filter: brightness(0.98); }

  /* Indicateur de saisie de l'IA */
  #chat-typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 12px;
    background-color: #f1f3f5;
    color: #555;
    font-size: 12px;
    max-width: 80%;
    margin-top: 4px;
  }

  #chat-typing-indicator .chat-gen-status {
    margin-left: 8px;
    opacity: 0.75;
    transition: opacity 220ms ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
  }

  #chat-typing-indicator .chat-gen-status.is-fading {
    opacity: 0;
  }

  #chat-typing-indicator .typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #888;
    display: inline-block;
    animation: ai-typing-bounce 1s infinite ease-in-out;
  }

  #chat-typing-indicator .typing-dot:nth-child(2) {
    animation-delay: 0.15s;
  }

  #chat-typing-indicator .typing-dot:nth-child(3) {
    animation-delay: 0.3s;
  }

  @keyframes ai-typing-bounce {
    0%, 60%, 100% {
      transform: translateY(0);
      opacity: 0.4;
    }
    30% {
      transform: translateY(-4px);
      opacity: 1;
    }
  }

  /* Confirm replace content modal (before generation) */
  #aibui-replace-content-modal[hidden] { display: none !important; }
  #aibui-replace-content-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
  }
  #aibui-replace-content-modal .aibui-modal-backdrop{
    position:absolute; inset:0;
    background: rgba(15, 23, 42, 0.52);
    backdrop-filter: blur(2px);
  }
  #aibui-replace-content-modal .aibui-modal-panel{
    position: relative;
    width: min(560px, calc(100vw - 32px));
    margin: 10vh auto 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 60px rgba(0,0,0,0.22);
    padding: 16px 16px 14px;
    border: 1px solid rgba(226,232,240,0.9);
  }
  #aibui-replace-content-modal .aibui-modal-title{
    margin: 0 0 8px 0;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 800;
    color: #0f172a;
  }
  #aibui-replace-content-modal .aibui-modal-text{
    margin: 0 0 14px 0;
    font-size: 13px;
    line-height: 1.6;
    color: #334155;
  }
  #aibui-replace-content-modal .aibui-modal-actions{
    display:flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  #aibui-replace-content-modal .aibui-btn{
    appearance:none;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }
  #aibui-replace-content-modal .aibui-btn--primary{
    background:#0ea5e9;
    color:#fff;
  }
  #aibui-replace-content-modal .aibui-btn--primary:hover{ filter: brightness(0.98); }
  #aibui-replace-content-modal .aibui-btn--secondary{
    background:#10b981;
    color:#fff;
  }
  #aibui-replace-content-modal .aibui-btn--secondary:hover{ filter: brightness(0.98); }
  #aibui-replace-content-modal .aibui-btn--ghost{
    background: transparent;
    border-color: #e2e8f0;
    color: #0f172a;
  }
  #aibui-replace-content-modal .aibui-btn--ghost:hover{ background: #f8fafc; }

  /* AI Block modifier mini panel */
  #aibui-block-modifier[hidden]{ display:none !important; }
  #aibui-block-modifier{
    position: fixed;
    top: 0;
    left: 0;
    width:320px;
    z-index: 9001;
    background:#ffffff;
    border: 1px solid rgba(226,232,240,0.95);
    border-radius: 14px;
    box-shadow: 0 18px 60px rgba(0,0,0,0.14);
    overflow:hidden;
    will-change: transform;
  }
  #aibui-block-modifier .aibui-bm-head{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap:10px;
    padding:10px 12px;
    border-bottom:1px solid #eef2f7;
    background: #f8fafc;
  }
  #aibui-block-modifier .aibui-bm-title{
    font-size: 13px;
    font-weight: 800;
    color:#0f172a;
  }
  #aibui-block-modifier .aibui-bm-close{
    appearance:none;
    border:none;
    background:transparent;
    font-size: 18px;
    line-height: 1;
    cursor:pointer;
    color:#334155;
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: 8px;
  }
  #aibui-block-modifier .aibui-bm-close:hover{ background:#e2e8f0; }
  #aibui-block-modifier .aibui-bm-body{ padding: 12px; }
  #aibui-block-modifier .aibui-bm-label{
    display:block;
    font-size: 12px;
    font-weight: 700;
    color:#334155;
    margin: 0 0 6px;
  }
  #aibui-block-modifier .aibui-bm-prompt{
    width:100%;
    box-sizing:border-box;
    resize: vertical;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 10px;
    font-size: 13px;
    line-height: 1.4;
  }
  #aibui-block-modifier .aibui-bm-meta{
    margin-top: 6px;
    display:flex;
    justify-content:flex-end;
    font-size: 11px;
    color:#64748b;
    user-select:none;
  }
  #aibui-block-modifier .aibui-bm-meta.aibui-bm-meta--max{
    color:#b45309;
    font-weight: 700;
  }
  #aibui-block-modifier .aibui-bm-actions{
    margin-top: 10px;
    display:flex;
    justify-content:flex-end;
  }
  #aibui-block-modifier .aibui-bm-btn{
    appearance:none;
    border:1px solid transparent;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 800;
    cursor:pointer;
  }
  #aibui-block-modifier .aibui-bm-btn--primary{
    background:#0ea5e9;
    color:#fff;
  }
  #aibui-block-modifier .aibui-bm-btn--primary:hover{ filter: brightness(0.98); }
  #aibui-block-modifier .aibui-bm-status{
    margin-top: 8px;
    font-size: 12px;
    color:#64748b;
    min-height: 16px;
  }
  #aibui-block-modifier .aibui-bm-status-dots{
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin-right: 8px;
    vertical-align: middle;
  }
  #aibui-block-modifier .aibui-bm-status-dots[hidden]{
    display:none !important;
  }
  #aibui-block-modifier .aibui-bm-status-dots .typing-dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #64748b;
    display: inline-block;
    animation: ai-typing-bounce 1s infinite ease-in-out;
  }
  #aibui-block-modifier .aibui-bm-status-dots .typing-dot:nth-child(2){ animation-delay: 0.15s; }
  #aibui-block-modifier .aibui-bm-status-dots .typing-dot:nth-child(3){ animation-delay: 0.3s; }

  /* Small "Modify with AI" button (shown on group selection) */
  #aibui-block-modifier-btn[hidden]{ display:none !important; }
  #aibui-block-modifier-btn.aibui-bm-fab{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9000;
    height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.92);
    color: #fff;
    border: 1px solid rgba(148, 163, 184, 0.35);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.14);
    white-space: nowrap;
    will-change: transform;
  }
  #aibui-block-modifier-btn.aibui-bm-fab:hover{
    filter: brightness(1.03);
  }

  /* Header du chat: layout propre et actions cohérentes */
  #chat-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
    padding-right: 42px;
  }

  #chat-header .chat-close{
    position: absolute;
    top: 5px;
    right: 5px;
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0);
    background: rgba(255, 255, 255, 0);
    color: #fff;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
    z-index: 1;
  }
  #chat-header .chat-close:hover{
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0);
  }

  #chat-header-left {
    flex: 1;
    min-width: 0;
  }

  #chat-header-left h3 {
    margin: 0 0 6px 0;
    font-size: 17px;
    line-height: 1.25;
  }

  #chat-header-left p {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    opacity: 0.92;
  }

  #chat-header-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
  }

  #chat-header-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 116px;
    box-sizing: border-box;
  }

  /* Bouton Header/Footer */
  #headers-footers-button {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(191, 219, 254, 0.9);
    color: #1e40af;
    padding: 7px 11px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    transition: all 0.2s ease;
    width: 116px;
    box-sizing: border-box;
    text-align: center;
  }

  #headers-footers-button:hover {
    background: #ffffff !important;
    border-color: #93c5fd !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(30, 64, 175, 0.2);
  }

  /* Boutons outils du header */
  #css-edit-button {
    width: 54px;
    height: 34px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    padding: 0;
    box-sizing: border-box;
  }

  #css-edit-button:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
  }

  #css-edit-button svg {
    width: 16px;
    height: 16px;
  }

  #css-edit-button img {
    width: 16px;
    height: 16px;
    display: block;
    margin: 0 auto;
  }

  /* Modale CSS */
  #css-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
  }

  #css-modal-content {
    background: white;
    border-radius: 8px;
    width: 80%;
    max-width: 800px;
    max-height: 80%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  }

  #css-modal-header {
    padding: 20px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #css-modal-header h3 {
    margin: 0;
    color: #333;
  }

  #css-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #css-modal-close:hover {
    color: #000;
  }

  #css-modal-body,
  #js-modal-body {
    flex: 1;
    padding: 20px;
    overflow: hidden;
  }

  /* Styles pour CodeMirror */
  #css-modal-body .CodeMirror,
  #js-modal-body .CodeMirror {
    height: 400px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
  }

  /* Assurer un minimum de 10 lignes visibles */
  #css-modal-body .CodeMirror-scroll,
  #js-modal-body .CodeMirror-scroll {
    min-height: 210px; /* ~10 lignes à 21px chacune */
  }

  #css-modal-body .CodeMirror-sizer,
  #js-modal-body .CodeMirror-sizer {
    min-height: 210px !important;
  }

  #css-modal-body .CodeMirror-lines,
  #js-modal-body .CodeMirror-lines {
    min-height: 210px;
    padding-bottom: 50px; /* Espace pour scroller au-delà du contenu */
  }

  #css-editor, #js-editor {
    display: none; /* Caché car remplacé par CodeMirror */
  }

  #css-modal-footer {
    padding: 20px;
    border-top: 1px solid #ddd;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
  }

  #css-save, #css-cancel {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
  }

  #css-save {
    background: #007cba;
    color: white;
  }

  #css-save:hover {
    background: #005a87;
  }

  #css-cancel {
    background: #f0f0f0;
    color: #333;
  }

  #css-cancel:hover {
    background: #e0e0e0;
  }

  /* Bouton JS intégré dans le header */
  #js-edit-button {
    width: 54px;
    height: 34px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    padding: 0;
    font-weight: 600;
    box-sizing: border-box;
  }

  #js-edit-button:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
  }

  #js-edit-button span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
  }

  @media (max-width: 560px) {
    #chat-header {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }

    #chat-header-actions {
      align-items: stretch;
    }

    #chat-header-tools {
      justify-content: flex-end;
    }

    #headers-footers-button {
      text-align: center;
    }
  }

  /* Modale JS */
  #js-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
  }

  #js-modal-content {
    background: white;
    border-radius: 8px;
    width: 80%;
    max-width: 800px;
    max-height: 80%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  }

  #js-modal-header {
    padding: 20px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #js-modal-header h3 {
    margin: 0;
    color: #333;
  }

  #js-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #js-modal-close:hover {
    color: #000;
  }

  #js-modal-footer {
    padding: 20px;
    border-top: 1px solid #ddd;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
  }

  #js-save, #js-cancel {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
  }

  #js-save {
    background: #007cba;
    color: white;
  }

  #js-save:hover {
    background: #005a87;
  }

  #js-cancel {
    background: #f0f0f0;
    color: #333;
  }

  #js-cancel:hover {
    background: #e0e0e0;
  }

  /* Highlight for CSS class search */
  .css-class-highlight {
    background: rgba(253, 237, 65, 0.17) !important;
    border-left: 3px solidrgba(251, 193, 45, 0.5) !important;
  }

  /* Chat visual style picker (above input; panel background is light) */
  .chat-style-picker {
    padding: 10px 15px 8px;
    border-bottom: 1px solid #e8e8e8;
    background: #fff;
    flex-shrink: 0;
  }

  .chat-style-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
  }

  .chat-style-trigger {
    flex: 1;
    min-width: 0;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
  }

  .chat-style-trigger-chevron {
    flex: 0 0 auto;
    font-size: 24px;
    line-height: 1;
    opacity: 0.9;
  }

  .chat-style-trigger:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #475569;
  }

  .chat-style-swipe-hint {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .chat-style-remove {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    cursor: pointer;
  }

  .chat-style-remove:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
  }

  .chat-style-slider-outer {
    margin-top: 10px;
    overflow: hidden;
  }

  .chat-style-slider {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 2px 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .chat-style-slider::-webkit-scrollbar {
    height: 6px;
  }

  .chat-style-slider::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
  }

  .chat-style-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 100px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: center;
    outline: none;
  }

  .chat-style-card:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2563eb;
    border-radius: 14px;
  }

  .chat-style-card-inner {
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #e2e8f0;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #f1f5f9;
  }

  .chat-style-preview-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    cursor: pointer;
    padding: 0;
    z-index: 3;
    transition: background 0.15s, color 0.15s, transform 0.15s;
  }

  .chat-style-preview-btn:hover {
    background: #fff;
    color: #1d4ed8;
    transform: scale(1.05);
  }

  .chat-style-preview-btn:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
  }

  .chat-style-preview-icon {
    display: block;
    flex-shrink: 0;
  }

  .chat-style-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .chat-style-card-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
  }

  .chat-style-fallback--neobrutalism {
    background: linear-gradient(135deg, #ffd700 40%, #ff6b9d, #4361ee);
    border: 3px solid #000;
    box-sizing: border-box;
  }

  .chat-style-fallback--premium-dark {
    background: linear-gradient(160deg, #0a0a0b, #141416 60%, #8b5cf6, #ec4899);
  }

  .chat-style-fallback--modern-minimalist {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    box-sizing: border-box;
  }

  .chat-style-fallback--editorial-typography {
    background: linear-gradient(180deg, #fbfaf7, #e8e4dc);
  }

  .chat-style-fallback--organic-nature {
    background: linear-gradient(145deg, #87a878, #f5efe0 50%, #c97d5d);
  }

  .chat-style-fallback--retrofuturism {
    background: linear-gradient(180deg, #0b0b2e 30%, #1a0b3e 70%, #ff006e);
  }

  .chat-style-fallback--saas-tech {
    background: linear-gradient(135deg, #ffffff, #eef2ff 40%, #4f46e5 120%);
  }

  .chat-style-fallback--luxury {
    background: linear-gradient(160deg, #0e0e0e, #1a1814 50%, #c5a572);
  }

  .chat-style-fallback--bento-grid {
    background: #fafafa;
    background-image: linear-gradient(#e5e5e5 1px, transparent 1px), linear-gradient(90deg, #e5e5e5 1px, transparent 1px);
    background-size: 18px 18px;
  }

  .chat-style-fallback--y2k-revival {
    background: linear-gradient(145deg, #a8dadc, #ffb6d9, #c8ff6b, #c8a4d4);
  }

  .chat-style-fallback--swiss-typographic {
    background: linear-gradient(90deg, #ffffff 70%, #e63946 70%, #e63946 72%, #ffffff 72%);
  }

  .chat-style-fallback--claymorphism {
    background: radial-gradient(circle at 30% 25%, #fff3b0, #e0d7ff 40%, #c7f0db 75%, #ffd4c4);
  }

  .chat-style-card.is-selected .chat-style-card-inner {
    border-color: #38bdf8;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.35);
  }

  .chat-style-card-label {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.25;
    color: #64748b;
    font-weight: 500;
    max-width: 100px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Style preview modal (sibling of #chat-box, fixed to viewport) */
  .chat-style-detail-modal[hidden] {
    display: none !important;
  }

  .chat-style-detail-modal:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .chat-style-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    padding: 16px;
    box-sizing: border-box;
  }

  .chat-style-detail-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
  }

  .chat-style-detail-panel {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 16px;
    max-width: min(540px, 100%);
    width: 100%;
    max-height: min(90vh, 880px);
    overflow: auto;
    padding: 20px 20px 22px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.28);
    text-align: left;
  }

  .chat-style-detail-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    font-size: 22px;
    line-height: 1;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
  }

  .chat-style-detail-close:hover {
    background: #e2e8f0;
    color: #0f172a;
  }

  .chat-style-detail-title {
    margin: 0 44px 14px 0;
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
  }

  .chat-style-detail-image-wrap {
    border-radius: 12px;
    overflow: hidden;
    background: #f8fafc;
    margin-bottom: 14px;
  }

  .chat-style-detail-image-wrap img {
    display: block;
    width: 100%;
    max-height: min(42vh, 360px);
    height: auto;
    object-fit: contain;
    margin: 0 auto;
  }

  .chat-style-detail-intro {
    margin: 0 0 8px 0;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .chat-style-detail-prompt {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #334155;
    white-space: pre-wrap;
    word-break: break-word;
  }

  
`;

document.head.appendChild(cssStyles);