{# Widget chatbot SALAM — global (base_dc + base). Assistant IA branché sur
   /api/chatbot → n8n (Anthropic, secteur SALAM). FR + EN. #}
<div id="salam-chatbot" style="position: fixed; right: 28px; bottom: 28px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; font-family: Manrope, system-ui, sans-serif;">
    <div id="salam-chatbot-panel" hidden style="width: 430px; max-width: calc(100vw - 40px); background: #1C4F1C; border: 1px solid #327632; border-radius: 8px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.45);">
        <div style="height: 2px; background: linear-gradient(90deg, #D7DA45, #79B63B, #D7DA45);"></div>
        <div style="display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid #327632;">
            <img src="/images/symbole-salam-140.webp" alt="" style="width: 30px; height: 30px; display: block;">
            <div style="flex: 1;">
                <div style="font-size: 15px; font-weight: 700; color: #F0F2EA;">Assistant IA</div>
                <div style="font-size: 12.5px; color: #ACB7A5; margin-top: 2px;">réponses automatiques — 24h/24</div>
            </div>
            <div style="display: flex; align-items: center; gap: 7px; font-size: 12px; color: #D7DA45; border: 1px solid #327632; border-radius: 999px; padding: 5px 11px;">
                <span style="width: 6px; height: 6px; border-radius: 50%; background: #D7DA45;"></span> actif
            </div>
            <button id="salam-chatbot-close" aria-label="Fermer" style="background: none; border: 0; color: #ACB7A5; font-size: 22px; line-height: 1; padding: 0 2px; cursor: pointer;">&times;</button>
        </div>
        <div id="salam-chatbot-messages" style="padding: 22px; display: flex; flex-direction: column; gap: 12px; max-height: 46vh; overflow-y: auto;">
            <div class="scb-msg scb-bot" style="align-self: flex-start; max-width: 88%; background: #111410; border: 1px solid #327632; border-radius: 8px; padding: 12px 15px; font-size: 14.5px; line-height: 1.55; color: #F0F2EA;">Bonjour 👋 Je suis l'assistant IA de SALAM. Posez-moi votre question sur nos services, tarifs ou votre projet.</div>
        </div>
        <div style="padding: 0 22px 14px; display: flex; flex-wrap: wrap; gap: 8px;">
            <a href="/demande-de-devis/" style="border: 1px solid rgba(215,218,69,0.45); border-radius: 4px; padding: 8px 13px; font-size: 13px; color: #D7DA45; text-decoration: none;">Demander un devis</a>
        </div>
        <form id="salam-chatbot-form" style="display: flex; align-items: center; gap: 10px; padding: 12px 16px 16px; border-top: 1px solid #327632; margin: 0;">
            <input id="salam-chatbot-input" autocomplete="off" placeholder="Posez votre question ici..." style="flex: 1; background: #111410; border: 1px solid #327632; border-radius: 6px; outline: none; color: #F0F2EA; font-family: inherit; font-size: 14.5px; padding: 11px 13px;">
            <button id="salam-chatbot-send" type="submit" style="border: 0; border-radius: 4px; background: #D7DA45; color: #111410; font-size: 13.5px; font-weight: 700; padding: 11px 18px; cursor: pointer;">Envoyer</button>
        </form>
    </div>
    <button id="salam-chatbot-toggle" aria-expanded="false" style="display: flex; align-items: center; white-space: nowrap; gap: 11px; border: 1px solid #327632; border-radius: 999px; background: #1C4F1C; color: #F0F2EA; box-shadow: 0 8px 26px rgba(0,0,0,0.35); font-family: inherit; font-size: 14.5px; font-weight: 700; padding: 12px 20px 12px 12px; cursor: pointer;">
        <img src="/images/symbole-salam-140.webp" alt="" style="width: 30px; height: 30px; display: block;">
        Assistant IA
        <span style="width: 7px; height: 7px; border-radius: 50%; background: #D7DA45;"></span>
    </button>
</div>
<script>
// Formateur markdown-léger partagé (widget SALAM + démos sectorielles).
// opts.linkButtons=true → transforme [Texte](/chemin/) en bouton cliquable (widget SALAM uniquement).
window.salamFmtMarkdown = function (raw, opts) {
    opts = opts || {};
    var esc = function (s) { return String(s).replace(/[&<>"']/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]; }); };
    if (opts.plain) { return esc(raw == null ? '' : raw).replace(/\n/g, '<br>'); }
    var inline = function (s) {
        s = esc(s);
        s = s.replace(/\[([^\]]*)\]\((\/[^)\s]*)\)/g, function (m, txt, href) {
            var label = (txt || '').trim() || 'En savoir plus →';
            if (opts.linkButtons) {
                return '<a href="' + href + '" style="display:inline-block;background:#D7DA45;color:#111410;border-radius:6px;padding:6px 14px;font-weight:600;font-size:12px;text-decoration:none;margin:4px 6px 2px 0;">' + esc(label) + '</a>';
            }
            return '<a href="' + href + '" style="color:#D7DA45;font-weight:600;">' + esc(label) + '</a>';
        });
        s = s.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
        return s;
    };
    var lines = String(raw == null ? '' : raw).replace(/\r/g, '').split('\n');
    var html = '', items = [], listTag = null;
    var flush = function () {
        if (!items.length) return;
        html += '<' + listTag + ' style="margin:6px 0 6px 2px;padding-left:20px;">' + items.map(function (li) { return '<li style="margin:3px 0;">' + li + '</li>'; }).join('') + '</' + listTag + '>';
        items = []; listTag = null;
    };
    for (var i = 0; i < lines.length; i++) {
        var t = lines[i].trim();
        if (t === '') { flush(); continue; }
        var mNum = t.match(/^(\d+)[.)]\s+(.*)$/);
        var mBul = t.match(/^[-*•]\s+(.*)$/);
        if (mNum) { if (listTag !== 'ol') flush(); listTag = 'ol'; items.push(inline(mNum[2])); continue; }
        if (mBul) { if (listTag !== 'ul') flush(); listTag = 'ul'; items.push(inline(mBul[1])); continue; }
        flush();
        var letters = t.replace(/[^A-Za-zÀ-ÿ]/g, '');
        if (letters.length >= 3 && t === t.toUpperCase() && t.length <= 40) {
            html += '<div style="color:#D7DA45;font-weight:600;margin:9px 0 2px;font-size:12.5px;letter-spacing:.02em;">' + inline(t) + '</div>';
        } else {
            html += '<p style="margin:6px 0;">' + inline(t) + '</p>';
        }
    }
    flush();
    return html || '<p style="margin:0;"></p>';
};
(function () {
    var toggle = document.getElementById('salam-chatbot-toggle'),
        panel = document.getElementById('salam-chatbot-panel'),
        closeBtn = document.getElementById('salam-chatbot-close'),
        msgs = document.getElementById('salam-chatbot-messages'),
        form = document.getElementById('salam-chatbot-form'),
        input = document.getElementById('salam-chatbot-input');
    if (!toggle || !panel) return;
    var history = [], busy = false;
    // Identifiant de session (persistant par navigateur) — pour l'historique en BDD.
    var SID = (function () {
        try {
            var k = 'salam_chat_sid', v = localStorage.getItem(k);
            if (!v) { v = (window.crypto && crypto.randomUUID) ? crypto.randomUUID() : 's-' + Date.now() + '-' + Math.random().toString(36).slice(2); localStorage.setItem(k, v); }
            return v;
        } catch (e) { return 's-' + Date.now() + '-' + Math.random().toString(36).slice(2); }
    })();

    function esc(s) { return String(s).replace(/[&<>"']/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]; }); }
    function fmtUser(s) { return esc(s).replace(/\n/g, '<br>'); }
    function fmt(s) { return window.salamFmtMarkdown(s, { linkButtons: true }); }
    function bubble(role, htmlContent) {
        var d = document.createElement('div');
        var me = role === 'user';
        d.className = 'scb-msg scb-' + role;
        d.style.cssText = 'align-self:' + (me ? 'flex-end' : 'flex-start') + ';max-width:88%;background:' + (me ? '#1C4F1C' : '#111410') + ';border:1px solid ' + (me ? '#327632' : '#276327') + ';border-radius:8px;padding:12px 15px;font-size:14.5px;line-height:1.55;color:#F0F2EA;';
        d.innerHTML = htmlContent;
        msgs.appendChild(d);
        msgs.scrollTop = msgs.scrollHeight;
        return d;
    }
    function open() { panel.removeAttribute('hidden'); toggle.setAttribute('aria-expanded', 'true'); setTimeout(function () { input && input.focus(); }, 60); }
    function close() { panel.setAttribute('hidden', ''); toggle.setAttribute('aria-expanded', 'false'); }
    toggle.addEventListener('click', function () { panel.hasAttribute('hidden') ? open() : close(); });
    if (closeBtn) closeBtn.addEventListener('click', close);

    form.addEventListener('submit', function (e) {
        e.preventDefault();
        var text = (input.value || '').trim();
        if (!text || busy) return;
        input.value = '';
        bubble('user', fmtUser(text));
        // Historique AVANT ce message (n8n rajoute le message courant) — mémoire de conversation.
        var priorHistory = history.slice(-10);
        history.push({ role: 'user', content: text });
        busy = true;
        var typing = bubble('bot', '<span style="color:#ACB7A5">…</span>');
        fetch('/api/chatbot', {
            method: 'POST', headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ message: text, sector: 'salam', history: priorHistory, session_id: SID })
        }).then(function (r) { return r.json(); }).then(function (data) {
            var reply = (data && data.reply) ? data.reply : "Désolé, je n'ai pas pu répondre. Écrivez-nous : +590 690 65 38 47.";
            typing.innerHTML = fmt(reply);
            msgs.scrollTop = msgs.scrollHeight;
            history.push({ role: 'assistant', content: reply });
        }).catch(function () {
            typing.innerHTML = fmt("L'assistant est momentanément indisponible. Réessayez, ou appelez le +590 690 65 38 47.");
        }).finally(function () { busy = false; input.focus(); });
    });
})();
</script>