{% extends "admin/layout.html" %}
{% block title %}Referrals – Admin{% endblock %}
{% block body %}
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="heading-admin-referrals">{% trans %}Referral Program{% endtrans %}</h1>
    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{% trans %}Track referrals and manage reward settings.{% endtrans %}</p>
</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 %}

<!-- Stats -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 text-center">
        <div class="text-3xl font-bold text-gray-900 dark:text-white" data-testid="stat-total-referred">{{ total_users }}</div>
        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Total Referred Users{% endtrans %}</div>
    </div>
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 text-center">
        <div class="text-3xl font-bold text-green-600 dark:text-green-400" data-testid="stat-granted">{{ total_granted }}</div>
        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Rewards Granted{% endtrans %}</div>
    </div>
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 text-center">
        <div class="text-3xl font-bold text-yellow-500" data-testid="stat-pending">{{ total_pending }}</div>
        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Pending Rewards{% endtrans %}</div>
    </div>
</div>

<!-- Settings -->
<div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden mb-8">
    <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-green-500/5 to-teal-500/5">
        <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-gear mr-2 text-green-500"></i>{% trans %}Referral Settings{% endtrans %}</h3>
    </div>
    <form method="POST" action="{{ full_url('/admin/referrals/settings') }}" class="p-6 space-y-5">
        <div class="flex items-center gap-3">
            <label class="relative inline-flex items-center cursor-pointer">
                <input type="checkbox" name="referral_enabled" value="1" class="sr-only peer" {% if site.get('referral_enabled','1')=='1' %}checked{% endif %} data-testid="input-referral-enabled">
                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary/25 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:after:border-gray-600 peer-checked:bg-primary"></div>
            </label>
            <div>
                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{% trans %}Enable referral program{% endtrans %}</span>
                <p class="text-xs text-gray-400 mt-0.5">{% trans %}When disabled, no rewards are granted for new referrals{% endtrans %}</p>
            </div>
        </div>
        <div class="max-w-xs">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Reward Days Per Paid Referral{% endtrans %}</label>
            <div class="flex items-center gap-3">
                <input type="number" name="referral_reward_days" value="{{ site.get('referral_reward_days','30') }}" min="1" max="365"
                    class="w-28 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-reward-days">
                <span class="text-sm text-gray-500 dark:text-gray-400">{% trans %}days of free subscription{% endtrans %}</span>
            </div>
            <p class="mt-1 text-xs text-gray-400">{% trans %}Added to the referrer's active subscription when a referred user subscribes to a paid plan.{% endtrans %}</p>
        </div>
        <button type="submit" class="px-6 py-2.5 rounded-xl bg-primary hover:bg-primary/90 text-white text-sm font-semibold transition-all" data-testid="btn-save-referral-settings">{% trans %}Save Settings{% endtrans %}</button>
    </form>
</div>

<!-- Rewards Table -->
<div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
        <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-gift mr-2 text-yellow-500"></i>{% trans %}All Referral Rewards{% endtrans %}</h3>
        <span class="text-xs text-gray-400">{{ rewards|length }} {% trans %}total{% endtrans %}</span>
    </div>
    {% if rewards %}
    <div class="overflow-x-auto">
        <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-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Referrer{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Referred{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Plan{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Reward{% endtrans %}</th>
                    <th class="px-4 py-3 text-left 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-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Date{% endtrans %}</th>
                    <th class="px-4 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                {% for r in rewards %}
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors" data-testid="row-reward-{{ r.id }}">
                    <td class="px-4 py-3">
                        <div class="font-medium text-gray-800 dark:text-gray-200" data-testid="text-referrer-{{ r.id }}">{{ r.referrer_username }}</div>
                        <div class="text-xs text-gray-400">{{ r.referrer_email }}</div>
                    </td>
                    <td class="px-4 py-3">
                        <div class="font-medium text-gray-800 dark:text-gray-200" data-testid="text-referred-{{ r.id }}">{{ r.referred_username }}</div>
                        <div class="text-xs text-gray-400">{{ r.referred_email }}</div>
                    </td>
                    <td class="px-4 py-3">
                        <span class="text-xs px-2 py-1 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 font-medium">{{ r.referred_plan or r.plan_name or '—' }}</span>
                    </td>
                    <td class="px-4 py-3 font-semibold text-gray-800 dark:text-gray-200">+{{ r.reward_days }} {% trans %}days{% endtrans %}</td>
                    <td class="px-4 py-3">
                        <span class="text-xs px-2 py-1 rounded-full font-semibold
                            {% if r.status == 'granted' %}bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400
                            {% else %}bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400{% endif %}"
                            data-testid="badge-status-{{ r.id }}">
                            {{ r.status|title }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-xs text-gray-400">{{ r.created_at[:10] if r.created_at else '' }}</td>
                    <td class="px-4 py-3">
                        {% if r.status == 'pending' %}
                        <form method="POST" action="{{ full_url('/admin/referrals/' ~ r.id ~ '/grant') }}">
                            <button type="submit" class="px-3 py-1.5 rounded-lg bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 hover:bg-green-200 dark:hover:bg-green-900/50 text-xs font-medium transition-all" data-testid="btn-grant-{{ r.id }}">
                                <i class="fa fa-gift mr-1"></i>{% trans %}Grant{% endtrans %}
                            </button>
                        </form>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="px-6 py-16 text-center text-gray-400 dark:text-gray-500" data-testid="text-no-rewards">
        <i class="fa fa-gift text-3xl mb-3 block opacity-40"></i>
        {% trans %}No referral rewards yet.{% endtrans %}
    </div>
    {% endif %}
</div>
{% endblock %}