// KI Chat Bubble — Flowise embed
// To remove: delete this file and the <script> tag in index.html that loads it.

import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js";

// On production the PHP proxy is used so credentials never appear in client JS.
// On localhost the embed talks directly to Flowise (dev only).
const isLocal = ['localhost', '127.0.0.1'].includes(window.location.hostname);

Chatbot.init({
    chatflowid: isLocal ? "d63d3d02-b5fa-482c-9161-c21c615fb625" : "chat",
    apiHost:    isLocal ? "https://flowise.profice.de" : window.location.origin,
    theme: {
        button: {
            backgroundColor: "#5a5252",
            right: 24,
            bottom: 24,
            size: "medium",
            iconColor: "#EBEBDE"
        },
        chatWindow: {
            showTitle: true,
            title: "Profice Assistent",
            titleBackgroundColor: "#5a5252",
            titleTextColor: "#EBEBDE",
            welcomeMessage: "Hallo! Ich bin der KI-Assistent von Profice. Wie kann ich Ihnen helfen?\n\nIch berate Sie gerne zu unseren Lösungen für Automatisierung, KI-Systeme und digitale Prozesse.",
            backgroundColor: "#ffffff",
            fontSize: 15,
            showAgentMessages: true,
            poweredByTextColor: "#ffffff",
            botMessage: {
                backgroundColor: "#f5f4ef",
                textColor: "#5a5252",
                showAvatar: true,
                avatarSrc: "/images/icons/KI.png"
            },
            userMessage: {
                backgroundColor: "#5a5252",
                textColor: "#EBEBDE",
                showAvatar: false
            },
            textInput: {
                placeholder: "Ihre Nachricht...",
                backgroundColor: "#ffffff",
                textColor: "#5a5252",
                sendButtonColor: "#d4864a"
            },
            footer: {
                textColor: "#ffffff",
                text: " ",
                company: " ",
                companyLink: ""
            }
        }
    }
});

// Inject orange border around just the header.
// ::part(header) is not exported by Flowise so we inject into the shadow root directly.
// The header is identified as the element that has the dark titleBackgroundColor AND
// contains the chat title — this avoids matching user message bubbles.
function injectHeaderStyle() {
    const flowise = document.querySelector('flowise-chatbot');
    if (!flowise?.shadowRoot) return false;

    const shadow = flowise.shadowRoot;
    if (shadow.querySelector('#profice-header-applied')) return true;

    const all = [...shadow.querySelectorAll('*')];

    const header = all.find(el => {
        const bg = getComputedStyle(el).backgroundColor;
        return bg === 'rgb(90, 82, 82)' && el.textContent.includes('Profice Assistent');
    });

    if (!header) return false;

    header.style.border    = '3px solid #d4864a';
    header.style.boxSizing = 'border-box';
    // No border-radius here — the parent chatwindow's overflow:hidden clips corners naturally

    const marker = document.createElement('span');
    marker.id = 'profice-header-applied';
    marker.style.display = 'none';
    shadow.appendChild(marker);

    return true;
}

// Retry until shadow DOM is populated (widget loads async)
let attempts = 0;
const interval = setInterval(() => {
    if (injectHeaderStyle() || ++attempts > 20) clearInterval(interval);
}, 300);