{% extends 'backend.html.twig' %}

{% block title %}{{ nuovo ? 'Nuovo assistente' : 'Modifica assistente' }} — Mostry{% endblock %}

{# Card selezionabili al posto dei radio grezzi: pallino + titolo + descrizione, la scelta si evidenzia #}
{% macro optcards(field, extraClass) %}
    <div class="optcards {{ extraClass }}">
        {% for choice in field %}
            {% set parts = choice.vars.label|split(' — ') %}
            <label class="optcard {{ choice.vars.attr.disabled is defined ? 'optcard--disabled' }}">
                {{ form_widget(choice) }}
                <span class="optcard__text">
                    <span class="optcard__title">{{ parts[0] }}</span>
                    {% if parts[1] is defined %}<span class="optcard__sub">{{ parts[1] }}</span>{% endif %}
                </span>
            </label>
        {% endfor %}
    </div>
{% endmacro %}
{% import _self as f %}
{% import '_avatar.html.twig' as av %}

{% block backend %}
<div style="max-width:760px">
    <div class="page-head page-head--row">
        <h1>{{ nuovo ? 'Nuovo assistente' : 'Modifica assistente' }}</h1>
        <a href="{{ path('dashboard') }}" class="btn btn--sm btn--ghost">← Indietro</a>
    </div>

    <div class="card" style="padding:1.75rem">
    {{ form_start(form, {'attr': {'class': 'form', 'enctype': 'multipart/form-data'}}) }}
        <div class="form-row">
            {{ form_label(form.name) }} {{ form_widget(form.name) }} {{ form_errors(form.name) }}
        </div>

        <div class="form-row">
            <label>Immagine dell'assistente</label>
            <div class="avatar-picker js-avatar-picker">
                {% if bot.avatar %}
                    <label class="avatar-opt" title="Immagine attuale">
                        <input type="radio" name="avatar_choice" value="current" checked>
                        {{ av.img(bot, 'avatar-opt__img') }}
                        <span class="avatar-opt__cap">Attuale</span>
                    </label>
                {% endif %}
                {% for a in avatarDefaults %}
                    <label class="avatar-opt" title="{{ a }}">
                        <input type="radio" name="avatar_choice" value="{{ a }}" {{ (not bot.avatar and loop.first) ? 'checked' }}>
                        <img src="{{ asset('img/avatars/' ~ a ~ '.svg') }}" alt="" class="avatar-opt__img">
                    </label>
                {% endfor %}
                <label class="avatar-opt avatar-opt--upload" title="Carica una tua immagine">
                    <input type="radio" name="avatar_choice" value="upload" class="js-avatar-upload-radio">
                    <span class="avatar-opt__up"><i class="fa-solid fa-cloud-arrow-up"></i><span>Carica</span></span>
                </label>
            </div>
            <input type="file" name="avatar_file" accept="image/jpeg,image/png,image/webp,image/gif" class="js-avatar-file" hidden>
            <div class="js-avatar-preview" hidden></div>
            <span class="field-help">JPG, PNG, WEBP o GIF. Viene ridimensionata e ricontrollata per sicurezza (max 4 MB).</span>
        </div>

        <div class="form-row">
            {{ form_label(form.audience) }}
            {{ f.optcards(form.audience, 'js-audience') }}
            {{ form_help(form.audience) }}
        </div>
        <div class="form-row js-internal-only">
            {{ form_label(form.accessCode) }} {{ form_widget(form.accessCode) }}
            {{ form_help(form.accessCode) }}
        </div>

        <div class="form-row">
            {{ form_label(form.provider) }}
            {{ f.optcards(form.provider, 'js-provider') }}
        </div>
        <div class="form-row">
            {{ form_label(form.model) }} {{ form_widget(form.model) }}
            <span class="field-help">Lascia "Predefinito" se non hai preferenze: usa il modello consigliato del provider.</span>
        </div>

        <div class="form-row">
            {{ form_label(form.useManagedKey) }}
            {{ f.optcards(form.useManagedKey, 'js-keychoice') }}
        </div>
        <div class="form-row js-byok-only">
            {{ form_label(form.plainApiKey) }} {{ form_widget(form.plainApiKey) }}
            <span class="field-help">Viene salvata cifrata. La usa solo il tuo assistente.</span>
        </div>

        <div class="form-row">
            {{ form_label(form.role) }} {{ form_widget(form.role) }} {{ form_errors(form.role) }}
        </div>
        <div class="grid-2">
            <div class="form-row">{{ form_label(form.topicPrimary) }} {{ form_widget(form.topicPrimary) }} {{ form_help(form.topicPrimary) }}</div>
            <div class="form-row">{{ form_label(form.topicSecondary) }} {{ form_widget(form.topicSecondary) }}</div>
        </div>
        <div class="grid-2">
            <div class="form-row">{{ form_label(form.tone) }} {{ form_widget(form.tone) }}</div>
            <div class="form-row">{{ form_label(form.maxWords) }} {{ form_widget(form.maxWords) }} {{ form_errors(form.maxWords) }}</div>
        </div>

        {% if not nuovo %}
        <div class="alert alert--success" style="display:flex; align-items:center; gap:.75rem; justify-content:space-between; flex-wrap:wrap">
            <span><i class="fa-solid fa-folder-open"></i> La conoscenza si riempie da sola caricando i tuoi documenti.</span>
            <a href="{{ path('knowledge', {id: bot.id}) }}" class="btn btn--sm">Gestisci i documenti</a>
        </div>
        {% endif %}

        <div class="form-row">
            {{ form_label(form.knowledgeMarkdown) }} {{ form_widget(form.knowledgeMarkdown) }}
            {{ form_help(form.knowledgeMarkdown) }}
        </div>

        <div class="form-row">
            {{ form_label(form.allowedDomain) }} {{ form_widget(form.allowedDomain) }}
            <span class="field-help">Se impostato, il bot funziona solo su questo dominio.</span>
        </div>

        <div class="form-row">
            {{ form_label(form.whatsappPhoneNumberId) }} {{ form_widget(form.whatsappPhoneNumberId) }}
            <span class="field-help">Collega WhatsApp: incolla il Phone Number ID del numero (dal pannello Meta). Lascia vuoto se non usi WhatsApp.</span>
        </div>

        <label class="toggle">
            {{ form_widget(form.active) }}
            <span class="toggle__track"><span class="toggle__dot"></span></span>
            <span class="toggle__text">
                <span class="toggle__title">Assistente attivo</span>
                <span class="toggle__sub">Se spento, l'assistente non risponde a nessuno.</span>
            </span>
        </label>

        <button class="btn" type="submit">{{ nuovo ? 'Crea assistente' : 'Salva modifiche' }}</button>
    {{ form_end(form) }}
    </div>
</div>
{% endblock %}

{% block javascripts %}{{ parent() }}
<script>
// Evidenzia la card scelta (funziona ovunque, non dipende da :has())
(function () {
    document.querySelectorAll('.optcards').forEach(function (group) {
        var cards = group.querySelectorAll('.optcard');
        function aggiorna() {
            cards.forEach(function (c) {
                var inp = c.querySelector('input');
                c.classList.toggle('optcard--active', inp && inp.checked);
            });
        }
        group.querySelectorAll('input').forEach(function (i) { i.addEventListener('change', aggiorna); });
        aggiorna();
    });
})();

// Avatar: evidenziazione della scelta + caricamento immagine con anteprima
(function () {
    var picker = document.querySelector('.js-avatar-picker');
    var fileInput = document.querySelector('.js-avatar-file');
    var uploadRadio = document.querySelector('.js-avatar-upload-radio');
    var preview = document.querySelector('.js-avatar-preview');
    if (!picker) return;

    var opts = picker.querySelectorAll('.avatar-opt');
    function evidenzia() {
        opts.forEach(function (o) {
            var inp = o.querySelector('input');
            o.classList.toggle('avatar-opt--active', inp && inp.checked);
        });
    }
    picker.querySelectorAll('input').forEach(function (i) { i.addEventListener('change', evidenzia); });
    evidenzia();

    // Selezionando "Carica" apro il selettore file
    if (uploadRadio && fileInput) {
        uploadRadio.addEventListener('change', function () { if (uploadRadio.checked) fileInput.click(); });
        fileInput.addEventListener('change', function () {
            var f = fileInput.files[0];
            if (!f) return;
            uploadRadio.checked = true;
            evidenzia();
            var reader = new FileReader();
            reader.onload = function (e) {
                preview.hidden = false;
                preview.innerHTML = '<img src="' + e.target.result + '" class="avatar-opt__img" style="border-color:var(--accent)"> '
                    + '<span class="field-help">Anteprima · verrà elaborata e messa in sicurezza al salvataggio.</span>';
            };
            reader.readAsDataURL(f);
        });
    }
})();

// Mostra solo i modelli del provider selezionato (provider ora è a card/radio)
(function () {
    var provRadios = document.querySelectorAll('.js-provider input[type=radio]');
    var model = document.querySelector('.js-model-select');
    if (!provRadios.length || !model) return;
    function providerScelto() {
        var r = Array.prototype.find.call(provRadios, function (x) { return x.checked; });
        return r ? r.value : '';
    }
    function filter() {
        var p = providerScelto();
        var hideSelected = false;
        model.querySelectorAll('option').forEach(function (o) {
            if (!o.value) return; // opzione "Predefinito"
            var match = o.getAttribute('data-provider') === p;
            o.hidden = !match;
            o.disabled = !match;
            if (!match && o.selected) hideSelected = true;
        });
        model.querySelectorAll('optgroup').forEach(function (g) {
            var anyVisible = Array.prototype.some.call(g.children, function (o) { return !o.hidden; });
            g.hidden = !anyVisible;
        });
        if (hideSelected) model.value = '';
    }
    provRadios.forEach(function (r) { r.addEventListener('change', filter); });
    filter();
})();

// Mostra il codice d'accesso solo per l'assistente interno
(function () {
    var codice = document.querySelector('.js-internal-only');
    if (!codice) return;
    var radios = document.querySelectorAll('input[type=radio][name*="[audience]"]');
    function aggiorna() {
        var interno = Array.prototype.some.call(radios, function (r) {
            return r.checked && r.value === 'interno';
        });
        codice.style.display = interno ? '' : 'none';
    }
    radios.forEach(function (r) { r.addEventListener('change', aggiorna); });
    aggiorna();
})();

// Mostra il campo "la tua chiave" solo se scegli BYOK (valore 0)
(function () {
    var box = document.querySelector('.js-byok-only');
    if (!box) return;
    var radios = document.querySelectorAll('input[type=radio][name*="[useManagedKey]"]');
    function aggiorna() {
        var byok = Array.prototype.some.call(radios, function (r) {
            return r.checked && r.value === '0';
        });
        box.style.display = byok ? '' : 'none';
    }
    radios.forEach(function (r) { r.addEventListener('change', aggiorna); });
    aggiorna();
})();
</script>
{% endblock %}