{% extends 'admin/layout.html' %}
{% block title %}Promo Codes – Admin{% endblock %}
{% block content %}
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-xl font-bold text-gray-900 dark:text-white"><i class="fa fa-tag mr-2 text-green-500"></i>{% trans %}Promo Codes{% endtrans %}</h1>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">{% trans %}Create and manage discount promo codes for users.{% endtrans %}</p>
    </div>
    <button id="btn-create-promo" class="px-4 py-2 rounded-xl bg-green-600 hover:bg-green-700 text-white text-sm font-semibold transition-all flex items-center gap-2" data-testid="btn-create-promo">
        <i class="fa fa-plus"></i> {% trans %}Create Promo Code{% endtrans %}
    </button>
</div>

{% with messages = get_flashed_messages(with_categories=true) %}{% for cat, msg in messages %}<script>window._oc_flash=window._oc_flash||[];window._oc_flash.push({cat:{{ cat|tojson }},msg:{{ msg|tojson }}});</script>{% endfor %}{% endwith %}

<!-- Near-Expiry Promo Sender -->
<div class="rounded-xl border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/10 mb-6 overflow-hidden">
    <div class="flex items-center justify-between px-5 py-4 cursor-pointer" id="near-expiry-toggle">
        <div class="flex items-center gap-3">
            <div class="w-8 h-8 rounded-full bg-amber-100 dark:bg-amber-900/40 flex items-center justify-center">
                <i class="fa fa-clock text-amber-600 dark:text-amber-400 text-sm"></i>
            </div>
            <div>
                <h3 class="text-sm font-semibold text-gray-900 dark:text-white">{% trans %}Send Promo to Near-Expiry Users{% endtrans %}</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{% trans %}Target users whose subscriptions expire within N days and send them a promo code to encourage renewal.{% endtrans %}</p>
            </div>
        </div>
        <i class="fa fa-chevron-down text-gray-400 transition-transform" id="near-expiry-chevron"></i>
    </div>
    <div id="near-expiry-panel" class="hidden border-t border-amber-200 dark:border-amber-800 p-5 space-y-4">
        <!-- Config row -->
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Expiring within (days){% endtrans %}</label>
                <input type="number" id="expiry-days" value="7" min="1" max="60" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Promo Code to Send{% endtrans %}</label>
                <select id="expiry-promo-code" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
                    <option value="">— {% trans %}select a code{% endtrans %} —</option>
                    {% for code in codes if code.is_active %}
                    <option value="{{ code.code }}">{{ code.code }} ({{ code.discount_percent }}% off)</option>
                    {% endfor %}
                </select>
            </div>
            <div class="flex flex-col justify-end">
                <button type="button" id="btn-find-expiry" class="px-4 py-2 rounded-lg bg-amber-500 hover:bg-amber-600 text-white text-sm font-semibold transition-all flex items-center justify-center gap-2">
                    <i class="fa fa-magnifying-glass"></i> {% trans %}Find Users{% endtrans %}
                </button>
            </div>
        </div>

        <!-- Results -->
        <div id="expiry-results" class="hidden">
            <div class="flex items-center justify-between mb-3">
                <span class="text-sm font-semibold text-gray-900 dark:text-white">
                    <span id="expiry-count">0</span> {% trans %}users found{% endtrans %}
                </span>
                <div class="flex items-center gap-2">
                    <label class="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400 cursor-pointer">
                        <input type="checkbox" id="expiry-select-all" class="rounded"> {% trans %}Select all{% endtrans %}
                    </label>
                </div>
            </div>
            <div id="expiry-user-list" class="max-h-52 overflow-y-auto rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 divide-y divide-gray-100 dark:divide-gray-800 mb-4"></div>
            <div class="flex gap-3 flex-wrap">
                <button type="button" id="btn-send-expiry-selected" class="px-4 py-2 rounded-lg bg-green-600 hover:bg-green-700 text-white text-sm font-semibold transition-all flex items-center gap-2 disabled:opacity-50" disabled>
                    <i class="fa fa-paper-plane"></i> {% trans %}Send to Selected{% endtrans %}
                </button>
                <button type="button" id="btn-send-expiry-all" class="px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold transition-all flex items-center gap-2">
                    <i class="fa fa-paper-plane"></i> {% trans %}Send to All{% endtrans %}
                </button>
            </div>
        </div>
        <div id="expiry-empty" class="hidden text-sm text-gray-500 dark:text-gray-400 text-center py-3">{% trans %}No users found expiring in that window.{% endtrans %}</div>
        <div id="expiry-loading" class="hidden text-sm text-gray-500 text-center py-3"><i class="fa fa-spinner fa-spin mr-2"></i>{% trans %}Searching…{% endtrans %}</div>
    </div>
