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

    <!--
        Composant réutilisable: Carte KPI (Indicateur de Performance)
        
        Paramètres:
        - title: Titre du KPI (requis)
        - value: Valeur principale à afficher (requis)
        - icon: Classe d'icône PrimeIcons (requis, ex: pi-users)
        - iconColor: Couleur de l'icône (requis, ex: blue-600, green-600, purple-600, orange-600)
        - growthValue: Valeur de croissance (optionnel, ex: "12.5", "5", "+10")
        - growthLabel: Libellé de la croissance (optionnel, ex: "ce mois", "vs mois dernier")
        - growthType: Type de croissance - "percentage" (défaut) ou "number" ou "status"
        - showGrowth: Afficher la section croissance (défaut: true si growthValue fourni)
        - noDataLabel: Libellé si pas de données (optionnel, défaut: "Données non disponibles")
        - progressValue: Valeur pour la barre de progression 0-100 (optionnel)
        - showProgress: Afficher la barre de progression (défaut: true si progressValue fourni)
        - statusIcon: Icône de statut au lieu de croissance (optionnel, ex: "pi-check-circle")
        - statusLabel: Libellé de statut (optionnel, ex: "En ligne")
        - statusValue: Valeur de statut (optionnel, ex: "5 actifs")
        - colSize: Taille de colonne (optionnel, défaut: "col-12 md:col-6 lg:col-3")
        
        Exemples d'utilisation:
        
        1. KPI simple avec croissance en pourcentage:
        <ui:include src="/templates/components/cards/kpi-card.xhtml">
            <ui:param name="title" value="Membres Actifs" />
            <ui:param name="value" value="#{bean.totalMembres}" />
            <ui:param name="icon" value="pi-users" />
            <ui:param name="iconColor" value="blue-600" />
            <ui:param name="growthValue" value="#{bean.croissanceMembres}" />
            <ui:param name="growthLabel" value="ce mois" />
            <ui:param name="progressValue" value="#{bean.pourcentageMembres}" />
        </ui:include>
        
        2. KPI avec croissance en nombre:
        <ui:include src="/templates/components/cards/kpi-card.xhtml">
            <ui:param name="title" value="Organisations" />
            <ui:param name="value" value="#{bean.totalEntites}" />
            <ui:param name="icon" value="pi-sitemap" />
            <ui:param name="iconColor" value="green-600" />
            <ui:param name="growthValue" value="#{bean.nouvellesEntites}" />
            <ui:param name="growthLabel" value="nouvelles" />
            <ui:param name="growthType" value="number" />
            <ui:param name="progressValue" value="#{bean.pourcentageOrganisations}" />
        </ui:include>
        
        3. KPI avec statut au lieu de croissance:
        <ui:include src="/templates/components/cards/kpi-card.xhtml">
            <ui:param name="title" value="Activité du Jour" />
            <ui:param name="value" value="#{bean.activiteJournaliere}" />
            <ui:param name="icon" value="pi-chart-line" />
            <ui:param name="iconColor" value="orange-600" />
            <ui:param name="statusIcon" value="pi-check-circle" />
            <ui:param name="statusLabel" value="En ligne" />
            <ui:param name="statusValue" value="#{bean.utilisateursActifs} actifs" />
            <ui:param name="progressValue" value="#{bean.pourcentageActivite}" />
        </ui:include>
        
        4. KPI sans croissance ni progression:
        <ui:include src="/templates/components/cards/kpi-card.xhtml">
            <ui:param name="title" value="Total" />
            <ui:param name="value" value="#{bean.total}" />
            <ui:param name="icon" value="pi-calendar" />
            <ui:param name="iconColor" value="purple-600" />
            <ui:param name="showGrowth" value="false" />
            <ui:param name="showProgress" value="false" />
        </ui:include>
    -->

    <ui:param name="colSize" value="col-12 md:col-6 lg:col-3" />
    <ui:param name="showGrowth" value="#{not empty growthValue}" />
    <ui:param name="showProgress" value="#{not empty progressValue}" />
    <ui:param name="growthType" value="percentage" />
    <ui:param name="noDataLabel" value="Données non disponibles" />

    <div class="field #{colSize}">
        <div class="card surface-0 hover:surface-100 border-round-lg transition-all transition-duration-200">
            <div class="p-4" style="min-height: 9rem;">
                <!-- Header: Titre et Icône -->
                <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>
                
                <!-- Valeur principale -->
                <div class="text-900 font-bold text-2xl mb-3">#{value}</div>
                
                <!-- Section Croissance ou Statut -->
                <c:choose>
                    <!-- Mode Statut (statusIcon fourni) -->
                    <c:when test="#{not empty statusIcon}">
                        <div class="flex align-items-center mb-2" rendered="#{not empty statusValue and statusValue != '0'}">
                            <div class="bg-green-500 border-circle mr-2" style="width: 8px; height: 8px;"></div>
                            <span class="text-green-600 font-semibold text-sm mr-2">#{statusLabel}</span>
                            <span class="text-500 text-xs">#{statusValue}</span>
                        </div>
                        <div class="text-500 text-xs" rendered="#{empty statusValue or statusValue == '0'}">
                            Aucun utilisateur actif
                        </div>
                    </c:when>
                    <!-- Mode Croissance -->
                    <c:otherwise>
                        <c:choose>
                            <!-- Croissance en nombre -->
                            <c:when test="#{growthType == 'number'}">
                                <div class="flex align-items-center mb-2" rendered="#{showGrowth and not empty growthValue and growthValue != '0' and growthValue != '0.0'}">
                                    <i class="pi pi-arrow-up text-green-500 text-sm mr-2"></i>
                                    <span class="text-green-600 font-semibold text-sm mr-2">+#{growthValue}</span>
                                    <span class="text-500 text-xs">#{growthLabel}</span>
                                </div>
                                <div class="text-500 text-xs" rendered="#{not showGrowth or empty growthValue or growthValue == '0' or growthValue == '0.0'}">
                                    #{noDataLabel}
                                </div>
                            </c:when>
                            <!-- Croissance en pourcentage (défaut) -->
                            <c:otherwise>
                                <div class="flex align-items-center mb-2" rendered="#{showGrowth and not empty growthValue and growthValue != '0' and growthValue != '0.0'}">
                                    <i class="pi pi-arrow-up text-green-500 text-sm mr-2"></i>
                                    <span class="text-green-600 font-semibold text-sm mr-2">+#{growthValue}%</span>
                                    <span class="text-500 text-xs">#{growthLabel}</span>
                                </div>
                                <div class="text-500 text-xs" rendered="#{not showGrowth or empty growthValue or growthValue == '0' or growthValue == '0.0'}">
                                    #{noDataLabel}
                                </div>
                            </c:otherwise>
                        </c:choose>
                    </c:otherwise>
                </c:choose>
                
                <!-- Barre de progression -->
                <p:progressBar value="#{progressValue}" 
                              showValue="false"
                              styleClass="surface-200" 
                              style="height: 0.5rem; width: 100%;"
                              rendered="#{showProgress}" />
            </div>
        </div>
    </div>

</ui:composition>