{% extends "base.html" %}
{% block title %}KI Arena – {{ debate.config.topic[:40] }}{% endblock %}

{% block content %}
<a href="/" class="back-link">← Alle Debatten</a>

<div class="debate-header">
    <h1 class="debate-title">{{ debate.config.topic }}</h1>
    <div class="debate-info">
        <span class="badge badge-pos">{{ debate.config.debater_a.name }} ({{ debate.config.debater_a.position }})</span>
        <span class="vs-small">vs</span>
        <span class="badge badge-neg">{{ debate.config.debater_b.name }} ({{ debate.config.debater_b.position }})</span>
        <span class="badge badge-neutral">{{ debate.config.num_rounds }} Runden</span>
    </div>
    {% if debate.status.value == 'completed' %}
    <div class="debate-actions">
        <a href="/player/{{ debate.id }}" class="btn-player">▶ Audio-Player öffnen</a>
        <a href="/?clone={{ debate.id }}" class="btn-clone" title="Neue Debatte mit gleichen Einstellungen">↻ Nochmal</a>
        <button class="btn-delete"
            hx-delete="/api/debate/{{ debate.id }}"
            hx-confirm="Debatte wirklich löschen? Alle Audio-Dateien werden gelöscht."
            hx-target="body"
            title="Debatte löschen">✕ Löschen</button>
    </div>
    {% elif debate.status.value == 'error' %}
    <div class="debate-actions">
        <a href="/?clone={{ debate.id }}" class="btn-clone" title="Erneut versuchen mit gleichen Einstellungen">↻ Erneut versuchen</a>
        <button class="btn-delete"
            hx-delete="/api/debate/{{ debate.id }}"
            hx-confirm="Fehlerhafte Debatte löschen?"
            hx-target="body"
            title="Debatte löschen">✕ Löschen</button>
    </div>
    {% endif %}
</div>

<div class="debate-status-bar">
    <div class="status-indicator status-{{ debate.status.value }}">
        <span class="status-dot"></span>
        <span id="status-text">{{ debate.status.value | upper }}</span>
    </div>
    <div id="progress-text" class="progress-text"></div>
</div>

<!-- Intro -->
{% if debate.intro_text %}
<div class="turn-card turn-moderator">
    <div class="turn-header">
        <span class="turn-label">🎙 Moderator – Einleitung</span>
    </div>
    <div class="turn-content">{{ debate.intro_text }}</div>
    {% if debate.intro_audio %}
    <audio controls class="turn-audio" preload="none">
        <source src="/audio/{{ debate.id }}/{{ debate.intro_audio }}" type="audio/mpeg">
    </audio>
    {% endif %}
</div>
{% endif %}

<!-- Turns -->
<div id="turns-container">
    {% for turn in debate.turns %}
    {% set is_a = turn.debater_name == debate.config.debater_a.name %}
    {% set is_error = turn.content.startswith('[Fehler') or turn.content.startswith('[Generation error') %}
    <div class="turn-card {% if is_error %}turn-error{% elif is_a %}turn-a{% else %}turn-b{% endif %}">
        <div class="turn-header">
            <span class="turn-label">
                {% if is_error %}⚠{% elif is_a %}⚡{% else %}🔥{% endif %}
                {{ turn.debater_name }} – Runde {{ turn.round_num }}
            </span>
            <span class="turn-model">{{ turn.model }}</span>
        </div>
        <div class="turn-content">{{ turn.content }}</div>
        {% if turn.audio_file %}
        <audio controls class="turn-audio" preload="none">
            <source src="/audio/{{ debate.id }}/{{ turn.audio_file }}" type="audio/mpeg">
        </audio>
        {% endif %}
    </div>
    {% endfor %}
</div>

<!-- Summary -->
{% if debate.summary_text %}
<div class="turn-card turn-moderator">
    <div class="turn-header">
        <span class="turn-label">🎙 Moderator – Zusammenfassung</span>
    </div>
    <div class="turn-content">{{ debate.summary_text }}</div>
    {% if debate.summary_audio %}
    <audio controls class="turn-audio" preload="none">
        <source src="/audio/{{ debate.id }}/{{ debate.summary_audio }}" type="audio/mpeg">
    </audio>
    {% endif %}
</div>
{% endif %}

