{% extends 'layouts/members.twig' %}

{% block members_content %}

    <div class="referralsPage">

        <div class="referralsHeader">
            <h1>Refer a Friend</h1>
            <p>Invite your friends and you'll both get {{ config('referrals.reward_amount')|currency_format }} off when they place their first qualifying order ({{ config('referrals.min_qualifying_order')|currency_format }}+).</p>
        </div>

        <referral-share
            referral-link="{{ referral_link }}"
            referral-code="{{ referral_code }}"
            reward-amount="{{ config('referrals.reward_amount')|currency_format }}"
        ></referral-share>

        <div class="referralsOverview">

            <div class="referralStatsCards">
                <div class="referralStatCard">
                    <span class="statValue">{{ rewards|length }}</span>
                    <span class="statLabel">Available Rewards</span>
                </div>
                <div class="referralStatCard">
                    <span class="statValue">{{ pending_count }}</span>
                    <span class="statLabel">Pending Referrals</span>
                </div>
                <div class="referralStatCard">
                    <span class="statValue">{{ total_earned|currency_format }}</span>
                    <span class="statLabel">Total Earned</span>
                </div>
            </div>

            {% if rewards|length > 0 %}
                <referral-rewards
                    :initial-rewards="{{ rewards|map(r => {amount: r.amount, code: r.coupon_code})|json_encode|e('html_attr') }}"
                    min-spend="{{ config('referrals.coupon_min_spend') }}"
                    currency-symbol="{{ session_currency.symbol }}"
                ></referral-rewards>
            {% endif %}

        </div>

        {% if invitations|length > 0 %}
            <div class="referralInvitations">
                <h3>Invitation History</h3>
                <div class="invitationList">
                    {% for invite in invitations %}
                        {% if invite.referee_email != 'share-link@placeholder.local' %}
                            <div class="invitationCard">
                                <div class="invitationMain">
                                    <span class="invitationEmail">{{ invite.referee_email }}</span>
                                    <div class="invitationMeta">
                                        <span class="invitationDate">{{ invite.created_at|date('d M Y') }}</span>
                                        <span class="statusBadge status-{{ invite.status }}">
                                            {{ invite.status|replace({'_': ' '})|capitalize }}
                                        </span>
                                    </div>
                                </div>
                                {% if invite.status == 'pending' and not invite.reminder_sent_at %}
                                    <button class="buttonLink js-send-reminder" data-referral-id="{{ invite.id }}">
                                        Send Reminder
                                    </button>
                                {% elseif invite.reminder_sent_at %}
                                    <span class="reminderSent">Reminder Sent</span>
                                {% endif %}
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        {% endif %}

    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Send reminder
            document.querySelectorAll('.js-send-reminder').forEach(function(btn) {
                btn.addEventListener('click', function() {
                    const referralId = this.getAttribute('data-referral-id');
                    const button = this;
                    button.disabled = true;
                    button.textContent = 'Sending...';

                    fetch('/members/referrals/reminder', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: JSON.stringify({ referral_id: referralId }),
                    })
                    .then(function(response) { return response.json(); })
                    .then(function(data) {
                        if (data.success) {
                            button.textContent = 'Reminder Sent';
                            button.classList.add('reminderSent');
                        } else {
                            button.textContent = data.message || 'Failed';
                            button.disabled = false;
                        }
                    })
                    .catch(function() {
                        button.textContent = 'Failed';
                        button.disabled = false;
                    });
                });
            });
        });
    </script>

{% endblock %}
