{% load static %}

{# Composant Lucy Assist - Sidebar Chatbot #}
{# Ce template est autonome et inclut ses propres ressources CSS/JS #}

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

{# Script Lucy Assist - doit être chargé avant d'utiliser le composant Alpine #}
<script src="{% static 'lucy_assist/js/lucy-assist.js' %}"></script>

<div x-data="lucyAssist()" x-init="init()" @keydown.window="handleKeydown($event)">
    {# Bouton flottant - masqué quand le chat est ouvert #}
    <button
        x-show="!isOpen"
        @click="toggleSidebar()"
        class="fixed right-4 bottom-4 z-50 btn btn-circle btn-lg btn-primary shadow-lg hover:scale-110 transition-transform"
        :class="{ 'animate-pulse': hasNewMessage }"
        title="Ouvrir Lucy (Ctrl+K)"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
        </svg>
    </button>

    {# Sidebar #}
    <div
        x-show="isOpen"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="translate-x-full"
        x-transition:enter-end="translate-x-0"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="translate-x-0"
        x-transition:leave-end="translate-x-full"
        class="fixed right-0 top-0 h-full w-96 bg-base-100 shadow-2xl z-999 flex flex-col border-l border-base-300"
    >
        {# Header #}
        <div class="navbar bg-primary text-primary-content px-4">
            <div class="flex-1">
                <span class="text-lg font-bold">
                    Lucy Assist
                </span>
            </div>
            <div class="flex-none gap-1">
                {# Bouton Historique #}
                <button
                    @click="showHistory = !showHistory; showDoc = false"
                    class="btn btn-ghost btn-sm btn-circle"
                    :class="{ 'bg-primary-focus': showHistory }"
                    title="Historique des conversations"
                >
                    <i class="fa-solid fa-clock-rotate-left"></i>
                </button>

                {# Bouton Nouvelle conversation #}
                <button
                    @click="newConversation()"
                    class="btn btn-ghost btn-sm btn-circle"
                    title="Nouvelle conversation"
                >
                    <i class="fa-solid fa-plus"></i>
                </button>

                {# Bouton Documentation #}
                <button
                    @click="showDoc = !showDoc; showHistory = false"
                    class="btn btn-ghost btn-sm btn-circle"
                    :class="{ 'bg-primary-focus': showDoc }"
                    title="Documentation"
                >
                    <i class="fa-solid fa-book"></i>
                </button>

                {# Bouton Fermer #}
                <button
                    @click="closeSidebar()"
                    class="btn btn-ghost btn-sm btn-circle"
                    title="Fermer (Echap)"
                >
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
        </div>

        {# Indicateur de crédits #}
        <div class="px-4 py-2 bg-base-200 text-sm flex items-center justify-between">
            <span class="text-base-content/70">
                <i class="fa-solid fa-coins mr-1"></i>
                <span x-text="formatTokens(tokensDisponibles)"></span> crédits
            </span>
            <button
                x-show="tokensDisponibles < 100000"
                @click="showBuyCredits = true"
                class="btn btn-xs btn-warning"
            >
                <i class="fa-solid fa-cart-plus mr-1"></i>
                Acheter
            </button>
        </div>

        {# Contenu principal #}
        <div class="flex-1 overflow-hidden flex flex-col">
            {# Vue Historique #}
            <template x-if="showHistory">
                <div class="flex-1 overflow-y-auto p-4">
                    <h3 class="font-semibold mb-3">Historique des conversations</h3>
                    <template x-if="conversations.length === 0">
                        <p class="text-base-content/60 text-sm">Aucune conversation</p>
                    </template>
                    <div class="space-y-2">
                        <template x-for="conv in conversations" :key="conv.id">
                            <div
                                @click="loadConversation(conv.id)"
                                class="p-3 rounded-lg bg-base-200 hover:bg-base-300 cursor-pointer transition-colors"
                                :class="{ 'ring-2 ring-primary': currentConversationId === conv.id }"
                            >
                                <div class="font-medium text-sm truncate" x-text="conv.titre"></div>
                                <div class="text-xs text-base-content/60 mt-1">
                                    <span x-text="formatDate(conv.created_date)"></span>
                                    <span class="ml-2">
                                        <i class="fa-solid fa-coins"></i>
                                        <span x-text="conv.total_tokens"></span> tokens | <span x-text="formatTokenCost(conv.total_tokens)"></span>
                                    </span>
                                </div>
                                <button
                                    @click.stop="deleteConversation(conv.id)"
                                    class="btn btn-ghost btn-xs text-error mt-1"
                                >
                                    <i class="fa-solid fa-trash"></i>
                                </button>
                            </div>
                        </template>
                    </div>
                </div>
            </template>

            {# Vue Documentation #}
            <template x-if="showDoc">
                <div class="flex-1 overflow-y-auto p-4">
                    {% include "lucy_assist/partials/documentation_content.html" %}
                </div>
            </template>

            {# Vue Chat #}
            <template x-if="!showHistory && !showDoc">
                <div class="flex-1 flex flex-col overflow-hidden">
                    {# Zone de messages #}
                    <div
                        x-ref="messagesContainer"
                        class="flex-1 overflow-y-auto p-4 space-y-4"
                    >
                        {# Message de bienvenue / Suggestions #}
                        <template x-if="messages.length === 0">
                            <div class="text-center py-8">
                                <div class="text-4xl mb-4">
                                    <img class="mx-auto w-20" src="{% static 'lucy_assist/image/icon-lucy.png' %}" alt="Lucy">
                                </div>
                                <h3 class="font-semibold text-lg mb-2">Bonjour ! Je suis Lucy</h3>
                                <p class="text-base-content/70 text-sm mb-4">
                                    Comment puis-je vous aider aujourd'hui ?
                                </p>

                                {# Suggestions #}
                                <div class="space-y-2">
                                    <template x-for="suggestion in suggestions" :key="suggestion">
                                        <button
                                            @click="sendMessage(suggestion)"
                                            class="btn btn-sm btn-outline btn-block justify-start text-left"
                                        >
                                            <i class="fa-solid fa-lightbulb mr-2 text-warning"></i>
                                            <span x-text="suggestion" class="truncate"></span>
                                        </button>
                                    </template>
                                </div>
                            </div>
                        </template>

                        {# Messages #}
                        <template x-for="(msg, index) in messages" :key="msg.id || index">
                            <div
                                class="chat"
                                :class="msg.repondant === 'UTILISATEUR' ? 'chat-end' : 'chat-start'"
                            >
                                <div class="chat-image avatar">
                                    <div class="w-8 rounded-full flex items-center justify-center overflow-hidden">
                                        <template x-if="msg.repondant === 'UTILISATEUR'">
                                            {% if lucy_assist_config.avatar_url %}
                                                <img src="{{ lucy_assist_config.avatar_url }}" alt="Utilisateur" class="w-full h-full object-cover">
                                            {% else %}
                                                <i class="fa-solid fa-user" style="font-size: 0.875rem;"></i>
                                            {% endif %}
                                        </template>
                                        <template x-if="msg.repondant !== 'UTILISATEUR'">
                                            <img src="{% static 'lucy_assist/image/icon-lucy.png' %}" alt="Lucy" class="w-full h-full object-cover">
                                        </template>
                                    </div>
                                </div>
                                <div
                                    class="chat-bubble"
                                    :class="msg.repondant === 'UTILISATEUR' ? 'chat-bubble-primary' : 'chat-bubble-neutral'"
                                    x-html="msg.contenu ? formatMessage(msg.contenu) : '<span class=\'loading loading-dots loading-sm\'></span>'"
                                >
                                </div>
                                <div class="chat-footer opacity-50 text-xs">
                                    <span x-text="formatTime(msg.created_date)"></span>
                                </div>
                            </div>
                        </template>
                    </div>

                    {# Bouton Feedback - Lucy n'a pas compris #}
                    <template x-if="lucyDidNotUnderstand && messages.length > 0">
                        <div class="px-4 py-2 bg-info/10 border-t border-info/30">
                            <button
                                @click="openFeedback()"
                                class="btn btn-sm btn-info btn-outline w-full"
                            >
                                <i class="fa-solid fa-headset mr-2"></i>
                                Contacter le chef de projet Revolucy
                            </button>
                        </div>
                    </template>

                    {# Bouton Feedback - Erreur technique #}
                    <template x-if="hasError && !lucyDidNotUnderstand && messages.length > 0">
                        <div class="px-4 py-2 bg-warning/10 border-t border-warning/30">
                            <button
                                @click="openFeedback()"
                                class="btn btn-sm btn-warning btn-outline w-full"
                            >
                                <i class="fa-solid fa-comment-medical mr-2"></i>
                                Souhaites-tu que j'informe Revolucy ?
                            </button>
                        </div>
                    </template>

                    {# Zone de saisie #}
                    <div class="p-4 border-t border-base-300 bg-base-100">
                        <div class="flex gap-2 items-end">
                            <textarea
                                x-model="currentMessage"
                                x-ref="messageInput"
                                :disabled="isLoading"
                                @keydown.ctrl.enter.prevent="sendCurrentMessage()"
                                @keydown.meta.enter.prevent="sendCurrentMessage()"
                                placeholder="Tapez votre message..."
                                class="textarea textarea-bordered flex-1 textarea-sm min-h-[2.5rem] max-h-32 resize-none"
                                rows="1"
                                @input="$el.style.height = 'auto'; $el.style.height = Math.min($el.scrollHeight, 128) + 'px'"
                            ></textarea>
                            <button
                                type="button"
                                @click="sendCurrentMessage()"
                                :disabled="isLoading || !currentMessage.trim()"
                                class="btn btn-primary btn-sm"
                            >
                                <i class="fa-solid fa-paper-plane"></i>
                            </button>
                        </div>
                        <p class="text-xs text-base-content/50 mt-2 text-center">
                            Ctrl+Entrée pour envoyer
                        </p>
                    </div>
                </div>
            </template>
        </div>
    </div>

    {# Modal Achat de crédits #}
    <div
        x-show="showBuyCredits"
        class="modal modal-open"
        @keydown.escape="showBuyCredits = false"
    >
        <div class="modal-box">
            <h3 class="font-bold text-lg mb-4">
                <i class="fa-solid fa-cart-plus mr-2"></i>
                Acheter des crédits
            </h3>

            <div class="form-control mb-4">
                <label class="label">
                    <span class="label-text">Montant (EUR HT)</span>
                </label>
                <input
                    type="number"
                    x-model.number="buyAmount"
                    min="10"
                    step="10"
                    class="input input-bordered"
                />
            </div>

            <div class="bg-base-200 rounded-lg p-4 mb-4">
                <div class="flex justify-between mb-2">
                    <span>Tokens à recevoir</span>
                    <span class="font-bold" x-text="formatTokens(calculateTokens(buyAmount))"></span>
                </div>
                <div class="flex justify-between text-sm text-base-content/70">
                    <span>Conversations estimées</span>
                    <span x-text="Math.floor(calculateTokens(buyAmount) / 2000)"></span>
                </div>
            </div>

            <div class="alert alert-info text-sm mb-4">
                <i class="fa-solid fa-info-circle"></i>
                <span>10 EUR = 1 million de tokens = ~500 conversations</span>
            </div>

            <div class="modal-action">
                <button @click="showBuyCredits = false" class="btn btn-ghost">
                    Annuler
                </button>
                <button @click="buyCredits()" class="btn btn-primary" :disabled="buyAmount < 10">
                    <i class="fa-solid fa-credit-card mr-2"></i>
                    Acheter
                </button>
            </div>
        </div>
        <div class="modal-backdrop" @click="showBuyCredits = false"></div>
    </div>

    {# Modal Feedback #}
    <div
        x-show="showFeedback"
        class="modal modal-open"
        @keydown.escape="closeFeedback()"
    >
        <div class="modal-box">
            <h3 class="font-bold text-lg mb-4">
                <i class="fa-solid fa-comment-medical mr-2 text-warning"></i>
                Signaler un problème
            </h3>

            <div class="alert alert-info text-sm mb-4">
                <i class="fa-solid fa-info-circle"></i>
                <span>Votre conversation sera envoyée à l'équipe Revolucy pour analyse et amélioration de Lucy.</span>
            </div>

            <div class="form-control mb-4">
                <label class="label">
                    <span class="label-text">Description du problème (optionnel)</span>
                </label>
                <textarea
                    x-model="feedbackDescription"
                    class="textarea textarea-bordered h-24" style="width: 100%;margin-top: 10px;"
                    placeholder="Décrivez ce qui n'a pas fonctionné ou ce que vous attendiez..."
                ></textarea>
            </div>

            <div class="modal-action">
                <button @click="closeFeedback()" class="btn btn-ghost" :disabled="feedbackSending">
                    Annuler
                </button>
                <button
                    @click="sendFeedback()"
                    class="btn btn-warning"
                    :disabled="feedbackSending"
                >
                    <span x-show="!feedbackSending">
                        <i class="fa-solid fa-paper-plane mr-2"></i>
                        Envoyer le feedback
                    </span>
                    <span x-show="feedbackSending" class="loading loading-spinner loading-sm"></span>
                </button>
            </div>
        </div>
        <div class="modal-backdrop" @click="closeFeedback()"></div>
    </div>

    {# Guide interactif (premier lancement) #}
    <template x-if="showGuide">
        <div class="fixed inset-0 z-50 bg-black/50">
            <div
                x-show="guideStep === 1"
                class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-base-100 rounded-xl p-6 max-w-md shadow-2xl"
            >
                <h3 class="text-xl font-bold mb-4">
                    <i class="fa-solid fa-hand-wave text-warning mr-2"></i>
                    Bienvenue sur Lucy Assist !
                </h3>
                <p class="mb-4">
                    Je suis votre assistant intelligent. Je peux vous aider à :
                </p>
                <ul class="list-disc list-inside mb-4 space-y-1 text-sm">
                    <li>Naviguer dans l'application</li>
                    <li>Rechercher des informations</li>
                    <li>Créer et modifier des éléments</li>
                    <li>Comprendre les fonctionnalités</li>
                </ul>
                <div class="flex justify-end gap-2">
                    <button @click="skipGuide()" class="btn btn-ghost btn-sm">
                        Passer
                    </button>
                    <button @click="nextGuideStep()" class="btn btn-primary btn-sm">
                        Suivant
                    </button>
                </div>
            </div>

            <div
                x-show="guideStep === 2"
                class="absolute bottom-20 right-4 bg-base-100 rounded-xl p-4 max-w-xs shadow-2xl"
            >
                <div class="absolute -bottom-2 right-8 w-4 h-4 bg-base-100 transform rotate-45"></div>
                <p class="text-sm mb-3">
                    Cliquez sur ce bouton ou utilisez <kbd class="kbd kbd-sm">Ctrl+K</kbd> pour ouvrir Lucy Assist à tout moment.
                </p>
                <div class="flex justify-end">
                    <button @click="finishGuide()" class="btn btn-primary btn-sm">
                        Compris !
                    </button>
                </div>
            </div>
        </div>
    </template>
</div>
{% endif %}