{% extends "base.html" %}

{% block title %}{{ _('Thought Ranking') }} - {{ _('Wunschkonzert') }}{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col">
        <h1 class="display-4"><i class="fas fa-list-ol"></i> {{ _("Thought Ranking") }}</h1>
        <p class="lead">{{ _("Here are all thoughts ranked by the community. Thoughts with the same points are randomly sorted.") }}</p>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        {% if current_project and current_project.only_show_results_after_end and not current_project.is_project_over() %}
        <div class="alert alert-info mb-3">
            <i class="fas fa-info-circle"></i> {{ _('Results are hidden until the project ends.') }}
            {{ _('You can still submit thoughts and vote, but total points will only be visible after the project is marked as ended.') }}
        </div>
        {% endif %}
        
        {% if thoughts %}
            {% for thought in thoughts %}
                <div class="card thought-card mb-3" id="thought-{{ thought.id }}">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <h5 class="card-title mb-0">
                                {% set user_ranking = UserRanking.get_user_ranking(request.current_user.id, thought.id) %}
                                {% if user_ranking and user_ranking.essential %}
                                <span class="badge bg-success me-1" title="{{ _('You marked this as essential') }}">
                                    <i class="fas fa-star"></i> {{ _('Essential') }}
                                </span>
                                {% endif %}
                                {% if user_ranking and user_ranking.vetoed %}
                                <span class="badge bg-danger me-1" title="{{ _('You marked this as vetoed') }}">
                                    <i class="fas fa-ban"></i> {{ _('Vetoed') }}
                                </span>
                                {% endif %}
                                {{ thought.content }}
                            </h5>
                            <div class="points-badge">
                                {% if thought.hide_points %}
                                <span class="badge bg-secondary rounded-pill total-points" data-thought-id="{{ thought.id }}" data-hide-points="true">
                                    <i class="fas fa-lock"></i> {{ _('Hidden') }}
                                </span>
                                {% else %}
                                <span class="badge bg-primary rounded-pill total-points" data-thought-id="{{ thought.id }}">
                                    {{ thought.total_points }} {{ _('points') }}
                                </span>
                                {% endif %}
                            </div>
                        </div>
                        <!-- Author and timestamp removed for anonymity -->
                        
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <div class="ranking-controls">
                                <button class="btn btn-outline-danger btn-rank btn-decrease" data-thought-id="{{ thought.id }}">
                                    <i class="fas fa-minus"></i>
                                </button>
                                
                                <span class="points-display" data-thought-id="{{ thought.id }}">
                                    {% set user_ranking = UserRanking.get_user_ranking(request.current_user.id, thought.id) %}
                                    {{ user_ranking.points if user_ranking else 0 }}
                                </span>
                                
                                <button class="btn btn-outline-success btn-rank btn-increase" data-thought-id="{{ thought.id }}">
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                            
                            <div class="special-controls">
                                <button class="btn btn-sm {% if user_ranking and user_ranking.essential %}btn-success{% else %}btn-outline-success{% endif %} toggle-essential" 
                                        data-thought-id="{{ thought.id }}"
                                        title="{{ _('Mark as essential (max 5)') }}">
                                    <i class="{% if user_ranking and user_ranking.essential %}fas fa-star{% else %}far fa-star{% endif %}"></i>
                                    {{ _('Essential') }} {% if user_ranking and user_ranking.essential %}(+5){% endif %}
                                </button>
                                
                                <button class="btn btn-sm {% if user_ranking and user_ranking.vetoed %}btn-danger{% else %}btn-outline-danger{% endif %} toggle-veto" 
                                        data-thought-id="{{ thought.id }}"
                                        title="{{ _('Mark as vetoed (max 5)') }}">
                                    <i class="fas {% if user_ranking and user_ranking.vetoed %}fa-ban{% else %}fa-times-circle{% endif %}"></i>
                                    {{ _('Veto') }} {% if user_ranking and user_ranking.vetoed %}(-5){% endif %}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        {% else %}
            <div class="alert alert-info">
                <i class="fas fa-info-circle"></i> {{ _('No thoughts have been submitted yet.') }} 
                <a href="{{ url_for('main.submit_thought') }}" class="alert-link">{{ _('Be the first to submit a thought!') }}</a>
            </div>
        {% endif %}
    </div>
    
    <div class="col-md-4">
        <div class="card shadow-sm">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-info-circle"></i> {{ _('How Ranking Works') }}</h5>
            </div>
            <div class="card-body">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        <i class="fas fa-arrow-up text-success"></i> <i class="fas fa-arrow-down text-danger"></i>
                        {{ _('You can rank thoughts from -10 to +10 points') }}
                    </li>
                    <li class="list-group-item">
                        <i class="far fa-star text-success"></i>
                        {{ _("Mark up to 5 thoughts as \"essential\" (+5 points each)") }}
                    </li>
                    <li class="list-group-item">
                        <i class="fas fa-times-circle text-danger"></i>
                        {{ _('Mark up to 5 thoughts as "vetoed" (-5 points each)') }}
                    </li>
                    <li class="list-group-item">
                        <i class="fas fa-random"></i>
                        {{ _('Thoughts with the same points are randomly sorted') }}
                    </li>
                </ul>
                
                <div class="d-grid gap-2 mt-3">
                    <a href="{{ url_for('main.submit_thought') }}" class="btn btn-primary">
                        <i class="fas fa-plus-circle"></i> {{ _('Submit a New Thought') }}
                    </a>
                </div>
            </div>
        </div>
        
        <div class="card shadow-sm mt-3">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="fas fa-user"></i> {{ _("Your Status") }}</h5>
            </div>
            <div class="card-body">
                <p>
                    <strong>{{ _('Essential thoughts:') }}</strong> 
                    <span id="essential-count">{{ request.current_user.count_essentials(current_project.id if current_project else None) }}</span>/5
                    {% if current_project %}
                    <small class="text-muted">({{ _('in this project') }})</small>
                    {% endif %}
                </p>
                <p>
                    <strong>{{ _('Vetoed thoughts:') }}</strong> 
                    <span id="veto-count">{{ request.current_user.count_vetoes(current_project.id if current_project else None) }}</span>/5
                    {% if current_project %}
                    <small class="text-muted">({{ _('in this project') }})</small>
                    {% endif %}
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Pass translated text from Jinja to JavaScript
    var hiddentext = "{{ _('Hidden') }}";

    document.addEventListener('DOMContentLoaded', function() {
        // Handle ranking (increase/decrease points)
        document.querySelectorAll('.btn-increase, .btn-decrease').forEach(button => {
            button.addEventListener('click', function() {
                const thoughtId = this.getAttribute('data-thought-id');
                const pointsDisplay = document.querySelector(`.points-display[data-thought-id="${thoughtId}"]`);
                let currentPoints = parseInt(pointsDisplay.textContent);
                
                // Increase or decrease points
                if (this.classList.contains('btn-increase')) {
                    currentPoints = Math.min(10, currentPoints + 1);
                } else {
                    currentPoints = Math.max(-10, currentPoints - 1);
                }
                
                // Update UI immediately for better UX
                pointsDisplay.textContent = currentPoints;
                
                // Send API request
                fetch('/api/rank', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        thought_id: thoughtId,
                        points: currentPoints
                    })
                })
                .then(response => response.json())
                .then(data => {
                    console.log('API Response for rank:', data);
                    console.log('hide_points value:', data.hide_points);
                    if (data.success) {
                        // Update total points
                        const totalPointsElement = document.querySelector(`.total-points[data-thought-id="${thoughtId}"]`);
                        if (data.hide_points) {
                            totalPointsElement.className = 'badge bg-secondary rounded-pill total-points';
                            totalPointsElement.setAttribute('data-hide-points', 'true');
                            totalPointsElement.innerHTML = '<i class="fas fa-lock"></i> ' + hiddentext;
                        } else {
                            totalPointsElement.className = 'badge bg-primary rounded-pill total-points';
                            totalPointsElement.removeAttribute('data-hide-points');
                            totalPointsElement.textContent = `${data.total_points} points`;
                        }
                    } else {
                        showToast(data.error || 'An error occurred', 'error');
                        // Revert UI if there was an error
                        pointsDisplay.textContent = data.points || 0;
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showToast('Failed to update ranking', 'error');
                });
            });
        });
        
        // Handle essential toggle
        document.querySelectorAll('.toggle-essential').forEach(button => {
            button.addEventListener('click', function() {
                const thoughtId = this.getAttribute('data-thought-id');
                const icon = this.querySelector('i');
                
                fetch(`/api/essential`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ thought_id: thoughtId })
                })
                .then(response => response.json())
                .then(data => {
                    console.log('API Response for rank:', data);
                    console.log('hide_points value:', data.hide_points);
                    if (data.success) {
                        // Toggle icon and button style
                        if (data.is_essential) {
                            icon.classList.remove('far');
                            icon.classList.add('fas');
                            button.classList.remove('btn-outline-success');
                            button.classList.add('btn-success');
                            // Add (+5) text
                            button.innerHTML = button.innerHTML.replace(/Essential/, 'Essential (+5)');
                            
                            // Update essential count
                            const essentialCount = document.getElementById('essential-count');
                            if (essentialCount) {
                                essentialCount.textContent = parseInt(essentialCount.textContent) + 1;
                            }
                        } else {
                            icon.classList.remove('fas');
                            icon.classList.add('far');
                            button.classList.remove('btn-success');
                            button.classList.add('btn-outline-success');
                            // Remove (+5) text
                            button.innerHTML = button.innerHTML.replace(/Essential \(\+5\)/, 'Essential');
                            
                            // Update essential count
                            const essentialCount = document.getElementById('essential-count');
                            if (essentialCount) {
                                essentialCount.textContent = parseInt(essentialCount.textContent) - 1;
                            }
                        }
                        
                        // Update total points
                        const totalPointsElement = document.querySelector(`.total-points[data-thought-id="${thoughtId}"]`);
                        if (data.hide_points) {
                            totalPointsElement.className = 'badge bg-secondary rounded-pill total-points';
                            totalPointsElement.setAttribute('data-hide-points', 'true');
                            totalPointsElement.innerHTML = '<i class="fas fa-lock"></i> ' + hiddentext;
                        } else {
                            totalPointsElement.className = 'badge bg-primary rounded-pill total-points';
                            totalPointsElement.removeAttribute('data-hide-points');
                            totalPointsElement.textContent = `${data.total_points} points`;
                        }
                            
                        // Update the badge at the top of the thought
                        const thoughtCard = document.getElementById(`thought-${thoughtId}`);
                        const cardTitle = thoughtCard.querySelector('.card-title');
                        
                        if (data.is_essential) {
                            // Add essential badge if not exists
                            if (!cardTitle.querySelector('.badge.bg-success')) {
                                const badge = document.createElement('span');
                                badge.className = 'badge bg-success me-1';
                                badge.title = 'You marked this as essential';
                                badge.innerHTML = '<i class="fas fa-star"></i> Essential';
                                cardTitle.insertBefore(badge, cardTitle.firstChild);
                            }
                            
                            // If this thought was marked as vetoed, unmark it
                            const vetoButton = document.querySelector(`.toggle-veto[data-thought-id="${thoughtId}"]`);
                            if (vetoButton) {
                                const vetoIcon = vetoButton.querySelector('i');
                                if (vetoIcon && vetoIcon.classList.contains('fa-ban')) {
                                    // Reset veto button
                                    vetoIcon.classList.remove('fa-ban');
                                    vetoIcon.classList.add('fa-times-circle');
                                    vetoButton.classList.remove('btn-danger');
                                    vetoButton.classList.add('btn-outline-danger');
                                    vetoButton.innerHTML = vetoButton.innerHTML.replace(/Veto(?: \(\-5\))*/, 'Veto (-5)');
                                    
                                    // Remove veto badge if exists
                                    const vetoBadge = cardTitle.querySelector('.badge.bg-danger');
                                    if (vetoBadge) {
                                        vetoBadge.remove();
                                    }
                                }
                            }
                        } else {
                            // Remove essential badge if exists
                            const badge = cardTitle.querySelector('.badge.bg-success');
                            if (badge) {
                                badge.remove();
                            }
                        }
                    } else {
                        showToast(data.message || 'Failed to update essential status', 'error');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showToast('An error occurred while updating essential status', 'error');
                });
            });
        });
        
        // Handle veto toggle
        document.querySelectorAll('.toggle-veto').forEach(button => {
            button.addEventListener('click', function() {
                const thoughtId = this.getAttribute('data-thought-id');
                const icon = this.querySelector('i');
                
                fetch(`/api/veto`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ thought_id: thoughtId })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Toggle icon and button style
                        if (data.is_vetoed) {
                            icon.classList.remove('fa-times-circle');
                            icon.classList.add('fa-ban');
                            button.classList.remove('btn-outline-danger');
                            button.classList.add('btn-danger');
                            // Update button text (no need to add (-5) text for consistency)
                            button.innerHTML = button.innerHTML.replace(/Veto(?: \(\-5\))*/, 'Veto (-5)');
                            
                            // Update veto count
                            const vetoCount = document.getElementById('veto-count');
                            if (vetoCount) {
                                vetoCount.textContent = parseInt(vetoCount.textContent) + 1;
                            }
                        } else {
                            icon.classList.remove('fa-ban');
                            icon.classList.add('fa-times-circle');
                            button.classList.remove('btn-danger');
                            button.classList.add('btn-outline-danger');
                            // Remove (-5) text
                            button.innerHTML = button.innerHTML.replace(/Veto \(\-5\)/, 'Veto');
                            
                            // Update veto count
                            const vetoCount = document.getElementById('veto-count');
                            if (vetoCount) {
                                vetoCount.textContent = parseInt(vetoCount.textContent) - 1;
                            }
                        }
                        
                        // Update total points
                        const totalPointsElement = document.querySelector(`.total-points[data-thought-id="${thoughtId}"]`);
                        if (data.hide_points) {
                            totalPointsElement.className = 'badge bg-secondary rounded-pill total-points';
                            totalPointsElement.setAttribute('data-hide-points', 'true');
                            totalPointsElement.innerHTML = '<i class="fas fa-lock"></i> ' + hiddentext;
                        } else {
                            totalPointsElement.className = 'badge bg-primary rounded-pill total-points';
                            totalPointsElement.removeAttribute('data-hide-points');
                            totalPointsElement.textContent = `${data.total_points} points`;
                        }
                            
                        // Update the badge at the top of the thought
                        const thoughtCard = document.getElementById(`thought-${thoughtId}`);
                        const cardTitle = thoughtCard.querySelector('.card-title');
                        
                        if (data.is_vetoed) {
                            // Add veto badge if not exists
                            if (!cardTitle.querySelector('.badge.bg-danger')) {
                                const badge = document.createElement('span');
                                badge.className = 'badge bg-danger me-1';
                                badge.title = 'You marked this as vetoed';
                                badge.innerHTML = '<i class="fas fa-ban"></i> Vetoed';
                                cardTitle.insertBefore(badge, cardTitle.firstChild);
                            }
                            
                            // If this thought was marked as essential, unmark it
                            const essentialButton = document.querySelector(`.toggle-essential[data-thought-id="${thoughtId}"]`);
                            if (essentialButton) {
                                const essentialIcon = essentialButton.querySelector('i');
                                if (essentialIcon && essentialIcon.classList.contains('fas')) {
                                    // Reset essential button
                                    essentialIcon.classList.remove('fas');
                                    essentialIcon.classList.add('far');
                                    essentialButton.classList.remove('btn-success');
                                    essentialButton.classList.add('btn-outline-success');
                                    essentialButton.innerHTML = essentialButton.innerHTML.replace(/Essential \(\+5\)/, 'Essential');
                                    
                                    // Remove essential badge if exists
                                    const essentialBadge = cardTitle.querySelector('.badge.bg-success');
                                    if (essentialBadge) {
                                        essentialBadge.remove();
                                    }
                                }
                            }
                        } else {
                            // Remove veto badge if exists
                            const badge = cardTitle.querySelector('.badge.bg-danger');
                            if (badge) {
                                badge.remove();
                            }
                        }
                    } else {
                        showToast(data.message || 'Failed to update veto status', 'error');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showToast('An error occurred while updating veto status', 'error');
                });
            });
        });
    });
</script>
{% endblock %}