{% extends "base.html" %}

{% block title %}Referral Program{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto px-4 py-8">
    <div class="mb-8">
        <h1 class="text-2xl font-bold mb-2">Refer & Earn</h1>
        <p class="text-gray-600">Share your referral code and earn credits for each friend who signs up.</p>
    </div>

    <!-- Referral Code Card -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-8">
        <h2 class="text-lg font-semibold mb-4">Your Referral Code</h2>

        <div class="flex items-center gap-3 mb-4">
            <code class="flex-1 bg-gray-100 px-4 py-3 rounded-lg text-xl font-mono tracking-wider">{{ code }}</code>
            <button id="copyCode" class="px-4 py-3 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-colors">
                Copy
            </button>
        </div>

        <div class="flex items-center gap-3 mb-4">
            <input type="text" id="shareLink" value="{{ share_url }}"
                class="flex-1 bg-gray-100 px-4 py-2 rounded-lg text-sm" readonly>
            <button id="copyLink" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
                Copy Link
            </button>
        </div>

        <div class="text-sm text-gray-500">
            Share this code or link with friends. When they sign up, you earn <strong>50 credits</strong> per referral.
        </div>
    </div>

    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 text-center">
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ stats.uses }}</div>
            <div class="text-sm text-gray-600">Total Referrals</div>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 text-center">
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ stats.total_credits }}</div>
            <div class="text-sm text-gray-600">Credits Earned</div>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 text-center">
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ stats.total_signups }}</div>
            <div class="text-sm text-gray-600">Signups Tracked</div>
        </div>
    </div>

    <!-- Recent Referrals -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h2 class="text-lg font-semibold mb-4">Recent Referrals</h2>

        {% if stats.recent_referrals %}
        <div class="space-y-3">
            {% for ref in stats.recent_referrals %}
            <div class="flex items-center justify-between py-3 border-b border-gray-100 last:border-0">
                <div>
                    <div class="text-sm font-medium">Referral #{{ ref.id }}</div>
                    <div class="text-xs text-gray-500">{{ ref.created_at[:10] if ref.created_at else 'N/A' }}</div>
                </div>
                <div class="text-right">
                    <div class="text-sm font-medium text-green-600">+{{ ref.reward_credits }} credits</div>
                    <div class="text-xs text-gray-500">{{ ref.event_type }}</div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="text-center py-8 text-gray-500">
            <p>No referrals yet. Share your code to get started!</p>
        </div>
        {% endif %}
    </div>
</div>

<script id="data-referral" data-code="{{ code }}" data-share-url="{{ share_url }}"></script>
<script src="/static/js/referral-inline.js"></script>
{% endblock %}