{% extends 'admin/base.html' %}

{% block title %}{{ t('review_manager.nav_label') }}{% endblock %}

{% block content %}
<div class="page-header page-header--with-action">
    <div class="page-header__content">
        <h2>⭐ {{ t('review_manager.nav_label') }}</h2>
        <p>{{ t('review_manager.list_subtitle') }}</p>
    </div>
    <div class="btn-group">
        <a href="{{ url_for('review_manager.settings') }}" class="btn btn-primary btn-sm">⚙️ {{ t('review_manager.settings_title') }}</a>
    </div>
</div>

<div class="filter-bar">
    <a href="{{ url_for('review_manager.list_reviews', status='all', lang=lang_filter, q=search_query, per_page=per_page) }}" class="filter-link {% if status_filter == 'all' %}active{% endif %}">{{ t('table.all') }}</a>
    <a href="{{ url_for('review_manager.list_reviews', status='pending', lang=lang_filter, q=search_query, per_page=per_page) }}" class="filter-link {% if status_filter == 'pending' %}active{% endif %}">{{ t('review_manager.status_pending') }}{% if pending_count %} ({{ pending_count }}){% endif %}</a>
    <a href="{{ url_for('review_manager.list_reviews', status='approved', lang=lang_filter, q=search_query, per_page=per_page) }}" class="filter-link {% if status_filter == 'approved' %}active{% endif %}">{{ t('review_manager.status_approved') }}</a>
    <a href="{{ url_for('review_manager.list_reviews', status='rejected', lang=lang_filter, q=search_query, per_page=per_page) }}" class="filter-link {% if status_filter == 'rejected' %}active{% endif %}">{{ t('review_manager.status_rejected') }}</a>
</div>

<div class="filter-row">
    <form method="GET" action="{{ url_for('review_manager.list_reviews') }}" class="d-inline">
        <input type="hidden" name="status" value="{{ status_filter }}">
        <input type="hidden" name="lang" value="{{ lang_filter }}">
        <input type="text" name="q" value="{{ search_query or '' }}" placeholder="🔍 {{ t('review_manager.search_placeholder') }}" autocomplete="off">
    </form>

    <label>{{ t('table.language') }}:</label>
    <select onchange="location.href=this.value">
        <option value="{{ url_for('review_manager.list_reviews', status=status_filter, lang='all', q=search_query, per_page=per_page) }}" {% if lang_filter == 'all' %}selected{% endif %}>{{ t('table.all_languages') }}</option>
        {% for lang in language_choices %}
        <option value="{{ url_for('review_manager.list_reviews', status=status_filter, lang=lang.code, q=search_query, per_page=per_page) }}" {% if lang_filter == lang.code %}selected{% endif %}>{{ lang.name }}</option>
        {% endfor %}
    </select>
</div>

{% if reviews %}
<form method="POST" action="{{ url_for('review_manager.bulk_action', status=status_filter, lang=lang_filter, q=search_query, page=page, per_page=per_page) }}" id="rm-bulk">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="rm-bulk-bar">
        <span class="rm-bulk-count text-sm text-muted" id="rmBulkCount"></span>
        <button type="submit" name="action" value="approve" class="btn btn-secondary btn-sm rm-bulk-btn" disabled>✔️ {{ t('review_manager.btn_approve') }}</button>
        <button type="submit" name="action" value="reject" class="btn btn-secondary btn-sm rm-bulk-btn" disabled>🚫 {{ t('review_manager.btn_reject') }}</button>
        <button type="submit" name="action" value="delete" class="btn btn-secondary btn-sm rm-bulk-btn" id="rmBulkDelete" disabled>🗑️ {{ t('table.delete') }}</button>
    </div>
