{% extends "base.html" %}
{% block title %}{{ _('My Referrals – OnlineConvert') }}{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-10">

    <div class="mb-6 flex items-center gap-3">
        <a href="{{ full_url('/dashboard') }}" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-all text-sm" data-testid="link-back-dashboard"><i class="fa fa-arrow-left"></i></a>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="heading-referrals">{{ _('My Referrals') }}</h1>
    </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 row -->
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
        <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 text-center">
            <div class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="stat-total-referrals">{{ referrals|length }}</div>
            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ _('Total Referred') }}</div>
        </div>
        <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 text-center">
            <div class="text-2xl font-bold text-green-600 dark:text-green-400" data-testid="stat-granted-days">{{ granted_days }}</div>
            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ _('Days Earned') }}</div>
        </div>
        <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 text-center">
            <div class="text-2xl font-bold text-yellow-500" data-testid="stat-pending">{{ pending_count }}</div>
            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ _('Pending Rewards') }}</div>
        </div>
        <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 text-center">
            <div class="text-2xl font-bold text-blue-500" data-testid="stat-paid-referrals">{{ referrals | selectattr('price_monthly', 'gt', 0) | list | length }}</div>
            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ _('Paid Subscribers') }}</div>
        </div>
    </div>

    <!-- Referral Link Card -->
    <div class="rounded-2xl border border-primary/20 dark:border-primary/30 bg-gradient-to-br from-primary/5 to-secondary/5 dark:from-primary/10 dark:to-secondary/10 p-6 mb-8">
        <h2 class="font-bold text-gray-900 dark:text-white mb-1 flex items-center gap-2">
            <i class="fa fa-link text-primary"></i> {{ _('Your Referral Link') }}
        </h2>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">{{ _('Share this link — when someone subscribes to a paid plan through it, you earn free days on your subscription.') }}</p>
        <div class="flex gap-2">
            <input type="text" id="ref-link-input" value="{{ ref_url }}" readonly
                class="flex-1 px-4 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm font-mono focus:outline-none"
                data-testid="input-referral-link">
            <button onclick="navigator.clipboard.writeText(document.getElementById('ref-link-input').value); this.innerHTML='<i class=\'fa fa-check\'></i> {{ _('Copied!') }}'; setTimeout(()=>{this.innerHTML='<i class=\'fa fa-copy\'></i> {{ _('Copy') }}'},2000)"
                class="px-4 py-2.5 rounded-xl bg-primary hover:bg-primary/90 text-white text-sm font-semibold transition-all flex-shrink-0" data-testid="btn-copy-ref-link">
                <i class="fa fa-copy"></i> {{ _('Copy') }}
            </button>
        </div>
        <div class="mt-3 flex items-center gap-2">
            <span class="text-xs text-gray-500 dark:text-gray-400">{{ _('Your code:') }}</span>
            <code class="text-xs font-mono bg-white dark:bg-gray-800 px-2 py-1 rounded-lg border border-gray-200 dark:border-gray-700 text-primary dark:text-primary-light font-bold" data-testid="text-ref-code">{{ ref_code }}</code>
        </div>
    </div>

    <!-- How it works -->
    <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5 mb-8">
        <h3 class="font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center gap-2"><i class="fa fa-circle-info text-blue-500"></i> {{ _('How It Works') }}</h3>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div class="flex gap-3">
                <div class="w-8 h-8 rounded-full bg-primary/10 dark:bg-primary/20 flex items-center justify-center flex-shrink-0 text-primary dark:text-primary-light font-bold text-sm">1</div>
                <div><div class="font-medium text-gray-800 dark:text-gray-200 text-sm">{{ _('Share your link') }}</div><div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{{ _('Send your referral link to friends') }}</div></div>
            </div>
            <div class="flex gap-3">
                <div class="w-8 h-8 rounded-full bg-primary/10 dark:bg-primary/20 flex items-center justify-center flex-shrink-0 text-primary dark:text-primary-light font-bold text-sm">2</div>
                <div><div class="font-medium text-gray-800 dark:text-gray-200 text-sm">{{ _('They subscribe') }}</div><div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{{ _('When they sign up and pay for a plan') }}</div></div>
            </div>
            <div class="flex gap-3">
                <div class="w-8 h-8 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center flex-shrink-0 text-green-600 dark:text-green-400 font-bold text-sm">✓</div>
                <div><div class="font-medium text-gray-800 dark:text-gray-200 text-sm">{{ _('You earn days') }}</div><div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{{ _('Free days are added to your plan') }}</div></div>
            </div>
        </div>
    </div>

    <!-- Referrals list -->
    <div class="rounded-2xl 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">
            <h2 class="font-bold text-gray-900 dark:text-white"><i class="fa fa-users mr-2 text-primary dark:text-primary-light"></i>{{ _('Referred Users') }}</h2>
            <span class="text-xs text-gray-400">{{ referrals|length }} {{ _('total') }}</span>
        </div>
        {% if referrals %}
        <div class="divide-y divide-gray-100 dark:divide-gray-800">
            {% for r in referrals %}
            <div class="px-6 py-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3" data-testid="row-referral-{{ r.id }}">
                <div class="flex items-center gap-3">
                    <div class="w-9 h-9 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center text-gray-600 dark:text-gray-400 font-bold text-sm flex-shrink-0">
                        {{ r.username[0].upper() if r.username else '?' }}
                    </div>
                    <div>
                        <div class="text-sm font-medium text-gray-800 dark:text-gray-200" data-testid="text-ref-username-{{ r.id }}">{{ r.username }}</div>
                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ _('Joined') }} {{ r.created_at[:10] if r.created_at else '' }}</div>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <span class="text-xs px-2.5 py-1 rounded-full font-semibold
                        {% if r.price_monthly and r.price_monthly > 0 %}bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400
                        {% else %}bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400{% endif %}"
                        data-testid="badge-ref-plan-{{ r.id }}">
                        {{ r.plan_name or _('Free') }}
                    </span>
                    {% if r.reward_status == 'granted' %}
                    <span class="text-xs px-2.5 py-1 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 font-semibold" data-testid="badge-reward-granted-{{ r.id }}">
                        <i class="fa fa-gift mr-0.5"></i> +{{ r.reward_days }}{{ _('d rewarded') }}
                    </span>
                    {% elif r.reward_status == 'pending' %}
                    <span class="text-xs px-2.5 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400" data-testid="badge-reward-pending-{{ r.id }}">
                        <i class="fa fa-clock mr-0.5"></i> {{ _('Reward pending') }}
                    </span>
                    {% else %}
                    <span class="text-xs text-gray-400 dark:text-gray-500">{{ _('No reward yet') }}</span>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="px-6 py-16 text-center" data-testid="text-no-referrals">
            <div class="w-14 h-14 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mx-auto mb-4">
                <i class="fa fa-users text-xl text-gray-400"></i>
            </div>
            <p class="text-gray-500 dark:text-gray-400">{{ _('No referrals yet.') }}</p>
            <p class="text-sm text-gray-400 dark:text-gray-500 mt-1">{{ _('Share your referral link to start earning rewards.') }}</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}