{% extends "global/Page.html" %}
{% load otree %}

{% block title %}
    {% if participant.language == 'en' %}FUNI - Part 2{% else %}FUNI - 2. Teil{% endif %}
{% endblock %}

{% block content %}
<style>
    :root {
        --primary-dark: #153268; --primary-medium: #005f9b;
        --primary-light: #0091c8; --primary-lighter: #50a5d2;
        --neutral-dark: #3b3b3a; --neutral-lightest: #ececed;
    }
    body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
           background-color: var(--neutral-lightest); color: var(--neutral-dark); line-height: 1.6; }
    .header { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 100%);
              color: white; padding: 20px 25px; border-radius: 8px;
              margin-bottom: 24px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
    .header h1 { margin: 0; font-size: 22px; font-weight: 600; }
    .card { background: white; border-radius: 8px; padding: 30px; margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.08); border-left: 4px solid var(--primary-light); }
    h2 { color: var(--primary-dark); border-bottom: 2px solid var(--primary-light);
         padding-bottom: 8px; margin-top: 0; margin-bottom: 16px; font-size: 17px; }
    .connection-info-box {
        background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-lighter) 100%);
        color: white; padding: 20px; margin-bottom: 20px; border-radius: 8px;
        text-align: center; font-size: 18px; font-weight: 600;
    }
    .info-text { text-align: center; font-size: 16px; color: var(--neutral-dark);
                 margin: 16px 0; line-height: 1.8; }
    .wheel-container { margin: 30px 0; text-align: center; }
    .wheel-wrapper { position: relative; width: 300px; height: 300px; margin: 0 auto; }
    .wheel-pointer { position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
                     width: 0; height: 0; border-left: 20px solid transparent;
                     border-right: 20px solid transparent; border-top: 30px solid var(--primary-dark); z-index: 100; }
    canvas { border-radius: 50%; box-shadow: 0 0 30px rgba(0,0,0,0.3); display: block; }
    .wheel-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
                    width: 80px; height: 80px; background: white; border-radius: 50%;
                    display: flex; align-items: center; justify-content: center;
                    font-size: 36px; font-weight: bold; color: var(--primary-dark);
                    box-shadow: 0 0 15px rgba(0,0,0,0.3); z-index: 50; pointer-events: none; }
    .result-reveal { margin: 24px 0; padding: 24px; border-radius: 8px; text-align: center;
                     opacity: 0; transform: scale(0.8); transition: all 0.5s ease;
                     background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 100%);
                     color: white; }
    .result-reveal.show { opacity: 1; transform: scale(1); }
    .result-reveal h3 { color: white; font-size: 22px; margin: 0 0 10px 0; }
    .result-reveal p { font-size: 15px; margin: 8px 0; }
    .button-section { text-align: center; margin-top: 28px; opacity: 0; transition: opacity 0.5s ease; }
    .button-section.show { opacity: 1; }
    .otree-btn-next { background-color: var(--primary-medium) !important; border: none !important;
                      color: white !important; padding: 12px 30px !important; border-radius: 6px !important;
                      font-size: 16px !important; font-weight: 500 !important; cursor: pointer !important;
                      transition: all 0.3s ease !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; }
    .otree-btn-next:hover { background-color: var(--primary-dark) !important; transform: translateY(-2px); }
</style>

<div class="header">
    <h1>Phase 3</h1>
</div>

<div class="card">
    <h2>{% if participant.language == 'en' %}Group Connection Status{% else %}Status der Gruppenverbindung{% endif %}</h2>

    {% if initial_connection == 'none' %}
        <div class="connection-info-box">
            {% if participant.language == 'en' %}No Connection from Phase 2{% else %}Keine Verbindung aus Phase 2{% endif %}
        </div>
        <p class="info-text">
            {% if participant.language == 'en' %}You had no group connection, so the potential disruption of the connection does not affect you.
            {% else %}Sie hatten keine Gruppenverbindung, daher betrifft Sie die mögliche Zerstörung der Verbindung nicht.{% endif %}
        </p>
    {% else %}
        <div class="connection-info-box">
            {% if participant.language == 'en' %}
                {% if is_ambiguity %}
                    Your Group Connection
                {% else %}
                    Your Connection ({{ survival_prob_pct }}% Survival Chance)
                {% endif %}
            {% else %}
                {% if is_ambiguity %}
                    Ihre Gruppenverbindung
                {% else %}
                    Ihre Verbindung ({{ survival_prob_pct }}% Überlebenschance)
                {% endif %}
            {% endif %}
        </div>
        <p class="info-text">
            {% if participant.language == 'en' %}It's up to chance whether your group connection survives.{% else %}Der Zufall entscheidet, ob Ihre Gruppenverbindung überlebt.{% endif %}
        </p>
        <div class="wheel-container">
            <div class="wheel-wrapper">
                <div class="wheel-pointer"></div>
                <canvas id="wheelCanvas" width="300" height="300"></canvas>
                <div class="wheel-center">?</div>
            </div>
        </div>
        <div class="result-reveal" id="resultReveal">
            {% if connection_destroyed %}
                <h3>{% if participant.language == 'en' %}✗ Connection Destroyed{% else %}✗ Verbindung zerstört{% endif %}</h3>
            {% else %}
                <h3>{% if participant.language == 'en' %}✓ Connection Survived{% else %}✓ Verbindung hat überdauert{% endif %}</h3>
                <div style="margin-top: 14px; background: rgba(255,255,255,0.15); border-radius: 6px;
                            padding: 14px 20px; font-size: 18px; font-weight: 700;">
                    🎉
                    {% if participant.language == 'en' %}
                        Connection bonus: <strong>+{{ connection_bonus }} points</strong>
                    {% else %}
                        Verbindungsbonus: <strong>+{{ connection_bonus }} Punkte</strong>
                    {% endif %}
                </div>
            {% endif %}
        </div>
    {% endif %}
