{% load static %}

{# Composant Lucy Assist - Sidebar Chatbot #}
{# 100% autonome : CSS, JS vanilla et icones SVG inline, zero dependance externe #}

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

<div id="lucy-assist-root">
    {# Bouton flottant #}
    <button id="lucy-float-btn" class="lucy-float-btn" title="Ouvrir Lucy (Ctrl+K)">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" 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 id="lucy-sidebar" class="lucy-sidebar hidden" style="display:none;">
        {# Header #}
        <div class="lucy-header">
            <span class="lucy-header-title">Lucy Assist</span>
            <div class="lucy-header-actions">
                <button id="lucy-btn-expand" class="lucy-header-btn" title="Agrandir/Reduire">
                    <svg class="lucy-icon-expand" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5"/></svg>
                </button>
                <button id="lucy-btn-history" class="lucy-header-btn" title="Historique">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </button>
                <button id="lucy-btn-new" class="lucy-header-btn" title="Nouvelle conversation">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
                </button>
                <button id="lucy-btn-doc" class="lucy-header-btn" title="Documentation">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
                </button>
                <button id="lucy-btn-close" class="lucy-header-btn" title="Fermer (Echap)">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>
        </div>

        {# Credits #}
        <div class="lucy-credits-bar">
            <span><span id="lucy-tokens">0</span> credits</span>
            <button id="lucy-btn-buy-credits" class="lucy-btn-warning" style="display:none;">🛒 Acheter</button>
        </div>

        {# Contenu principal #}
        <div class="lucy-content">
            {# Vue Historique #}
            <div id="lucy-view-history" class="lucy-history" style="display:none;">
                <h3>Historique des conversations</h3>
                <div id="lucy-history-list" class="lucy-history-list"></div>
            </div>

            {# Vue Documentation #}
            <div id="lucy-view-doc" class="lucy-doc" style="display:none;">
                {% include "lucy_assist/partials/documentation_content.html" %}
            </div>

            {# Vue Chat #}
            <div id="lucy-view-chat" class="lucy-chat">
                <div id="lucy-messages" class="lucy-messages"
                     data-avatar-url="{% if lucy_assist_config.avatar_url %}{{ lucy_assist_config.avatar_url }}{% endif %}"
                     data-lucy-icon="{% static 'lucy_assist/image/icon-lucy.png' %}">
                    {# Bienvenue #}
                    <div id="lucy-welcome" class="lucy-welcome">
                        <div class="lucy-welcome-icon">
                            <img src="{% static 'lucy_assist/image/icon-lucy.png' %}" alt="Lucy">
                        </div>
                        <h3>Bonjour ! Je suis Lucy</h3>
                        <p>Comment puis-je vous aider aujourd'hui ?</p>
                        <div id="lucy-suggestions" class="lucy-suggestions"></div>
                    </div>
                </div>

                {# Feedback bars #}
                <div id="lucy-feedback-contact" class="lucy-feedback-bar info" style="display:none;">
                    <button id="lucy-btn-feedback-contact" class="lucy-feedback-btn info">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
                        Contacter le chef de projet Revolucy
                    </button>
                </div>
                <div id="lucy-feedback-error" class="lucy-feedback-bar warning" style="display:none;">
                    <button id="lucy-btn-feedback-error" class="lucy-feedback-btn warning">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/></svg>
                        Souhaites-tu que j'informe Revolucy ?
                    </button>
                </div>

                {# Zone de saisie #}
                <div class="lucy-input-area">
                    <div class="lucy-input-wrapper">
                        <textarea id="lucy-input" placeholder="Tapez votre message..." class="lucy-input" rows="1"></textarea>
                        <button id="lucy-btn-send" class="lucy-send-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                        </button>
                    </div>
                    <p class="lucy-input-hint">Ctrl+Entree pour envoyer</p>
                </div>
            </div>
        </div>
    </div>

    {# Modal Achat de credits #}
    <div id="lucy-modal-buy" class="lucy-modal-overlay" style="display:none;">
        <div class="lucy-modal">
            <div class="lucy-modal-header">🛒 Acheter des credits</div>
            <div class="lucy-modal-body">
                <div class="lucy-form-group">
                    <label class="lucy-form-label">Montant (EUR HT)</label>
                    <input id="lucy-buy-amount" type="number" value="10" min="10" step="10" class="lucy-form-input"/>
                </div>
                <div class="lucy-stats-box">
                    <div class="lucy-stats-row">
                        <span class="lucy-stats-label">Tokens a recevoir</span>
                        <span id="lucy-buy-tokens" class="lucy-stats-value">1.0M</span>
                    </div>
                    <div class="lucy-stats-row">
                        <span class="lucy-stats-label">Conversations estimees</span>
                        <span id="lucy-buy-convs" class="lucy-stats-value">500</span>
                    </div>
                </div>
                <div class="lucy-info-box">ℹ️ <span>10 EUR = 1 million de tokens = ~500 conversations</span></div>
            </div>
            <div class="lucy-modal-footer">
                <button id="lucy-buy-cancel" class="lucy-btn lucy-btn-ghost">Annuler</button>
                <button id="lucy-buy-confirm" class="lucy-btn lucy-btn-primary">💳 Acheter</button>
            </div>
        </div>
    </div>

    {# Modal Feedback #}
    <div id="lucy-modal-feedback" class="lucy-modal-overlay" style="display:none;">
        <div class="lucy-modal">
            <div class="lucy-modal-header">⚠️ Signaler un probleme</div>
            <div class="lucy-modal-body">
                <div class="lucy-info-box">ℹ️ <span>Votre conversation sera envoyée à l'équipe Revolucy pour analyse et amélioration de Lucy Assist.</span></div>
                <div class="lucy-form-group">
                    <label class="lucy-form-label">Description du probleme (optionnel)</label>
                    <textarea id="lucy-feedback-desc" class="lucy-form-textarea" placeholder="Decrivez ce qui n'a pas fonctionne ou ce que vous attendiez..."></textarea>
                </div>
            </div>
            <div class="lucy-modal-footer">
                <button id="lucy-feedback-cancel" class="lucy-btn lucy-btn-ghost">Annuler</button>
                <button id="lucy-feedback-confirm" class="lucy-btn lucy-btn-warning-solid">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle;margin-right:4px"><path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                    Envoyer le feedback
                </button>
            </div>
        </div>
    </div>

</div>

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