// Bot funcs

function AddQueryBubble(query) {

    let chatArea = document.getElementsByClassName("row row2")[0];

    if (query != "") {
        if (query.length > 512) {
            query = query.substring(0, 512);
            query = query + " ...";
        }

        let newMessage = document.createElement("div");
        newMessage.className = "message receiver";
        newMessage.innerHTML = `<div class="bubble"></div>`;
        let queryBody = newMessage.getElementsByClassName("bubble")[0];
        queryBody.innerText = query;
        chatArea.appendChild(newMessage);
        chatArea.scrollTo(0, 999999);
        queryInput.value = '';
        return newMessage;
    }
}

function AddResponseBubble(resp, bClearStars) {
    let chatArea = document.getElementsByClassName("row row2")[0];
    let newResponse = document.createElement("div");
    newResponse.className = "message sender";
    newResponse.innerHTML = `<div class="bubble">${resp}</div>`;
    chatArea.appendChild(newResponse);
    if (bClearStars) {document.querySelectorAll(".stars-dock").forEach(el => el.remove())};
    chatArea.scrollTo(0, 999999);
    return newResponse;
}

function RespInStars(parent, resp) {

    let marker = "[SensaiRqId:";
    if (resp.startsWith(marker)) {  
        let rqId = resp.split(marker)[1].split("]")[0];
        let answ = resp.split("]")[1];

        console.log("SensaiRqId: ", rqId);

        parent.innerHTML = ` \
            <div class="bubble"> \
                <span>${answ}</span> \
                <div class="stars-dock"> \
                    <div class="tooltip"> \
                        <div class="stars" id="${rqId}"> \
                            <svg id="star-one" width="13" height="13" viewBox="0 0 300 300" style="margin-right:-4px;"><path d="M86.5 79.5L127 2L165.5 79.5L253 91L188.5 155L203 240L131 202L51 242.5L65 155L2 93L86.5 79.5Z"></path></svg> \
                            <svg id="star-two" width="13" height="13" viewBox="0 0 300 300" style="margin-right:-4px;"><path d="M86.5 79.5L127 2L165.5 79.5L253 91L188.5 155L203 240L131 202L51 242.5L65 155L2 93L86.5 79.5Z"></path></svg> \
                            <svg id="star-three" width="13" height="13" viewBox="0 0 300 300" style="margin-right:-4px;"><path d="M86.5 79.5L127 2L165.5 79.5L253 91L188.5 155L203 240L131 202L51 242.5L65 155L2 93L86.5 79.5Z"></path></svg> \
                        </div> \
                        <span class="tooltiptext" id="stars-ttip">Evaluate the answer</span> \
                    </div> \
                </div>
            </div>`;

        document.getElementById("star-one").addEventListener("click", StarredOne);
        document.getElementById("star-two").addEventListener("click", StarredTwo);
        document.getElementById("star-three").addEventListener("click", StarredThree);
        document.getElementById("stars-ttip").innerText = LS("starsTtip");
    }
    else {
        parent.innerHTML = ` \
            <div class="bubble"> \
                <span>${resp}</span> \
                <div class="stars-dock"> </div> \
            </div>`;
    }

    let chatArea = document.getElementsByClassName("row row2")[0];
    chatArea.scrollTo(0, 999999); 
}

function TalkToSensai(query, lang, callback) {

    let ssbId   = "hcb";
    let ssbName = "SSB";
    let ssbVer  = "1.6.00";
    let userId  = "SSB-216.73.216.110-1761375447";
    let eventSource = new EventSource(`/ssb/sensai?botId=${ssbId}&clientVer=${ssbName}.${ssbVer}-${ssbId}&request=${query}&userId=${userId}&lang=${lang}`);
    eventSource.onmessage = function(event) {
        let content = base64ToUtf8(event.data);
        // console.log("New message", content);
        if (content == 'null') {
            eventSource.close();
            location.reload();
            callback('Sorry, I missed it. What was this question again?');
        }
        else if (content == 'error') {
            eventSource.close();
            callback('Sorry, I am not available now. Please try again later.');
        }
        else if (content == 'Done') {
            eventSource.close();
            console.log("Streaming complete");
        }
        else {
            resp = fixLinks(content, lang);
            callback(resp);
        }
    };   
}