</div>

<div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
    <table class="w-full text-sm">
        <thead class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
            <tr>
                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wide">{% trans %}Code{% endtrans %}</th>
                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wide">{% trans %}Discount%{% endtrans %}</th>
                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wide">{% trans %}Type{% endtrans %}</th>
                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wide">{% trans %}Uses{% endtrans %}</th>
                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wide">{% trans %}Expires{% endtrans %}</th>
                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wide">{% trans %}Status{% endtrans %}</th>
                <th class="px-4 py-3"></th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
            {% for code in codes %}
            <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors" data-testid="row-promo-{{ code.id }}">
                <td class="px-4 py-3">
                    <span class="font-mono font-bold text-gray-900 dark:text-white tracking-widest bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded">{{ code.code }}</span>
                </td>
                <td class="px-4 py-3 text-gray-700 dark:text-gray-300 font-semibold">{{ code.discount_percent }}%</td>
                <td class="px-4 py-3">
                    {% if code.discount_type == 'first_time' %}
                    <span class="px-2 py-0.5 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs font-semibold">{% trans %}First Payment{% endtrans %}</span>
                    {% else %}
                    <span class="px-2 py-0.5 rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 text-xs font-semibold">{% trans %}Always{% endtrans %}</span>
                    {% endif %}
                </td>
                <td class="px-4 py-3 text-gray-600 dark:text-gray-400">
                    {{ code.uses_count }}{% if code.max_uses > 0 %} / {{ code.max_uses }}{% else %} / ∞{% endif %}
                </td>
                <td class="px-4 py-3 text-gray-600 dark:text-gray-400 text-xs">
                    {{ code.expires_at[:10] if code.expires_at else '—' }}
                </td>
                <td class="px-4 py-3">
                    {% if code.is_active %}
                    <span class="px-2 py-0.5 rounded-full bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 text-xs font-semibold">{% trans %}Active{% endtrans %}</span>
                    {% else %}
                    <span class="px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 text-xs font-semibold">{% trans %}Inactive{% endtrans %}</span>
                    {% endif %}
                </td>
                <td class="px-4 py-3">
                    <div class="flex gap-2 justify-end">
                        <button type="button" class="btn-edit-promo px-3 py-1.5 rounded-lg border border-gray-300 dark:border-gray-600 text-xs font-semibold text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all" data-id="{{ code.id }}" data-testid="btn-edit-promo-{{ code.id }}">
                            <i class="fa fa-pen"></i>
                        </button>
                        <form method="POST" action="{{ full_url('/admin/promo-codes/' + code.id|string + '/delete') }}" data-confirm="Delete promo code '{{ code.code }}'?&#10;&#10;• The code will no longer be redeemable&#10;• Previously applied discounts are not affected">
                            <button type="submit" class="px-3 py-1.5 rounded-lg border border-red-300 dark:border-red-700 text-xs font-semibold text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-all" data-testid="btn-delete-promo-{{ code.id }}">
                                <i class="fa fa-trash"></i>
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            <!-- Edit form row (hidden) -->
            <tr id="edit-row-{{ code.id }}" class="hidden bg-blue-50 dark:bg-blue-900/10 border-b border-blue-100 dark:border-blue-900/30">
                <td colspan="7" class="px-4 py-4">
                    <form method="POST" action="{{ full_url('/admin/promo-codes/' + code.id|string + '/update') }}" data-testid="form-edit-promo-{{ code.id }}">
                        <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                            <div>
                                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Discount %{% endtrans %}</label>
                                <input type="number" name="discount_percent" value="{{ code.discount_percent }}" step="0.1" min="0" max="100" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-edit-discount-{{ code.id }}">
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Type{% endtrans %}</label>
                                <select name="discount_type" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-edit-type-{{ code.id }}">
                                    <option value="first_time" {% if code.discount_type == 'first_time' %}selected{% endif %}>{% trans %}First Payment Only{% endtrans %}</option>
                                    <option value="always" {% if code.discount_type == 'always' %}selected{% endif %}>{% trans %}Every Payment{% endtrans %}</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Max Uses (0=∞){% endtrans %}</label>
                                <input type="number" name="max_uses" value="{{ code.max_uses }}" min="0" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-edit-maxuses-{{ code.id }}">
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Expires At{% endtrans %}</label>
                                <input type="date" name="expires_at" value="{{ code.expires_at[:10] if code.expires_at else '' }}" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-edit-expires-{{ code.id }}">
                            </div>
                        </div>
                        <div class="flex items-center gap-3 mt-3">
                            <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
                                <input type="checkbox" name="is_active" {% if code.is_active %}checked{% endif %} class="rounded" data-testid="input-edit-active-{{ code.id }}">
                                {% trans %}Active{% endtrans %}
                            </label>
                            <button type="submit" class="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white text-xs font-semibold transition-all" data-testid="btn-save-promo-{{ code.id }}">{% trans %}Save{% endtrans %}</button>
                            <button type="button" class="btn-cancel-edit-promo px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all" data-id="{{ code.id }}" data-testid="btn-cancel-edit-promo-{{ code.id }}">{% trans %}Cancel{% endtrans %}</button>
                        </div>
                    </form>
                </td>
            </tr>
            {% else %}
            <tr><td colspan="7" class="px-4 py-8 text-center text-gray-400 text-sm">{% trans %}No promo codes yet. Create one to get started.{% endtrans %}</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Create Promo Code Modal -->
