<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">

    <!--
        Composant réutilisable: Carte Statistiques Audit (WOU/DRY Pattern)
        
        Auteur: Lions User Manager
        Version: 1.0.0
        Description: Affiche des statistiques d'audit dans une carte
        
        Paramètres:
        - title: String (requis) - Titre de la carte
        - value: Number (requis) - Valeur à afficher
        - icon: String (requis) - Classe d'icône PrimeIcons
        - iconColor: String (requis) - Couleur de l'icône
        - subtitle: String (optionnel) - Sous-titre
        - trend: Number (optionnel) - Tendance (pourcentage)
        - trendLabel: String (optionnel) - Libellé de la tendance
        - colSize: String (défaut: "col-12 md:col-6 lg:col-3") - Taille de colonne
        - clickable: Boolean (défaut: false) - Rendre la carte cliquable
        - clickAction: String (optionnel) - Action au clic
        
        Exemples d'utilisation:
        
        1. Carte simple:
        <ui:include src="/templates/components/audit/audit-stats-card.xhtml">
            <ui:param name="title" value="Total Actions" />
            <ui:param name="value" value="#{auditBean.totalActions}" />
            <ui:param name="icon" value="pi-history" />
            <ui:param name="iconColor" value="blue-600" />
        </ui:include>
        
        2. Carte avec tendance:
        <ui:include src="/templates/components/audit/audit-stats-card.xhtml">
            <ui:param name="title" value="Actions Réussies" />
            <ui:param name="value" value="#{auditBean.successCount}" />
            <ui:param name="icon" value="pi-check-circle" />
            <ui:param name="iconColor" value="green-600" />
            <ui:param name="trend" value="#{auditBean.successTrend}" />
            <ui:param name="trendLabel" value="vs mois dernier" />
        </ui:include>
    -->
    
    <c:set var="colSize" value="#{empty colSize ? 'col-12 md:col-6 lg:col-3' : colSize}" />
    <c:set var="clickable" value="#{empty clickable ? false : clickable}" />
    
    <div class="field #{colSize}">
        <c:choose>
            <c:when test="#{clickable and not empty clickAction}">
                <p:commandLink 
                    styleClass="card-link"
                    action="#{clickAction}">
                    <div class="card surface-0 hover:surface-100 border-round-lg transition-all transition-duration-200 p-4">
                        <div class="flex align-items-center justify-content-between mb-3">
                            <span class="block text-600 font-medium text-sm">#{title}</span>
                            <div class="flex align-items-center justify-content-center surface-100 border-round-lg" 
                                 style="width: 2.5rem; height: 2.5rem;">
                                <i class="pi #{icon} text-#{iconColor} text-lg"></i>
                            </div>
                        </div>
                        
                        <div class="text-900 font-bold text-2xl mb-2">#{value}</div>
                        
                        <c:if test="#{not empty subtitle}">
                            <div class="text-500 text-xs mb-2">#{subtitle}</div>
                        </c:if>
                        
                        <c:if test="#{not empty trend}">
                            <div class="flex align-items-center">
                                <i class="pi pi-arrow-#{trend >= 0 ? 'up' : 'down'} text-#{trend >= 0 ? 'green' : 'red'}-500 text-sm mr-2"></i>
                                <span class="text-#{trend >= 0 ? 'green' : 'red'}-600 font-semibold text-sm mr-2">
                                    #{trend >= 0 ? '+' : ''}#{trend}%
                                </span>
                                <c:if test="#{not empty trendLabel}">
                                    <span class="text-500 text-xs">#{trendLabel}</span>
                                </c:if>
                            </div>
                        </c:if>
                    </div>
                </p:commandLink>
            </c:when>
            
            <c:otherwise>
                <div class="card surface-0 border-round-lg p-4">
                    <div class="flex align-items-center justify-content-between mb-3">
                        <span class="block text-600 font-medium text-sm">#{title}</span>
                        <div class="flex align-items-center justify-content-center surface-100 border-round-lg" 
                             style="width: 2.5rem; height: 2.5rem;">
                            <i class="pi #{icon} text-#{iconColor} text-lg"></i>
                        </div>
                    </div>
                    
                    <div class="text-900 font-bold text-2xl mb-2">#{value}</div>
                    
                    <c:if test="#{not empty subtitle}">
                        <div class="text-500 text-xs mb-2">#{subtitle}</div>
                    </c:if>
                    
                    <c:if test="#{not empty trend}">
                        <div class="flex align-items-center">
                            <i class="pi pi-arrow-#{trend >= 0 ? 'up' : 'down'} text-#{trend >= 0 ? 'green' : 'red'}-500 text-sm mr-2"></i>
                            <span class="text-#{trend >= 0 ? 'green' : 'red'}-600 font-semibold text-sm mr-2">
                                #{trend >= 0 ? '+' : ''}#{trend}%
                            </span>
                            <c:if test="#{not empty trendLabel}">
                                <span class="text-500 text-xs">#{trendLabel}</span>
                            </c:if>
                        </div>
                    </c:if>
                </div>
            </c:otherwise>
        </c:choose>
    </div>
    
</ui:composition>

