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

{% block title %}Configuration Chatbot IA - {{ site.name }}{% endblock %}

{% block breadcrumb %}Paramètres <i class="fas fa-chevron-right"></i> Chatbot{% endblock %}

{% block body %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <h1><i class="fas fa-robot"></i> Configuration du Chatbot IA</h1>
            <p class="text-muted">Site : <strong>{{ site.name }}</strong></p>

            {% for message in app.flashes('success') %}
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fas fa-check-circle"></i> {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            {% endfor %}

            <div class="card">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#config" role="tab">
                                <i class="fas fa-cog"></i> Configuration
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#rag" role="tab">
                                <i class="fas fa-database"></i> Base de connaissances (RAG)
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#appearance" role="tab">
                                <i class="fas fa-palette"></i> Apparence
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="card-body">
                    <form method="POST" id="chatbot-settings-form">
                        <div class="tab-content">
                            {# Onglet Configuration #}
                            <div class="tab-pane fade show active" id="config" role="tabpanel">
                                <h4>Configuration Groq API</h4>
                                <p class="text-info">
                                    <i class="fas fa-info-circle"></i>
                                    <strong>Obtenez votre clé API Groq gratuite :</strong>
                                    <a href="https://console.groq.com" target="_blank">console.groq.com</a>
                                </p>

                                <div class="form-group">
                                    <label for="chatbot_enabled">
                                        <input type="checkbox" name="chatbot_enabled" id="chatbot_enabled" value="1"
                                               {% if settings.chatbotEnabled %}checked{% endif %}>
                                        Activer le chatbot
                                    </label>
                                </div>

                                <div class="form-group">
                                    <label for="groq_api_key">Clé API Groq <span class="text-danger">*</span></label>
                                    <input type="password" class="form-control" name="groq_api_key" id="groq_api_key"
                                           value="{{ settings.groqApiKey }}" placeholder="gsk_...">
                                    <small class="form-text text-muted">Votre clé API reste privée et sécurisée</small>
                                </div>

                                <div class="form-group">
                                    <label for="model">Modèle Groq</label>
                                    <select class="form-control" name="model" id="model">
                                        <option value="llama-3.1-8b-instant" {% if settings.model == 'llama-3.1-8b-instant' %}selected{% endif %}>
                                            Llama 3.1 8B Instant (Recommandé - Ultra-rapide)
                                        </option>
                                        <option value="llama-3.1-70b-versatile" {% if settings.model == 'llama-3.1-70b-versatile' %}selected{% endif %}>
                                            Llama 3.1 70B Versatile (Plus intelligent)
                                        </option>
                                        <option value="mixtral-8x7b-32768" {% if settings.model == 'mixtral-8x7b-32768' %}selected{% endif %}>
                                            Mixtral 8x7B (Bon équilibre)
                                        </option>
                                        <option value="gemma2-9b-it" {% if settings.model == 'gemma2-9b-it' %}selected{% endif %}>
                                            Gemma 2 9B (Gratuit)
                                        </option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="system_prompt">Instructions système (System Prompt)</label>
                                    <textarea class="form-control" name="system_prompt" id="system_prompt" rows="6"
                                              placeholder="Instructions pour personnaliser le comportement de l'IA...">{{ settings.systemPrompt }}</textarea>
                                    <small class="form-text text-muted">
                                        Personnalisez le comportement de l'IA. Laissez vide pour utiliser le prompt par défaut.
                                    </small>
                                </div>

                                <div class="form-group">
                                    <label for="max_messages_per_hour">Limite de messages par heure (par IP)</label>
                                    <input type="number" class="form-control" name="max_messages_per_hour" id="max_messages_per_hour"
                                           value="{{ settings.maxMessagesPerHour }}" min="1" max="100">
                                    <small class="form-text text-muted">Protection anti-spam</small>
                                </div>

                                <div class="form-group">
                                    <label>
                                        <input type="checkbox" name="save_conversations" value="1"
                                               {% if settings.saveConversations %}checked{% endif %}>
                                        Sauvegarder les conversations (analytics)
                                    </label>
                                </div>
                            </div>

                            {# Onglet RAG #}
                            <div class="tab-pane fade" id="rag" role="tabpanel">
                                <h4>Base de connaissances (RAG)</h4>
                                <p class="text-muted">Sélectionnez les sources de données que le chatbot peut utiliser pour répondre aux questions.</p>

                                <div class="form-group">
                                    <label for="rag_search_mode">Mode de recherche</label>
                                    <select class="form-control" name="rag_search_mode" id="rag_search_mode">
                                        <option value="faq_first" {% if settings.ragSearchMode == 'faq_first' %}selected{% endif %}>
                                            FAQ prioritaire (FAQ → RAG → Groq)
                                        </option>
                                        <option value="hybrid" {% if settings.ragSearchMode == 'hybrid' %}selected{% endif %}>
                                            Hybride (Recommandé)
                                        </option>
                                        <option value="rag_first" {% if settings.ragSearchMode == 'rag_first' %}selected{% endif %}>
                                            RAG prioritaire
                                        </option>
                                    </select>
                                </div>

                                <h5>Sources de données activées</h5>
                                <div class="form-group">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" name="rag_source_site_info" id="rag_source_site_info" value="1"
                                               {% if settings.ragEnabledSources.site_info %}checked{% endif %}>
                                        <label class="custom-control-label" for="rag_source_site_info">
                                            <i class="fas fa-info-circle"></i> Informations générales du site
                                        </label>
                                    </div>

                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" name="rag_source_pages" id="rag_source_pages" value="1"
                                               {% if settings.ragEnabledSources.pages %}checked{% endif %}>
                                        <label class="custom-control-label" for="rag_source_pages">
                                            <i class="fas fa-file-alt"></i> Pages du site
                                        </label>
                                    </div>

                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" name="rag_source_blog" id="rag_source_blog" value="1"
                                               {% if settings.ragEnabledSources.blog %}checked{% endif %}>
                                        <label class="custom-control-label" for="rag_source_blog">
                                            <i class="fas fa-blog"></i> Articles de blog
                                        </label>
                                    </div>

                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" name="rag_source_shop" id="rag_source_shop" value="1"
                                               {% if settings.ragEnabledSources.shop_products %}checked{% endif %}>
                                        <label class="custom-control-label" for="rag_source_shop">
                                            <i class="fas fa-shopping-cart"></i> Produits de la boutique
                                        </label>
                                    </div>

                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" name="rag_source_pricing" id="rag_source_pricing" value="1"
                                               {% if settings.ragEnabledSources.pricing %}checked{% endif %}>
                                        <label class="custom-control-label" for="rag_source_pricing">
                                            <i class="fas fa-dollar-sign"></i> Tarifs et services
                                        </label>
                                    </div>
                                </div>

                                <hr>

                                <h5>Indexation</h5>
                                <p class="text-muted">Reconstruisez l'index de connaissances après avoir modifié le contenu de votre site.</p>
                                <button type="button" class="btn btn-primary" id="rebuild-index-btn">
                                    <i class="fas fa-sync"></i> Réindexer maintenant
                                </button>
                                <div id="index-result" class="mt-3"></div>
                            </div>

                            {# Onglet Apparence #}
                            <div class="tab-pane fade" id="appearance" role="tabpanel">
                                <h4>Personnalisation de l'interface</h4>

                                <div class="form-group">
                                    <label for="chat_title">Titre du chat</label>
                                    <input type="text" class="form-control" name="chat_title" id="chat_title"
                                           value="{{ settings.chatTitle }}" placeholder="Assistant virtuel">
                                </div>

                                <div class="form-group">
                                    <label for="welcome_message">Message de bienvenue</label>
                                    <textarea class="form-control" name="welcome_message" id="welcome_message" rows="3">{{ settings.welcomeMessage }}</textarea>
                                </div>

                                <div class="form-group">
                                    <label for="placeholder">Texte placeholder</label>
                                    <input type="text" class="form-control" name="placeholder" id="placeholder"
                                           value="{{ settings.placeholder }}" placeholder="Posez votre question...">
                                </div>

                                <div class="form-group">
                                    <label for="primary_color">Couleur principale</label>
                                    <input type="color" class="form-control" name="primary_color" id="primary_color"
                                           value="{{ settings.primaryColor ?? site.colorTheme }}">
                                    <small class="form-text text-muted">Laissez vide pour utiliser la couleur du site ({{ site.colorTheme }})</small>
                                </div>

                                <div class="form-group">
                                    <label for="position">Position du bouton</label>
                                    <select class="form-control" name="position" id="position">
                                        <option value="bottom-right" {% if settings.position == 'bottom-right' %}selected{% endif %}>Bas droite</option>
                                        <option value="bottom-left" {% if settings.position == 'bottom-left' %}selected{% endif %}>Bas gauche</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label>
                                        <input type="checkbox" name="show_branding" value="1"
                                               {% if settings.showBranding %}checked{% endif %}>
                                        Afficher "Powered by Groq"
                                    </label>
                                </div>
                            </div>
                        </div>

                        <hr>

                        <div class="text-right">
                            <button type="submit" class="btn btn-success">
                                <i class="fas fa-save"></i> Enregistrer la configuration
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('rebuild-index-btn').addEventListener('click', function() {
    const btn = this;
    const resultDiv = document.getElementById('index-result');

    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Indexation en cours...';
    resultDiv.innerHTML = '';

    fetch('{{ path('admin_chatbot_rebuild_index', {siteId: site.id}) }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            resultDiv.innerHTML = `<div class="alert alert-success"><i class="fas fa-check"></i> ${data.message}</div>`;
        } else {
            resultDiv.innerHTML = `<div class="alert alert-danger"><i class="fas fa-times"></i> ${data.error || 'Erreur inconnue'}</div>`;
        }
    })
    .catch(error => {
        resultDiv.innerHTML = `<div class="alert alert-danger"><i class="fas fa-times"></i> Erreur : ${error.message}</div>`;
    })
    .finally(() => {
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-sync"></i> Réindexer maintenant';
    });
});
</script>

{% endblock %}