<div id="modal-create-promo" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 overflow-y-auto py-8">
    <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-xl p-6 max-w-md w-full mx-4 border border-gray-200 dark:border-gray-700">
        <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">{% trans %}Create Promo Code{% endtrans %}</h3>
        <form method="POST" action="{{ full_url('/admin/promo-codes/create') }}" data-testid="form-create-promo">
            <div class="space-y-4">
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Code *{% endtrans %}</label>
                    <input type="text" name="code" required placeholder="e.g. SUMMER20" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm font-mono uppercase" data-testid="input-new-promo-code">
                    <p class="text-xs text-gray-400 mt-0.5">{% trans %}Will be uppercased automatically.{% endtrans %}</p>
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Discount % *{% endtrans %}</label>
                        <input type="number" name="discount_percent" value="10" step="0.1" min="0" max="100" required class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-new-promo-discount">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Max Uses (0=∞){% endtrans %}</label>
                        <input type="number" name="max_uses" value="0" min="0" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-new-promo-maxuses">
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Discount Type{% endtrans %}</label>
                    <select name="discount_type" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-new-promo-type">
                        <option value="first_time">{% trans %}First Payment Only{% endtrans %}</option>
                        <option value="always">{% trans %}Every Payment (recurring){% endtrans %}</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Expires At (leave blank = no expiry){% endtrans %}</label>
                    <input type="date" name="expires_at" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-new-promo-expires">
                </div>
                <div class="flex items-center gap-2">
                    <input type="checkbox" name="is_active" id="new-promo-active" checked class="rounded" data-testid="input-new-promo-active">
                    <label for="new-promo-active" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}Active{% endtrans %}</label>
                </div>
            </div>
            <div class="flex gap-3 mt-5 justify-end">
                <button type="button" id="modal-cancel-promo" class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all" data-testid="btn-cancel-create-promo">{% trans %}Cancel{% endtrans %}</button>
                <button type="submit" class="px-4 py-2 rounded-lg bg-green-600 hover:bg-green-700 text-white text-sm font-semibold transition-all" data-testid="btn-submit-create-promo">{% trans %}Create{% endtrans %}</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block page_scripts %}
