{% load static %}

{# Composant Lucy Assist - Panneau chatbot #}
{# 100% autonome : CSS, JS vanilla, police et icones embarquees, zero dependance externe #}
{# Les icones sont des emplacements data-ico remplis par lucy-assist.js #}

{% if lucy_assist_enabled %}
<link href="{% static 'lucy_assist/css/lucy-assist.css' %}" rel="stylesheet">

<div id="lucy-assist-root" class="lucy-root"
     style="--lucy-primary: {{ lucy_assist_config.theme.principale }}; --lucy-primary-content: {{ lucy_assist_config.theme.texte_principale }}; --lucy-secondary: {{ lucy_assist_config.theme.secondaire }};"
     data-lucy-icon="{% if lucy_assist_config.avatar_url %}{{ lucy_assist_config.avatar_url }}{% else %}{% static 'lucy_assist/image/icon-lucy.png' %}{% endif %}"
     data-loutre-ordinateur="{% static 'lucy_assist/image/mascotte/loutre-ordinateur.svg' %}"
     data-loutre-triste="{% static 'lucy_assist/image/mascotte/loutre-triste.svg' %}"
     data-utilisateur="{{ lucy_assist_config.utilisateur_nom }}"
     data-api-conversations="{% url 'lucy_assist:api-conversations' %}"
     data-prix-par-million="{{ lucy_assist_config.prix_par_million|stringformat:'s' }}"
     data-tokens-moyens="{{ lucy_assist_config.tokens_moyens_conversation }}">
    {# Token CSRF pour les appels API du chatbot (la page hote peut ne pas avoir de formulaire) #}
    {% csrf_token %}

    {# assist.bouton-flottant #}
    <button type="button" id="lucy-float-btn" class="lucy-fab"
            aria-label="Ouvrir Lucy Assist (Ctrl + K)" title="Lucy Assist (Ctrl + K)">
        <span class="lucy-fab-inner">
            <img src="{% static 'lucy_assist/image/mascotte/loutre-salut.svg' %}" alt="">
        </span>
    </button>

    {# Panneau #}
    <aside id="lucy-sidebar" class="lucy-panel" aria-label="Lucy Assist" hidden>
        <div class="lucy-panel-inner">

            {# assist.en-tete #}
            <header class="lucy-header">
                <span class="lucy-avatar lucy-avatar-md"><img data-lucy-avatar alt="Lucy"></span>
                <div class="lucy-header-titre">
                    <div class="lucy-header-nom">Lucy Assist</div>
                    {# assist.credits #}
                    <div id="lucy-credits" class="lucy-credits">
                        <span class="lucy-ico" data-ico="bolt" data-size="12"></span>
                        <span id="lucy-credits-court">…</span>
                    </div>
                </div>
                <div class="lucy-header-actions">
                    <button type="button" id="lucy-btn-expand" class="lucy-btn lucy-btn-ghost lucy-btn-icone lucy-btn-xs lucy-masque-mobile"
                            aria-label="Agrandir" data-tip="Agrandir">
                        <span class="lucy-ico" data-ico="agrandir"></span>
                    </button>
                    <button type="button" id="lucy-btn-history" class="lucy-btn lucy-btn-ghost lucy-btn-icone lucy-btn-xs"
                            aria-label="Historique des conversations" aria-pressed="false" data-tip="Historique">
                        <span class="lucy-ico" data-ico="clock"></span>
                    </button>
                    <button type="button" id="lucy-btn-new" class="lucy-btn lucy-btn-ghost lucy-btn-icone lucy-btn-xs"
                            aria-label="Nouvelle conversation" data-tip="Nouvelle conversation">
                        <span class="lucy-ico" data-ico="pencil-square"></span>
                    </button>
                    <button type="button" id="lucy-btn-doc" class="lucy-btn lucy-btn-ghost lucy-btn-icone lucy-btn-xs"
                            aria-label="Documentation" aria-pressed="false" data-tip="Documentation">
                        <span class="lucy-ico" data-ico="livre"></span>
                    </button>
                    <button type="button" id="lucy-btn-close" class="lucy-btn lucy-btn-ghost lucy-btn-icone lucy-btn-xs"
                            aria-label="Fermer le panneau" data-tip="Fermer (Échap)" data-tip-fin>
                        <span class="lucy-ico" data-ico="x-mark"></span>
                    </button>
                </div>
            </header>

            {# assist.credits : bandeau faible / epuise #}
            <div id="lucy-credits-alerte" class="lucy-credits-alerte" hidden>
                <span id="lucy-credits-alerte-texte"></span>
                <button type="button" id="lucy-btn-buy-credits" class="lucy-btn lucy-btn-secondary lucy-btn-xs">
                    <span class="lucy-ico" data-ico="credit-card" data-size="16"></span>
                    Acheter des crédits
                </button>
            </div>

            {# Vue : conversation #}
            <section id="lucy-view-chat" class="lucy-vue lucy-vue-chat">
                <div id="lucy-messages" class="lucy-fil" role="log" aria-live="polite" aria-label="Conversation avec Lucy">
                    <div class="lucy-fil-inner">

                        {# Accueil #}
                        <div id="lucy-welcome" class="lucy-accueil">
                            <div class="lucy-accueil-titre">
                                <img src="{% static 'lucy_assist/image/mascotte/loutre-aide.svg' %}" alt="" class="lucy-accueil-loutre">
                                <div class="lucy-accueil-bonjour">Bonjour</div>
                                <div class="lucy-accueil-question">Comment puis-je vous aider ?</div>
                            </div>

                            {# assist.decouverte #}
                            <div id="lucy-decouverte" class="lucy-decouverte" hidden>
                                <span class="lucy-pastille-ico"><span class="lucy-ico" data-ico="sparkles" data-size="18"></span></span>
                                <div class="lucy-decouverte-texte">
                                    <strong>Ce que Lucy peut faire pour vous</strong>
                                    <span>Répondre à vos questions sur l'application, créer des éléments à votre place et analyser les problèmes que vous signalez.</span>
                                    <button type="button" id="lucy-decouverte-guide" class="lucy-lien">Voir le guide</button>
                                </div>
                                <button type="button" id="lucy-decouverte-fermer" class="lucy-btn lucy-btn-ghost lucy-btn-icone lucy-btn-xs lucy-decouverte-fermer"
                                        aria-label="Masquer ce message">
                                    <span class="lucy-ico" data-ico="x-mark"></span>
                                </button>
                            </div>

                            <div class="lucy-suggestions-bloc">
                                <div class="lucy-surtitre">
                                    <span class="lucy-ico" data-ico="map-pin" data-size="12"></span>
                                    <span id="lucy-page-courante">Sur cette page</span>
                                </div>
                                <div id="lucy-suggestions" class="lucy-suggestions"></div>
                            </div>
                        </div>

                        <div id="lucy-liste-messages" class="lucy-liste-messages"></div>
                    </div>
                </div>

                {# Retour au dernier message #}
                <div id="lucy-aller-bas" class="lucy-aller-bas" hidden>
                    <button type="button" id="lucy-btn-aller-bas" class="lucy-btn lucy-btn-secondary lucy-btn-xs">
                        <span class="lucy-ico" data-ico="arrow-down" data-size="16"></span>
                        Dernier message
                    </button>
                </div>

                {# Barres « pas compris » / « erreur » #}
                <div id="lucy-feedback-contact" class="lucy-barre" hidden>
                    <button type="button" id="lucy-btn-feedback-contact" class="lucy-alerte lucy-alerte-info">
                        <span class="lucy-ico" data-ico="user" data-size="16"></span>
                        <span class="lucy-alerte-texte">Contacter le chef de projet Revolucy</span>
                        <span class="lucy-ico" data-ico="arrow-right" data-size="16"></span>
                    </button>
                </div>
                <div id="lucy-feedback-error" class="lucy-barre" hidden>
                    <button type="button" id="lucy-btn-feedback-error" class="lucy-alerte lucy-alerte-warning">
                        <span class="lucy-ico" data-ico="exclamation-triangle" data-size="16"></span>
                        <span class="lucy-alerte-texte">Souhaitez-vous que j'informe l'équipe Revolucy ?</span>
                        <span class="lucy-ico" data-ico="arrow-right" data-size="16"></span>
                    </button>
                </div>

                {# assist.saisie #}
                <div class="lucy-saisie">
                    <div class="lucy-saisie-inner">
                        <div class="lucy-composer">
                            <textarea id="lucy-input" class="lucy-input" rows="1"
                                      aria-label="Votre message" placeholder="Posez votre question…"></textarea>
                            <button type="button" id="lucy-btn-stop" class="lucy-btn lucy-btn-secondary lucy-btn-icone"
                                    aria-label="Arrêter la réponse" data-tip="Arrêter la réponse" data-tip-haut hidden>
                                <span class="lucy-ico" data-ico="stop" data-size="18"></span>
                            </button>
                            <button type="button" id="lucy-btn-send" class="lucy-btn lucy-btn-primary lucy-btn-icone"
                                    aria-label="Envoyer le message" disabled>
                                <span class="lucy-ico" data-ico="paper-airplane" data-size="18"></span>
                            </button>
                        </div>
                        <div class="lucy-saisie-aide">
                            <span id="lucy-aide-clavier"><strong id="lucy-raccourci">Ctrl + Entrée</strong> pour envoyer</span>
                            <span id="lucy-aide-sep" aria-hidden="true">·</span>
                            <span>Lucy peut se tromper</span>
                        </div>
                    </div>
                </div>
            </section>

            {# Vue : historique #}
            <section id="lucy-view-history" class="lucy-vue lucy-vue-historique" hidden>
                <div class="lucy-vue-entete">
                    <h2 class="lucy-vue-titre">Historique des conversations</h2>
                    <div class="lucy-champ-icone">
                        <span class="lucy-ico" data-ico="magnifying-glass" data-size="16"></span>
                        <input id="lucy-search-history" type="text" class="lucy-champ"
                               placeholder="Rechercher dans les conversations…" aria-label="Rechercher dans les conversations">
                    </div>
                </div>
                <div id="lucy-history-list" class="lucy-historique-liste"></div>
            </section>

            {# Vue : documentation #}
            <section id="lucy-view-doc" class="lucy-vue lucy-vue-doc" hidden>
                {% include "lucy_assist/partials/documentation_content.html" %}
            </section>
        </div>
    </aside>

    {# Modale d'achat #}
    <div id="lucy-modal-buy" class="lucy-voile" hidden>
        <div class="lucy-modale lucy-modale-sm" role="dialog" aria-modal="true" aria-labelledby="lucy-modal-buy-titre">
            <div class="lucy-modale-entete">
                <div id="lucy-modal-buy-titre" class="lucy-modale-titre">Acheter des crédits</div>
                <button type="button" class="lucy-btn lucy-btn-ghost lucy-btn-icone" data-fermer-modale aria-label="Fermer">
                    <span class="lucy-ico" data-ico="x-mark" data-size="18"></span>
                </button>
            </div>
            <div class="lucy-modale-corps">
                <div class="lucy-champ-groupe">
                    <label for="lucy-buy-amount" class="lucy-label">Montant (€ HT)</label>
                    <input id="lucy-buy-amount" type="number" value="10" min="10" step="10" class="lucy-champ">
                    <div class="lucy-aide">10 € minimum, par pas de 10 €. La facture vous est envoyée par e-mail.</div>
                </div>
                <div class="lucy-tuiles-2">
                    <div class="lucy-tuile-douce">
                        <span class="lucy-tuile-label">Tokens reçus</span>
                        <span id="lucy-buy-tokens" class="lucy-tuile-valeur">—</span>
                    </div>
                    <div class="lucy-tuile-douce">
                        <span class="lucy-tuile-label">Conversations estimées</span>
                        <span id="lucy-buy-convs" class="lucy-tuile-valeur">—</span>
                    </div>
                </div>
                <div class="lucy-modale-actions">
                    <button type="button" class="lucy-btn lucy-btn-cancel" data-fermer-modale>Annuler</button>
                    <button type="button" id="lucy-buy-confirm" class="lucy-btn lucy-btn-primary">
                        <span class="lucy-ico" data-ico="credit-card" data-size="16"></span>
                        Recevoir la facture
                    </button>
                </div>
            </div>
        </div>
    </div>

    {# Modale de signalement #}
    <div id="lucy-modal-feedback" class="lucy-voile" hidden>
        <div class="lucy-modale lucy-modale-md" role="dialog" aria-modal="true" aria-labelledby="lucy-modal-feedback-titre">
            <div class="lucy-modale-entete">
                <div id="lucy-modal-feedback-titre" class="lucy-modale-titre">Signaler un problème</div>
                <button type="button" class="lucy-btn lucy-btn-ghost lucy-btn-icone" data-fermer-modale aria-label="Fermer">
                    <span class="lucy-ico" data-ico="x-mark" data-size="18"></span>
                </button>
            </div>
            <div class="lucy-modale-corps">
                <div class="lucy-note">
                    <span class="lucy-ico" data-ico="information-circle" data-size="20"></span>
                    <div id="lucy-feedback-note">Votre conversation sera envoyée à l'équipe Revolucy pour analyse et amélioration de Lucy Assist.</div>
                </div>
                <div class="lucy-champ-groupe">
                    <label for="lucy-feedback-desc" class="lucy-label">Description du problème (facultatif)</label>
                    <textarea id="lucy-feedback-desc" class="lucy-champ lucy-champ-zone" rows="4"
                              placeholder="Décrivez ce qui n'a pas fonctionné ou ce que vous attendiez…"></textarea>
                </div>
                <div class="lucy-modale-actions">
                    <button type="button" class="lucy-btn lucy-btn-cancel" data-fermer-modale>Annuler</button>
                    <button type="button" id="lucy-feedback-confirm" class="lucy-btn lucy-btn-primary">
                        <span class="lucy-ico" data-ico="paper-airplane" data-size="16"></span>
                        Envoyer le signalement
                    </button>
                </div>
            </div>
        </div>
    </div>

    {# Confirmation de suppression #}
    <div id="lucy-modal-confirm" class="lucy-voile" hidden>
        <div class="lucy-modale lucy-confirm" role="alertdialog" aria-modal="true"
             aria-labelledby="lucy-confirm-titre" aria-describedby="lucy-confirm-message">
            <div id="lucy-confirm-titre" class="lucy-modale-titre">Supprimer cette conversation ?</div>
            <div id="lucy-confirm-message" class="lucy-confirm-message">Cette action est irréversible.</div>
            <div class="lucy-modale-actions lucy-confirm-actions">
                <button type="button" class="lucy-btn lucy-btn-cancel" data-fermer-modale>Annuler</button>
                <button type="button" id="lucy-confirm-ok" class="lucy-btn lucy-btn-danger">Supprimer</button>
            </div>
        </div>
    </div>

    {# Toasts #}
    <div id="lucy-toasts" class="lucy-toasts" aria-live="polite"></div>
</div>

<script src="{% static 'lucy_assist/js/lucy-assist.js' %}"></script>
{% endif %}