<!-- Progress tracker for running debates -->
{% if debate.status.value in ['pending', 'running', 'generating_audio'] %}
<div id="loading-indicator" class="progress-tracker">
    <div class="progress-hero">
        <div class="progress-ring">
            <svg viewBox="0 0 100 100">
                <defs>
                    <linearGradient id="progressGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                        <stop offset="0%" stop-color="#6c5ce7"/>
                        <stop offset="100%" stop-color="#e74c3c"/>
                    </linearGradient>
                </defs>
                <circle class="ring-bg" cx="50" cy="50" r="42"/>
                <circle class="ring-fill" id="progressRing" cx="50" cy="50" r="42"/>
            </svg>
            <div class="progress-pct" id="progressPct">0%</div>
        </div>
        <div class="progress-current" id="progressCurrent">Wird vorbereitet…</div>
    </div>
    <div class="stepper">
        {% set step_idx = {'n': 1} %}
        {% set total_steps = (1 if debate.config.moderator_intro else 0) + debate.config.num_rounds + (1 if debate.config.moderator_summary else 0) + 1 %}
        {% if debate.config.moderator_intro %}
        <div class="stepper-item" id="step-intro" data-step="{{ step_idx.n }}">
            <div class="stepper-marker"><span>{{ step_idx.n }}</span></div>
            <div class="stepper-content">
                <div class="stepper-label">Moderator-Einleitung</div>
                <div class="stepper-detail" id="step-intro-detail"></div>
            </div>
        </div>
        {% if step_idx.update({'n': step_idx.n + 1}) %}{% endif %}
        {% endif %}
        {% for r in range(1, debate.config.num_rounds + 1) %}
        <div class="stepper-item" id="step-round-{{ r }}" data-step="{{ step_idx.n }}">
            <div class="stepper-marker"><span>{{ step_idx.n }}</span></div>
            <div class="stepper-content">
                <div class="stepper-label">Runde {{ r }} <span class="stepper-label-dim">/ {{ debate.config.num_rounds }}</span></div>
                <div class="stepper-detail" id="step-round-{{ r }}-detail"></div>
            </div>
        </div>
        {% if step_idx.update({'n': step_idx.n + 1}) %}{% endif %}
        {% endfor %}
        {% if debate.config.moderator_summary %}
        <div class="stepper-item" id="step-summary" data-step="{{ step_idx.n }}">
            <div class="stepper-marker"><span>{{ step_idx.n }}</span></div>
            <div class="stepper-content">
                <div class="stepper-label">Zusammenfassung</div>
                <div class="stepper-detail" id="step-summary-detail"></div>
            </div>
        </div>
        {% if step_idx.update({'n': step_idx.n + 1}) %}{% endif %}
        {% endif %}
        <div class="stepper-item" id="step-audio" data-step="{{ step_idx.n }}">
            <div class="stepper-marker"><span>{{ step_idx.n }}</span></div>
            <div class="stepper-content">
                <div class="stepper-label">Audio-Generierung</div>
                <div class="stepper-detail" id="step-audio-detail"></div>
            </div>
        </div>
    </div>
</div>
<script>const TOTAL_STEPS = {{ total_steps }};</script>
{% endif %}

{% endblock %}

