<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: Ligne de Log Audit - Écosystème LionsDev
        
        Auteur: Lions User Manager
        Version: 2.0.0
        Description: Affiche une ligne de log d'audit avec icône de statut, informations
                     principales et détails extensibles. Compatible avec les thèmes PrimeFaces.
        
        Paramètres:
        - auditLog: AuditLogDTO (requis) - Le log d'audit à afficher
        - showDetails: Boolean (défaut: false) - Afficher les détails complets en ligne
        - showActions: Boolean (défaut: false) - Afficher les boutons d'action
        - compact: Boolean (défaut: false) - Mode compact
        - styleClass: String (optionnel) - Classes CSS supplémentaires
        
        Exemples d'utilisation:
        
        1. Ligne simple:
        <ui:include src="/templates/components/audit/audit-log-row.xhtml">
            <ui:param name="auditLog" value="#{log}" />
        </ui:include>
        
        2. Ligne avec détails et actions:
        <ui:include src="/templates/components/audit/audit-log-row.xhtml">
            <ui:param name="auditLog" value="#{log}" />
            <ui:param name="showDetails" value="true" />
            <ui:param name="showActions" value="true" />
        </ui:include>
    -->

    <c:set var="showDetails" value="#{empty showDetails ? false : showDetails}" />
    <c:set var="showActions" value="#{empty showActions ? false : showActions}" />
    <c:set var="compact" value="#{empty compact ? false : compact}" />

    <!-- Déterminer le style selon le succès/échec -->
    <c:set var="isSuccess" value="#{auditLog.succes}" />
    <c:set var="statusColor" value="#{isSuccess ? 'green' : 'red'}" />
    <c:set var="statusIcon" value="#{isSuccess ? 'pi-check-circle' : 'pi-times-circle'}" />
    <c:set var="statusLabel" value="#{isSuccess ? 'Succès' : 'Échec'}" />

    <div
        class="audit-log-row flex align-items-start gap-3 p-3 border-round surface-border border-1 hover:surface-hover transition-all transition-duration-200 #{compact ? 'py-2' : ''} #{styleClass}">

        <!-- Icône de statut -->
        <div class="flex align-items-center justify-content-center border-round-lg flex-shrink-0"
            style="width: 2.5rem; height: 2.5rem; background-color: rgba(var(--#{statusColor}-500-rgb, 0,0,0), 0.1);">
            <i class="pi #{statusIcon} text-#{statusColor}-500"></i>
        </div>

        <!-- Informations principales -->
        <div class="flex-1">
            <div class="flex align-items-center gap-2 mb-1 flex-wrap">
                <strong class="text-900">#{auditLog.typeAction}</strong>
                <p:tag value="#{statusLabel}" severity="#{isSuccess ? 'success' : 'danger'}" styleClass="text-xs" />
            </div>

            <div class="flex align-items-center gap-3 text-color-secondary text-sm flex-wrap">
                <c:if test="#{not empty auditLog.acteurUsername}">
                    <span class="flex align-items-center gap-1">
                        <i class="pi pi-user text-xs"></i>
                        #{auditLog.acteurUsername}
                    </span>
                </c:if>
                <c:if test="#{not empty auditLog.ressourceType}">
                    <span class="flex align-items-center gap-1">
                        <i class="pi pi-database text-xs"></i>
                        #{auditLog.ressourceType}
                    </span>
                </c:if>
                <c:if test="#{not empty auditLog.dateAction}">
                    <span class="flex align-items-center gap-1">
                        <i class="pi pi-clock text-xs"></i>
                        #{auditLog.dateAction}
                    </span>
                </c:if>
                <c:if test="#{not empty auditLog.realmName}">
                    <span class="flex align-items-center gap-1">
                        <i class="pi pi-globe text-xs"></i>
                        #{auditLog.realmName}
                    </span>
                </c:if>
            </div>

            <!-- Détails extensibles -->
            <c:if test="#{showDetails}">
                <div class="mt-2 surface-100 border-round p-2">
                    <div class="grid text-xs text-color-secondary">
                        <c:if test="#{not empty auditLog.ressourceId}">
                            <div class="col-12 md:col-6">
                                <span class="font-semibold">Ressource ID: </span>
                                <span class="text-900">#{auditLog.ressourceId}</span>
                            </div>
                        </c:if>
                        <c:if test="#{not empty auditLog.adresseIp}">
                            <div class="col-12 md:col-6">
                                <span class="font-semibold">Adresse IP: </span>
                                <span class="text-900">#{auditLog.adresseIp}</span>
                            </div>
                        </c:if>
                        <c:if test="#{not empty auditLog.details}">
                            <div class="col-12">
                                <span class="font-semibold">Détails: </span>
                                <span class="text-900">#{auditLog.details}</span>
                            </div>
                        </c:if>
                        <c:if test="#{not empty auditLog.userAgent}">
                            <div class="col-12">
                                <span class="font-semibold">User Agent: </span>
                                <span class="text-900 text-overflow-ellipsis white-space-nowrap overflow-hidden"
                                    style="max-width: 300px;" title="#{auditLog.userAgent}">
                                    #{auditLog.userAgent}
                                </span>
                            </div>
                        </c:if>
                        <c:if test="#{not empty auditLog.messageErreur}">
                            <div class="col-12">
                                <span class="font-semibold text-red-600">Erreur: </span>
                                <span class="text-red-700">#{auditLog.messageErreur}</span>
                            </div>
                        </c:if>
                    </div>
                </div>
            </c:if>
        </div>

        <!-- Actions -->
        <c:if test="#{showActions}">
            <div class="flex gap-1 flex-shrink-0">
                <p:commandButton icon="pi pi-eye" styleClass="p-button-text p-button-sm p-button-rounded"
                    title="Voir les détails" onclick="PF('auditLogDetailsDialog').show()" type="button" />
            </div>
        </c:if>
    </div>

</ui:composition>