</form>
<div class="table-scroll">
<table class="content-table">
    <thead>
        <tr>
            <th class="rm-check-col"><input type="checkbox" id="rmSelectAll" aria-label="{{ t('review_manager.select_all') }}"></th>
            <th>{{ t('review_manager.col_author') }}</th>
            <th>{{ t('review_manager.col_rating') }}</th>
            <th>{{ t('review_manager.col_review') }}</th>
            <th>{{ t('table.language') }}</th>
            <th>{{ t('table.status') }}</th>
            <th>{{ t('review_manager.col_date') }}</th>
            <th>{{ t('table.actions') }}</th>
        </tr>
    </thead>
    <tbody>
        {% for review in reviews %}
        <tr>
            <td class="rm-check-col"><input type="checkbox" name="ids" value="{{ review.id }}" form="rm-bulk" class="rm-row-check" aria-label="{{ review.author_name|e }}"></td>
            <td><a href="{{ url_for('review_manager.view_review', review_id=review.id) }}" class="title-link">{{ review.author_name }}</a></td>
            <td class="rm-stars" aria-label="{{ review.rating }}/5">{% for i in range(1, 6) %}<span class="rm-star {% if i <= review.rating %}rm-star--on{% endif %}">★</span>{% endfor %}</td>
            <td><a href="{{ url_for('review_manager.view_review', review_id=review.id) }}" class="rm-text-cell">{% if review.reply %}<span title="{{ t('review_manager.replied') }}">💬</span> {% endif %}{{ review.text }}</a></td>
            <td><span class="lang-badge">{{ review.language|upper }}</span></td>
            <td>
                {% if review.status == 'approved' %}
                <span class="badge badge-success">{{ t('review_manager.status_approved') }}</span>
                {% elif review.status == 'pending' %}
                <span class="badge badge-draft">{{ t('review_manager.status_pending') }}</span>
                {% else %}
                <span class="badge badge-inactive">{{ t('review_manager.status_rejected') }}</span>
                {% endif %}
            </td>
            <td class="date-cell">
                {{ review.created_at|format_date }}<br>
                <small>{{ review.created_at.strftime('%H:%M') }}</small>
            </td>
            <td>
                <div class="actions">
                    {% if review.status != 'approved' %}
                    <form method="POST" action="{{ url_for('review_manager.set_status', review_id=review.id, status=status_filter, lang=lang_filter, q=search_query, page=page, per_page=per_page) }}" class="d-inline">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <input type="hidden" name="status" value="approved">
                        <button type="submit" class="action-link action-view">✔️ {{ t('review_manager.btn_approve') }}</button>
                    </form>
                    {% endif %}
                    {% if review.status != 'rejected' %}
                    <form method="POST" action="{{ url_for('review_manager.set_status', review_id=review.id, status=status_filter, lang=lang_filter, q=search_query, page=page, per_page=per_page) }}" class="d-inline">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <input type="hidden" name="status" value="rejected">
                        <button type="submit" class="action-link action-translate">🚫 {{ t('review_manager.btn_reject') }}</button>
                    </form>
                    {% endif %}
                    <form method="POST" action="{{ url_for('review_manager.delete_review', review_id=review.id, status=status_filter, lang=lang_filter, q=search_query, page=page, per_page=per_page) }}" class="d-inline rm-delete" data-name="{{ review.author_name|e }}">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <button type="submit" class="action-link action-delete">🗑️ {{ t('table.delete') }}</button>
                    </form>
                </div>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
</div>

<div class="pagination-footer">
{% if pages > 1 %}
<div class="pagination">
    {% if page > 1 %}
    <a href="{{ url_for('review_manager.list_reviews', page=page-1, status=status_filter, lang=lang_filter, q=search_query, per_page=per_page) }}">{{ t('pagination.prev') }}</a>
    {% endif %}
    {% for p in range(1, pages + 1) %}
        {% if p == page %}
        <span class="current">{{ p }}</span>
        {% elif p <= 2 or p > pages - 2 or (p >= page - 2 and p <= page + 2) %}
        <a href="{{ url_for('review_manager.list_reviews', page=p, status=status_filter, lang=lang_filter, q=search_query, per_page=per_page) }}">{{ p }}</a>
        {% elif p == 3 or p == pages - 2 %}
        <span>…</span>
        {% endif %}
    {% endfor %}
    {% if page < pages %}
    <a href="{{ url_for('review_manager.list_reviews', page=page+1, status=status_filter, lang=lang_filter, q=search_query, per_page=per_page) }}">{{ t('pagination.next') }}</a>
    {% endif %}
