{% extends "onboarding/base.html" %}

{% block title %}Posts kategorisieren{% endblock %}

{% block content %}
<div class="text-center mb-8">
    <h1 class="text-2xl font-bold text-white mb-2">Posts kategorisieren</h1>
    <p class="text-gray-400">Wir ordnen deine Posts automatisch den Post-Typen zu.</p>
</div>

{% if error %}
<div class="bg-red-900/50 border border-red-500 text-red-200 px-4 py-3 rounded-lg mb-6">
    {{ error }}
</div>
{% endif %}

<!-- Classification Progress -->
<div id="classification-section" class="mb-8">
    <div class="card-bg border border-gray-600 rounded-lg p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-medium text-white">Kategorisierung</h3>
            <div id="classification-status" class="text-sm">
                {% if classification_complete %}
                <span class="text-green-400">Abgeschlossen</span>
                {% else %}
                <span class="text-yellow-400">Ausstehend</span>
                {% endif %}
            </div>
        </div>

        <!-- Progress Bar -->
        <div class="mb-4">
            <div class="h-2 bg-gray-600 rounded-full overflow-hidden">
                <div id="progress-bar" class="h-full bg-brand-highlight transition-all duration-300"
                     style="width: {{ progress }}%"></div>
            </div>
            <div class="flex justify-between text-xs text-gray-400 mt-1">
                <span id="progress-text">{{ classified_count }}/{{ total_posts }} Posts</span>
                <span id="progress-percent">{{ progress }}%</span>
            </div>
        </div>

        {% if not classification_complete %}
        <button id="start-classification-btn"
                class="btn-primary py-2 px-4 rounded-lg transition-colors flex items-center gap-2">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
            </svg>
            Automatisch kategorisieren
        </button>
        {% endif %}
    </div>
</div>

<!-- Post Type Distribution -->
<div class="mb-8">
    <h3 class="text-lg font-medium text-white mb-4">Verteilung nach Post-Typ</h3>

    <div class="space-y-3" id="type-distribution">
        {% for post_type in post_types %}
        <div class="flex items-center gap-4">
            <div class="flex-1">
                <div class="flex justify-between text-sm mb-1">
                    <span class="text-white">{{ post_type.name }}</span>
                    <span class="text-gray-400">{{ post_type.count }} Posts</span>
                </div>
                <div class="h-2 bg-gray-600 rounded-full overflow-hidden">
                    <div class="h-full bg-brand-highlight"
                         style="width: {{ (post_type.count / total_posts * 100) if total_posts > 0 else 0 }}%"></div>
                </div>
            </div>
        </div>
        {% endfor %}

        {% if uncategorized_count > 0 %}
        <div class="flex items-center gap-4">
            <div class="flex-1">
                <div class="flex justify-between text-sm mb-1">
                    <span class="text-gray-400">Nicht kategorisiert</span>
                    <span class="text-gray-400">{{ uncategorized_count }} Posts</span>
                </div>
                <div class="h-2 bg-gray-600 rounded-full overflow-hidden">
                    <div class="h-full bg-gray-500"
                         style="width: {{ (uncategorized_count / total_posts * 100) if total_posts > 0 else 0 }}%"></div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<!-- Manual Review Section -->
{% if uncategorized_posts and uncategorized_posts|length > 0 %}
<div class="mb-8">
    <h3 class="text-lg font-medium text-white mb-4">Manuelle Nachkategorisierung</h3>
    <p class="text-sm text-gray-400 mb-4">Diese Posts konnten nicht automatisch kategorisiert werden:</p>

    <div class="space-y-4" id="manual-review-list">
        {% for post in uncategorized_posts[:5] %}
        <div class="bg-brand-bg border border-gray-600 rounded-lg p-4">
            <p class="text-sm text-gray-300 mb-3 line-clamp-3">{{ post.post_text[:300] }}{% if post.post_text|length > 300 %}...{% endif %}</p>
            <div class="flex flex-wrap gap-2">
                {% for pt in post_types %}
                <button type="button"
                        class="text-xs px-3 py-1 rounded-full border border-gray-500 text-gray-300 hover:border-brand-highlight hover:text-brand-highlight transition-colors"
                        onclick="categorizePost('{{ post.id }}', '{{ pt.id }}')">
                    {{ pt.name }}
                </button>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- Navigation -->
<form method="POST" action="/onboarding/categorize">
    <div class="flex justify-between pt-6 border-t border-gray-600">
        <a href="/onboarding/post-types" class="btn-secondary font-medium py-3 px-6 rounded-lg transition-colors">
            Zurück
        </a>
        <button type="submit" class="btn-primary font-medium py-3 px-8 rounded-lg transition-colors"
                {% if not classification_complete and classified_count < 3 %}disabled{% endif %}>
            Weiter
        </button>
    </div>
</form>
{% endblock %}

{% block scripts %}
<script>
    const userId = "{{ user_id }}";

    {% if not classification_complete %}
    document.getElementById('start-classification-btn').addEventListener('click', async function() {
        const btn = this;
        btn.disabled = true;
        btn.innerHTML = `
            <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
            </svg>
            Kategorisiere...
        `;

        try {
            const response = await fetch('/api/onboarding/classify-posts', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({user_id: userId})
            });
            const data = await response.json();

            if (data.success) {
                location.reload();
            } else {
                alert('Fehler: ' + (data.error || 'Unbekannter Fehler'));
                btn.disabled = false;
                btn.innerHTML = `
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                    </svg>
                    Automatisch kategorisieren
                `;
            }
        } catch (e) {
            alert('Fehler bei der Kategorisierung');
            btn.disabled = false;
        }
    });
    {% endif %}

    async function categorizePost(postId, postTypeId) {
        try {
            const response = await fetch('/api/onboarding/categorize-post', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({post_id: postId, post_type_id: postTypeId})
            });
            const data = await response.json();

            if (data.success) {
                location.reload();
            } else {
                alert('Fehler: ' + (data.error || 'Unbekannter Fehler'));
            }
        } catch (e) {
            alert('Fehler bei der Kategorisierung');
        }
    }
</script>
{% endblock %}