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

{% block title %}Moteur IA{% endblock %}

{% block breadcrumb %}Super Administration <i class="fas fa-chevron-right"></i> Moteur IA{% endblock %}

{% block body %}
<div class="container-fluid px-4">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="h3 mb-2">
                <i class="fas fa-microchip me-2 text-primary"></i>
                Moteur IA
            </h1>
            <p class="text-muted mb-0">
                Choisissez le modèle de langage utilisé par le générateur de sites, le chat IA et la génération de packs.
                Ces réglages sont globaux et s'appliquent immédiatement à toute la plateforme.
            </p>
        </div>
    </div>

    {# ─── État des fournisseurs ─── #}
    <div class="row mb-4 g-3">
        <div class="col-md-4">
            <div class="card shadow-sm h-100 {{ ollamaConfigured ? 'border-success' : 'border-warning' }}">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="mb-1">Ollama Cloud</h6>
                            <div class="small text-muted">Moteur principal recommandé</div>
                        </div>
                        <span class="badge bg-{{ ollamaConfigured ? 'success' : 'warning text-dark' }}">
                            {{ ollamaConfigured ? 'Configuré' : 'Clé manquante' }}
                        </span>
                    </div>
                    {% if not ollamaConfigured %}
                        <div class="small mt-2 mb-0">
                            Créez une clé sur <code>ollama.com/settings/keys</code>, puis saisissez-la ci-dessous
                            ou définissez <code>OLLAMA_API_KEY</code> dans <code>.env.local</code>.
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card shadow-sm h-100 {{ geminiConfigured ? 'border-success' : '' }}">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="mb-1">Google Gemini</h6>
                            <div class="small text-muted">Repli automatique</div>
                        </div>
                        <span class="badge bg-{{ geminiConfigured ? 'success' : 'secondary' }}">
                            {{ geminiConfigured ? 'Configuré' : 'Non configuré' }}
                        </span>
                    </div>
                    {% if not geminiConfigured %}
                        <div class="small mt-2 mb-0 text-muted">Variable <code>GEMINI_API_KEY</code>.</div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card shadow-sm h-100 {{ claudeCodeConfigured ? 'border-success' : '' }}">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="mb-1">Claude Code (CLI)</h6>
                            <div class="small text-muted">Binaire local, dev uniquement</div>
                        </div>
                        <span class="badge bg-{{ claudeCodeConfigured ? 'success' : 'secondary' }}">
                            {{ claudeCodeConfigured ? 'Détecté' : 'Absent' }}
                        </span>
                    </div>
                    <div class="small mt-2 mb-0 text-muted">Ne fonctionne pas sur un serveur mutualisé.</div>
                </div>
            </div>
        </div>
    </div>

    <form method="post" action="{{ path('super_admin_llm_settings') }}">
        <input type="hidden" name="_token" value="{{ csrf_token('llm_settings') }}">

        <div class="row g-4">
            <div class="col-lg-8">
                {# ─── Fournisseur & modèle ─── #}
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0"><i class="fas fa-plug me-2"></i>Fournisseur et modèle</h5>
                    </div>
                    <div class="card-body">
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="provider" class="form-label fw-bold">Moteur principal</label>
                                <select class="form-select" id="provider" name="provider">
                                    {% for value, label in providers %}
                                        <option value="{{ value }}" {{ settings.provider == value ? 'selected' : '' }}>{{ label }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="fallbackProvider" class="form-label fw-bold">Moteur de repli</label>
                                <select class="form-select" id="fallbackProvider" name="fallbackProvider">
                                    <option value="">Aucun</option>
                                    {% for value, label in providers %}
                                        <option value="{{ value }}" {{ settings.fallbackProvider == value ? 'selected' : '' }}>{{ label }}</option>
                                    {% endfor %}
                                </select>
                                <div class="form-text">Utilisé automatiquement si le moteur principal échoue.</div>
                            </div>
                        </div>

                        {# Modèle : une vraie liste déroulante ET la saisie libre.
                           Un <datalist> ne suffisait pas : sur un champ déjà rempli,
                           il n'affiche rien tant qu'on ne tape pas, et n'a aucune
                           flèche — la liste existait mais restait invisible.
                           Le <select> ne fait que recopier sa valeur dans le champ
                           texte, seul porteur du name="model" : le formulaire
                           s'enregistre à l'identique. #}
                        <div class="mb-4">
                            <label for="modelChoice" class="form-label fw-bold">
                                Modèle Ollama <span class="text-danger">*</span>
                            </label>
                            <div class="input-group">
                                <select class="form-select" id="modelChoice"
                                        aria-describedby="modelHelp">
                                    {% if modelGroups.account is not empty %}
                                        <optgroup label="Modèles de votre compte Ollama">
                                            {% for m in modelGroups.account %}
                                                <option value="{{ m }}"{{ m == settings.model ? ' selected' : '' }}>{{ m }}</option>
                                            {% endfor %}
                                        </optgroup>
                                    {% endif %}
                                    {% if modelGroups.suggested is not empty %}
                                        <optgroup label="Suggestions (non vérifiées sur votre compte)">
                                            {% for m in modelGroups.suggested %}
                                                <option value="{{ m }}"{{ m == settings.model ? ' selected' : '' }}>{{ m }}</option>
                                            {% endfor %}
                                        </optgroup>
                                    {% endif %}
                                    <option value="__custom__">✏️ Autre — saisir l'identifiant…</option>
                                </select>
                                <button class="btn btn-outline-secondary" type="button" id="refreshModels"
                                        title="Interroger l'API Ollama pour lister les modèles de votre compte">
                                    <i class="fas fa-rotate me-1"></i>Actualiser
                                </button>
                            </div>
                            {# Toujours présent (c'est lui qui est envoyé), simplement masqué
                               tant que la valeur vient de la liste. #}
                            <input type="text" class="form-control mt-2 d-none" id="model" name="model"
                                   value="{{ settings.model }}" required
                                   placeholder="ex. glm-5.2, qwen3.5:122b, un modèle auto-hébergé…"
                                   aria-label="Identifiant du modèle">
                            <div class="form-text" id="modelHelp">
                                {% if modelGroups.account is empty %}
                                    <span class="text-warning">Les modèles de votre compte n'ont pas pu être listés (clé API absente ou API muette) : seules des suggestions sont proposées.</span>
                                {% endif %}
                                Choisissez dans la liste, ou « Autre » pour saisir n'importe quel identifiant de modèle.
                            </div>
                        </div>

                        <div class="mb-4">
                            <label for="baseUrl" class="form-label fw-bold">URL de l'API</label>
                            <input type="url" class="form-control" id="baseUrl" name="baseUrl" value="{{ settings.baseUrl }}">
                            <div class="form-text">
                                <code>https://ollama.com</code> pour Ollama Cloud, ou l'adresse d'une instance Ollama auto-hébergée.
                            </div>
                        </div>

                        <div class="mb-0">
                            <label for="apiKey" class="form-label fw-bold">Clé API Ollama</label>
                            <input type="password" class="form-control" id="apiKey" name="apiKey"
                                   autocomplete="new-password"
                                   placeholder="{{ settings.apiKey ? 'Clé enregistrée en base — laisser vide pour la conserver' : 'Laisser vide pour utiliser OLLAMA_API_KEY' }}">
                            <div class="form-text">
                                {% if settings.apiKey %}
                                    Une clé est enregistrée en base et prime sur la variable d'environnement.
                                    Saisissez <code>__CLEAR__</code> pour l'effacer et repasser sur <code>OLLAMA_API_KEY</code>.
                                {% else %}
                                    Aucune clé en base : la variable d'environnement <code>OLLAMA_API_KEY</code> est utilisée.
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                {# ─── Paramètres de génération ─── #}
                <div class="card shadow-sm mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-sliders me-2"></i>Paramètres de génération</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3 mb-3">
                            <div class="col-md-3">
                                <label for="temperature" class="form-label fw-bold">Température</label>
                                <input type="number" class="form-control" id="temperature" name="temperature"
                                       value="{{ settings.temperature }}" min="0" max="2" step="0.1">
                                <div class="form-text">0 = factuel, 1 = créatif.</div>
                            </div>
                            <div class="col-md-3">
                                <label for="maxTokens" class="form-label fw-bold">Tokens max</label>
                                <input type="number" class="form-control" id="maxTokens" name="maxTokens"
                                       value="{{ settings.maxTokens }}" min="512" step="512">
                                <div class="form-text">Un site complet demande 12 000 à 32 000.</div>
                            </div>
                            <div class="col-md-3">
                                <label for="timeout" class="form-label fw-bold">Timeout (s)</label>
                                <input type="number" class="form-control" id="timeout" name="timeout"
                                       value="{{ settings.timeout }}" min="30" max="900" step="10">
                            </div>
                            <div class="col-md-3">
                                <label for="maxRetries" class="form-label fw-bold">Tentatives</label>
                                <input type="number" class="form-control" id="maxRetries" name="maxRetries"
                                       value="{{ settings.maxRetries }}" min="1" max="10">
                            </div>
                        </div>

                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" id="jsonMode" name="jsonMode" value="1"
                                   {{ settings.jsonMode ? 'checked' : '' }}>
                            <label class="form-check-label" for="jsonMode">
                                <strong>Mode JSON strict</strong>
                                <span class="text-muted d-block small">
                                    Force le modèle à ne produire que du JSON. À désactiver si le modèle choisi le supporte mal.
                                </span>
                            </label>
                        </div>

                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="thinkingEnabled" name="thinkingEnabled" value="1"
                                   {{ settings.thinkingEnabled ? 'checked' : '' }}>
                            <label class="form-check-label" for="thinkingEnabled">
                                <strong>Raisonnement du modèle</strong>
                                <span class="text-muted d-block small">
                                    Concerne les modèles à raisonnement (GLM, DeepSeek, Kimi…). Chez Ollama, les tokens de
                                    raisonnement sont décomptés du budget « Tokens max » : sur un site complet, l'activer
                                    peut faire revenir la réponse tronquée. À laisser désactivé sauf besoin précis.
                                </span>
                            </label>
                        </div>
                    </div>
                </div>

                {# ─── Recherche web ─── #}
                <div class="card shadow-sm mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-magnifying-glass me-2"></i>Recherche web</h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted small">
                            Avant de générer un site à partir d'un nom d'entreprise, Izibrick interroge l'API de recherche
                            web d'Ollama et injecte les résultats (adresse, horaires, avis, services) dans le prompt.
                            Sans elle, le site est généré uniquement à partir du nom saisi.
                        </p>

                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" id="webSearchEnabled" name="webSearchEnabled" value="1"
                                   {{ settings.webSearchEnabled ? 'checked' : '' }}>
                            <label class="form-check-label" for="webSearchEnabled">
                                <strong>Activer la recherche web</strong>
                            </label>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <label for="webSearchMaxResults" class="form-label fw-bold">Résultats par requête</label>
                                <input type="number" class="form-control" id="webSearchMaxResults" name="webSearchMaxResults"
                                       value="{{ settings.webSearchMaxResults }}" min="1" max="20">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-flex gap-2 mb-4">
                    <button type="submit" class="btn btn-primary btn-lg">
                        <i class="fas fa-save me-2"></i>Enregistrer
                    </button>
                    <a href="{{ path('super_admin_create_site') }}" class="btn btn-outline-secondary btn-lg">
                        <i class="fas fa-magic me-2"></i>Créer un site
                    </a>
                </div>
            </div>

            {# ─── Colonne latérale ─── #}
            <div class="col-lg-4">
                <div class="card shadow-sm mb-4">
                    <div class="card-header">
                        <h6 class="mb-0"><i class="fas fa-vial me-2"></i>Tests</h6>
                    </div>
                    <div class="card-body">
                        <button type="button" class="btn btn-outline-primary w-100 mb-2" id="testConnection">
                            <i class="fas fa-bolt me-2"></i>Tester la génération
                        </button>
                        <button type="button" class="btn btn-outline-primary w-100" id="testSearch">
                            <i class="fas fa-globe me-2"></i>Tester la recherche web
                        </button>

                        <div id="testResult" class="mt-3 d-none"></div>

                        <p class="text-muted small mb-0 mt-3">
                            Les tests utilisent la configuration <strong>enregistrée</strong>.
                            Pensez à enregistrer avant de tester une modification.
                        </p>
                    </div>
                </div>

                <div class="card shadow-sm mb-4">
                    <div class="card-header">
                        <h6 class="mb-0"><i class="fas fa-cubes me-2"></i>Catalogue de widgets</h6>
                    </div>
                    <div class="card-body">
                        <p class="mb-2">
                            <span class="display-6 fw-bold text-primary">{{ widgetCount }}</span>
                            <span class="text-muted">widgets exploitables par l'IA</span>
                        </p>
                        <p class="text-muted small mb-2">
                            Le générateur reçoit la liste complète, avec pour chaque widget son usage et son schéma
                            de configuration réel. Ajouter un widget au catalogue le rend immédiatement disponible.
                        </p>
                        <button class="btn btn-sm btn-outline-secondary w-100" type="button"
                                data-bs-toggle="collapse" data-bs-target="#widgetList">
                            Voir la liste
                        </button>
                        <div class="collapse mt-2" id="widgetList">
                            <ul class="list-unstyled small mb-0" style="max-height:320px;overflow-y:auto;">
                                {% for type, widget in widgets %}
                                    <li class="mb-1">
                                        <code>{{ type }}</code>
                                        <span class="text-muted">— {{ widget.label }}</span>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>

                {% if settings.updatedAt %}
                <div class="card shadow-sm">
                    <div class="card-body small text-muted">
                        Dernière modification le {{ settings.updatedAt|date('d/m/Y à H:i') }}
                        {%- if settings.updatedBy %} par {{ settings.updatedBy }}{% endif %}.
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </form>
</div>

<script>
(function () {
    const testToken = '{{ csrf_token('llm_settings_test') }}';
    const resultBox = document.getElementById('testResult');

    function show(type, html) {
        resultBox.className = 'mt-3 alert alert-' + type;
        resultBox.innerHTML = html;
    }

    function busy(button, label) {
        button.disabled = true;
        button.dataset.originalHtml = button.innerHTML;
        button.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>' + label;
    }

    function idle(button) {
        button.disabled = false;
        button.innerHTML = button.dataset.originalHtml;
    }

    function escapeHtml(value) {
        const div = document.createElement('div');
        div.textContent = value == null ? '' : String(value);
        return div.innerHTML;
    }

    // ── Modèle : la liste pilote le champ texte, qui reste le seul envoyé ──
    const modelInput = document.getElementById('model');
    const modelChoice = document.getElementById('modelChoice');
    const CUSTOM = '__custom__';

    /** Aligne la liste sur la valeur du champ ; bascule en saisie libre si elle n'y est pas. */
    function syncModelChoice() {
        const value = modelInput.value.trim();
        const known = [...modelChoice.options].some(o => o.value === value && o.value !== CUSTOM);

        modelChoice.value = known ? value : CUSTOM;
        modelInput.classList.toggle('d-none', known);
    }

    modelChoice.addEventListener('change', function () {
        if (this.value === CUSTOM) {
            modelInput.classList.remove('d-none');
            modelInput.focus();
            modelInput.select();
            return;
        }

        modelInput.value = this.value;
        modelInput.classList.add('d-none');
    });

    syncModelChoice();

    document.getElementById('refreshModels').addEventListener('click', function () {
        const button = this;
        const help = document.getElementById('modelHelp');
        busy(button, 'Chargement');

        fetch('{{ path('super_admin_llm_settings_models') }}')
            .then(r => r.json())
            .then(data => {
                const groups = data.groups || {account: [], suggested: []};
                const group = (label, models) => models.length
                    ? '<optgroup label="' + escapeHtml(label) + '">'
                        + models.map(m => '<option value="' + escapeHtml(m) + '">' + escapeHtml(m) + '</option>').join('')
                        + '</optgroup>'
                    : '';

                modelChoice.innerHTML = group('Modèles de votre compte Ollama', groups.account || [])
                    + group('Suggestions (non vérifiées sur votre compte)', groups.suggested || [])
                    + '<option value="' + CUSTOM + '">✏️ Autre — saisir l\'identifiant…</option>';

                // La valeur en cours ne doit jamais se perdre au rafraîchissement.
                syncModelChoice();

                help.innerHTML = data.success
                    ? '<span class="text-success">' + (data.count || 0) + ' modèle(s) chargé(s) depuis votre compte Ollama.</span>'
                    : '<span class="text-warning">' + escapeHtml(data.error || 'Liste indisponible.') + '</span>';
            })
            .catch(e => {
                help.innerHTML = '<span class="text-danger">Erreur : ' + escapeHtml(e.message) + '</span>';
            })
            .finally(() => idle(button));
    });

    document.getElementById('testConnection').addEventListener('click', function () {
        const button = this;
        busy(button, 'Test en cours');
        resultBox.classList.remove('d-none');
        show('info', 'Appel du modèle en cours…');

        const body = new FormData();
        body.append('_token', testToken);

        fetch('{{ path('super_admin_llm_settings_test') }}', { method: 'POST', body })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    show('success',
                        '<strong>Connexion réussie.</strong><br>' +
                        'Modèle : <code>' + escapeHtml(data.model) + '</code><br>' +
                        'Latence : ' + (data.latencyMs || 0) + ' ms' +
                        (data.sample ? '<br><span class="small text-muted">Réponse : ' + escapeHtml(data.sample) + '</span>' : '')
                    );
                } else {
                    show('danger', '<strong>Échec.</strong><br>' + escapeHtml(data.message));
                }
            })
            .catch(e => show('danger', 'Erreur réseau : ' + escapeHtml(e.message)))
            .finally(() => idle(button));
    });

    document.getElementById('testSearch').addEventListener('click', function () {
        const button = this;
        busy(button, 'Recherche');
        resultBox.classList.remove('d-none');
        show('info', 'Recherche web en cours…');

        const body = new FormData();
        body.append('_token', testToken);
        body.append('query', 'boulangerie artisanale Bordeaux avis horaires');

        fetch('{{ path('super_admin_llm_settings_test_search') }}', { method: 'POST', body })
            .then(r => r.json())
            .then(data => {
                if (!data.success) {
                    show('danger', '<strong>Échec.</strong><br>' + escapeHtml(data.message));
                    return;
                }

                const items = (data.results || [])
                    .map(r => '<li class="mb-1"><a href="' + escapeHtml(r.url) + '" target="_blank" rel="noopener">' +
                              escapeHtml(r.title || r.url) + '</a></li>')
                    .join('');

                show('success', '<strong>' + escapeHtml(data.message) + '</strong><ul class="small mb-0 mt-2">' + items + '</ul>');
            })
            .catch(e => show('danger', 'Erreur réseau : ' + escapeHtml(e.message)))
            .finally(() => idle(button));
    });
})();
</script>
{% endblock %}