{#
 # ============================================================================
 # MOLECULE: NAV ITEM
 # ============================================================================
 #
 # Élément de navigation pour sidebar ou menu.
 # Supporte les icônes, badges, et états actif/collapsed.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig
 # - _atoms/badge/badge.html.twig
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre     | Type    | Défaut    | Description                        |
 # |---------------|---------|-----------|-----------------------------------|
 # | label         | string  | (requis)  | Texte du lien                     |
 # | href          | string  | '#'       | URL de destination                |
 # | icon          | string  | null      | Nom de l'icône                    |
 # | badge         | string  | null      | Texte du badge (compteur)         |
 # | newLabel      | string  | 'NEW'     | Libellé du badge nouveauté (isNew) |
 # | proBadge      | bool    | false     | Affiche un badge « PRO » (prioritaire sur isNew) |
 # | active        | bool    | false     | État actif                        |
 # | collapsed     | bool    | false     | Mode collapsed (icône seule)      |
 # | locked        | bool    | false     | Affiche un cadenas rouge          |
 # | variant       | string  | 'default' | default, primary, minimal         |
 # | colorScheme   | string  | 'blue'    | Palette de couleurs : blue, violet |
 # | toolColorHex       | string  | null      | Couleur primaire hex depuis la DB (#RRGGBB) — colore l'icône + état actif |
 # | toolColorSecondary | string  | null      | Couleur secondaire hex depuis la DB (#RRGGBB) — couche fond de l'icône |
 # | toolColorBg        | string  | null      | Couleur fond hex depuis la DB (#RRGGBB) — fond état actif |
 # | size          | string  | 'md'      | sm, md, lg                        |
 # | external      | bool    | false     | Lien externe (nouvelle fenêtre)   |
 # | disabled      | bool    | false     | État désactivé                    |
 # | class         | string  | ''        | Classes additionnelles            |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Navigation simple:
 # {% include '_molecules/nav-item/nav-item.html.twig' with {
 #     label: 'Dashboard',
 #     icon: 'home',
 #     href: '/dashboard'
 # } %}
 #
 # Item actif avec badge:
 # {% include '_molecules/nav-item/nav-item.html.twig' with {
 #     label: 'Messages',
 #     icon: 'mail',
 #     href: '/messages',
 #     active: true,
 #     badge: '5'
 # } %}
 #
 # Mode collapsed:
 # {% include '_molecules/nav-item/nav-item.html.twig' with {
 #     label: 'Settings',
 #     icon: 'settings',
 #     href: '/settings',
 #     collapsed: true
 # } %}
 #
 # ============================================================================
 #}

{# ============================================================================
   CONFIGURATION DES VALEURS PAR DÉFAUT
   ============================================================================ #}

{% set label = label ?? 'Navigation' %}
{% set href = href ?? '#' %}
{% set icon = icon ?? null %}
{% set badge = badge ?? null %}
{% set badgeVariant = badgeVariant ?? null %}
{% set active = active ?? false %}
{% set collapsed = collapsed ?? false %}
{% set locked = locked ?? false %}
{% set variant = variant ?? 'default' %}
{% set colorScheme = colorScheme ?? 'blue' %}
{% set toolColorHex = toolColorHex ?? null %}
{% set toolColorSecondary = toolColorSecondary ?? null %}
{% set toolColorBg = toolColorBg ?? null %}
{% set size = size ?? 'md' %}
{% set external = external ?? false %}
{% set disabled = disabled ?? false %}
{% set class = class ?? '' %}
{% set turboDisabled = turboDisabled ?? false %}
{% set isNew = isNew ?? false %}
{% set newLabel = newLabel ?? 'NEW' %}
{% set proBadge = proBadge ?? false %}

{# ============================================================================
   CLASSES TAILWIND
   ============================================================================ #}

{% set sizeConfig = {
    'sm': {
        'padding': 'px-3 py-3',
        'paddingCollapsed': 'p-3',
        'text': 'text-sm',
        'iconSize': 'sm',
        'gap': 'gap-3',
        'rounded': 'rounded-xl'
    },
    'md': {
        'padding': 'px-4 py-3.5',
        'paddingCollapsed': 'p-3',
        'text': 'text-sm',
        'iconSize': 'md',
        'gap': 'gap-3',
        'rounded': 'rounded-xl'
    },
    'lg': {
        'padding': 'px-3 py-2.5',
        'paddingCollapsed': 'p-4',
        'text': 'text-sm',
        'iconSize': 'md',
        'gap': 'gap-4',
        'rounded': 'rounded-lg'
    }
} %}

{# Couleurs par scheme : blue (Bubul) ou violet (SAM) #}
{% set schemeColors = colorScheme == 'violet' ? {
    'hoverGradient': 'hover:bg-[linear-gradient(135deg,rgba(139,92,246,0.15)_0%,rgba(167,139,250,0.12)_100%)] hover:text-cohorts-dark',
    'activeGradient': 'bg-[linear-gradient(135deg,rgba(139,92,246,0.15)_0%,rgba(167,139,250,0.12)_100%)] text-cohorts-dark font-semibold',
    'iconColor': 'cohorts',
    'iconColorActive': 'cohorts'
} : {
    'hoverGradient': 'hover:bg-[linear-gradient(135deg,rgba(12,129,228,0.15)_0%,rgba(58,158,235,0.12)_100%)] hover:text-primary-dark',
    'activeGradient': 'bg-[linear-gradient(135deg,rgba(12,129,228,0.15)_0%,rgba(58,158,235,0.12)_100%)] text-primary-dark font-semibold',
    'iconColor': 'primary',
    'iconColorActive': 'primary'
} %}

{# Variantes avec styles proches de l'ancien design sidebar #}
{% set variantConfig = {
    'default': {
        'base': 'text-gray-600 ' ~ schemeColors.hoverGradient,
        'active': schemeColors.activeGradient,
        'iconColor': schemeColors.iconColor,
        'iconColorActive': schemeColors.iconColorActive
    },
    'primary': {
        'base': 'text-gray-600 hover:bg-primary hover:text-white',
        'active': 'bg-primary text-white font-semibold',
        'iconColor': 'primary',
        'iconColorActive': 'white'
    },
    'minimal': {
        'base': 'text-gray-500 hover:text-primary-dark',
        'active': 'text-primary font-semibold',
        'iconColor': 'gray',
        'iconColorActive': 'primary'
    }
} %}

{% set sConfig = sizeConfig[size] ?? sizeConfig['md'] %}
{% set vConfig = variantConfig[variant] ?? variantConfig['default'] %}

{% set containerClasses = [
    'relative group flex items-center w-full min-w-0 my-1 transition-all duration-200 ease-out font-primary font-medium',
    sConfig.gap,
    sConfig.padding,
    'group-data-[collapsed=true]/sidebar:' ~ sConfig.paddingCollapsed,
    'group-data-[collapsed=true]/sidebar:justify-center',
    'group-data-[collapsed=true]/sidebar:hover:scale-105',
    sConfig.rounded,
    (not locked and not disabled) ? (toolColorHex ? 'nav-item--tool text-gray-600' : (active ? vConfig.active : vConfig.base)) : '',
    disabled ? 'opacity-45 pointer-events-none cursor-not-allowed text-gray-400' : '',
    locked ? (proBadge ? 'cursor-pointer text-gray-400' : 'pointer-events-none cursor-not-allowed text-gray-400') : '',
    class
]|join(' ')|trim %}

{# Couleur de l'icône : gris si locked/disabled, sinon couleur normale #}
{% if locked or disabled %}
    {% set iconColor = 'gray' %}
{% else %}
    {% set iconColor = active ? vConfig.iconColorActive : vConfig.iconColor %}
{% endif %}

{# ============================================================================
   RENDU HTML
   ============================================================================ #}

<a
    href="{{ href }}"
    class="{{ containerClasses }}"
    {% if toolColorHex and not locked and not disabled %}style="--tool-rgb: {{ toolColorHex|hex_to_rgb }};{% if active %} background-color: {{ toolColorBg ?? toolColorHex ~ '1f' }}; color: {{ toolColorHex }}; font-weight: 600;{% endif %}"{% endif %}
    {% if external %}target="_blank" rel="noopener noreferrer"{% endif %}
    {% if turboDisabled %}data-turbo="false"{% endif %}
    {% if disabled or (locked and not proBadge) %}aria-disabled="true" tabindex="-1"{% endif %}
    {% if active %}aria-current="page"{% endif %}
    data-sidebar-tooltip="{{ label }}"
>
    {# Icône #}
    {% if icon %}
        <span class="flex-shrink-0 flex items-center justify-center transition-transform duration-300 ease-default {{ active ? 'scale-105' : '' }}">
            {% include '_atoms/icon/icon.html.twig' with {
                name: icon,
                size: sConfig.iconSize,
                color: iconColor,
                colorPrimary: (toolColorHex and not locked and not disabled) ? toolColorHex : null,
                colorSecondary: (toolColorSecondary and not locked and not disabled) ? toolColorSecondary : null,
                opacitySecondary: '0.35'
            } only %}
        </span>
    {% endif %}

    {# Label (masqué en mode collapsed via CSS) #}
    <span class="{{ sConfig.text }} flex-1 leading-tight transition-all duration-300 group-data-[collapsed=true]/sidebar:hidden">
        {{ label }}
    </span>

    {# Badge PRO (outil premium — utilisateur sans accès) : prioritaire sur le badge nouveauté. #}
    {% if proBadge %}
        <span class="group-data-[collapsed=true]/sidebar:hidden">
            {% include '_atoms/badge/pro-badge.html.twig' only %}
        </span>
    {% elseif isNew %}
        <span class="group-data-[collapsed=true]/sidebar:hidden">
            {% include '_atoms/badge/badge.html.twig' with {
                label: newLabel,
                variant: 'warning',
                customColor: (toolColorHex and not locked and not disabled) ? toolColorHex : null,
                size: 'xs'
            } only %}
        </span>
    {% endif %}

    {# Badge #}
    {% if badge %}
        <span class="group-data-[collapsed=true]/sidebar:hidden">
            {% include '_atoms/badge/badge.html.twig' with {
                label: badge,
                variant: badgeVariant ?? (active ? 'primary' : 'neutral'),
                size: badgeVariant == 'count' ? 'count' : 'xs'
            } only %}
        </span>
    {% endif %}

    {# Cadenas (verrouillé) — masqué pour un outil PRO : le badge PRO tient lieu d'indicateur. #}
    {% if locked and not proBadge %}
        <span class="flex-shrink-0 group-data-[collapsed=true]/sidebar:hidden">
            {% include '_atoms/icon/icon.html.twig' with {
                name: 'lock',
                size: 'sm',
                color: 'error'
            } only %}
        </span>
    {% endif %}

    {# Indicateur externe #}
    {% if external %}
        <span class="flex-shrink-0 opacity-50 transition-opacity duration-300 group-hover:opacity-70 group-data-[collapsed=true]/sidebar:hidden">
            {% include '_atoms/icon/icon.html.twig' with {
                name: 'exit',
                size: 'sm',
                color: 'gray'
            } only %}
        </span>
    {% endif %}

    {# Badge en mode collapsed (point) - affiché seulement en collapsed #}
    {% if badge or isNew %}
        <span class="absolute top-1 right-1 w-2 h-2 {{ isNew ? 'bg-warning' : 'bg-primary' }} rounded-full ring-2 ring-white hidden group-data-[collapsed=true]/sidebar:block"></span>
    {% endif %}

    {# Cadenas en mode collapsed (point rouge) - affiché seulement en collapsed #}
    {% if locked %}
        <span class="absolute top-1 right-1 w-2 h-2 bg-error rounded-full ring-2 ring-white hidden group-data-[collapsed=true]/sidebar:block"></span>
    {% endif %}

</a>