function base64ToUtf8(b64Encoded) {
    const byteNumbers = atob(b64Encoded).split('').map(ch => ch.charCodeAt(0));
    const byteArray = new Uint8Array(byteNumbers);
    return new TextDecoder('utf-8').decode(byteArray);
}

function fixLinks(resp, lang) {
    const regex = /https:\/\/help.airtimetools.com\/hc\/en-us/g;
    let langLow = lang.toLowerCase(); // 'en-US' lang fix to fit the HC URL
    const newResp = resp.replace(regex, `https://help.airtimetools.com/hc/${langLow}`);
    // console.log('New response: ', newResp);
    return newResp;
}

function StarredOne() {
    document.getElementById("star-one").style.fill = "#FF0000";
    document.getElementById("star-two").style.fill = "#FFFFFF";
    document.getElementById("star-three").style.fill = "#FFFFFF";
    
    let stars = document.getElementsByClassName("stars")[0];
    stars.style.animation = "flashRed 1s";
    ReportEval(stars.id, 1);
}

function StarredTwo() {
    document.getElementById("star-one").style.fill = "#FFFFFF";
    document.getElementById("star-two").style.fill = "#ffd601";
    document.getElementById("star-three").style.fill = "#FFFFFF";

    let stars = document.getElementsByClassName("stars")[0];
    stars.style.animation = "flashYellow 1s";
    ReportEval(stars.id, 2);
}

function StarredThree() {
    document.getElementById("star-one").style.fill = "#FFFFFF";
    document.getElementById("star-two").style.fill = "#FFFFFF";
    document.getElementById("star-three").style.fill = "#45d401";

    let stars = document.getElementsByClassName("stars")[0];
    stars.style.animation = "flashGreen 1s";
    ReportEval(stars.id, 3);
}


function ReportEval(rqId, rating) {
    let endpoint = "/ssb/eval";

    fetch(`${endpoint}?rqId=${rqId}&stars=${rating}&userId=SSB-216.73.216.110-1761375447`)
        .then(response => {
            console.log(response);
        })
        .catch(error => {
            console.log(error);
        });

    state = GetAppState()
    if (state.mode == "talk") {
        SetAppState("eval", rqId, rating) // TODO color input
        setTimeout(()=> {respBubble = AddResponseBubble(LS("userComment"), false)},500); 
    }
}

function ReportEvalComment(rqId, rating, comment) {
    let endpoint = "/ssb/eval";

    fetch(`${endpoint}?rqId=${rqId}&stars=${rating}&userId=SSB-216.73.216.110-1761375447&comment=${comment}`)
        .then(response => { console.log(response); })
        .catch(error => { console.log(error); });

    SetAppState("talk", "", 0) 
    if (comment) {
        setTimeout(()=> {AddResponseBubble(LS("commentThanks"), false)},500); 
    }; 
}

function SetAppState(mode, rqId, rating) {
    appState.mode   = mode
    appState.rqId   = rqId
    appState.rating = rating
    let queryInput = document.getElementById("userQuery");
    if (mode == "eval") { queryInput.placeholder = LS("userComment") }
    else { queryInput.placeholder = LS("userQuery") };
}

function GetAppState() { // TODO fill the appState structure
    return appState
}

// --- Strings, localized ---