</div>

<div class="button-section" id="buttonSection">
    <button class="otree-btn-next btn btn-primary">
        {% if participant.language == 'en' %}Continue{% else %}Weiter{% endif %}
    </button>
</div>



<script>
    const wheelConfig = {
        connectionType: "{{ initial_connection }}",
        connectionDestroyed: {% if connection_destroyed %}true{% else %}false{% endif %},
        spinDegrees: parseFloat("{{ spin_degrees }}".replace(",", ".")),
        language: "{{ participant.language }}",
        isAmbiguity: {% if is_ambiguity %}true{% else %}false{% endif %},
    };

    const destroyProb = {{ destruction_prob_pct }} / 100;
    const surviveProb = {{ survival_prob_pct }} / 100;
    let currentRotation = 0;
    let canvas, ctx;

    function initCanvas() {
        canvas = document.getElementById('wheelCanvas');
        if (!canvas) return false;
        ctx = canvas.getContext('2d');
        return !!ctx;
    }

    function drawWheel() {
        if (!canvas || !ctx || wheelConfig.connectionType === 'none') return;
        const cx = canvas.width / 2, cy = canvas.height / 2, r = canvas.width / 2;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.save();
        ctx.translate(cx, cy);
        ctx.rotate((currentRotation * Math.PI) / 180);
        ctx.translate(-cx, -cy);

        const surviveAngle = surviveProb * 360;

        // Survive segment (lighter blue)
        ctx.beginPath(); ctx.moveTo(cx, cy);
        ctx.arc(cx, cy, r, 0, (surviveAngle * Math.PI) / 180);
        ctx.closePath();
        const sg = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
        sg.addColorStop(0, '#0091c8'); sg.addColorStop(1, '#50a5d2');
        ctx.fillStyle = sg; ctx.fill();

        // Break segment (darker blue)
        ctx.beginPath(); ctx.moveTo(cx, cy);
        ctx.arc(cx, cy, r, (surviveAngle * Math.PI) / 180, 2 * Math.PI);
        ctx.closePath();
        const bg = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
        bg.addColorStop(0, '#153268'); bg.addColorStop(1, '#005f9b');
        ctx.fillStyle = bg; ctx.fill();
        ctx.restore();

        // Labels
        ctx.fillStyle = 'white'; ctx.font = 'bold 16px Arial';
        ctx.textAlign = 'center'; ctx.textBaseline = 'middle';

        const saRad = ((surviveAngle / 2) + currentRotation) * (Math.PI / 180);
        const sLX = cx + r * 0.65 * Math.cos(saRad);
        const sLY = cy + r * 0.65 * Math.sin(saRad);

        const baRad = ((surviveAngle + destroyProb * 180) + currentRotation) * (Math.PI / 180);
        const bLX = cx + r * 0.65 * Math.cos(baRad);
        const bLY = cy + r * 0.65 * Math.sin(baRad);

        if (!wheelConfig.isAmbiguity) {
            // Risk treatment — show percentages and labels
            ctx.fillText(Math.round(surviveProb * 100) + '%', sLX, sLY - 10);
            ctx.fillText(wheelConfig.language === 'en' ? 'Survives' : 'Überlebt', sLX, sLY + 10);
            ctx.fillText(Math.round(destroyProb * 100) + '%', bLX, bLY - 10);
            ctx.fillText(wheelConfig.language === 'en' ? 'Breaks' : 'Zerbricht', bLX, bLY + 10);
        } else {
            // Ambiguity treatment — labels only, no percentages
            ctx.fillText(wheelConfig.language === 'en' ? 'Survives' : 'Überlebt', sLX, sLY);
            ctx.fillText(wheelConfig.language === 'en' ? 'Breaks' : 'Zerbricht', bLX, bLY);
        }
    }
    function spinWheel() {
        if (wheelConfig.connectionType === 'none') {
            document.getElementById('buttonSection').classList.add('show'); return;
        }
        const totalRotation = wheelConfig.spinDegrees;
        const duration = 4000, startTime = Date.now(), startRotation = currentRotation;

        function animate() {
            const elapsed = Date.now() - startTime;
            const progress = Math.min(elapsed / duration, 1);
            const ease = 1 - Math.pow(1 - progress, 3);
            currentRotation = startRotation + totalRotation * ease;
            drawWheel();
            if (progress < 1) {
                requestAnimationFrame(animate);
            } else {
                const centerEl = document.querySelector('.wheel-center');
                if (centerEl) {
                    centerEl.textContent = wheelConfig.connectionDestroyed ? '✗' : '✓';
                    centerEl.style.color = wheelConfig.connectionDestroyed ? '#c0392b' : '#27ae60';
                }
                setTimeout(() => {
                    document.getElementById('resultReveal').classList.add('show');
                    setTimeout(() => {
                        document.getElementById('buttonSection').classList.add('show');
                    }, 1000);
                }, 500);
            }
        }
        animate();
    }

    document.addEventListener('DOMContentLoaded', function() {
        if (wheelConfig.connectionType !== 'none') {
            if (initCanvas()) { drawWheel(); setTimeout(spinWheel, 800); }
        } else {
            document.getElementById('buttonSection').classList.add('show');
        }
    });
</script>
{% endblock %}