{{ block title }}Gehaltsverhandlung – ShopFlow GmbH{{ endblock }}

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

<div style="max-width: 700px; margin: 0 auto 20px auto;">
    <div style="background: #e9ecef; border-radius: 10px; height: 8px;">
        <div style="background: #007bff; width: 65%; height: 8px; border-radius: 10px;"></div>
    </div>
</div>

<style>
@keyframes letter-pulse {
    0%, 100% { color: #ccc; }
    50%       { color: #222; }
}
.sandra-typing .tl {
    display: inline-block;
    animation: letter-pulse 1.8s ease-in-out infinite;
    color: #ccc;
}
.sandra-typing .tl:nth-child(1) { animation-delay: 0.0s; }
.sandra-typing .tl:nth-child(2) { animation-delay: 0.2s; }
.sandra-typing .tl:nth-child(3) { animation-delay: 0.4s; }
.sandra-typing .tl:nth-child(4) { animation-delay: 0.6s; }
.sandra-typing .tl:nth-child(5) { animation-delay: 0.8s; }
</style>

<div style="max-width: 700px; margin: 0 auto;">


    <div style="background: #1a1a2e; color: white; border-radius: 10px; padding: 14px 18px; margin-bottom: 16px;">
        <h3 style="font-size: 1.0em; margin: 0 0 4px 0;">Gespräch mit Sandra Richter</h3>
        <p style="font-size: 0.88em; opacity: 0.75; margin: 0 0 8px 0;">Freier Chat – schreiben Sie Sandra Richter Nachrichten und reagieren Sie auf das Angebot.</p>
        <p style="font-size: 0.83em; opacity: 0.65; margin: 0;">Sie können Sandras aktuelles Angebot <strong style="opacity:1;">jederzeit annehmen</strong> <strong style="opacity:1;">oder weiter verhandeln</strong> – die Verhandlung endet, sobald eine Einigung erzielt wurde oder kein weiterer Spielraum mehr besteht.</p>
    </div>

    <div id="chat" style="border: 1px solid #ddd; border-radius: 8px; overflow: hidden; margin-bottom: 20px;">

        <div id="messages-container">
            <div style="display: flex; padding: 15px; background: #fff; border-bottom: 1px solid #eee;">
                <div style="width: 40px; height: 40px; border-radius: 50%; background: #007bff; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-right: 12px; flex-shrink: 0; font-size: 0.85em;">SR</div>
                <div>
                    <div style="font-weight: bold; margin-bottom: 4px;">Sandra Richter <span style="font-weight: normal; color: gray; font-size: 0.9em;">· HR Managerin, ShopFlow GmbH</span></div>
                    <div style="background: #f1f3f4; padding: 10px 14px; border-radius: 12px; display: inline-block; line-height: 1.5;">
                        Guten Tag! Schön, nochmal von Ihnen zu hören. Das Gespräch letzte Woche hat bei uns wirklich einen sehr guten Eindruck hinterlassen, das Team ist begeistert. Ich hoffe, bei Ihnen ist auch noch alles gut? Wir würden Sie sehr gerne als Junior Data Analyst bei ShopFlow einstellen. Ihr Profil hat wirklich gut gepasst, besonders das Praktikum im Onlinehandel.
                    </div>
                </div>
            </div>
            <div style="display: flex; padding: 15px; background: #fff; border-bottom: 1px solid #eee;">
                <div style="width: 40px; height: 40px; border-radius: 50%; background: #007bff; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-right: 12px; flex-shrink: 0; font-size: 0.85em;">SR</div>
                <div>
                    <div style="font-weight: bold; margin-bottom: 4px;">Sandra Richter <span style="font-weight: normal; color: gray; font-size: 0.9em;">· HR Managerin, ShopFlow GmbH</span></div>
                    <div style="background: #f1f3f4; padding: 10px 14px; border-radius: 12px; display: inline-block; line-height: 1.5;">
                        Konkret bieten wir Ihnen <strong>44.000 € brutto jährlich</strong> bei 40 Stunden pro Woche, 28 Urlaubstage, Gleitzeit mit Kernarbeitszeit 10 bis 16 Uhr, zwei feste Homeoffice-Tage, 1.500 € Weiterbildungsbudget und einen Gehaltsreview nach 12 Monaten. Was sagen Sie, passt das für Sie oder haben Sie eine andere Vorstellung?
                    </div>
                </div>
            </div>
        </div>

        <div id="input-area" style="padding: 16px; background: #f0f4f8; border-top: 2px solid #dce3ea;">

            <div style="margin-bottom: 10px;">
                <textarea id="message-input" rows="3"
                    placeholder="Schreiben Sie Ihre Antwort … Wenn Sie ein Gehalt vorschlagen möchten, nennen Sie die Zahl einfach im Text (z. B. 50.000 €)."
                    style="width: 100%; padding: 10px 12px; border: 1.5px solid #b0bec5; border-radius: 7px; font-size: 0.93em; box-sizing: border-box; resize: vertical; color: #333; background: white; outline: none;"
                    ></textarea>
                <div id="salary-preview" style="display:none; margin-top:5px; font-size:0.82em; color:#1a56db; font-weight:600;"></div>
                <div id="error-msg" style="display:none; color:#dc3545; font-size:0.82em; margin-top:4px;">
                    Der genannte Betrag liegt außerhalb des gültigen Bereichs (30.000–80.000 €).
                </div>
            </div>

            <button id="submit-btn" type="button" onclick="sendMessage()"
                style="width: 100%; background: #1a56db; color: white; border: none; padding: 11px; border-radius: 7px; cursor: pointer; font-size: 0.97em; font-weight: 600;">
                Senden →
            </button>

        </div>
    </div>

    <div style="display:none;">
        <input type="hidden" name="negotiation_time_spent" value="0">
    </div>

</div>

<script>
let pendingEmployerOffer = 44000; // initial offer from Sandra
let negotiationDone = false;
let benefitsOnTable = false;
const _negStart = Date.now();

document.addEventListener('DOMContentLoaded', function() {
    const btn = document.getElementById('submit-btn');
    if (btn) btn.addEventListener('click', sendMessage);
});

function fmt(n) { return n.toLocaleString('de-DE'); }

function escapeHtml(s) {
    return s.replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
}

function setField(name, val) {
    const el = document.querySelector(`input[name="${name}"], textarea[name="${name}"]`);
    if (el) el.value = val;
}

// ── Chat helpers ───────────────────────────────────────────────────
function showTyping() {
    document.getElementById('messages-container').insertAdjacentHTML('beforeend', `
        <div id="typing-indicator" style="display:flex; padding:15px; background:#fff; border-bottom:1px solid #eee;">
            <div style="width:40px;height:40px;border-radius:50%;background:#007bff;color:white;display:flex;align-items:center;justify-content:center;font-weight:bold;margin-right:12px;flex-shrink:0;font-size:0.85em;">SR</div>
            <div>
                <div style="font-weight:bold;margin-bottom:8px;">Sandra Richter <span style="font-weight:normal;color:gray;font-size:0.9em;">· HR Managerin, ShopFlow GmbH</span></div>
                <div style="background:#f1f3f4;padding:10px 16px;border-radius:12px;display:inline-block;font-size:0.82em;color:#888;margin-left:20px;">
                    <span class="sandra-typing"><span class="tl">t</span><span class="tl">i</span><span class="tl">p</span><span class="tl">p</span><span class="tl">t</span></span>
                </div>
            </div>
        </div>`);
    document.getElementById('input-area').scrollIntoView({behavior: 'smooth', block: 'nearest'});
    setInputDisabled(true);
}

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

function setInputDisabled(v) {
    ['message-input','submit-btn'].forEach(id => {
        const el = document.getElementById(id); if (el) el.disabled = v;
    });
}

function addSandraMessage(html) {
    document.getElementById('messages-container').insertAdjacentHTML('beforeend', `
        <div style="display:flex;padding:15px;background:#fff;border-bottom:1px solid #eee;">
            <div style="width:40px;height:40px;border-radius:50%;background:#007bff;color:white;display:flex;align-items:center;justify-content:center;font-weight:bold;margin-right:12px;flex-shrink:0;font-size:0.85em;">SR</div>
            <div>
                <div style="font-weight:bold;margin-bottom:4px;">Sandra Richter <span style="font-weight:normal;color:gray;font-size:0.9em;">· HR Managerin, ShopFlow GmbH</span></div>
                <div style="background:#f1f3f4;padding:10px 14px;border-radius:12px;display:inline-block;line-height:1.5;">${html}</div>
            </div>
        </div>`);
    document.getElementById('input-area').scrollIntoView({behavior: 'smooth', block: 'nearest'});
}

function addPlayerMessage(html) {
    document.getElementById('messages-container').insertAdjacentHTML('beforeend', `
        <div style="display:flex;padding:15px;background:#e8f4fd;border-bottom:1px solid #eee;justify-content:flex-end;">
            <div style="text-align:right;">
                <div style="font-weight:bold;margin-bottom:4px;color:#1a7a3a;">Ich</div>
                <div style="background:#007bff;color:white;padding:10px 14px;border-radius:12px;display:inline-block;text-align:left;line-height:1.5;">${html}</div>
            </div>
            <div style="width:40px;height:40px;border-radius:50%;background:#28a745;color:white;display:flex;align-items:center;justify-content:center;font-weight:bold;margin-left:12px;flex-shrink:0;font-size:0.85em;">ICH</div>
        </div>`);
    document.getElementById('input-area').scrollIntoView({behavior: 'smooth', block: 'nearest'});
}

// ── Salary extraction ──────────────────────────────────────────────
// Returns { val, isRange, rangeMin, rangeMax } or null
function extractSalaryInfo(text) {
    const lower = text.toLowerCase();

    // Phrases that clearly indicate the number refers to Sandra's offer, not the player's
    const employerRefKw = [
        'ihr angebot', 'das angebot', 'dieses angebot', 'das bisherige',
        'von ihnen', 'haben sie', 'ihr vorschlag', 'ihr gebot', 'ihr gehalt',
        'das genannte', 'den genannten', 'angebotene', 'ist ihr', 'ist das'
    ];
    // Phrases that unambiguously signal the player's own counter-offer
    const offerKw = [
        'ich möchte', 'ich schlage vor', 'mein vorschlag', 'ich biete',
        'ich hätte gerne', 'ich würde gerne', 'ich stelle mir', 'ich erwarte',
        'ich bitte um', 'mein angebot', 'meine vorstellung', 'ich fordere',
        'ich wünsche', 'strebe ich', 'ich anstrebe', 'zielgehalt',
        'wäre für mich', 'für mich wären', 'gegenvorschlag', 'würde ich mir',
        'wäre ich bereit', 'ich bin bereit', 'ich würde mir', 'hätte ich gerne',
        'stelle ich mir', 'vorstelle ich'
    ];

    // Extract all numbers in valid salary range
    const numRe = /\b(\d{2})[.,](\d{3})\b|\b(\d{5})\b/g;
    let m;
    const all = [];
    while ((m = numRe.exec(text)) !== null) {
        const val = m[3] ? parseInt(m[3], 10) : parseInt(m[1] + m[2], 10);
        if (val >= 30000 && val <= 80000) all.push({ val, index: m.index, len: m[0].length });
    }
    if (all.length === 0) return null;

    // Classify a number as an employer reference
    function isEmployerRef(val, index, len) {
        const before = lower.slice(Math.max(0, index - 80), index);
        const after  = lower.slice(index + len, Math.min(lower.length, index + len + 40));
        if (employerRefKw.some(kw => before.includes(kw) || after.includes(kw))) return true;
        // Matches Sandra's current offer, has surrounding text, and no offer keyword precedes it
        if (val === pendingEmployerOffer
            && before.trim().length > 0
            && !offerKw.some(kw => before.includes(kw))) return true;
        return false;
    }

    function hasOfferKw(index) {
        const before = lower.slice(Math.max(0, index - 80), index);
        return offerKw.some(kw => before.includes(kw));
    }

    // Keep only numbers that are the player's own offer
    const playerNums = all.filter(n => !isEmployerRef(n.val, n.index, n.len));
    if (playerNums.length === 0) return null;

    // Range detection: two consecutive player numbers with only a separator between them
    if (playerNums.length === 2) {
        const gap = text.slice(playerNums[0].index + playerNums[0].len, playerNums[1].index).trim().toLowerCase();
        if (gap.length <= 10 && /^(–|-|—|bis zu?|und|oder|\s)*$/.test(gap)) {
            const rangeMin = Math.min(playerNums[0].val, playerNums[1].val);
            const rangeMax = Math.max(playerNums[0].val, playerNums[1].val);
            return { val: rangeMin, isRange: true, rangeMin, rangeMax };
        }
    }

    // Prefer the number most clearly marked as a counter-offer; fall back to last
    for (const n of playerNums) {
        if (hasOfferKw(n.index)) return { val: n.val, isRange: false, rangeMin: null, rangeMax: null };
    }
    const last = playerNums[playerNums.length - 1];
    return { val: last.val, isRange: false, rangeMin: null, rangeMax: null };
}

document.getElementById('message-input').addEventListener('input', function() {
    const info = extractSalaryInfo(this.value);
    const preview = document.getElementById('salary-preview');
    const err = document.getElementById('error-msg');
    // Check for out-of-range number
    const anyNum = this.value.match(/\b(\d{2})[.,](\d{3})\b|\b(\d{5})\b/);
    if (anyNum && !info) {
        err.style.display = 'block';
        preview.style.display = 'none';
    } else {
        err.style.display = 'none';
        if (info) {
            preview.style.display = 'block';
            if (info.isRange) {
                preview.textContent = `↳ Gehaltsvorschlag erkannt: ${fmt(info.val)} (untere Spanne aus ${fmt(info.rangeMin)}–${fmt(info.rangeMax)})`;
            } else {
                preview.textContent = `↳ Gehaltsvorschlag erkannt: ${fmt(info.val)}`;
            }
        } else {
            preview.style.display = 'none';
        }
    }
});

// ── Acceptance detection ───────────────────────────────────────────
function isAcceptanceMessage(text) {
    const lower = text.toLowerCase();
    if (['nicht', 'kein', 'nein', 'leider', 'aber'].some(neg => lower.includes(neg))) return false;
    return [
        'ich nehme an', 'ich nehme das an', 'nehme ich an', 'nehme das an',
        'das passt', 'passt für mich', 'passt mir', 'passt so', 'passt',
        'einverstanden', 'ich bin einverstanden', 'bin einverstanden',
        'ich akzeptiere', 'akzeptiere das', 'akzeptiere ich',
        'ich stimme zu', 'ich nehme es', 'nehme es an',
        'deal', 'abgemacht', 'ich nehme',
        'ja', 'ok', 'okay', 'gerne', 'super', 'prima', 'toll',
    ].some(kw => lower === kw || lower.startsWith(kw + ' ') || lower.endsWith(' ' + kw) || lower.includes(' ' + kw + ' '));
}

// ── Send ───────────────────────────────────────────────────────────

function sendMessage() {
    if (negotiationDone) return;
    const text = (document.getElementById('message-input').value || '').trim();
    if (!text) return;

    const info = extractSalaryInfo(text);
    const err = document.getElementById('error-msg');
    if (err.style.display === 'block') return; // out-of-range number present

    document.getElementById('message-input').value = '';
    document.getElementById('salary-preview').style.display = 'none';

    if (!info && pendingEmployerOffer > 0 && isAcceptanceMessage(text)) {
        addPlayerMessage(escapeHtml(text));
        document.getElementById('input-area').innerHTML = '';
        showTyping();
        liveSend({ type: 'accept', benefits: benefitsOnTable });
    } else if (info) {
        const rounded = Math.round(info.val / 100) * 100;
        addPlayerMessage(escapeHtml(text).replace(/\b\d{2}[.,]\d{3}\b|\b\d{5}\b/g, (n) => {
            const v = parseInt(n.replace(/[.,]/, ''), 10);
            return (Math.round(v / 100) * 100 === rounded) ? `<strong>${fmt(rounded)}</strong>` : n;
        }));
        showTyping();
        liveSend({ type: 'offer', player_offer: rounded, argument: text });
    } else {
        addPlayerMessage(escapeHtml(text));
        showTyping();
        liveSend({ type: 'chat', message: text });
    }
}

// ── Accept / Reject ────────────────────────────────────────────────
function showAcceptOption(salary) {
    const existing = document.getElementById('accept-option-bar');
    if (existing) existing.remove();
    const bar = document.createElement('div');
    bar.id = 'accept-option-bar';
    bar.style.cssText = 'margin-top:10px;';
    bar.innerHTML = `
        <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
            <div style="flex:1;height:1px;background:#ddd;"></div>
            <span style="font-size:0.78em;color:#aaa;">oder Angebot annehmen</span>
            <div style="flex:1;height:1px;background:#ddd;"></div>
        </div>
        <button type="button" onclick="acceptOffer()"
            style="width:100%;background:white;color:#5ba8d4;border:2px solid #5ba8d4;padding:9px;border-radius:7px;cursor:pointer;font-size:0.91em;font-weight:500;">
            ${fmt(salary)} annehmen
        </button>`;
    document.getElementById('submit-btn').insertAdjacentElement('afterend', bar);
}

function showAcceptReject(salary) {
    const bar = document.getElementById('accept-option-bar');
    if (bar) bar.remove();
    document.getElementById('input-area').innerHTML = `
        <div style="display:flex;gap:15px;justify-content:center;padding:10px;">
            <button type="button" onclick="acceptOffer()"
                style="background:#28a745;color:white;border:none;padding:12px 30px;border-radius:6px;cursor:pointer;font-size:1em;">
                ✓ Annehmen (${fmt(salary)})
            </button>
            <button type="button" onclick="rejectOffer()"
                style="background:#dc3545;color:white;border:none;padding:12px 30px;border-radius:6px;cursor:pointer;font-size:1em;">
                ✗ Ablehnen
            </button>
        </div>`;
}

function acceptOffer() {
    if (negotiationDone) return;
    const bar = document.getElementById('accept-option-bar');
    if (bar) bar.remove();
    addPlayerMessage(`Ich nehme das Angebot von <strong>${fmt(pendingEmployerOffer)}</strong> an. Vielen Dank!`);
    document.getElementById('input-area').innerHTML = '';
    showTyping();
    liveSend({ type: 'accept', benefits: benefitsOnTable });
}

function rejectOffer() {
    if (negotiationDone) return;
    if (!confirm('Möchten Sie das Angebot wirklich ablehnen? Diese Entscheidung kann nicht rückgängig gemacht werden.')) return;
    addPlayerMessage('Ich muss das Angebot leider ablehnen. Vielen Dank für das Gespräch.');
    document.getElementById('input-area').innerHTML = '';
    showTyping();
    liveSend({ type: 'reject' });
}

// ── Receive ────────────────────────────────────────────────────────
function liveRecv(data) {
    hideTyping();
    if (data.type !== 'reply') {
        addSandraMessage('Verbindungsfehler. Bitte versuchen Sie es erneut.');
        return;
    }

    // Strip LLM artifacts then render Markdown
    const cleaned = data.text
        .split('\n')
        .filter(line => !/^#+\s/.test(line))
        .join('\n')
        .replace(/^\s*\*[^*].*?\*\s*\n?/gm, '')
        .trim();
    const html = cleaned
        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
        .replace(/\*(.*?)\*/g, '<em>$1</em>')
        .replace(/\n/g, '<br>');
    addSandraMessage(html);

    const rt = data.response_type;
    const eo = data.employer_offer;

    if (rt === 'error') {
        return;
    }

    if (rt === 'chat') {
        if (pendingEmployerOffer > 0) {
            if (benefitsOnTable) {
                showAcceptReject(pendingEmployerOffer);
            } else {
                showAcceptOption(pendingEmployerOffer);
            }
        }
        return;
    }

    if (rt === 'deal' || rt === 'accept') {
        endNegotiation(eo, 'deal');
    } else if (rt === 'rejected_by_hr') {
        endNegotiation(0, 'rejected_by_hr');
    } else if (rt === 'reject') {
        endNegotiation(0, 'rejected');
    } else if (rt === 'offer_with_benefits') {
        benefitsOnTable = true;
        pendingEmployerOffer = eo;
        showAcceptReject(eo);
    } else if (rt === 'take_or_leave') {
        pendingEmployerOffer = eo;
        showAcceptReject(eo);
    } else if (rt === 'final_offer_firm') {
        pendingEmployerOffer = eo;
        showAcceptReject(eo);
    } else if (rt === 'counter_warm' || rt === 'counter_firm' || rt === 'counter_shocked' || rt === 'counter_small') {
        pendingEmployerOffer = eo;
        showAcceptOption(eo);
    }
    // below_minimum: input stays enabled, no accept button
}

// ── End ────────────────────────────────────────────────────────────
function endNegotiation(salary, result) {
    if (negotiationDone) return;
    negotiationDone = true;

    const bar = document.getElementById('accept-option-bar');
    if (bar) bar.remove();
    setField('negotiation_time_spent', Math.round((Date.now() - _negStart) / 1000));

    setTimeout(() => {
        document.getElementById('input-area').innerHTML = `
            <div style="text-align:center;padding:15px;">
                <button type="button" onclick="document.querySelector('form').submit()"
                    style="background:#007bff;color:white;border:none;padding:11px 28px;border-radius:6px;cursor:pointer;font-size:0.95em;">
                    Weiter
                </button>
            </div>`;
    }, 2500);
}
</script>

{{ endblock }}