{% extends 'base.html.twig' %}

{% block title %}Dashboard - Bubul{% endblock %}

{% block meta_description %}Tableau de bord Bubul : statistiques, accès rapides aux outils IA et gestion de vos contenus pédagogiques.{% endblock %}

{% block body %}

<div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 min-h-[calc(100vh-120px)] relative overflow-hidden">

    {# ================================================================
       AMBIENT DECORATION - Orbes de couleur en arriere-plan
       ================================================================ #}
    <div class="pointer-events-none fixed top-[-200px] right-[-100px] w-[600px] h-[600px] rounded-full bg-[radial-gradient(circle,rgba(12,129,228,0.06)_0%,transparent_70%)] animate-float-blob-1 -z-1"></div>
    <div class="pointer-events-none fixed bottom-[-300px] left-[20%] w-[800px] h-[800px] rounded-full bg-[radial-gradient(circle,rgba(48,147,68,0.04)_0%,transparent_70%)] animate-float-blob-2 -z-1"></div>
    <div class="pointer-events-none fixed top-[50%] right-[10%] w-[400px] h-[400px] rounded-full bg-[radial-gradient(circle,rgba(139,92,246,0.03)_0%,transparent_70%)] animate-float-blob-3 -z-1"></div>

    {# ================================================================
       HEADER - Salutation contextuelle + user pill
       ================================================================ #}
    <header class="flex items-start justify-between gap-4 mb-10 animate-fade-up">
        <div>
            <p class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-2">Tableau de bord</p>
            <h1 class="text-2xl sm:text-4xl font-bold text-gray-900 font-secondary tracking-tight flex flex-wrap items-center gap-2 sm:gap-3">
                {{ greeting }}, <span class="bg-gradient-to-r from-primary to-primary-light bg-clip-text text-transparent">{{ user.firstName }}</span>
                <span class="text-2xl sm:text-3xl">👋</span>
            </h1>
            <p class="text-sm text-gray-600 mt-2">Retrouvez vos statistiques, explorez vos outils IA et suivez votre empreinte écologique en un coup d'œil.</p>
        </div>
        <div class="flex flex-shrink-0 items-center gap-3 mt-1">
            {% include '_molecules/daily-reward-card/daily-reward-card.html.twig' with {
                canClaim:    dailyStatus.canClaim,
                nextClaimAt: dailyStatus.nextClaimAt,
                claimUrl:    dailyClaimUrl
            } only %}
        </div>
    </header>

    {# ================================================================
       STATISTIQUES (5 stat-cards en ligne)
       ================================================================ #}
    {% set percentAvailable = stats.tokens_total > 0 ? (stats.tokens_remaining / stats.tokens_total * 100)|round : 0 %}

    <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4 animate-fade-up-1">

        <div data-token-counter class="relative group">
        {%- set currentPlanSlug = app.user.plan ? app.user.plan.slug : 'freemium' -%}
        {%- set nextPlanName = {'freemium': 'Pro', 'starter': 'Pro', 'pro': 'Expert'}[currentPlanSlug] ?? null -%}
        {% if not app.user.company and nextPlanName %}
            <a href="{{ path('app_upgrade') }}"
               style="background: linear-gradient(135deg, #0d1b3e 0%, #0C81E4 100%);"
               class="peer absolute top-3 right-3 z-10 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold text-white shadow-sm transition-all duration-[400ms] ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:-translate-y-1.5 hover:brightness-110">
                {% include '_atoms/icon/icon.html.twig' with { name: 'crown', size: 'xs', color: 'white' } only %}
                Passer en {{ nextPlanName }}
            </a>
        {% endif %}
        <div class="peer-hover:-translate-y-1.5 peer-hover:shadow-[0_16px_32px_rgba(12,129,228,0.12),0_0_0_1px_rgba(12,129,228,0.06)] transition-all duration-[400ms] ease-[cubic-bezier(0.16,1,0.3,1)]">
        {% include '_molecules/stat-card/stat-card.html.twig' with {
            icon: 'token',
            label: 'Tokens restants',
            value: stats.tokens_remaining|format_number(locale='fr'),
            detail: 'sur ' ~ stats.tokens_max_storable|format_number(locale='fr') ~ ' stockables',
            variant: 'primary',
            size: 'sm'
        } only %}
        </div>
        </div>

        {% include '_molecules/stat-card/stat-card.html.twig' with {
            icon: 'edit',
            label: 'Cours créés',
            value: stats.courses_created,
            detail: 'Déployés sur Moodle',
            variant: 'success',
            size: 'sm'
        } only %}

        {% include '_molecules/stat-card/stat-card.html.twig' with {
            icon: 'clock',
            label: 'Temps économisé',
            value: stats.time_saved_hours|number_format(0, ',', ' ') ~ 'h',
            detail: '≈ ' ~ (stats.time_saved_hours / 8)|round ~ ' jours',
            variant: 'cohorts',
            size: 'sm'
        } only %}

        {% include '_molecules/stat-card/stat-card.html.twig' with {
            icon: 'bolt',
            label: 'Énergie totale',
            value: stats.energy_wh|number_format(1, ',', ' ') ~ ' Wh',
            detail: (stats.energy_wh * 0.590)|number_format(1, ',', ' ') ~ 'g CO₂',
            variant: 'warning',
            size: 'sm'
        } only %}

    </section>

    {# ================================================================
       OUTILS (contenu éditorial en dur, stats dynamiques via toolStats)
       ================================================================ #}
    <div class="animate-fade-up-2">
        <div
            class="{{ not showToolStats ? 'tool-stats-hidden' : '' }}"
            data-controller="shared--tool-stats"
            data-shared--tool-stats-show-value="{{ showToolStats ? 'true' : 'false' }}"
        >
            {% embed '_molecules/section-divider/section-divider.html.twig' with {
                title: 'Vos <span class="italic text-primary">outils</span>',
                subtitle: totalToolTokens|format_number(locale='fr') ~ ' tokens ce mois',
                icon: 'widget-add',
                iconColor: 'primary'
            } %}
                {% block right %}
                    <div class="stats-toggle-hide-btn">
                        {% include '_atoms/button/button.html.twig' with {
                            label: 'Masquer les stats',
                            icon: 'eye-slash',
                            variant: 'ghost',
                            size: 'sm',
                            attr: {'data-action': 'click->shared--tool-stats#toggle'}
                        } only %}
                    </div>
                    <div class="stats-toggle-show-btn">
                        {% include '_atoms/button/button.html.twig' with {
                            label: 'Afficher les stats',
                            icon: 'eye',
                            variant: 'ghost',
                            size: 'sm',
                            attr: {'data-action': 'click->shared--tool-stats#toggle'}
                        } only %}
                    </div>
                {% endblock %}
            {% endembed %}

            {% set isAdminOrManager = is_granted('ROLE_ADMIN') or (is_granted('ROLE_COMPANY_MANAGER') and can_access_tool('sam')) %}

            <section class="grid grid-cols-1 lg:grid-cols-2 gap-4 items-stretch">

            {# --- Moodia --- #}
            {% include '_molecules/tool-card/tool-card.html.twig' with {
                name: 'Moodia',
                code: 'moodia',
                tagline: 'PDF → Cours Moodle',
                description: 'Transformez vos PDF en cours interactifs Moodle avec quiz, audio et images.',
                href: path('app_moodia'),
                stats: toolStats.moodia ?? {},
                weekUsage: (toolStats.moodia ?? {}).weekUsage ?? [],
                percentage: (toolStats.moodia ?? {}).percentage ?? 0,
                locked: (toolStats.moodia ?? {}).locked ?? false
            } only %}

            {# --- Serenia --- #}
            {% include '_molecules/tool-card/tool-card.html.twig' with {
                name: 'Serenia',
                code: 'serenia',
                tagline: 'Assistant IA conversationnel',
                description: 'Chatbot IA pédagogique avec analyse de fichiers et génération d\'images.',
                href: path('app_seren_ia'),
                stats: toolStats.serenia ?? {},
                weekUsage: (toolStats.serenia ?? {}).weekUsage ?? [],
                percentage: (toolStats.serenia ?? {}).percentage ?? 0,
                locked: (toolStats.serenia ?? {}).locked ?? false
            } only %}

            {# --- Slidia --- #}
            {% include '_molecules/tool-card/tool-card.html.twig' with {
                name: 'Slidia',
                code: 'slidia',
                tagline: 'Générateur de présentations',
                description: 'Créez des présentations PowerPoint professionnelles à partir de vos contenus.',
                href: path('app_slidia'),
                stats: toolStats.slidia ?? {},
                weekUsage: (toolStats.slidia ?? {}).weekUsage ?? [],
                percentage: (toolStats.slidia ?? {}).percentage ?? 0,
                locked: (toolStats.slidia ?? {}).locked ?? false
            } only %}

            {# --- Monalisia --- #}
            {% include '_molecules/tool-card/tool-card.html.twig' with {
                name: 'Monalisia',
                code: 'monalisia',
                tagline: 'Création d\'infographies',
                description: 'Générez des infographies pédagogiques à partir de vos documents.',
                href: path('app_monalisia'),
                stats: toolStats.monalisia ?? {},
                weekUsage: (toolStats.monalisia ?? {}).weekUsage ?? [],
                percentage: (toolStats.monalisia ?? {}).percentage ?? 0,
                locked: (toolStats.monalisia ?? {}).locked ?? false
            } only %}

            {# --- Pixia --- #}
            {% set pixiaStats = toolStats.pixia ?? {} %}
            {% include '_molecules/tool-card/tool-card.html.twig' with {
                name: 'Pixia',
                code: 'pixia',
                tagline: 'Générateur d\'images IA',
                description: 'Créez des illustrations pédagogiques professionnelles à partir de vos prompts ou documents.',
                href: path('app_pixia'),
                stats: pixiaStats,
                weekUsage: pixiaStats.weekUsage ?? [],
                percentage: pixiaStats.percentage ?? 0,
                locked: pixiaStats.locked ?? false,
                statColumns: [
                    { value: (pixiaStats.generated ?? 0)|format_number(locale='fr'), label: 'images générées' },
                    { value: (pixiaStats.tokens ?? 0)|format_number(locale='fr'),    label: 'tokens' },
                    { value: (pixiaStats.wh ?? 0)|number_format(1, ',', ' '),        label: 'Wh' }
                ]
            } only %}

            {# --- Castia --- #}
            {% include '_molecules/tool-card/tool-card.html.twig' with {
                name: 'Castia',
                code: 'castia',
                tagline: 'Création de podcasts',
                description: 'Transformez vos contenus en podcasts audio professionnels.',
                href: path('app_castia'),
                stats: toolStats.castia ?? {},
                weekUsage: (toolStats.castia ?? {}).weekUsage ?? [],
                percentage: (toolStats.castia ?? {}).percentage ?? 0,
                locked: (toolStats.castia ?? {}).locked ?? false
            } only %}

            {# --- Scormia --- #}
            {% include '_molecules/tool-card/tool-card.html.twig' with {
                name: 'Scormia',
                code: 'scormia',
                tagline: 'Modules SCORM interactifs',
                description: 'Créez des modules e-learning SCORM à votre image : pages, blocs interactifs, quiz notés — exportables dans Moodle.',
                href: path('app_scormia'),
                stats: toolStats.scormia ?? {},
                weekUsage: (toolStats.scormia ?? {}).weekUsage ?? [],
                percentage: (toolStats.scormia ?? {}).percentage ?? 0,
                locked: (toolStats.scormia ?? {}).locked ?? false,
                isNew: 'scormia' in new_tool_codes|default([]),
                newLabel: 'BETA',
                proBadge: scormia_needs_pro|default(false)
            } only %}

            {# --- Promptly --- #}
            {% set promptlyStats = toolStats.promptly ?? {} %}
            {% include '_molecules/tool-card/tool-card.html.twig' with {
                name: 'Promptly',
                code: 'promptly',
                tagline: 'Bibliothèque de prompts',
                description: 'Créez, partagez et réutilisez vos meilleurs prompts IA en un clic.',
                href: path('app_promptly'),
                stats: promptlyStats,
                weekUsage: promptlyStats.weekUsage ?? [],
                percentage: promptlyStats.percentage ?? 0,
                locked: promptlyStats.locked ?? false,
                isNew: 'promptly' in new_tool_codes|default([]),
                statColumns: [
                    { value: (promptlyStats.libraryTotal ?? 0)|format_number(locale='fr'), label: 'prompts bibliothèque' },
                    { value: (promptlyStats.myPrompts ?? 0)|format_number(locale='fr'),    label: 'mes prompts' },
                    { value: (promptlyStats.totalCopies ?? 0)|format_number(locale='fr'),  label: 'copies effectuées' },
                ]
            } only %}

            {# --- SAM (admin/manager uniquement) --- #}
            {% if isAdminOrManager %}
                {% include '_molecules/tool-card/tool-card.html.twig' with {
                    name: 'SAM',
                    code: 'sam',
                    tagline: 'Gestion étudiants Moodle',
                    description: 'Suivez vos apprenants, cohortes et cours depuis Moodle.',
                    href: path('app_sam_index'),
                    stats: toolStats.sam ?? {},
                    weekUsage: (toolStats.sam ?? {}).weekUsage ?? [],
                    percentage: (toolStats.sam ?? {}).percentage ?? 0,
                    locked: 'sam' not in accessible_tools,
                    statColumns: [
                        { value: samStats.users|format_number(locale='fr'), label: 'utilisateurs' },
                        { value: samStats.tokens|format_number(locale='fr'), label: 'tokens/mois' },
                        { value: samStats.courses|format_number(locale='fr'), label: 'cours dispo' }
                    ]
                } only %}
            {% endif %}

            {# --- Carte "Proposer un outil" : affichée seulement si nb d'outils impair --- #}
            {% set visibleToolCount = 7 + (isAdminOrManager ? 1 : 0) %}
            {% if visibleToolCount is odd %}
            <div class="bg-gray-50/80 rounded-2xl border border-gray-100 shadow-sm overflow-hidden group relative
                        flex flex-col h-full transition-all duration-300 ease-out
                        hover:-translate-y-0.5 hover:shadow-md hover:border-gray-200">

                {# Gradient décoratif gris #}
                <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-gray-400 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-gray-400 blur-xl"></div>

                {# ===== HEADER ZONE (miroir de tool-card) ===== #}
                <div class="p-6 pb-0 relative flex-1">
                    <div class="flex items-start gap-3.5 mb-4">
                        {# Icône grise #}
                        <div class="w-11 h-11 rounded-xl bg-gray-200/60 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: 'lightbulb-bolt',
                                size: 'lg',
                                color: 'gray'
                            } only %}
                        </div>

                        {# 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-400">Nouvel outil</span>
                                {# Pastille animée "en cours" #}
                                <span class="relative flex h-2 w-2">
                                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-gray-300 opacity-75"></span>
                                    <span class="relative inline-flex rounded-full h-2 w-2 bg-gray-300"></span>
                                </span>
                            </div>
                            <div class="text-xs font-medium text-gray-400 mb-1">Bientôt disponible</div>
                            <p class="text-[11px] text-gray-300 leading-relaxed line-clamp-2">
                                De nouveaux outils sont en préparation. Vous avez une idée ? Partagez-la !
                            </p>
                        </div>
                    </div>

                    {# ===== STATS ROW (placeholder gris) ===== #}
                    <div class="tool-stats-row flex divide-x divide-gray-100/80 border-t border-gray-100/60 -mx-6 px-6">
                        <div class="flex-1 py-3">
                            <div class="h-5 w-10 bg-gray-200/50 rounded mb-1"></div>
                            <div class="h-2.5 w-14 bg-gray-100 rounded"></div>
                        </div>
                        <div class="flex-1 py-3 pl-4">
                            <div class="h-5 w-10 bg-gray-200/50 rounded mb-1"></div>
                            <div class="h-2.5 w-12 bg-gray-100 rounded"></div>
                        </div>
                        <div class="flex-1 py-3 pl-4">
                            <div class="h-5 w-8 bg-gray-200/50 rounded mb-1"></div>
                            <div class="h-2.5 w-10 bg-gray-100 rounded"></div>
                        </div>
                    </div>
                </div>

                {# ===== FOOTER (CTA) ===== #}
                <div class="tool-card-footer flex items-center justify-between px-6 py-3 bg-gray-100/40 border-t border-gray-100/60 mt-auto">
                    <span class="text-[11px] text-gray-300 italic">Et pourquoi pas le vôtre ?</span>
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Proposer un outil',
                        icon: 'add',
                        variant: 'ghost-primary',
                        size: 'md',
                        href: path('app_support_new')
                    } only %}
                </div>
            </div>
            {% endif %}

        </section>
        </div>{# /data-controller="shared--tool-stats" #}
    </div>

    {# ================================================================
       EMPREINTE ÉCOLOGIQUE
    ================================================================ #}
    <div class="animate-fade-up-3">
        {% include '_molecules/section-divider/section-divider.html.twig' with {
            title: 'Empreinte <span class="italic text-success">écologique</span>',
            subtitle: 'Consommation globale',
            icon: 'earth',
            iconColor: 'success'
        } only %}

        {% include '_organisms/eco-footprint/eco-footprint.html.twig' with {
            totalWh: ecoData.totalWh,
            period: ecoData.period,
            weeklyData: ecoData.weeklyData,
            weekDelta: ecoData.weekDelta
        } only %}
    </div>

    {# ================================================================
       BADGES
       ================================================================ #}
    {% if dashboardBadges is defined and dashboardBadges|length > 0 %}
    <div class="animate-fade-up-5">
        {% embed '_molecules/section-divider/section-divider.html.twig' with {
            title: 'Mes <span class="italic text-warning">badges</span>',
            subtitle: 'Progression et récompenses',
            icon: 'crown',
            iconColor: 'warning'
        } %}
            {% block right %}
                <a href="{{ path('app_settings_badges') }}"
                   class="text-xs font-semibold text-gray-400 hover:text-primary border border-gray-200 hover:border-primary/20
                          px-4 py-2 rounded-xl transition-all duration-200">
                    Voir tout
                </a>
            {% endblock %}
        {% endembed %}

        <div class="flex flex-row flex-nowrap items-stretch gap-2 sm:gap-4 overflow-x-auto pb-2"
             style="scrollbar-width: thin;">
            {% for item in dashboardBadges %}
                {% if item.componentType == 'group-card' %}
                    {% include '_molecules/badge-group-card/badge-group-card.html.twig' with {
                        levels:        item.levels,
                        hexColorInner: item.hexColorInner,
                        hexColorOuter: item.hexColorOuter,
                        class:         'shrink-0 w-[155px] sm:w-[175px] h-auto',
                    } only %}
                {% endif %}
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {# ================================================================
       ACTIVITÉS RÉCENTES
       ================================================================ #}
    <div class="animate-fade-up-5">
        {% embed '_molecules/section-divider/section-divider.html.twig' with {
            title: 'Activités <span class="italic text-primary">récentes</span>',
            subtitle: recentActivity|length ~ ' actions ce mois',
            icon: 'clock',
            iconColor: 'primary'
        } %}
            {% block right %}
                <a href="{{ path('app_activity_history') }}"
                   class="text-xs font-semibold text-gray-400 hover:text-primary border border-gray-200 hover:border-primary/20
                          px-4 py-2 rounded-xl transition-all duration-200">
                    Voir tout
                </a>
            {% endblock %}
        {% endembed %}

        <div data-recent-activity>
        {% include '_organisms/dashboard-activity/dashboard-activity.html.twig' with {
            activities: recentActivity,
            limit: 5,
            viewMoreHref: path('app_activity_history')
        } only %}
        </div>
    </div>


</div>

{% endblock %}