{% extends 'base.html.twig' %}

{% block title %}Gestion des feedbacks - Admin{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/pages/dashboard.css') }}">
    <link rel="stylesheet" href="{{ asset('styles/components/feedback-admin.css') }}">
{% endblock %}

{% block body %}
{# Calcul des stats #}
{% set pendingCount = feedbacks|filter(f => f.status == 'pending')|length %}
{% set rewardedCount = feedbacks|filter(f => f.status == 'rewarded')|length %}
{% set rejectedCount = feedbacks|filter(f => f.status == 'rejected')|length %}

<div class="dashboard-container">
    {# Header avec filtres #}
    <header class="feedback-admin-header">
        <div class="feedback-admin-header__left">
            <h1 class="dashboard-title">Gestion des feedbacks</h1>
            <p class="dashboard-subtitle">Examinez et recompensez les retours utiles de la beta fermee</p>
        </div>
        <div class="feedback-admin-header__right">
            <div class="feedback-filters" data-controller="feedback-filter">
                <button type="button" class="feedback-filter-btn active" data-filter="all">
                    Tous
                    <span class="count">{{ feedbacks|length }}</span>
                </button>
                <button type="button" class="feedback-filter-btn" data-filter="pending">
                    En attente
                    <span class="count">{{ pendingCount }}</span>
                </button>
                <button type="button" class="feedback-filter-btn" data-filter="rewarded">
                    Valides
                    <span class="count">{{ rewardedCount }}</span>
                </button>
                <button type="button" class="feedback-filter-btn" data-filter="rejected">
                    Rejetes
                    <span class="count">{{ rejectedCount }}</span>
                </button>
            </div>
        </div>
    </header>

    {# Statistiques ameliorees #}
    <section class="feedback-stats">
        <div class="feedback-stat-card feedback-stat-card--warning">
            <div class="feedback-stat-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="10"/>
                    <polyline points="12 6 12 12 16 14"/>
                </svg>
            </div>
            <div class="feedback-stat-content">
                <div class="feedback-stat-value">{{ pendingCount }}</div>
                <div class="feedback-stat-label">En attente de traitement</div>
            </div>
        </div>

        <div class="feedback-stat-card feedback-stat-card--success">
            <div class="feedback-stat-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                    <polyline points="22 4 12 14.01 9 11.01"/>
                </svg>
            </div>
            <div class="feedback-stat-content">
                <div class="feedback-stat-value">{{ rewardedCount }}</div>
                <div class="feedback-stat-label">Feedbacks recompenses</div>
            </div>
        </div>

        <div class="feedback-stat-card feedback-stat-card--danger">
            <div class="feedback-stat-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="10"/>
                    <line x1="15" y1="9" x2="9" y2="15"/>
                    <line x1="9" y1="9" x2="15" y2="15"/>
                </svg>
            </div>
            <div class="feedback-stat-content">
                <div class="feedback-stat-value">{{ rejectedCount }}</div>
                <div class="feedback-stat-label">Feedbacks rejetes</div>
            </div>
        </div>
    </section>

    {# Liste des feedbacks en cards #}
    <section class="dashboard-section">
        {% if feedbacks|length > 0 %}
            <div class="feedback-cards-grid">
                {% for feedback in feedbacks %}
                <article class="feedback-card feedback-card--{{ feedback.status }}" data-status="{{ feedback.status }}">
                    {# Barre de statut en haut #}
                    <div class="feedback-card__status-bar"></div>

                    {# Header avec badges #}
                    <div class="feedback-card__header">
                        <div class="feedback-card__meta">
                            <span class="status-badge status-badge--{{ feedback.status }}">
                                {{ feedback.statusLabel }}
                            </span>
                            <span class="category-badge category-badge--{{ feedback.category }}">
                                {{ feedback.categoryLabel }}
                            </span>
                        </div>
                        <span class="feedback-card__date">
                            {{ feedback.createdAt|date('d/m/Y H:i', 'Europe/Paris') }}
                        </span>
                    </div>

                    {# Contenu principal #}
                    <div class="feedback-card__body">
                        <h3 class="feedback-card__title">{{ feedback.title }}</h3>
                        <p class="feedback-card__message">{{ feedback.message|trim }}</p>

                        {% if feedback.pageUrl %}
                        <a href="{{ feedback.pageUrl }}" target="_blank" rel="noopener" class="feedback-card__url">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
                                <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
                            </svg>
                            <span>{{ feedback.pageUrl }}</span>
                        </a>
                        {% endif %}
                    </div>

                    {# Footer avec utilisateur #}
                    <div class="feedback-card__footer">
                        <div class="feedback-card__user">
                            <div class="feedback-card__user-avatar">
                                {{ feedback.user.email|first|upper }}
                            </div>
                            <span class="feedback-card__user-email">{{ feedback.user.email }}</span>
                        </div>

                        {% if feedback.creditsAwarded %}
                        <div class="feedback-card__credits">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="10"/>
                                <path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"/>
                                <path d="M12 18V6"/>
                            </svg>
                            {{ feedback.creditsAwarded|number_format(0, '', ' ') }}
                        </div>
                        {% endif %}
                    </div>

                    {# Actions selon le statut #}
                    {% if feedback.status == 'pending' %}
                    <div class="feedback-card__actions">
                        <form method="post" action="{{ path('admin_feedback_reward', {id: feedback.id}) }}" class="feedback-action-form feedback-action-form--validate">
                            <input
                                type="number"
                                name="credits"
                                value="10000"
                                min="0"
                                step="100"
                                class="credits-input"
                                placeholder="Credits"
                            >
                            <button type="submit" class="btn-action btn-action--success">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <polyline points="20 6 9 17 4 12"/>
                                </svg>
                                Valider
                            </button>
                        </form>
                        <form method="post" action="{{ path('admin_feedback_reject', {id: feedback.id}) }}" class="feedback-action-form" onsubmit="return confirm('Rejeter ce feedback ?')">
                            <button type="submit" class="btn-action btn-action--danger">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <line x1="18" y1="6" x2="6" y2="18"/>
                                    <line x1="6" y1="6" x2="18" y2="18"/>
                                </svg>
                                Rejeter
                            </button>
                        </form>
                    </div>
                    {% elseif feedback.status == 'rewarded' %}
                    <div class="feedback-card__status-indicator feedback-card__status-indicator--success">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="20 6 9 17 4 12"/>
                        </svg>
                        Feedback recompense
                    </div>
                    {% elseif feedback.status == 'rejected' %}
                    <div class="feedback-card__status-indicator feedback-card__status-indicator--danger">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <line x1="18" y1="6" x2="6" y2="18"/>
                            <line x1="6" y1="6" x2="18" y2="18"/>
                        </svg>
                        Feedback rejete
                    </div>
                    {% endif %}
                </article>
                {% endfor %}
            </div>
        {% else %}
            <div class="feedback-empty-state">
                <div class="feedback-empty-state__icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                    </svg>
                </div>
                <h3 class="feedback-empty-state__title">Aucun feedback pour le moment</h3>
                <p class="feedback-empty-state__text">Les retours utilisateurs de la beta fermee apparaitront ici des qu'ils seront soumis.</p>
            </div>
        {% endif %}
    </section>
</div>

<script>
    // Simple filter functionality
    document.addEventListener('DOMContentLoaded', () => {
        const filterBtns = document.querySelectorAll('.feedback-filter-btn');
        const cards = document.querySelectorAll('.feedback-card');

        filterBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                // Update active state
                filterBtns.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');

                const filter = btn.dataset.filter;

                // Filter cards
                cards.forEach((card, index) => {
                    const status = card.dataset.status;
                    const shouldShow = filter === 'all' || status === filter;

                    if (shouldShow) {
                        card.style.display = 'flex';
                        card.style.animation = 'none';
                        card.offsetHeight; // Trigger reflow
                        card.style.animation = `card-appear 0.4s ease forwards ${index * 0.05}s`;
                    } else {
                        card.style.display = 'none';
                    }
                });
            });
        });
    });
</script>
{% endblock %}