{% set field_value = (entity is defined and entity.attributes is defined) 
    ? entity.attributes|json_encode(constant('JSON_PRETTY_PRINT') b-or constant('JSON_UNESCAPED_UNICODE'))
    : '{
  "example_field": {
    "type": "string",
    "label": "Exemple de champ",
    "required": false,
    "placeholder": "Entrez une valeur..."
  }
}' %}

{% if form is defined and form.vars is defined %}
<div class="form-group">
    <label for="{{ form.vars.id }}" class="form-label">
        {{ form.vars.label|default('Attributs')|trans }}
    </label>

    {# Cases à cocher : filtre liste partenaire (synchronisé avec le JSON ci-dessous) #}
    <div id="category-attributes-filter-panel" class="mb-3 p-3 rounded border bg-light">
        <strong class="d-block mb-1">Filtres (page publique partenaire)</strong>
        <p class="small text-muted mb-2 mb-0">
            Cochez les attributs à proposer comme filtres sur la liste des objets trouvés, après sélection de cette catégorie.
            Les cases se mettent à jour depuis le JSON ; les modifier met à jour le JSON (<code>use_as_filter</code>).
        </p>
        <div id="category-attributes-filter-checkboxes" class="mt-2"></div>
        <p id="category-attributes-filter-empty" class="small text-muted mb-0" style="display:none;">Aucun attribut valide dans le JSON — éditez le JSON ou ajoutez des clés d’objets.</p>
    </div>
    
    <textarea 
        id="{{ form.vars.id }}" 
        name="{{ form.vars.full_name }}" 
        class="form-control font-monospace"
        rows="15"
        placeholder="Entrez vos attributs JSON ici..."
        style="font-size: 13px; background-color: #f8f9fa;"
    >{{ field_value }}</textarea>
    
    {% if form.vars.help is defined and form.vars.help %}
        <div class="form-help mt-2">
            {{ form.vars.help|raw }}
        </div>
    {% endif %}
</div>
{% endif %}

{% if form is defined and form.vars is defined %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const textarea = document.getElementById('{{ form.vars.id }}');
    const panel = document.getElementById('category-attributes-filter-checkboxes');
    const emptyHint = document.getElementById('category-attributes-filter-empty');
    if (!textarea || !panel) return;

    textarea.style.fontFamily = 'Monaco, Menlo, "Ubuntu Mono", monospace';
    textarea.style.lineHeight = '1.4';

    function parseAttributes() {
        try {
            const raw = textarea.value.trim();
            if (!raw) return {};
            const data = JSON.parse(raw);
            return (data && typeof data === 'object' && !Array.isArray(data)) ? data : {};
        } catch (e) {
            return null;
        }
    }

    function writePretty(obj) {
        textarea.value = JSON.stringify(obj, null, 2);
    }

    function renderFilterCheckboxes() {
        const attrs = parseAttributes();
        panel.innerHTML = '';
        if (attrs === null) {
            emptyHint.style.display = 'block';
            emptyHint.textContent = 'JSON invalide — corrigez le bloc ci-dessous pour activer les cases « filtre ».';
            return;
        }
        const keys = Object.keys(attrs).filter(k => attrs[k] && typeof attrs[k] === 'object' && !Array.isArray(attrs[k]));
        if (keys.length === 0) {
            emptyHint.style.display = 'block';
            emptyHint.textContent = 'Aucun attribut valide dans le JSON.';
            return;
        }
        emptyHint.style.display = 'none';
        keys.forEach(function(key) {
            const def = attrs[key];
            const labelText = (def.label || key).replace(/</g, '&lt;');
            const id = 'use-filter-{{ form.vars.id|e('js') }}-' + key.replace(/[^a-zA-Z0-9_]/g, '_');
            const wrap = document.createElement('div');
            wrap.className = 'form-check mb-1';
            const input = document.createElement('input');
            input.type = 'checkbox';
            input.className = 'form-check-input';
            input.id = id;
            input.checked = def.use_as_filter === true;
            input.addEventListener('change', function() {
                const a = parseAttributes();
                if (!a || !a[key] || typeof a[key] !== 'object') return;
                if (input.checked) {
                    a[key].use_as_filter = true;
                } else {
                    delete a[key].use_as_filter;
                }
                writePretty(a);
                textarea.dispatchEvent(new Event('blur'));
            });
            const lab = document.createElement('label');
            lab.className = 'form-check-label';
            lab.setAttribute('for', id);
            lab.innerHTML = '<code>' + key.replace(/</g, '&lt;') + '</code> — ' + labelText + ' <span class="text-muted">(filtre partenaire)</span>';
            wrap.appendChild(input);
            wrap.appendChild(lab);
            panel.appendChild(wrap);
        });
    }

    textarea.addEventListener('blur', function() {
        try {
            if (this.value.trim()) {
                JSON.parse(this.value);
                this.style.borderColor = '#28a745';
                this.style.backgroundColor = '#f8fff8';
            }
        } catch (e) {
            this.style.borderColor = '#dc3545';
            this.style.backgroundColor = '#fff8f8';
            console.warn('JSON invalide:', e.message);
        }
        renderFilterCheckboxes();
    });

    textarea.addEventListener('input', function() {
        window.clearTimeout(textarea._filterSyncT);
        textarea._filterSyncT = window.setTimeout(renderFilterCheckboxes, 400);
    });

    textarea.addEventListener('keydown', function(e) {
        if (e.key === 'Tab') {
            e.preventDefault();
            const start = this.selectionStart;
            const end = this.selectionEnd;
            this.value = this.value.substring(0, start) + '  ' + this.value.substring(end);
            this.selectionStart = this.selectionEnd = start + 2;
        }
    });

    renderFilterCheckboxes();
});
</script>
{% endif %}