{% extends "base.html" %}
{% block title %}KI Arena – Neue Debatte{% endblock %}

{% block content %}
<div class="hero">
    <h1 class="hero-title">Zwei KIs.<br>Ein Thema.<br><span class="accent">Kein Erbarmen.</span></h1>
    <p class="hero-sub">Konfiguriere deine KI-Debatte und lass die Modelle aufeinander los.</p>
</div>

<!-- Provider-Status -->
<div class="provider-status">
    {% set providers_found = models.values() | map(attribute='provider') | unique | list %}
    {% for p in ['anthropic', 'openai', 'ollama'] %}
        {% if p in providers_found %}
        <span class="provider-pill provider-active" title="Verfügbar">✓ {{ p | capitalize }}</span>
        {% else %}
        <span class="provider-pill provider-inactive" title="API-Key fehlt oder nicht erreichbar">✗ {{ p | capitalize }}</span>
        {% endif %}
    {% endfor %}
    <a href="/setup" class="provider-hint" style="color:var(--text-muted);text-decoration:none;">API-Keys konfigurieren</a>
</div>

{% if not models %}
<!-- No models available warning -->
<div class="notice notice-error">
    <strong>Keine LLM-Modelle verfügbar.</strong><br>
    Konfiguriere mindestens einen API-Key in den <a href="/setup" style="color:var(--accent-a)">Einstellungen</a> oder starte Ollama lokal.
</div>
{% else %}

