<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"
    xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions">

    <!--
        Composant réutilisable: Contenu Carte KPI - Écosystème LionsDev
        
        Auteur: Lions User Manager
        Version: 2.1.0
        Description: Contenu interne d'une carte KPI. Ce composant est inclus par 
                     kpi-card.xhtml et ne devrait pas être utilisé directement.
                     Affiche le titre, la valeur, le sous-titre, l'indicateur de 
                     croissance/statut, et une barre de progression optionnelle.
        
        Paramètres hérités de kpi-card.xhtml:
        - title, value, icon, iconColor, subtitle
        - growthValue, growthLabel, growthType, showGrowth
        - progressValue, showProgress
        - statusIcon, statusLabel, statusValue
        - noDataLabel
    -->

    <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-2">
            <c:choose>
                <c:when test="#{not empty value}">
                    <c:set var="valueStr" value="#{value.toString()}" />
                    <c:choose>
                        <c:when test="#{valueStr == '-' or valueStr == '...'}">0</c:when>
                        <c:otherwise>#{value}</c:otherwise>
                    </c:choose>
                </c:when>
                <c:otherwise>0</c:otherwise>
            </c:choose>
        </div>

        <!-- Sous-titre -->
        <c:if test="#{not empty subtitle}">
            <div class="text-500 text-xs mb-2">#{subtitle}</div>
        </c:if>

        <!-- Section Croissance ou Statut -->
        <c:choose>
            <!-- Mode Statut (statusIcon fourni) -->
            <c:when test="#{not empty statusIcon}">
                <c:choose>
                    <c:when test="#{not empty statusValue and statusValue != '0' and statusValue != '0.0'}">
                        <div class="flex align-items-center mb-2">
                            <i class="pi #{statusIcon} text-green-500 text-sm mr-2"></i>
                            <span class="text-green-600 font-semibold text-sm mr-2">#{statusLabel}</span>
                            <span class="text-500 text-xs">#{statusValue}</span>
                        </div>
                    </c:when>
                    <c:otherwise>
                        <div class="text-500 text-xs mb-2">
                            <c:choose>
                                <c:when test="#{not empty statusLabel}">Aucun #{statusLabel}</c:when>
                                <c:otherwise>#{noDataLabel}</c:otherwise>
                            </c:choose>
                        </div>
                    </c:otherwise>
                </c:choose>
            </c:when>
            <!-- Mode Croissance -->
            <c:otherwise>
                <c:choose>
                    <c:when
                        test="#{showGrowth and not empty growthValue and growthValue != '0' and growthValue != '0.0'}">
                        <div class="flex align-items-center mb-2">
                            <c:choose>
                                <!-- Croissance positive -->
                                <c:when test="#{growthValue >= 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}#{growthType == 'number' ? '' : '%'}
                                    </span>
                                </c:when>
                                <!-- Croissance négative -->
                                <c:otherwise>
                                    <i class="pi pi-arrow-down text-red-500 text-sm mr-2"></i>
                                    <span class="text-red-600 font-semibold text-sm mr-2">
                                        #{growthValue}#{growthType == 'number' ? '' : '%'}
                                    </span>
                                </c:otherwise>
                            </c:choose>
                            <c:if test="#{not empty growthLabel}">
                                <span class="text-500 text-xs">#{growthLabel}</span>
                            </c:if>
                        </div>
                    </c:when>
                    <c:otherwise>
                        <div class="text-500 text-xs mb-2">#{noDataLabel}</div>
                    </c:otherwise>
                </c:choose>
            </c:otherwise>
        </c:choose>

        <!-- Barre de progression -->
        <c:if test="#{showProgress and not empty progressValue}">
            <div class="mt-2">
                <p:progressBar value="#{progressValue}" showValue="false" styleClass="surface-200"
                    style="height: 0.5rem; width: 100%; border-radius: 4px;" />
            </div>
        </c:if>
    </div>

</ui:composition>