<script>
$(function() {
    $('#btn-create-promo').on('click', function() { $('#modal-create-promo').removeClass('hidden'); });
    $('#modal-cancel-promo').on('click', function() { $('#modal-create-promo').addClass('hidden'); });

    $(document).on('click', '.btn-edit-promo', function() {
        var id = $(this).data('id');
        $('#edit-row-' + id).toggleClass('hidden');
    });
    $(document).on('click', '.btn-cancel-edit-promo', function() {
        var id = $(this).data('id');
        $('#edit-row-' + id).addClass('hidden');
    });

    $('[name="code"]').on('input', function() { this.value = this.value.toUpperCase(); });

    /* ── Near-Expiry Panel ── */
    var nearExpiryUsers = [];

    $('#near-expiry-toggle').on('click', function() {
        $('#near-expiry-panel').toggleClass('hidden');
        $('#near-expiry-chevron').toggleClass('rotate-180');
    });

    $('#btn-find-expiry').on('click', function() {
        var days = $('#expiry-days').val() || 7;
        $('#expiry-results').addClass('hidden');
        $('#expiry-empty').addClass('hidden');
        $('#expiry-loading').removeClass('hidden');
        $.ajax({
            url: '{{ full_url("/admin/promo-codes/near-expiry") }}',
            data: { days: days },
            success: function(data) {
                $('#expiry-loading').addClass('hidden');
                nearExpiryUsers = data.users || [];
                if (nearExpiryUsers.length === 0) {
                    $('#expiry-empty').removeClass('hidden');
                    return;
                }
                $('#expiry-count').text(nearExpiryUsers.length);
                var html = '';
                nearExpiryUsers.forEach(function(u) {
                    html += '<div class="flex items-center gap-3 px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-800/50">' +
                        '<input type="checkbox" class="expiry-user-check rounded" data-id="' + u.id + '">' +
                        '<div class="min-w-0 flex-1">' +
                            '<div class="text-sm font-medium text-gray-900 dark:text-white truncate">' + $('<span>').text(u.username || u.email).html() + '</div>' +
                            '<div class="text-xs text-gray-400 truncate">' + $('<span>').text(u.email).html() + ' — expires ' + (u.subscription_expires_at ? u.subscription_expires_at.substring(0, 10) : '?') + '</div>' +
                        '</div>' +
                    '</div>';
                });
                $('#expiry-user-list').html(html);
                $('#expiry-results').removeClass('hidden');
                updateSendBtn();
            },
            error: function() {
                $('#expiry-loading').addClass('hidden');
                alert('Failed to load near-expiry users.');
            }
        });
    });

    function updateSendBtn() {
        var anyChecked = $('.expiry-user-check:checked').length > 0;
        $('#btn-send-expiry-selected').prop('disabled', !anyChecked);
    }

    $(document).on('change', '.expiry-user-check', updateSendBtn);

    $('#expiry-select-all').on('change', function() {
        $('.expiry-user-check').prop('checked', this.checked);
        updateSendBtn();
    });

    function doSend(userIds, sendAll) {
        var promoCode = $('#expiry-promo-code').val();
        if (!promoCode) { alert('Please select a promo code to send.'); return; }
        var label = sendAll ? 'all ' + nearExpiryUsers.length : userIds.length;
        window.ocConfirm('Send promo code "' + promoCode + '" to ' + label + ' user(s)?\n\n\u2022 Each user will receive the promo code via email\n\u2022 This action cannot be reversed', function() {
        var btn = sendAll ? $('#btn-send-expiry-all') : $('#btn-send-expiry-selected');
        btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin mr-1"></i> Sending…');
        $.ajax({
            url: '{{ full_url("/admin/promo-codes/send-expiry") }}',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ user_ids: sendAll ? [] : userIds, send_all: sendAll, promo_code: promoCode }),
            success: function(res) {
                btn.prop('disabled', false).html(sendAll ? '<i class="fa fa-paper-plane"></i> Send to All' : '<i class="fa fa-paper-plane"></i> Send to Selected');
                if (res.ok) {
                    alert('Sent to ' + (res.sent || 0) + ' user(s) successfully!');
                } else {
                    alert('Error: ' + (res.error || 'Unknown error'));
                }
            },
            error: function() {
                btn.prop('disabled', false).html(sendAll ? '<i class="fa fa-paper-plane"></i> Send to All' : '<i class="fa fa-paper-plane"></i> Send to Selected');
                alert('Failed to send. Please try again.');
            }
        });
        }); /* end ocConfirm */
    }

    $('#btn-send-expiry-selected').on('click', function() {
        var ids = [];
        $('.expiry-user-check:checked').each(function() { ids.push(parseInt($(this).data('id'))); });
        doSend(ids, false);
    });

    $('#btn-send-expiry-all').on('click', function() {
        doSend([], true);
    });
});
</script>
{% endblock %}