</div>
{% endif %}
    <div class="per-page-selector">
        <span>{{ t('pagination.per_page') }}</span>
        <select onchange="var u=new URLSearchParams(location.search);u.set('per_page',this.value);u.delete('page');location.search=u">
            {% for pp in [20, 50, 100] %}
            <option value="{{ pp }}" {% if per_page == pp %}selected{% endif %}>{{ pp }}</option>
            {% endfor %}
        </select>
        <span>{{ t('pagination.per_page_suffix') }}</span>
    </div>
</div>
{% else %}
<div class="settings-section">
    {% if total == 0 and not search_query and status_filter == 'all' and lang_filter == 'all' %}
    <p>{{ t('review_manager.no_reviews_yet') }}</p>
    <p class="help-text">{{ t('review_manager.embed_help') }}</p>
    {% else %}
    <p>{{ t('review_manager.no_results') }}</p>
    <a href="{{ url_for('review_manager.list_reviews') }}" class="btn btn-secondary btn-sm">{{ t('common.clear') }}</a>
    {% endif %}
</div>
{% endif %}

<style>
/* Admin-side star row and review text cell — --adm-* tokens only, so both
   admin modes (light / dark) are covered by the core design system. */
.rm-star { color: var(--adm-border-strong, var(--adm-border-light)); }
.rm-star--on { color: var(--adm-warning, #f59e0b); }
.rm-stars { white-space: nowrap; letter-spacing: 1px; }
.rm-text-cell {
    max-width: 340px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: var(--adm-text-secondary);
    font-size: 13px;
    text-decoration: none;
}
.rm-text-cell:hover { color: var(--adm-text); }
.rm-check-col { width: 34px; text-align: center; }
.rm-bulk-bar { display: flex; align-items: center; gap: 8px;
    justify-content: flex-end; margin-bottom: 10px; }
.rm-bulk-count { min-width: 24px; text-align: end; }
</style>

<script>
var RM_CONFIRM = {{ t('review_manager.confirm_delete')|tojson }};
var RM_BULK_CONFIRM = {{ t('review_manager.bulk_confirm_delete')|tojson }};

document.querySelectorAll('.rm-delete').forEach(function (form) {
    form.addEventListener('submit', function (e) {
        var msg = RM_CONFIRM.replace('{name}', form.getAttribute('data-name') || '');
        if (!window.confirm(msg)) e.preventDefault();
    });
});

(function () {
    'use strict';
    var all = document.getElementById('rmSelectAll');
    if (!all) return;
    var rows = Array.prototype.slice.call(document.querySelectorAll('.rm-row-check'));
    var buttons = Array.prototype.slice.call(document.querySelectorAll('.rm-bulk-btn'));
    var counter = document.getElementById('rmBulkCount');
    var bulkForm = document.getElementById('rm-bulk');

    function selected() { return rows.filter(function (c) { return c.checked; }); }

    function refresh() {
        var n = selected().length;
        buttons.forEach(function (b) { b.disabled = n === 0; });
        counter.textContent = n ? String(n) : '';
        all.checked = n > 0 && n === rows.length;
        all.indeterminate = n > 0 && n < rows.length;
    }

    // Select-all covers exactly the rows visible under the current filters.
    all.addEventListener('change', function () {
        rows.forEach(function (c) { c.checked = all.checked; });
        refresh();
    });
    rows.forEach(function (c) { c.addEventListener('change', refresh); });

    bulkForm.addEventListener('submit', function (e) {
        var n = selected().length;
        if (!n) { e.preventDefault(); return; }
        // submitter: which of the three buttons fired the submit
        var action = e.submitter && e.submitter.value;
        if (action === 'delete') {
            var msg = RM_BULK_CONFIRM.replace('{count}', String(n));
            if (!window.confirm(msg)) e.preventDefault();
        }
    });

    refresh();
})();
</script>
{% endblock %}