{#
 # ============================================================================
 # MOLECULE: TOOL CARD
 # ============================================================================
 #
 # Carte d'outil pour le dashboard.
 # Affiche les statistiques, sparkline 30 jours, et gradient décoratif.
 # Chaque outil a sa propre couleur d'accent dérivée du code.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig
 # - _atoms/badge/badge.html.twig
 #
 # ============================================================================
 # PARAMETRES
 # ============================================================================
 #
 # | Paramètre     | Type    | Défaut     | Description                           |
 # |---------------|---------|------------|---------------------------------------|
 # | name          | string  | (requis)   | Nom de l'outil (Moodia, Serenia...)   |
 # | code          | string  | (requis)   | Code de l'outil (moodia, serenia...)  |
 # | tagline       | string  | null       | Sous-titre (ex: "PDF → Cours Moodle") |
 # | description   | string  | null       | Description de l'outil                |
 # | href          | string  | null       | Lien vers l'outil                     |
 # | isNew         | bool    | false      | Afficher badge nouveauté              |
 # | newLabel      | string  | 'NEW'      | Libellé du badge isNew (ex: BETA)     |
 # | proBadge      | bool    | false      | Affiche un badge « PRO » (prioritaire sur isNew) |
 # | stats         | object  | {}         | Statistiques de l'outil               |
 # |   - generated | int     | 0          | Nombre de contenus générés            |
 # |   - items     | string  | 'contenus' | Label des contenus                    |
 # |   - tokens    | int     | 0          | Tokens consommés                      |
 # |   - wh        | float   | 0          | Énergie en Wh                         |
 # |   - lastUsed  | string  | null       | Dernière utilisation                  |
 # | percentage    | int     | 0          | Pourcentage tokens vs total           |
 # | weekUsage     | array   | []         | Usage par jour (30 valeurs)           |
 # | locked        | bool    | false      | Outil verrouillé                      |
 # | class         | string  | ''         | Classes additionnelles                |
 #
 # ============================================================================
 # COULEURS PAR OUTIL
 # ============================================================================
 #
 # | Code       | Couleur   | Token CSS                |
 # |------------|-----------|--------------------------|
 # | moodia     | Bleu      | primary (#0C81E4)        |
 # | serenia    | Violet    | cohorts (#8b5cf6)        |
 # | slidia     | Orange    | warning (#F59E0B)        |
 # | monalisia  | Rose      | pink    (#EC4899)        |
 # | castia     | Vert      | success (#309344)        |
 # | sam        | Cyan      | info    (#0EA5E9)        |
 #
 # ============================================================================
 #}

{# @tailwind-safelist (Tailwind JIT scans raw source, so these literals ensure dynamic bg-{{ tc }} classes are generated)
   bg-primary bg-cohorts bg-warning bg-error bg-success bg-info bg-pink
   bg-primary/5 bg-cohorts/5 bg-warning/5 bg-error/5 bg-success/5 bg-info/5 bg-pink/5
   bg-primary/6 bg-cohorts/6 bg-warning/6 bg-error/6 bg-success/6 bg-info/6 bg-pink/6
   bg-primary/8 bg-cohorts/8 bg-warning/8 bg-error/8 bg-success/8 bg-info/8 bg-pink/8
   bg-primary/10 bg-cohorts/10 bg-warning/10 bg-error/10 bg-success/10 bg-info/10 bg-pink/10
   text-primary text-cohorts text-warning text-error text-success text-info text-pink
   text-primary/50 text-cohorts/50 text-warning/50 text-error/50 text-success/50 text-info/50 text-pink/50
   text-primary/70 text-cohorts/70 text-warning/70 text-error/70 text-success/70 text-info/70 text-pink/70
   border-primary/12 border-cohorts/12 border-warning/12 border-error/12 border-success/12 border-info/12 border-pink/12
#}

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

{% set name = name ?? 'Outil' %}
{% set code = code ?? 'moodia' %}
{% set tagline = tagline ?? null %}
{% set description = description ?? null %}
{% set href = href ?? null %}
{% set isNew = isNew ?? false %}
{% set newLabel = newLabel ?? 'NEW' %}
{% set proBadge = proBadge ?? false %}
{% set stats = stats ?? {} %}
{% set percentage = percentage ?? 0 %}
{% set weekUsage = weekUsage ?? [] %}
{% set locked = locked ?? false %}
{% set statColumns = statColumns ?? null %}
{% set class = class ?? '' %}

{% set generated = stats.generated ?? 0 %}
{% set items = stats.items ?? 'contenus' %}
{% set tokens = stats.tokens ?? 0 %}
{% set wh = stats.wh ?? 0 %}
{% set lastUsed = stats.lastUsed ?? null %}
{% set medianCost = stats.medianCost ?? 0 %}

{# ============================================================================
   COULEUR PAR OUTIL — hex DB via tool_color_details (fallback: token Tailwind)
   ============================================================================ #}

{% set tc = color ?? (tool_colors[code] ?? 'primary') %}
{% set td = tool_color_details[code] ?? {} %}
{% set hex = td.primary ?? null %}

{# Sparkline : vraies données, simulation, ou ligne plate si jamais utilisé #}
{% set hasRealData = weekUsage|length > 0 and weekUsage|filter(v => v > 0)|length > 0 %}
{% if hasRealData %}
    {% set sparkData = weekUsage %}
{% elseif lastUsed %}
    {% set sparkData = [1, 0, 2, 1, 3, 2, 1, 4, 2, 3, 1, 0, 2, 5, 3, 2, 1, 3, 4, 2, 1, 0, 3, 2, 4, 3, 1, 2, 3, 2] %}
{% else %}
    {% set sparkData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] %}
{% endif %}
{% set maxWeekVal = 1 %}
{% for val in sparkData %}
    {% if val > maxWeekVal %}{% set maxWeekVal = val %}{% endif %}
{% endfor %}

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

{% set isClickable = href and not locked %}
{% if isClickable %}
<a href="{{ href }}"
    data-tool="{{ code }}"
    class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden group relative
            flex flex-col h-full no-underline
            transition-all duration-300 ease-out cursor-pointer
            hover:-translate-y-0.5 hover:shadow-md hover:border-gray-200
            {{ class }}">
{% else %}
<div data-tool="{{ code }}"
    class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden group relative
            flex flex-col h-full
            transition-all duration-300 ease-out
            {{ class }}">
{% endif %}

    {# ===== OVERLAY VERROUILLÉ — incite à l'upgrade ===== #}
    {% if locked %}
    <a href="{{ path('app_upgrade') }}"
       class="absolute inset-0 z-10 rounded-2xl bg-gradient-to-br from-white/85 to-white/60 backdrop-blur-[1px] flex flex-col items-center justify-center gap-3 transition-all duration-300 hover:from-white/95 hover:to-white/80 cursor-pointer no-underline group/lock">
        <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center transition-transform duration-300 group-hover/lock:scale-110">
            {% include '_atoms/icon/icon.html.twig' with { name: 'lock', size: 'lg', color: 'primary' } only %}
        </div>
        <div class="text-center px-6">
            <div class="font-semibold text-gray-900 text-sm mb-1">Disponible avec Pro</div>
            <div class="text-xs text-gray-500">Débloquez {{ name }} dès maintenant</div>
        </div>
        <div class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold text-white bg-primary group-hover/lock:bg-primary/90 transition-colors shadow-sm">
            {% include '_atoms/icon/icon.html.twig' with { name: 'arrow-up', size: 'xs', color: 'white' } only %}
            Passer en pro
        </div>
    </a>
    {% endif %}

    {# ===== GRADIENT DÉCORATIF (radial, coin haut-droit) ===== #}
    {% if hex %}
        <div class="absolute -top-16 -right-16 w-56 h-56 pointer-events-none rounded-full opacity-[0.07] group-hover:opacity-[0.12] transition-opacity duration-500 blur-2xl"
             style="background: {{ hex }};"></div>
        <div class="absolute -top-6 -right-6 w-28 h-28 pointer-events-none rounded-full opacity-[0.04] group-hover:opacity-[0.08] transition-opacity duration-500 blur-xl"
             style="background: {{ hex }};"></div>
    {% else %}
        <div class="absolute -top-16 -right-16 w-56 h-56 pointer-events-none rounded-full
                    opacity-[0.05] group-hover:opacity-[0.09] transition-opacity duration-500
                    bg-{{ tc }} blur-2xl"></div>
        <div class="absolute -top-6 -right-6 w-28 h-28 pointer-events-none rounded-full
                    opacity-[0.03] group-hover:opacity-[0.06] transition-opacity duration-500
                    bg-{{ tc }} blur-xl"></div>
    {% endif %}

    {# ===== HEADER ZONE ===== #}
    <div class="p-6 pb-0 relative flex-1">
        <div class="flex items-start gap-3.5 mb-4">
            {# Icône outil #}
            {% if code == 'sam' %}
                <div class="w-11 h-11 rounded-xl flex items-center justify-center shrink-0
                            transition-transform duration-300 ease-out group-hover:scale-105 bg-cohorts/8">
                    {% include '_atoms/logo/logo.html.twig' with { variant: 'simple', size: 'xs', tint: 'cohorts' } only %}
                </div>
            {% elseif hex %}
                <div class="w-11 h-11 rounded-xl flex items-center justify-center shrink-0 transition-transform duration-300 ease-out group-hover:scale-105"
                     style="background: {{ hex }}18;">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'bubul-' ~ code, size: 'lg', color: tc, colorPrimary: hex, colorSecondary: td.secondary ?? null } only %}
                </div>
            {% else %}
                <div class="w-11 h-11 rounded-xl bg-{{ tc }}/8 flex items-center justify-center shrink-0
                            transition-transform duration-300 ease-out group-hover:scale-105">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'bubul-' ~ code, size: 'lg', color: tc } only %}
                </div>
            {% endif %}

            {# Contenu #}
            <div class="flex-1 min-w-0">
                <div class="flex items-center gap-2 mb-0.5">
                    <span class="font-secondary font-bold text-lg text-gray-900">{{ name }}</span>
                    {% if proBadge %}
                        {% include '_atoms/badge/pro-badge.html.twig' only %}
                    {% elseif isNew %}
                        {% include '_atoms/badge/badge.html.twig' with {
                            label: newLabel,
                            variant: hex ? null : 'success',
                            customColor: hex ?? null,
                            size: 'xs'
                        } only %}
                    {% endif %}
                </div>
                {% if tagline %}
                    <div class="text-xs font-medium mb-1" {% if hex %}style="color: {{ hex }};"{% else %}class="text-{{ tc }}"{% endif %}>{{ tagline }}</div>
                {% endif %}
                {% if description %}
                    <p class="text-[11px] text-gray-400 leading-relaxed line-clamp-2">{{ description }}</p>
                {% endif %}
            </div>

            {% if not locked %}
                {# Flèche décorative (visible au hover) — À LA COULEUR DE L'OUTIL.
                   L'atom icon N'ACCEPTE PAS de param « style » : la teinte hex (DB)
                   doit passer par colorPrimary/colorSecondary, comme l'icône
                   principale ci-dessus. Sans hex, on retombe sur le token « color: tc ». #}
                <div class="w-7 h-7 rounded-full bg-white border border-gray-200 flex items-center justify-center
                            shadow-sm opacity-0 translate-x-1
                            group-hover:opacity-100 group-hover:translate-x-0
                            transition-all duration-300 shrink-0 mt-1">
                    {% include '_atoms/icon/icon.html.twig' with {
                        name: 'chevron-right',
                        size: 'xs',
                        color: tc,
                        colorPrimary: hex ?? null,
                        colorSecondary: hex ?? null
                    } only %}
                </div>
            {% endif %}
        </div>

        {# ===== STATS ROW ===== #}
        {% set defaultColumns = [
            { value: generated|format_number(locale='fr'), label: items },
            { value: tokens|format_number(locale='fr'), label: 'tokens' },
            { value: wh|number_format(1, ',', ' '), label: 'Wh' }
        ] %}
        {% set columns = statColumns ?? defaultColumns %}

        <div class="tool-stats-row flex divide-x divide-gray-100/80 border-t border-gray-100/60 -mx-6 px-6">
            {% for col in columns %}
                <div class="flex-1 py-3 {{ not loop.first ? 'pl-4' : '' }}">
                    <div class="text-lg font-bold text-gray-900 tabular-nums font-secondary leading-none">{{ col.value }}</div>
                    <div class="text-[10px] text-gray-400 mt-1">{{ col.label }}</div>
                </div>
            {% endfor %}
        </div>
    </div>

    {# ===== FOOTER BAR ===== #}
    <div class="tool-card-footer flex items-center justify-between px-6 py-3 bg-gray-50/50 border-t border-gray-100/60 mt-auto">
        <div class="flex items-center gap-2.5">
            {# Mini sparkline area chart (30 jours) #}
            <div class="{{ weekUsage|length == 0 ? 'opacity-40' : '' }}" {% if hex %}style="color: {{ hex }};"{% else %}class="text-{{ tc }}"{% endif %}>
                {% set svgW = 60 %}
                {% set svgH = 20 %}
                {% set stepX = sparkData|length > 1 ? svgW / (sparkData|length - 1) : svgW %}
                <svg width="56" height="20" viewBox="0 0 {{ svgW }} {{ svgH }}" fill="none" preserveAspectRatio="none">
                    {% set linePoints = '' %}
                    {% set areaPoints = '0,' ~ svgH ~ ' ' %}
                    {% for val in sparkData %}
                        {% set x = (loop.index0 * stepX)|round(1) %}
                        {% set y = maxWeekVal > 0 ? (svgH - (val / maxWeekVal * (svgH - 4)))|round(1) : (svgH - 2) %}
                        {% set linePoints = linePoints ~ x ~ ',' ~ y ~ (not loop.last ? ' ' : '') %}
                        {% set areaPoints = areaPoints ~ x ~ ',' ~ y ~ ' ' %}
                    {% endfor %}
                    {% set areaPoints = areaPoints ~ svgW ~ ',' ~ svgH %}
                    <polygon points="{{ areaPoints }}" fill="currentColor" opacity="0.12"/>
                    <polyline points="{{ linePoints }}" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <span class="text-[10px] text-gray-400">30j</span>
        </div>

        <div class="flex items-center">
            {% if lastUsed %}
                {% set diffDays = (('now'|date('U') - lastUsed|date('U')) / 86400)|round(0, 'floor') %}
                <span class="text-[10px] text-gray-400">
                    {% if diffDays == 0 %}
                        Aujourd'hui
                    {% elseif diffDays == 1 %}
                        Hier
                    {% elseif diffDays < 7 %}
                        Il y a {{ diffDays }}j
                    {% elseif diffDays < 30 %}
                        Il y a {{ (diffDays / 7)|round }}sem
                    {% else %}
                        {{ lastUsed|format_datetime('short', 'none', locale='fr') }}
                    {% endif %}
                </span>
            {% else %}
                <span class="text-[10px] text-gray-300 italic">Jamais utilisé</span>
            {% endif %}
        </div>
    </div>
{% if isClickable %}</a>{% else %}</div>{% endif %}