{% extends "admin/layout.html" %}
{% block title %}Reviews - Admin{% endblock %}

{% block body %}
<div class="space-y-6">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="text-reviews-title">{% trans %}Reviews{% endtrans %}</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ total }} {% trans %}total reviews{% endtrans %} &middot; {% trans %}Featured reviews are shown on public pages{% endtrans %}</p>
        </div>
        <button type="button" id="add-review-toggle" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-accent hover:bg-accent-dark text-white font-semibold shadow-lg shadow-accent/30 hover:shadow-xl transition-all duration-300" data-testid="button-add-review">
            <i class="fa fa-plus"></i> {% trans %}Add Review{% endtrans %}
        </button>
    </div>

    <div id="add-review-panel" class="hidden rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-yellow-500/5 to-accent/5">
            <h3 class="font-semibold text-gray-900 dark:text-white text-sm"><i class="fa fa-pen mr-2 text-yellow-500"></i>{% trans %}Add New Review{% endtrans %}</h3>
        </div>
        <form id="add-review-form" class="p-6 space-y-4">
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Page ID{% endtrans %}</label>
                    <input type="text" name="page_id" required placeholder="{% trans %}e.g. page:home, converter:image:png{% endtrans %}"
                        class="w-full px-4 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm focus:ring-2 focus:ring-primary/50 outline-none transition-all"
                        data-testid="input-add-page-id">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Reviewer Name{% endtrans %}</label>
                    <input type="text" name="reviewer_name" required maxlength="100" placeholder="{% trans %}John Doe{% endtrans %}"
                        class="w-full px-4 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm focus:ring-2 focus:ring-primary/50 outline-none transition-all"
                        data-testid="input-add-reviewer">
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Rating{% endtrans %}</label>
                <div class="flex items-center gap-1" id="admin-star-selector">
                    <input type="hidden" name="rating" id="admin-rating-value" value="5">
                    {% for i in range(1, 6) %}
                    <button type="button" class="admin-star-btn text-2xl text-yellow-400 hover:scale-110 transition-all cursor-pointer" data-rating="{{ i }}">
                        <i class="fa fa-star"></i>
                    </button>
                    {% endfor %}
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Review Text{% endtrans %}</label>
                <textarea name="review_text" required rows="3" maxlength="1000" placeholder="{% trans %}Write the review content...{% endtrans %}"
                    class="w-full px-4 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm focus:ring-2 focus:ring-primary/50 outline-none transition-all"
                    data-testid="input-add-review-text"></textarea>
            </div>
            <div class="flex items-center gap-3">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="featured" value="1" class="w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-accent focus:ring-accent/50">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{% trans %}Show on public page (featured){% endtrans %}</span>
                </label>
            </div>
            <div class="flex items-center gap-3 pt-2">
                <button type="submit" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-lg bg-accent hover:bg-accent-dark text-white text-sm font-semibold transition-all" data-testid="button-submit-add-review">
                    <i class="fa fa-plus"></i> {% trans %}Add Review{% endtrans %}
                </button>
                <button type="button" id="cancel-add-review" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">
                    {% trans %}Cancel{% endtrans %}
                </button>
            </div>
        </form>
    </div>

    <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-yellow-500/5 to-accent/5">
            <form method="GET" action="{{ full_url('/admin/reviews') }}" class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
                <div class="flex items-center gap-2 flex-1">
                    <div class="relative flex-1">
                        <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
                        <input type="text" name="search" value="{{ search }}" placeholder="{% trans %}Search by page ID or reviewer...{% endtrans %}"
                            class="w-full pl-9 pr-4 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm focus:ring-2 focus:ring-primary/50 outline-none transition-all"
                            data-testid="input-search-reviews">
                    </div>
                </div>
                <div class="flex items-center gap-2">
                    <select name="status" class="px-3 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm focus:ring-2 focus:ring-primary/50 outline-none" data-testid="select-status-filter">
                        <option value="" {% if not status %}selected{% endif %}>{% trans %}All{% endtrans %}</option>
                        <option value="approved" {% if status == 'approved' %}selected{% endif %}>{% trans %}Featured{% endtrans %}</option>
                        <option value="pending" {% if status == 'pending' %}selected{% endif %}>{% trans %}Hidden{% endtrans %}</option>
                    </select>
                    <button type="submit" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg bg-primary hover:bg-primary-dark text-white text-sm font-medium transition-all" data-testid="button-filter-reviews">
                        <i class="fa fa-filter"></i> {% trans %}Filter{% endtrans %}
                    </button>
                </div>
            </form>
        </div>

        <div class="overflow-x-auto">
            {% if reviews %}
            <table class="w-full">
                <thead>
                    <tr class="border-b border-gray-100 dark:border-gray-800 text-left">
                        <th class="px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Page{% endtrans %}</th>
                        <th class="px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Reviewer{% endtrans %}</th>
                        <th class="px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Rating{% endtrans %}</th>
                        <th class="px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Review{% endtrans %}</th>
                        <th class="px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Status{% endtrans %}</th>
                        <th class="px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Date{% endtrans %}</th>
                        <th class="px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Actions{% endtrans %}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                    {% for review in reviews %}
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors review-row" data-review-id="{{ review.id }}" data-testid="row-review-{{ review.id }}">
                        <td class="px-4 py-3">
                            <span class="text-xs font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded" data-testid="text-review-page">{{ review.page_id }}</span>
                        </td>
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-2">
                                <div class="w-7 h-7 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-white font-bold text-xs flex-shrink-0">
                                    {{ review.reviewer_name[0]|upper if review.reviewer_name else 'A' }}
                                </div>
                                <span class="text-sm font-medium text-gray-900 dark:text-white" data-testid="text-review-author">{{ review.reviewer_name }}</span>
                            </div>
                        </td>
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-0.5">
                                {% for i in range(1, 6) %}
                                <i class="fa fa-star text-xs {% if i <= review.rating %}text-yellow-400{% else %}text-gray-300 dark:text-gray-600{% endif %}"></i>
                                {% endfor %}
                            </div>
                        </td>
                        <td class="px-4 py-3 max-w-xs">
                            <div class="review-text-display" data-id="{{ review.id }}">
                                {% if review.review_text %}<p class="text-sm text-gray-600 dark:text-gray-400 truncate" title="{{ review.review_text }}">{{ review.review_text | truncate(100) }}</p>{% else %}<p class="text-sm text-gray-400 italic">{% trans %}No text{% endtrans %}</p>{% endif %}
                            </div>
                            <div class="review-text-edit hidden" data-id="{{ review.id }}">
                                <textarea class="edit-review-text w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm focus:ring-2 focus:ring-primary/50 outline-none transition-all" rows="2" maxlength="1000">{{ review.review_text }}</textarea>
                                <div class="flex items-center gap-1 mt-1">
                                    <button type="button" class="save-edit-btn px-2 py-1 rounded text-xs bg-accent text-white hover:bg-accent-dark transition-all" data-id="{{ review.id }}"><i class="fa fa-check"></i></button>
                                    <button type="button" class="cancel-edit-btn px-2 py-1 rounded text-xs border border-gray-300 dark:border-gray-600 text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all" data-id="{{ review.id }}"><i class="fa fa-times"></i></button>
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-3">
                            {% if review.approved %}
                            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 review-status-badge" data-testid="badge-status-{{ review.id }}">
                                <i class="fa fa-eye"></i> {% trans %}Featured{% endtrans %}
                            </span>
                            {% else %}
                            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 review-status-badge" data-testid="badge-status-{{ review.id }}">
                                <i class="fa fa-eye-slash"></i> {% trans %}Hidden{% endtrans %}
                            </span>
                            {% endif %}
                        </td>
                        <td class="px-4 py-3">
                            <span class="text-xs text-gray-500 dark:text-gray-400">{{ review.created_at | truncate(10, true, '') }}</span>
                        </td>
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-1">
                                <button type="button" class="edit-review-btn p-1.5 rounded-lg text-xs font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all" data-id="{{ review.id }}" title="{% trans %}Edit review text{% endtrans %}" data-testid="button-edit-{{ review.id }}">
                                    <i class="fa fa-pen"></i>
                                </button>
                                <button type="button" class="toggle-review-btn p-1.5 rounded-lg text-xs font-medium {% if review.approved %}text-yellow-600 dark:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-yellow-900/20{% else %}text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20{% endif %} transition-all" data-id="{{ review.id }}" title="{% if review.approved %}{% trans %}Hide from page{% endtrans %}{% else %}{% trans %}Show on page{% endtrans %}{% endif %}" data-testid="button-toggle-{{ review.id }}">
                                    <i class="fa {% if review.approved %}fa-eye-slash{% else %}fa-eye{% endif %}"></i>
                                </button>
                                <button type="button" class="delete-review-btn p-1.5 rounded-lg text-xs font-medium text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-all" data-id="{{ review.id }}" title="{% trans %}Delete{% endtrans %}" data-testid="button-delete-{{ review.id }}">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <div class="text-center py-12">
                <div class="w-16 h-16 mx-auto rounded-2xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-4">
                    <i class="fa fa-star text-gray-400 dark:text-gray-500 text-2xl"></i>
                </div>
                <p class="text-gray-500 dark:text-gray-400 font-medium">{% trans %}No reviews found{% endtrans %}</p>
                <p class="text-gray-400 dark:text-gray-500 text-sm mt-1">{% trans %}Click "Add Review" to create one.{% endtrans %}</p>
            </div>
            {% endif %}
        </div>

        {% if total_pages > 1 %}
        <div class="px-6 py-4 border-t border-gray-100 dark:border-gray-800 flex items-center justify-between">
            <p class="text-sm text-gray-500 dark:text-gray-400">{% trans %}Page{% endtrans %} {{ page }} {% trans %}of{% endtrans %} {{ total_pages }}</p>
            <div class="flex items-center gap-2">
                {% if page > 1 %}
                <a href="{{ full_url('/admin/reviews') }}?page={{ page - 1 }}&status={{ status }}&search={{ search }}" class="px-3 py-1.5 rounded-lg text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all" data-testid="link-prev-page">
                    <i class="fa fa-chevron-left mr-1"></i> {% trans %}Previous{% endtrans %}
                </a>
                {% endif %}
                {% if page < total_pages %}
                <a href="{{ full_url('/admin/reviews') }}?page={{ page + 1 }}&status={{ status }}&search={{ search }}" class="px-3 py-1.5 rounded-lg text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all" data-testid="link-next-page">
                    {% trans %}Next{% endtrans %} <i class="fa fa-chevron-right ml-1"></i>
                </a>
                {% endif %}
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block page_scripts %}
<script>
$(function() {
    var adminRating = 5;

    $('#add-review-toggle').on('click', function() {
        $('#add-review-panel').toggleClass('hidden');
    });
    $('#cancel-add-review').on('click', function() {
        $('#add-review-panel').addClass('hidden');
    });

    $('#admin-star-selector .admin-star-btn').on('click', function() {
        adminRating = parseInt($(this).data('rating'));
        $('#admin-rating-value').val(adminRating);
        $('#admin-star-selector .admin-star-btn').each(function() {
            var r = parseInt($(this).data('rating'));
            if (r <= adminRating) {
                $(this).removeClass('text-gray-300 dark:text-gray-600').addClass('text-yellow-400');
            } else {
                $(this).removeClass('text-yellow-400').addClass('text-gray-300 dark:text-gray-600');
            }
        });
    });

    $('#add-review-form').on('submit', function(e) {
        e.preventDefault();
        var $btn = $(this).find('button[type="submit"]');
        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin mr-2"></i>Adding...');
        $.ajax({
            url: '/api/admin/reviews/add',
            method: 'POST',
            data: $(this).serialize(),
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(resp) {
                if (resp.status === 'ok') {
                    toastr.success('Review added');
                    setTimeout(function() { location.reload(); }, 500);
                } else {
                    toastr.error(resp.message || 'Failed to add review');
                }
            },
            error: function() { toastr.error('Failed to add review'); },
            complete: function() { $btn.prop('disabled', false).html('<i class="fa fa-plus mr-2"></i>Add Review'); }
        });
    });

    $('.toggle-review-btn').on('click', function() {
        var id = $(this).data('id');
        $.ajax({
            url: '/admin/reviews/' + id + '/toggle',
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function() {
                toastr.success('Review status updated');
                setTimeout(function() { location.reload(); }, 500);
            },
            error: function() { toastr.error('Failed to update review'); }
        });
    });

    $('.edit-review-btn').on('click', function() {
        var id = $(this).data('id');
        $('.review-text-display[data-id="' + id + '"]').addClass('hidden');
        $('.review-text-edit[data-id="' + id + '"]').removeClass('hidden');
    });

    $('.cancel-edit-btn').on('click', function() {
        var id = $(this).data('id');
        $('.review-text-edit[data-id="' + id + '"]').addClass('hidden');
        $('.review-text-display[data-id="' + id + '"]').removeClass('hidden');
    });

    $('.save-edit-btn').on('click', function() {
        var id = $(this).data('id');
        var newText = $('.review-text-edit[data-id="' + id + '"] .edit-review-text').val();
        var $btn = $(this);
        $btn.prop('disabled', true);
        $.ajax({
            url: '/admin/reviews/' + id + '/edit',
            method: 'POST',
            data: { review_text: newText },
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(resp) {
                if (resp.status === 'ok') {
                    toastr.success('Review text updated');
                    var display = newText ? (newText.length > 100 ? newText.substring(0, 100) + '...' : newText) : '<em class="text-gray-400 italic">No text</em>';
                    $('.review-text-display[data-id="' + id + '"] p').html(display).attr('title', newText);
                    $('.review-text-edit[data-id="' + id + '"]').addClass('hidden');
                    $('.review-text-display[data-id="' + id + '"]').removeClass('hidden');
                } else { toastr.error('Failed to update'); }
            },
            error: function() { toastr.error('Failed to update review'); },
            complete: function() { $btn.prop('disabled', false); }
        });
    });

    $('.delete-review-btn').on('click', function() {
        var id = $(this).data('id');
        var $row = $(this).closest('tr');
        window.ocConfirm('Delete this review?\n\n\u2022 The review will be permanently removed\n\u2022 It will no longer appear on the site', function() {
        $.ajax({
            url: '/admin/reviews/' + id + '/delete',
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function() {
                $row.fadeOut(300, function() { $(this).remove(); });
                toastr.success('Review deleted');
            },
            error: function() { toastr.error('Failed to delete review'); }
        });
        }); /* end ocConfirm */
    });
});
</script>
{% endblock %}