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

    <!--
        Composant réutilisable: Affichage monétaire formaté

        Principe DRY: Un seul composant pour tous les montants monétaires
        Format standardisé pour l'Afrique de l'Ouest (FCFA)

        Paramètres:
        - amount: Montant à afficher (requis)
        - currency: Devise (défaut: FCFA)
        - showCurrency: Afficher le symbole de devise (true/false - défaut: true)
        - showSymbol: Afficher le symbole avant le montant (défaut: false)
        - decimals: Nombre de décimales (défaut: 0 pour FCFA)
        - size: Taille (small, normal, large, xl - défaut: normal)
        - color: Couleur du texte (success, danger, warning, primary - optionnel)
        - bold: Texte en gras (true/false - défaut: false)
        - alignment: Alignement (left, center, right - défaut: left)

        Utilisation basique:
        <ui:include src="/WEB-INF/components/monetary-display.xhtml">
            <ui:param name="amount" value="#{facture.montantTotal}"/>
        </ui:include>
        Affiche: 1 250 000 FCFA

        Grande taille avec couleur:
        <ui:include src="/WEB-INF/components/monetary-display.xhtml">
            <ui:param name="amount" value="#{chantier.budget}"/>
            <ui:param name="size" value="xl"/>
            <ui:param name="color" value="primary"/>
            <ui:param name="bold" value="true"/>
        </ui:include>

        Avec symbole personnalisé:
        <ui:include src="/WEB-INF/components/monetary-display.xhtml">
            <ui:param name="amount" value="#{devis.montant}"/>
            <ui:param name="currency" value="EUR"/>
            <ui:param name="showSymbol" value="true"/>
            <ui:param name="decimals" value="2"/>
        </ui:include>
        Affiche: € 1 250,50 EUR
    -->

    <c:set var="currencyCode" value="#{empty currency ? 'FCFA' : currency}"/>
    <c:set var="displayCurrency" value="#{empty showCurrency ? true : showCurrency}"/>
    <c:set var="displaySymbol" value="#{empty showSymbol ? false : showSymbol}"/>
    <c:set var="decimalCount" value="#{empty decimals ? 0 : decimals}"/>
    <c:set var="textSize" value="#{empty size ? 'normal' : size}"/>
    <c:set var="isBold" value="#{empty bold ? false : bold}"/>
    <c:set var="textAlign" value="#{empty alignment ? 'left' : alignment}"/>

    <!-- Classes CSS pour la taille -->
    <c:choose>
        <c:when test="#{textSize eq 'small'}">
            <c:set var="sizeClass" value="text-sm"/>
        </c:when>
        <c:when test="#{textSize eq 'large'}">
            <c:set var="sizeClass" value="text-lg"/>
        </c:when>
        <c:when test="#{textSize eq 'xl'}">
            <c:set var="sizeClass" value="text-xl"/>
        </c:when>
        <c:otherwise>
            <c:set var="sizeClass" value="text-base"/>
        </c:otherwise>
    </c:choose>

    <!-- Classes CSS pour la couleur -->
    <c:choose>
        <c:when test="#{color eq 'success'}">
            <c:set var="colorClass" value="text-green-600"/>
        </c:when>
        <c:when test="#{color eq 'danger'}">
            <c:set var="colorClass" value="text-red-600"/>
        </c:when>
        <c:when test="#{color eq 'warning'}">
            <c:set var="colorClass" value="text-orange-600"/>
        </c:when>
        <c:when test="#{color eq 'primary'}">
            <c:set var="colorClass" value="text-primary"/>
        </c:when>
        <c:otherwise>
            <c:set var="colorClass" value="text-900"/>
        </c:otherwise>
    </c:choose>

    <!-- Symboles de devise -->
    <c:choose>
        <c:when test="#{currencyCode eq 'EUR'}">
            <c:set var="currencySymbol" value="€"/>
        </c:when>
        <c:when test="#{currencyCode eq 'USD'}">
            <c:set var="currencySymbol" value="$"/>
        </c:when>
        <c:when test="#{currencyCode eq 'GBP'}">
            <c:set var="currencySymbol" value="£"/>
        </c:when>
        <c:when test="#{currencyCode eq 'FCFA' or currencyCode eq 'XOF'}">
            <c:set var="currencySymbol" value=""/>
        </c:when>
        <c:otherwise>
            <c:set var="currencySymbol" value=""/>
        </c:otherwise>
    </c:choose>

    <!-- Affichage du montant -->
    <span class="monetary-display #{sizeClass} #{colorClass} #{isBold ? 'font-bold' : ''}"
          style="text-align: #{textAlign}; display: inline-block;">
        <!-- Symbole avant -->
        <c:if test="#{displaySymbol and not empty currencySymbol}">
            <span class="currency-symbol mr-1">#{currencySymbol}</span>
        </c:if>

        <!-- Montant formaté -->
        <span class="amount">
            <h:outputText value="#{amount}">
                <f:convertNumber type="currency"
                                 currencySymbol=""
                                 groupingUsed="true"
                                 minFractionDigits="#{decimalCount}"
                                 maxFractionDigits="#{decimalCount}"/>
            </h:outputText>
        </span>

        <!-- Code devise après -->
        <c:if test="#{displayCurrency}">
            <span class="currency-code ml-1 font-medium">#{currencyCode}</span>
        </c:if>
    </span>

</ui:composition>