<form class="config-form" id="debateForm" hx-post="/api/debate/start" hx-swap="innerHTML" hx-target="#form-result" hx-encoding="multipart/form-data">

    {% if clone %}
    <div class="notice notice-info" style="margin-bottom: 1.25rem;">
        Einstellungen aus vorheriger Debatte übernommen. Passe an was du möchtest und starte erneut.
    </div>
    {% endif %}

    <!-- Topic -->
    <div class="form-section">
        <label class="form-label" for="topic">
            Debattenthema
        </label>
        <textarea id="topic" name="topic" rows="2" class="form-input form-textarea" required
            placeholder="z.B. 'Sollte Künstliche Intelligenz streng reguliert werden?'">{{ clone.topic if clone else '' }}</textarea>
        <div class="form-help">
            Tipp: Je konkreter das Thema, desto besser die Debatte.
            Vermeide zu breite Fragen wie „Ist KI gut?".
        </div>
    </div>

    <!-- Settings Row -->
    <div class="form-row">
        <div class="form-group">
            <label class="form-label" for="language">Sprache</label>
            <select id="language" name="language" class="form-input">
                <option value="de" {% if not clone or clone.language == 'de' %}selected{% endif %}>🇩🇪 Deutsch</option>
                <option value="en" {% if clone and clone.language == 'en' %}selected{% endif %}>🇬🇧 English</option>
            </select>
        </div>
        <div class="form-group">
            <label class="form-label" for="num_rounds">Runden <span class="form-hint">(1–10)</span></label>
            <input type="number" id="num_rounds" name="num_rounds" value="{{ clone.num_rounds if clone else 3 }}" min="1" max="10" class="form-input" required>
        </div>
        <div class="form-group">
            <label class="form-label" for="max_tokens">Länge pro Beitrag</label>
            <select id="max_tokens" name="max_tokens" class="form-input">
                {% set mt = clone.max_tokens|string if clone else '1024' %}
                <option value="128" {% if mt == '128' %}selected{% endif %}>128 – 2-3 Sätze</option>
                <option value="256" {% if mt == '256' %}selected{% endif %}>256 – Kurzer Absatz</option>
                <option value="512" {% if mt == '512' %}selected{% endif %}>512 – Kurz &amp; knapp</option>
                <option value="1024" {% if mt == '1024' %}selected{% endif %}>1024 – Standard</option>
                <option value="2048" {% if mt == '2048' %}selected{% endif %}>2048 – Ausführlich</option>
                <option value="4096" {% if mt == '4096' %}selected{% endif %}>4096 – Sehr detailliert</option>
            </select>
        </div>
    </div>

    <!-- Debaters -->
    <div class="debaters-grid">
        <!-- Debater A -->
        <div class="debater-card debater-a">
            <div class="debater-badge">⚡ Debattant A</div>
            <div class="form-group">
                <label class="form-label">Name</label>
                <input type="text" name="a_name" value="{{ clone.a_name if clone else 'KI Alpha' }}" class="form-input" required maxlength="30">
            </div>
            <div class="form-group">
                <label class="form-label">Position</label>
                <input type="text" name="a_position" value="{{ clone.a_position if clone else 'Pro' }}" class="form-input" required maxlength="50"
                    placeholder="z.B. Pro, Dafür, Befürworter">
            </div>
            <div class="form-group">
                <label class="form-label">Modell</label>
                <select name="a_model" class="form-input model-select" required>
                    {% for key, m in models.items() %}
                    <option value="{{ key }}" data-provider="{{ m.provider }}" {% if clone and clone.a_model == key %}selected{% endif %}>{{ m.label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">Stimme</label>
                <select name="a_voice" class="form-input voice-select" required>
                    {% for key, v in voices.items() %}
                    <option value="{{ key }}" {% if (clone and clone.a_voice == key) or (not clone and key == "de-DE-ConradNeural") %}selected{% endif %}>{{ v.label }}</option>
                    {% endfor %}
                </select>
            </div>
            <details class="prompt-details"{% if clone and clone.a_system_prompt %} open{% endif %}>
                <summary class="form-label prompt-toggle">System Prompt</summary>
                <textarea name="a_system_prompt" id="a_system_prompt" rows="8" class="form-input form-textarea system-prompt-field" data-side="a"
                    placeholder="{{ default_prompts[clone.language if clone else 'de'].debater_a }}"
                    >{{ clone.a_system_prompt if clone and clone.a_system_prompt else '' }}</textarea>
                <div class="form-help" style="margin-top:4px">Leer lassen = Standard-Prompt (wird automatisch mit Name, Position und Thema erzeugt)</div>
            </details>
            <details class="prompt-details">
                <summary class="form-label prompt-toggle">Dokumente &amp; Bilder</summary>
                <div class="file-upload-zone">
                    <input type="file" name="a_files" multiple accept=".pdf,.docx,.txt,.md,.png,.jpg,.jpeg,.webp" class="file-input">
                    <div class="file-upload-hint">PDF, DOCX, TXT, PNG, JPG, WEBP (max. 5 Dateien, je max. 10 MB)</div>
                    <div class="file-list"></div>
                </div>
            </details>
        </div>

        <!-- VS Badge -->
        <div class="vs-badge">VS</div>

        <!-- Debater B -->
        <div class="debater-card debater-b">
            <div class="debater-badge">🔥 Debattant B</div>
            <div class="form-group">
                <label class="form-label">Name</label>
                <input type="text" name="b_name" value="{{ clone.b_name if clone else 'KI Beta' }}" class="form-input" required maxlength="30">
            </div>
            <div class="form-group">
                <label class="form-label">Position</label>
                <input type="text" name="b_position" value="{{ clone.b_position if clone else 'Contra' }}" class="form-input" required maxlength="50"
                    placeholder="z.B. Contra, Dagegen, Kritiker">
            </div>
            <div class="form-group">
                <label class="form-label">Modell</label>
                <select name="b_model" class="form-input model-select" required>
                    {% for key, m in models.items() %}
                    <option value="{{ key }}" data-provider="{{ m.provider }}" {% if clone and clone.b_model == key %}selected{% endif %}>{{ m.label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">Stimme</label>
                <select name="b_voice" class="form-input voice-select" required>
                    {% for key, v in voices.items() %}
                    <option value="{{ key }}" {% if (clone and clone.b_voice == key) or (not clone and key == "de-DE-AmalaNeural") %}selected{% endif %}>{{ v.label }}</option>
                    {% endfor %}
                </select>
            </div>
            <details class="prompt-details"{% if clone and clone.b_system_prompt %} open{% endif %}>
                <summary class="form-label prompt-toggle">System Prompt</summary>
                <textarea name="b_system_prompt" id="b_system_prompt" rows="8" class="form-input form-textarea system-prompt-field" data-side="b"
                    placeholder="{{ default_prompts[clone.language if clone else 'de'].debater_b }}"
                    >{{ clone.b_system_prompt if clone and clone.b_system_prompt else '' }}</textarea>
                <div class="form-help" style="margin-top:4px">Leer lassen = Standard-Prompt (wird automatisch mit Name, Position und Thema erzeugt)</div>
            </details>
            <details class="prompt-details">
                <summary class="form-label prompt-toggle">Dokumente &amp; Bilder</summary>
                <div class="file-upload-zone">
                    <input type="file" name="b_files" multiple accept=".pdf,.docx,.txt,.md,.png,.jpg,.jpeg,.webp" class="file-input">
                    <div class="file-upload-hint">PDF, DOCX, TXT, PNG, JPG, WEBP (max. 5 Dateien, je max. 10 MB)</div>
                    <div class="file-list"></div>
                </div>
            </details>
        </div>
    </div>

    <!-- Options -->
    <div class="form-row options-row">
        <label class="checkbox-label" title="KI-Moderator stellt das Thema vor und begrüßt die Debattanten">
            <input type="checkbox" name="moderator_intro" value="true" {% if not clone or clone.moderator_intro %}checked{% endif %}>
            <span>Moderator-Intro</span>
        </label>
        <label class="checkbox-label" title="KI-Moderator fasst die Debatte am Ende zusammen und bewertet die Argumente">
            <input type="checkbox" name="moderator_summary" value="true" {% if not clone or clone.moderator_summary %}checked{% endif %}>
            <span>Moderator-Zusammenfassung</span>
        </label>
    </div>
    <details class="prompt-details" style="margin-bottom: 0.5rem;"{% if clone and clone.moderator_system_prompt %} open{% endif %}>
        <summary class="form-label prompt-toggle">🎙 Moderator System Prompt</summary>
        <textarea name="moderator_system_prompt" id="moderator_system_prompt" rows="5" class="form-input form-textarea"
            placeholder="{{ default_prompts[clone.language if clone else 'de'].moderator }}"
            >{{ clone.moderator_system_prompt if clone and clone.moderator_system_prompt else '' }}</textarea>
        <div class="form-help" style="margin-top:4px">Leer lassen = Standard-Prompts für Einleitung und Zusammenfassung (sprachabhängig)</div>
    </details>
    <details class="prompt-details" style="margin-bottom: 1rem;">
        <summary class="form-label prompt-toggle">🎙 Moderator Dokumente &amp; Bilder</summary>
        <div class="file-upload-zone">
            <input type="file" name="mod_files" multiple accept=".pdf,.docx,.txt,.md,.png,.jpg,.jpeg,.webp" class="file-input">
            <div class="file-upload-hint">PDF, DOCX, TXT, PNG, JPG, WEBP (max. 5 Dateien, je max. 10 MB)</div>
            <div class="file-list"></div>
        </div>
    </details>

    <!-- Duration estimate -->
    <div class="estimate-bar">
        <span class="estimate-icon">⏱</span>
        <span id="estimateText">Geschätzte Dauer: ~2–4 Minuten (3 Runden, 2 Modelle + TTS)</span>
    </div>

    <button type="submit" class="btn-start" id="submitBtn">
        <span class="btn-icon">⚔</span> Debatte starten
    </button>

    <!-- Validation message -->
    <div id="validation-msg" class="notice notice-error" style="display:none; margin-top:1rem;"></div>

    <div id="form-result"></div>
</form>
{% endif %}

<!-- Recent Debates -->
{% if debates %}
<section class="recent-debates">
    <h2 class="section-title">Letzte Debatten</h2>
    <div class="debate-list" id="debateList">
        {% for d in debates %}
        <div class="debate-card-mini" id="debate-{{ d.id }}">
            <span class="debate-status status-{{ d.status.value }}">{{ d.status.value }}</span>
            <a href="/debate/{{ d.id }}" class="debate-topic">{{ d.config.topic[:60] if d.config else 'Unbekannt' }}{% if d.config and d.config.topic|length > 60 %}…{% endif %}</a>
            {% if d.config %}
            <span class="debate-models" title="{{ d.config.debater_a.model }} vs {{ d.config.debater_b.model }}">
                {{ d.config.debater_a.name }} vs {{ d.config.debater_b.name }}
            </span>
            {% endif %}
            <span class="debate-meta">{{ d.created_at[:16] }}</span>
            {% if d.status.value in ['completed', 'error'] %}
            <button class="debate-delete-btn"
                hx-delete="/api/debate/{{ d.id }}"
                hx-confirm="Debatte löschen?"
                hx-target="#debate-{{ d.id }}"
                hx-swap="outerHTML"
                title="Löschen"
                onclick="event.stopPropagation()">✕</button>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</section>
{% elif models %}
<section class="recent-debates">
    <div class="empty-state">
        <p class="empty-icon">🎙</p>
        <p class="empty-text">Noch keine Debatten vorhanden. Starte deine erste!</p>
    </div>
</section>
{% endif %}
{% endblock %}