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

{% block title %}Serenia - Assistant Pédagogique{% endblock %}


{% block body %}
<div
    class="seren-ia"
    data-controller="seren-ia--chat"
    data-seren-ia--chat-user-id-value="{{ app.user.id }}"
    data-seren-ia--chat-tokens-remaining-value="{{ tokenStats.remaining }}"
    data-seren-ia--chat-energy-consumption-wh-value="{{ tokenStats.energyConsumptionWh }}"
    data-seren-ia--chat-user-initials-value="{{ userInitials }}"
>
    <div class="seren-ia__container">
        {# Header #}
        <div class="seren-ia__header">
            <div class="seren-ia__header-content">
                <div class="seren-ia__title-row">
                    <div class="seren-ia__icon">
                        {% include "_components/icons/seren_ia.html.twig" %}
                    </div>
                    <h1 class="seren-ia__title">Serenia</h1>
                </div>
                <p class="seren-ia__subtitle">L'IA au service de votre créativité pédagogique</p>
            </div>
            <div class="seren-ia__header-stats">
                <div class="seren-ia__stat-item">
                    <div class="seren-ia__stat-icon seren-ia__stat-icon--tokens">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M2 17L12 22L22 17" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M2 12L12 17L22 12" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <div class="seren-ia__stat-content">
                        <span class="seren-ia__stat-value" data-seren-ia--chat-target="tokensDisplay">
                            {{ tokenStats.remaining|number_format(0, ',', ' ') }}
                        </span>
                        <span class="seren-ia__stat-label">tokens</span>
                    </div>
                </div>
                <div class="seren-ia__stat-item">
                    <div class="seren-ia__stat-icon seren-ia__stat-icon--energy">
                        {% include "_components/icons/battery.html.twig" %}
                    </div>
                    <div class="seren-ia__stat-content">
                        <span class="seren-ia__stat-value" data-seren-ia--chat-target="energyDisplay">
                            {{ tokenStats.energyConsumptionWh|number_format(4, ',', ' ') }}
                        </span>
                        <span class="seren-ia__stat-label">Wh</span>
                    </div>
                </div>
            </div>
        </div>

        {# Messages container #}
        <div class="seren-ia__messages" data-seren-ia--chat-target="messagesContainer">
            {# Message de bienvenue #}
            <div class="seren-ia__welcome">
                <div class="seren-ia__welcome-icon">
                    {% include "_components/icons/seren_ia.html.twig" %}
                </div>
                <h2 class="seren-ia__welcome-title">Bonjour {{ app.user.firstName }} 👋</h2>
                <p class="seren-ia__welcome-description">
                    Bienvenue sur <strong>Serenia</strong>, votre assistant IA dédié à la création de contenu pédagogique de qualité professionnelle.
                </p>

                {# Liste des capacités #}
                <div class="seren-ia__welcome-features">
                    <div class="seren-ia__welcome-feature">
                        <div class="seren-ia__welcome-feature-icon">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                                <polyline points="22 4 12 14.01 9 11.01"/>
                            </svg>
                        </div>
                        <span>Conception de cours, activités et évaluations personnalisées</span>
                    </div>
                    <div class="seren-ia__welcome-feature">
                        <div class="seren-ia__welcome-feature-icon">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                                <polyline points="22 4 12 14.01 9 11.01"/>
                            </svg>
                        </div>
                        <span>Analyse et extraction de contenu (PDF, Word, Excel, images)</span>
                    </div>
                    <div class="seren-ia__welcome-feature">
                        <div class="seren-ia__welcome-feature-icon">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                                <polyline points="22 4 12 14.01 9 11.01"/>
                            </svg>
                        </div>
                        <span>Création d'images et d'illustrations pédagogiques uniques</span>
                    </div>
                </div>

                {# Disclaimer simple et rassurant #}
                <div class="seren-ia__security">
                    <div class="seren-ia__security-icon">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                            <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                        </svg>
                    </div>
                    <div class="seren-ia__security-text">
                        <strong>Vos données sont protégées.</strong> Les conversations ne sont pas sauvegardées et ne servent pas à l'entraînement de modèles IA.
                    </div>
                </div>
            </div>
        </div>

        {# Input area #}
        <div class="seren-ia__input-wrapper">
            {# Fichiers uploadés #}
            <div
                class="seren-ia__files"
                data-seren-ia--chat-target="filesContainer"
                style="display: none;"
            ></div>

            {# Barre de saisie #}
            <div class="seren-ia__input-container">
                <button
                    type="button"
                    class="seren-ia__attach-btn"
                    data-action="click->seren-ia--chat#triggerFileUpload"
                    title="Joindre un fichier"
                >
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
                    </svg>
                </button>

                <textarea
                    class="seren-ia__input"
                    data-seren-ia--chat-target="messageInput"
                    data-action="keydown->seren-ia--chat#handleKeydown"
                    placeholder="Posez votre question pédagogique..."
                    rows="1"
                ></textarea>

                <button
                    type="button"
                    class="seren-ia__send-btn"
                    data-action="click->seren-ia--chat#sendMessage"
                    data-seren-ia--chat-target="sendButton"
                >
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="22" y1="2" x2="11" y2="13"/>
                        <polygon points="22 2 15 22 11 13 2 9 22 2"/>
                    </svg>
                </button>

                <input
                    type="file"
                    data-seren-ia--chat-target="fileInput"
                    data-action="change->seren-ia--chat#handleFileSelect"
                    style="display: none;"
                    accept="image/*,.pdf,.doc,.docx,.xls,.xlsx"
                    multiple
                />
            </div>

            {# Disclaimer tokens et erreurs #}
            <div class="seren-ia__footer-disclaimer">
                <span>L'IA peut faire des erreurs. Vérifiez les informations importantes. Chaque message consomme des tokens.</span>
            </div>
        </div>
    </div>

    {# Token notification template #}
    <div class="seren-ia__token-notification" data-seren-ia--chat-target="tokenNotification" style="display: none;">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10"/>
            <path d="M12 6v6l4 2"/>
        </svg>
        <span data-seren-ia--chat-target="tokenNotificationText"></span>
    </div>

    {# Logo du site pour les messages de l'assistant (caché) #}
    <div class="seren-ia__site-logo-template" data-seren-ia--chat-target="siteLogoTemplate" style="display: none;">
        {% include "_components/logos/logo.html.twig" %}
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
{% endblock %}