{% extends 'base/base.html' %}
{% block title %}Referral Dashboard - CryptoSignals Pro{% endblock %}

{% block content %}
<div class="container-fluid">
    <h1 class="page-title">Referral Dashboard</h1>
    
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card stat-card">
                <div class="card-body">
                    <p class="text-muted mb-1 custom-text-muted">Total Referrals</p>
                    <h3 class="mb-0 custom-text-white">{{ total_referrals }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card earnings">
                <div class="card-body">
                    <p class="text-muted mb-1 custom-text-muted">Total Earnings</p>
                    <h3 class="mb-0 custom-text-success">${{ total_earned|floatformat:2 }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card referrals">
                <div class="card-body">
                    <p class="text-muted mb-1 custom-text-muted">Qualified Team Members</p>
                    <h3 class="mb-0 custom-text-warning">{{ qualified_team_members }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card signals">
                <div class="card-body">
                    <p class="text-muted mb-1 custom-text-muted">Current Level</p>
                    {% if current_level %}
                    <h3 class="mb-0 custom-text-white">Level {{ current_level }}</h3>
                    {% else %}
                    <h3 class="mb-0 custom-text-white">Level 0</h3>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0 custom-text-white">Current Level Overview</h5>
            {% if current_level %}
            <span class="badge badge-approved">Level {{ current_level }} unlocked</span>
            {% else %}
            <span class="badge badge-pending">Level 1 pending</span>
            {% endif %}
        </div>
        <div class="card-body">
            <div class="row g-4 align-items-center">
                <div class="col-lg-7">
                    {% if current_level_detail %}
                    <h4 class="custom-text-white mb-2">Level {{ current_level }} is active on your account</h4>
                    <p class="custom-text-muted mb-2">
                        Your current team bonus for this level is
                        <span class="custom-text-success">${{ current_level_detail.bonus_amount|floatformat:2 }}</span>.
                    </p>
                    {% if latest_team_bonus %}
                    <p class="custom-text-success mb-0">
                        Latest credited bonus: ${{ latest_team_bonus.amount|floatformat:2 }} for Level {{ latest_team_bonus.level_achieved }}.
                    </p>
                    {% endif %}
                    {% else %}
                    <h4 class="custom-text-white mb-2">No team level unlocked yet</h4>
                    <p class="custom-text-muted mb-0">
                        As soon as your qualified direct team reaches the next target, your new level and bonus will appear here automatically.
                    </p>
                    {% endif %}
                </div>
                <div class="col-lg-5">
                    {% if next_level %}
                    <p class="custom-text-muted mb-2">
                        Next target: <span class="custom-text-white">Level {{ next_level.level }}</span>
                        with {{ next_level.required_members }} qualified members
                    </p>
                    <div class="progress" style="height: 10px; background: rgba(148, 163, 184, 0.15);">
                        <div
                            class="progress-bar"
                            role="progressbar"
                            style="width: {{ level_progress_percent }}%; background: linear-gradient(135deg, #00d4ff 0%, #7b2ff7 100%);"
                            aria-valuenow="{{ level_progress_percent }}"
                            aria-valuemin="0"
                            aria-valuemax="100"
                        ></div>
                    </div>
                    <small class="custom-text-muted d-block mt-2">
                        {{ qualified_team_members }}/{{ next_level.required_members }} qualified members
                    </small>
                    {% else %}
                    <h5 class="custom-text-success mb-1">Highest active level reached</h5>
                    <p class="custom-text-muted mb-0">Your team has already unlocked all active team levels.</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0 custom-text-white">Your Referral Link</h5>
                </div>
                <div class="card-body">
                    <div class="input-group">
                        <input type="text" class="form-control" value="{{ referral_link }}" id="referralLink" readonly>
                        <button class="btn btn-primary" type="button" onclick="copyReferralLink()">Copy</button>
                    </div>
                    <small class="custom-text-muted mt-2 d-block">Share this link to earn commissions!</small>
                </div>
            </div>
        </div>
        
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0 custom-text-white">How It Works</h5>
                </div>
                <div class="card-body">
                    <ol class="ps-3 custom-text-muted">
                        <li class="mb-2 custom-text-muted">Share your referral link with friends</li>
                        <li class="mb-2 custom-text-muted">Direct sponsor gets {{ referrer_bonus_percentage }}% of every approved referral deposit</li>
                        <li class="mb-2 custom-text-muted">Referred user gets {{ referred_user_bonus_percentage }}% on their own approved deposit</li>
                        <li class="mb-2 custom-text-muted">Only deposits from ${{ minimum_deposit }} to ${{ maximum_deposit }} qualify</li>
                        <li class="mb-0 custom-text-muted">When your qualified direct team reaches a level, that level bonus is credited to your wallet</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0 custom-text-white">Level Team Bonuses</h5>
            {% if current_level %}
            <span class="badge badge-approved">Level {{ current_level }} unlocked</span>
            {% else %}
            <span class="badge badge-pending">No level unlocked yet</span>
            {% endif %}
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th class="custom-text-muted">Level</th>
                            <th class="custom-text-muted">Required Members</th>
                            <th class="custom-text-muted">Per Member Deposit</th>
                            <th class="custom-text-muted">Team Bonus</th>
                            <th class="custom-text-muted">Progress</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for level in team_levels %}
                        <tr>
                            <td class="custom-text-muted">Level {{ level.level }}</td>
                            <td class="custom-text-muted">{{ level.required_members }}</td>
                            <td class="custom-text-muted">${{ minimum_deposit|floatformat:2 }}</td>
                            <td class="custom-text-success">${{ level.bonus_amount|floatformat:2 }}</td>
                            <td>
                                {% if level.achieved %}
                                <span class="badge badge-approved">Completed</span>
                                {% else %}
                                <span class="badge badge-pending">{{ level.remaining_members }} member(s) left</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0 custom-text-white">Recent Referrals</h5>
        </div>
        <div class="card-body">
            {% if referrals %}
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th class="custom-text-muted">Username</th>
                            <th class="custom-text-muted">Email</th>
                            <th class="custom-text-muted">Joined</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for referral in referrals %}
                        <tr>
                            <td class="custom-text-muted">{{ referral.username }}</td>
                            <td class="custom-text-muted">{{ referral.email }}</td>
                            <td class="custom-text-muted">{{ referral.date_joined|date:"M d, Y" }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <p class="custom-text-muted text-center py-4">No referrals yet. Share your referral link!</p>
            {% endif %}
        </div>
    </div>
</div>

<script>
function copyReferralLink() {
    var copyText = document.getElementById("referralLink");
    copyText.select();
    copyText.setSelectionRange(0, 99999);
    navigator.clipboard.writeText(copyText.value);
    alert("Referral link copied!");
}
</script>
{% endblock %}
