{% extends "base.html" %}
{% import "macros/empty_state.html" as empty %}

{% block content %}

<div class="referral-container space-y-6" 
     {{ plugin_scope_attr }}
     data-referral-code="{{ referral_code | default(value='') }}">
    
    <div class="referral-header">
        <h2>Refer & Earn Rewards</h2>
        <p>Invite your friends and get benefits when they join and shop!</p>
    </div>

    <div class="referral-stats">
        <div class="stat-box">
            <span class="value">{{ referrals | length }}</span>
            <span class="label">Total Referrals</span>
        </div>
        <div class="stat-box">
            <span class="value">{{ settings.currency_symbol }}{{ total_rewards | price }}</span>
            <span class="label">Total Earned</span>
        </div>
    </div>

    <section class="referral-card">
        <h3>Your Referral Code</h3>
        <p>Share this with your friends</p>
        <div class="referral-share-section">
            {% if plugin_settings.show_referral_id == "true" %}
            <div class="share-item">
                <label>Referral ID</label>
                <div class="input-copy-group">
                    <input class="blocks-input" type="text" id="referral-id" value="{{ referral_code }}" readonly>
                    <button class="btn-copy blocks-button blocks-button-primary" data-target="referral-id">
                        <i class="fas fa-copy"></i> Copy
                    </button>
                </div>
            </div>
            {% endif %}

            {% if plugin_settings.show_referral_link == "true" %}
            <div class="share-item">
                <label>Referral Link</label>
                <div class="input-copy-group">
                    <input class="blocks-input" type="text" id="referral-link" value="Loading..." readonly>
                    <button class="btn-copy blocks-button blocks-button-primary" data-target="referral-link">
                        <i class="fas fa-link"></i> Copy Link
                    </button>
                </div>
            </div>
            {% endif %}
        </div>
    </section>

    <section class="referral-card">
        <h3>Referral History</h3>
        <div class="referral-table-container">
            <table class="referral-table blocks-admin-table">
                <thead>
                    <tr>
                        <th>Recipient</th>
                        <th>Joined</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for ref in referrals %}
                    <tr>
                        <td>
                            <strong>{{ ref.referred_name }}</strong><br>
                            {% if plugin_settings.show_referred_email == "true" %}
                            <small>{{ ref.referred_email }}</small>
                            {% endif %}
                        </td>
                        <td>{{ ref.created_at | date_in_tz(format="%Y-%m-%d", timezone=settings.timezone) }}</td>
                        <td>
                            <span class="referral-status status-{{ ref.status }}">
                                {{ ref.status | capitalize }}
                            </span>
                        </td>
                    </tr>
                    {% else %}
                    {{ empty::empty_state(table=true, colspan=3, icon="fas fa-users", title="No referrals yet", description="Start sharing!") }}
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </section>

    {% if reward_history | length > 0 %}
    <section class="referral-card">
        <h3>Recent Rewards</h3>
        <div class="referral-table-container">
            <table class="referral-table blocks-admin-table">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Amount</th>
                        <th>Type</th>
                        <th>Reference</th>
                    </tr>
                </thead>
                <tbody>
                    {% for reward in reward_history %}
                    <tr>
                        <td>{{ reward.created_at | date_in_tz(format="%Y-%m-%d", timezone=settings.timezone) }}</td>
                        <td><strong>{{ settings.currency_symbol }}{{ reward.amount | price }}</strong></td>
                        <td>{{ reward.type | replace(from="_", to=" ") | capitalize }}</td>
                        <td>{{ reward.reference_id | default(value="Invite Bonus") }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
    {% endif %}
</div>
{% endblock %}