const langStrings = JSON.parse(`{"languages": ["en-US", "es", "de", "ja"], "send-button@en-US": "Send", "send-button@es": "Enviar", "send-button@de": "Senden", "send-button@ja": "\u9001\u308b", "userQuery@en-US": "Ask your question...", "userQuery@es": "Haz tu pregunta...", "userQuery@de": "Stellen Sie Ihre Frage...", "userQuery@ja": "\u8cea\u554f\u3057\u3066\u304f\u3060\u3055\u3044...", "userComment@en-US": "Please add your comment ...", "userComment@es": "Por favor, a\u00f1ade tu comentario ...", "userComment@de": "Bitte f\u00fcgen Sie Ihren Kommentar hinzu ...", "user@ja": "\u30b3\u30e1\u30f3\u30c8\u3092\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044...", "commentThanks@en-US": "Thank you. Your feedback is important to us.", "commentThanks@es": "Gracias. Tu opini\u00f3n es importante para nosotros.", "commentThanks@de": "Danke. Ihr Feedback ist uns wichtig.", "commentThanks@ja": "\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3059\u3002 \u3042\u306a\u305f\u306e\u30d5\u30a3\u30fc\u30c9\u30d0\u30c3\u30af\u306f\u79c1\u305f\u3061\u306b\u3068\u3063\u3066\u91cd\u8981\u3067\u3059\u3002", "greeting@en-US": "Hello! I\u2019m Sensai, Airtime's AI help desk assistant.<br>How can I help you today?<br><small>If you would prefer to talk to a human, click the envelope in the top right corner of this chat window.</small>", "greeting@es": "Hola, mi nombre es Sensai, el asistente de mesa de ayuda de IA de Airtime.<br>\u00bfC\u00f3mo puedo ayudarte hoy?<br><small>\u00bfQuieres hablar con un humano? Haz clic en el sobre en la esquina superior derecha.</small>", "greeting@de": "Hallo, mein Name ist Sensai, der KI-Helpdesk-Assistent von Airtime.<br>Wie kann ich Ihnen heute helfen?<br><small>M\u00f6chten Sie mit einem Menschen sprechen?Klicken Sie auf den Umschlag oben rechts.</small>", "greeting@ja": "\u3053\u3093\u306b\u3061\u306f\u3001Airtime \u306e AI \u30d8\u30eb\u30d7\u30c7\u30b9\u30af \u30a2\u30b7\u30b9\u30bf\u30f3\u30c8\u3001Sensai \u3067\u3059\u3002<br>\u4eca\u65e5\u306f\u306a\u3093\u304b\u624b\u4f1d\u3046\u3053\u3068\u3042\u308b\uff1f<br><small>\u4eba\u9593\u3068\u8a71\u3057\u305f\u3044\u3067\u3059\u304b\uff1f \u53f3\u4e0a\u306e\u5c01\u7b52\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u304f\u3060\u3055\u3044\u3002</small>", "bot-title@en-US": "Airtime Help Center Assistant", "bot-title@es": "Centro de Ayuda de Airtime", "bot-title@de": "Airtime Hilfezentrum Assistent", "bot-title@ja": "Airtime \u30d8\u30eb\u30d7\u30bb\u30f3\u30bf\u30fc \u30a2\u30b7\u30b9\u30bf\u30f3\u30c8", "signature@en-US": "Powered by &nbsp;<a href='mailto:Sensai@DaisyTech.us'>Sensai@DaisyTech.us</a>", "signature@es": "Desarrollado por &nbsp;<a href='mailto:Sensai@DaisyTech.us'>Sensai@DaisyTech.us</a>", "signature@de": "Angetrieben von &nbsp;<a href='mailto:Sensai@DaisyTech.us'>Sensai@DaisyTech.us</a>", "signature@ja": "\u306b\u3088\u3063\u3066\u99c6\u52d5 &nbsp;<a href='mailto:Sensai@DaisyTech.us'>Sensai@DaisyTech.us</a>", "ticket-ttip@en-US": "Submit a ticket", "ticket-ttip@es": "Enviar un ticket", "ticket-ttip@de": "Ein Ticket einreichen", "ticket-ttip@ja": "\u30c1\u30b1\u30c3\u30c8\u3092\u9001\u4fe1\u3059\u308b", "ticket-url@en-US": "https://help.airtimetools.com/hc/en-us/requests/new", "ticket-url@es": "https://help.airtimetools.com/hc/es/requests/new", "ticket-url@de": "https://help.airtimetools.com/hc/de/requests/new", "ticket-url@ja": "https://help.airtimetools.com/hc/ja/requests/new", "starsTtip@en-US": "Evaluate this answer", "starsTtip@es": "Evaluar respuesta", "starsTtip@de": "Bewerten Antwort", "starsTtip@ja": "\u3053\u306e\u56de\u7b54\u3092\u8a55\u4fa1\u3059\u308b"}`);

function LS(strKey) {
    strKey = strKey + "@" + lang;
    if (langStrings[strKey]) { return langStrings[strKey]; }
    else { console.log("No string for ", strKey); return "..."; }
}

function Localize(lang) {
    if (!langStrings["languages"].includes(lang)) { lang = "en-US"; }
    document.getElementById("send-button").innerText = LS("send-button");
    document.getElementById("userQuery").placeholder = LS("userQuery");
    document.getElementById("greeting").innerHTML = LS("greeting");
    document.getElementById("bot-title").innerText = LS("bot-title");
    document.getElementById("signature").innerHTML = LS("signature");
    document.getElementById("ticket-ttip").innerText = LS("ticket-ttip");
    return lang;
}