{% block scripts %}
{% if debate.status.value in ['pending', 'running', 'generating_audio'] %}
<script>
(function() {
    const debateId = "{{ debate.id }}";
    const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
    let ws;
    let reconnectAttempts = 0;
    const maxReconnect = 5;

    const statusText = document.getElementById('status-text');
    const progressText = document.getElementById('progress-text');

    const ringEl = document.getElementById('progressRing');
    const pctEl = document.getElementById('progressPct');
    const currentEl = document.getElementById('progressCurrent');
    const totalSteps = typeof TOTAL_STEPS !== 'undefined' ? TOTAL_STEPS : 1;
    let stepsCompleted = 0;
    let audioTotal = 0;
    let audioDone = 0;
    const roundDoneCount = {};  // track how many debaters finished per round

    function setProgress(completed, label) {
        const pct = Math.round((completed / totalSteps) * 100);
        const offset = 264 - (264 * pct / 100);
        if (ringEl) ringEl.style.strokeDashoffset = offset;
        if (pctEl) pctEl.textContent = pct + '%';
        if (currentEl && label) currentEl.textContent = label;
    }

    function setStep(id, state, detail) {
        const el = document.getElementById(id);
        if (!el) return;
        el.classList.remove('waiting', 'active', 'done', 'error');
        el.classList.add(state);
        if (detail !== undefined) {
            const d = el.querySelector('.stepper-detail');
            if (d) d.textContent = detail;
        }
    }

    function connect() {
        ws = new WebSocket(`${wsProtocol}//${location.host}/ws/debate/${debateId}`);

        ws.onmessage = function(e) {
            const data = JSON.parse(e.data);
            const event = data.event;
            const debate = data.debate;
            reconnectAttempts = 0;

            // Update status indicator
            statusText.textContent = debate.status.toUpperCase();

            // Drive progress steps
            if (event === 'generating_intro') {
                setStep('step-intro', 'active', 'Wird generiert…');
                setProgress(stepsCompleted, 'Moderator-Einleitung…');
            } else if (event === 'intro_generated') {
                stepsCompleted++;
                setStep('step-intro', 'done', 'Fertig');
                setProgress(stepsCompleted, 'Einleitung fertig');
            } else if (event === 'generating_summary') {
                setStep('step-summary', 'active', 'Wird generiert…');
                setProgress(stepsCompleted, 'Zusammenfassung…');
            } else if (event === 'summary_generated') {
                stepsCompleted++;
                setStep('step-summary', 'done', 'Fertig');
                setProgress(stepsCompleted, 'Zusammenfassung fertig');
            } else if (event === 'generating_audio') {
                audioTotal = (debate.turns ? debate.turns.length : 0)
                    + (debate.intro_text ? 1 : 0)
                    + (debate.summary_text ? 1 : 0);
                audioDone = 0;
                setStep('step-audio', 'active', `0 / ${audioTotal} Audiodateien…`);
                setProgress(stepsCompleted, 'Audio wird generiert…');
            } else if (event === 'intro_audio_done' || event === 'summary_audio_done') {
                audioDone++;
                setStep('step-audio', 'active', `${audioDone} / ${audioTotal} Audiodateien…`);
                setProgress(stepsCompleted + (audioDone / Math.max(1, audioTotal)), `Audio ${audioDone}/${audioTotal}…`);
            } else if (event === 'intro_audio_skipped' || event === 'summary_audio_skipped') {
                audioTotal = Math.max(0, audioTotal - 1);
                setStep('step-audio', 'active', `${audioDone} / ${audioTotal} Audiodateien…`);
            } else if (event === 'completed') {
                stepsCompleted = totalSteps;
                setStep('step-audio', 'done', 'Fertig');
                setProgress(totalSteps, 'Debatte abgeschlossen!');
                progressText.textContent = 'Debatte abgeschlossen!';
            } else if (event.startsWith('error:')) {
                progressText.textContent = 'Fehler: ' + event.substring(7);
                if (currentEl) currentEl.textContent = 'Fehler aufgetreten';
            } else {
                // Round events: round_{num}_{name}_thinking/done/error
                const roundMatch = event.match(/^round_(\d+)_(.+?)_(thinking|done|error)$/);
                if (roundMatch) {
                    const [, roundNum, name, action] = roundMatch;
                    const stepId = `step-round-${roundNum}`;
                    if (action === 'thinking') {
                        setStep(stepId, 'active', `${name} denkt nach…`);
                        setProgress(stepsCompleted, `Runde ${roundNum} – ${name}…`);
                    } else if (action === 'done') {
                        roundDoneCount[roundNum] = (roundDoneCount[roundNum] || 0) + 1;
                        if (roundDoneCount[roundNum] >= 2) {
                            stepsCompleted++;
                            setStep(stepId, 'done', 'Beide Seiten fertig');
                            setProgress(stepsCompleted, `Runde ${roundNum} abgeschlossen`);
                        } else {
                            setStep(stepId, 'active', `${name} fertig`);
                            setProgress(stepsCompleted, `Runde ${roundNum} – ${name} fertig`);
                        }
                    } else if (action === 'error') {
                        setStep(stepId, 'error', `${name}: Fehler`);
                    }
                }

                // Audio turn events
                const audioMatch = event.match(/^audio_turn_(\d+)_(done|skipped)$/);
                if (audioMatch) {
                    const [, , status] = audioMatch;
                    if (status === 'done') audioDone++;
                    else audioTotal = Math.max(0, audioTotal - 1);
                    setStep('step-audio', 'active', `${audioDone} / ${audioTotal} Audiodateien…`);
                    setProgress(stepsCompleted + (audioDone / Math.max(1, audioTotal)), `Audio ${audioDone}/${audioTotal}…`);
                }
            }

            // Reload on completion/error to show final state
            if (debate.status === 'completed' || debate.status === 'error') {
                setTimeout(() => location.reload(), 800);
            }
        };

        ws.onclose = function() {
            if (reconnectAttempts < maxReconnect) {
                reconnectAttempts++;
                const delay = Math.min(1000 * reconnectAttempts, 5000);
                setTimeout(connect, delay);
            } else {
                progressText.textContent = 'Verbindung verloren – Seite neu laden';
            }
        };

        ws.onerror = function() {
            // onclose will handle reconnection
        };
    }

    connect();

    // Keep alive
    setInterval(() => {
        if (ws && ws.readyState === WebSocket.OPEN) ws.send('ping');
    }, 15000);
})();
</script>
{% endif %}
{% endblock %}