{% extends "base.html" %}
{% load static %}

{% block title %}Tableau de Bord Affilié{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/affiliates/affiliate_dashboard.css' %}">
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <!-- En-tête de la Page -->
    <div class="mb-5">
        <h1 class="display-5 fw-bold text-primary mb-2">Bienvenue, {{ user.first_name }} !</h1>
        <p class="lead text-muted">Voici le résumé de votre activité de partenaire.</p>
    </div>

    <!-- Section Principale : Votre Lien d'Affiliation -->
    <div class="card shadow-sm mb-4 border-primary">
        <div class="card-header bg-primary text-white">
            <h5 class="card-title mb-0">
                <i class="fas fa-link me-2"></i>
                Votre Lien de Parrainage Unique
            </h5>
        </div>
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-md-10">
                    <input type="text" class="form-control form-control-lg" value="{{ affiliate_link }}" readonly id="affiliateLink">
                </div>
                <div class="col-md-2">
                    <button class="btn btn-primary btn-lg w-100" onclick="copyAffiliateLink()" id="copyBtn">
                        <i class="fas fa-copy me-2"></i>
                        Copier
                    </button>
                </div>
            </div>
            <small class="text-muted mt-2 d-block">
                <i class="fas fa-info-circle me-1"></i>
                Partagez ce lien pour gagner des commissions sur chaque vente générée.
            </small>
        </div>
    </div>

    <!-- Section des Indicateurs Clés (KPIs) -->
    <div class="row g-4 mb-4">
        <!-- Carte 1 : Clics -->
        <div class="col-md-3">
            <div class="card text-center h-100 shadow-sm border-0">
                <div class="card-body">
                    <div class="text-primary mb-3">
                        <i class="fas fa-mouse-pointer fa-3x"></i>
                    </div>
                    <h3 class="card-title text-primary fw-bold">{{ stats.total_clicks|default:0 }}</h3>
                    <p class="card-text text-muted">Clics sur votre lien</p>
                </div>
            </div>
        </div>

        <!-- Carte 2 : Inscrits -->
        <div class="col-md-3">
            <div class="card text-center h-100 shadow-sm border-0">
                <div class="card-body">
                    <div class="text-success mb-3">
                        <i class="fas fa-user-plus fa-3x"></i>
                    </div>
                    <h3 class="card-title text-success fw-bold">{{ stats.total_registered_users|default:0 }}</h3>
                    <p class="card-text text-muted">Nouveaux inscrits</p>
                </div>
            </div>
        </div>

        <!-- Carte 3 : Commissions en attente -->
        <div class="col-md-3">
            <div class="card text-center h-100 shadow-sm border-0">
                <div class="card-body">
                    <div class="text-warning mb-3">
                        <i class="fas fa-clock fa-3x"></i>
                    </div>
                    <h3 class="card-title text-warning fw-bold">{{ stats.pending_payout_amount|default:"0,00" }}€</h3>
                    <p class="card-text text-muted">Commissions en attente</p>
                </div>
            </div>
        </div>

        <!-- Carte 4 : Total Gagné -->
        <div class="col-md-3">
            <div class="card text-center h-100 shadow-sm border-0">
                <div class="card-body">
                    <div class="text-success mb-3">
                        <i class="fas fa-euro-sign fa-3x"></i>
                    </div>
                    <h3 class="card-title text-success fw-bold">{{ stats.total_earned|default:"0,00" }}€</h3>
                    <p class="card-text text-muted">Total gagné</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Section de l'Historique des Commissions -->
    <div class="card shadow-sm">
        <div class="card-header bg-light">
            <h2 class="card-title h4 mb-0">
                <i class="fas fa-history me-2 text-primary"></i>
                Historique de vos Commissions
            </h2>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-dark">
                        <tr>
                            <th scope="col">
                                <i class="fas fa-calendar me-2"></i>
                                Date
                            </th>
                            <th scope="col">
                                <i class="fas fa-shopping-cart me-2"></i>
                                Commande Associée
                            </th>
                            <th scope="col">
                                <i class="fas fa-euro-sign me-2"></i>
                                Montant
                            </th>
                            <th scope="col">
                                <i class="fas fa-tag me-2"></i>
                                Statut
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for commission in commissions %}
                        <tr>
                            <td>
                                <span class="fw-medium">{{ commission.created_at|date:"d/m/Y" }}</span>
                                <br>
                                <small class="text-muted">{{ commission.created_at|time:"H:i" }}</small>
                            </td>
                            <td>
                                <span class="badge bg-light text-dark">
                                    #{{ commission.related_order_number }}
                                </span>
                            </td>
                            <td>
                                <span class="fw-bold text-success">{{ commission.amount }}€</span>
                            </td>
                            <td>
                                <span class="badge bg-{% if commission.status == 'PAID' %}success{% else %}warning{% endif %}">
                                    {% if commission.status == 'PAID' %}
                                        <i class="fas fa-check me-1"></i>
                                    {% else %}
                                        <i class="fas fa-clock me-1"></i>
                                    {% endif %}
                                    {{ commission.get_status_display }}
                                </span>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="4" class="text-center py-5">
                                <div class="text-muted">
                                    <i class="fas fa-inbox fa-3x mb-3 d-block"></i>
                                    <h5>Aucune commission générée pour le moment.</h5>
                                    <p>Commencez à partager votre lien d'affiliation pour générer vos premières commissions !</p>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Section d'aide rapide -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card border-info">
                <div class="card-body">
                    <h5 class="card-title text-info">
                        <i class="fas fa-lightbulb me-2"></i>
                        Conseils pour maximiser vos gains
                    </h5>
                    <div class="row">
                        <div class="col-md-4">
                            <h6 class="fw-bold">1. Partagez régulièrement</h6>
                            <p class="small text-muted">Utilisez vos réseaux sociaux, blog ou newsletter pour promouvoir vos services.</p>
                        </div>
                        <div class="col-md-4">
                            <h6 class="fw-bold">2. Créez du contenu de qualité</h6>
                            <p class="small text-muted">Rédigez des articles ou créez des vidéos expliquant les avantages d'iMagin.K.</p>
                        </div>
                        <div class="col-md-4">
                            <h6 class="fw-bold">3. Suivez vos performances</h6>
                            <p class="small text-muted">Analysez régulièrement vos statistiques pour optimiser votre stratégie.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/affiliates/affiliate_dashboard.js' %}"></script>
{% endblock %}