{{ block title }}Vorbereitung mit KI-Assistent{{ endblock }}

{{ block content }}

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
.otree-timer { display: none !important; }

#chat-wrapper {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 160px);
    min-height: 400px;
    max-width: 700px;
    margin: 0 auto;
}

#chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    flex-shrink: 0;
}

#progress-bar-wrap {
    flex: 1;
}

#chat-container {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: #f5f5f5;
    border-radius: 12px;
    margin-bottom: 10px;
}

.bubble {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 0.95em;
    line-height: 1.5;
    animation: slideUp 0.2s ease-out;
    word-wrap: break-word;
}

.bubble-user {
    background: #007bff;
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.bubble-assistant {
    background: white;
    color: #222;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.bubble-error {
    background: #f8d7da;
    color: #842029;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.typing-bubble {
    background: white;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 12px 16px;
    border-radius: 18px;
    animation: slideUp 0.2s ease-out;
}

.typing-dots span {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #aaa;
    margin: 0 2px;
    animation: typingBounce 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

#bottom-bar {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 6px;
}

#input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

#user-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 22px;
    font-size: 16px;
    outline: none;
}
#user-input:focus { border-color: #007bff; }

#send-btn {
    background: #007bff;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#send-btn:disabled { background: #ccc; cursor: default; }

#next-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95em;
    width: 100%;
}
</style>

<div style="max-width:700px; margin:0 auto 10px auto; background:#e8f4fd; border:1px solid #b8d8f0; border-radius:8px; padding:10px 14px; font-size:0.88em; color:#1a4a6e; line-height:1.5;">
    <strong>KI-Verhandlungscoach</strong> – kennt Ihre Rolle und alle 5 Quellen. Fragen Sie nach Strategie, Argumenten oder Formulierungen. Kein Zeitlimit.
</div>

<div id="chat-wrapper">

    <div id="chat-header">
        <div id="progress-bar-wrap">
            <div style="background: #e9ecef; border-radius: 10px; height: 6px;">
                <div style="background: #007bff; width: 45%; height: 6px; border-radius: 10px;"></div>
            </div>
        </div>
    </div>

    <div id="chat-container"></div>

    <div id="bottom-bar">
        <div id="input-row">
            <input type="text" id="user-input" placeholder="Nachricht eingeben..."
                onkeydown="if(event.key==='Enter'){event.preventDefault();sendMessage();}">
            <button id="send-btn" type="button" onclick="sendMessage()">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18" height="18" style="display:block;">
                    <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
                </svg>
            </button>
        </div>
        <div style="height:3px; background:#ccc; margin-top:50px; margin-bottom:0;"></div>
        <div style="font-size:0.82em; color:#888; text-align:center; margin-top:8px;">Wenn Sie sich ausreichend vorbereitet fühlen, klicken Sie auf den Button – danach startet die Verhandlung mit Sandra Richter.</div>
        <button id="next-btn" type="button" onclick="handleNext()" style="margin-top: 6px;">Weiter zur nächsten Seite →</button>
    </div>

</div>


<div style="display:none;">
    <span id="real-next-btn"><button type="submit" class="btn btn-primary otree-btn-next">Weiter</button></span>
    <input type="hidden" name="llm_coaching_messages" id="field-llm-coaching-messages" value="0">
    <input type="hidden" name="llm_skipped_reason" id="field-llm-skipped-reason" value="">
    <input type="hidden" name="llm_time_spent" id="field-llm-time" value="0">
</div>

<script>
let messageCount = 0;
const _llmStart = Date.now();

function smoothScrollTo(container, targetTop, duration) {
    const start = container.scrollTop;
    const delta = targetTop - start;
    const startTime = performance.now();
    function step(now) {
        const elapsed = now - startTime;
        const progress = Math.min(elapsed / duration, 1);
        const ease = progress < 0.5 ? 2 * progress * progress : -1 + (4 - 2 * progress) * progress;
        container.scrollTop = start + delta * ease;
        if (progress < 1) requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
}

function scrollToElement(el, duration) {
    const chat = document.getElementById('chat-container');
    const targetTop = el.offsetTop - chat.offsetTop - 20;
    smoothScrollTo(chat, targetTop, duration);
}

function addBubble(text, type) {
    const chat = document.getElementById('chat-container');
    const div = document.createElement('div');
    div.className = 'bubble bubble-' + type;
    div.innerHTML = text;
    chat.appendChild(div);
    scrollToElement(div, 800);
    return div;
}

function showTyping() {
    const chat = document.getElementById('chat-container');
    const div = document.createElement('div');
    div.id = 'typing-indicator';
    div.className = 'typing-bubble';
    div.innerHTML = '<div class="typing-dots"><span></span><span></span><span></span></div>';
    chat.appendChild(div);
    scrollToElement(div, 800);
}

function hideTyping() {
    const el = document.getElementById('typing-indicator');
    if (el) el.remove();
}

window.onload = function() {
    addBubble('Hallo! Ich bin Ihr persönlicher Verhandlungscoach. Ich helfe Ihnen dabei, sich optimal auf Ihre Gehaltsverhandlung bei ShopFlow GmbH vorzubereiten. Sie können mir Fragen zu den Artikeln stellen, nach Strategien fragen oder eine Verhandlungssituation durchspielen. Womit kann ich Ihnen helfen?', 'assistant');
}

function sendMessage() {
    const input = document.getElementById('user-input');
    const userText = input.value.trim();
    if (!userText) return;

    messageCount++;
    addBubble(userText, 'user');
    input.value = '';
    input.disabled = true;
    const sendBtn = document.getElementById('send-btn');
    if (sendBtn) sendBtn.disabled = true;
    showTyping();

    liveSend({ type: 'message', message: userText });
}

function liveRecv(data) {
    hideTyping();
    const input = document.getElementById('user-input');
    if (input) input.disabled = false;
    const sendBtn = document.getElementById('send-btn');
    if (sendBtn) sendBtn.disabled = false;

    if (data.type === 'reply') {
        const formatted = data.text
            .replace(/### (.*?)(\n|$)/g, '<strong>$1</strong><br>')
            .replace(/## (.*?)(\n|$)/g, '<strong>$1</strong><br>')
            .replace(/# (.*?)(\n|$)/g, '<strong>$1</strong><br>')
            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
            .replace(/\*(.*?)\*/g, '<em>$1</em>')
            .replace(/\n/g, '<br>');
        addBubble(formatted, 'assistant');
    } else {
        addBubble('Fehler bei der Verbindung. Bitte versuchen Sie es erneut.', 'error');
    }
}

function handleNext() {
    document.getElementById('field-llm-coaching-messages').value = messageCount;
    document.getElementById('field-llm-time').value = Math.round((Date.now() - _llmStart) / 1000);
    document.getElementById('real-next-btn').querySelector('button').click();
}
</script>

{{ endblock }}