{% extends 'generic/object_edit.html' %}
{% load i18n %}

{% block head %}
{{ block.super }}
<style>
.hidebox-picker {
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    overflow: hidden;
}
.hidebox-picker__toolbar {
    background: var(--tblr-bg-surface-secondary);
    border-bottom: 1px solid var(--tblr-border-color);
}
.hidebox-picker__list {
    max-height: 22rem;
    overflow-y: auto;
}
.hidebox-picker__item {
    cursor: pointer;
    transition: background-color .1s ease-in-out;
}
.hidebox-picker__item:hover {
    background: var(--tblr-bg-surface-secondary);
}
.hidebox-picker__item.is-disabled {
    cursor: default;
    opacity: .65;
}
.hidebox-picker__item.is-disabled:hover {
    background: transparent;
}
.hidebox-picker__name {
    font-family: var(--tblr-font-monospace);
    font-size: .8rem;
}
.hidebox-picker__state {
    padding: 1.5rem;
    text-align: center;
}
</style>
{% endblock %}

{% block javascript %}
{{ block.super }}
{{ form.get_selected_field_names|json_script:"hidebox-current-fields" }}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const ctSelect = document.getElementById('id_content_type');
    const fieldContainer = document.getElementById('id_field_names');
    if (!ctSelect || !fieldContainer) return;

    const FETCH_URL = "{% url 'plugins:netbox_hidebox:get_fields' %}";

    function currentSelection() {
        const el = document.getElementById('hidebox-current-fields');
        try {
            return el ? (JSON.parse(el.textContent) || []) : [];
        } catch (e) {
            return [];
        }
    }

    function renderState(html, level) {
        fieldContainer.innerHTML =
            '<div class="hidebox-picker"><div class="hidebox-picker__state text-' +
            (level || 'muted') + '">' + html + '</div></div>';
    }

    function buildPicker(choices, selected) {
        const picker = document.createElement('div');
        picker.className = 'hidebox-picker';

        // --- Toolbar: search + counter + bulk actions ---
        const toolbar = document.createElement('div');
        toolbar.className = 'hidebox-picker__toolbar d-flex align-items-center gap-2 p-2';

        const search = document.createElement('input');
        search.type = 'search';
        search.className = 'form-control form-control-sm';
        search.placeholder = '{% trans "Search fields…" %}';
        search.setAttribute('aria-label', '{% trans "Search fields" %}');

        const counter = document.createElement('span');
        counter.className = 'badge text-bg-blue flex-shrink-0';

        const selectAll = document.createElement('button');
        selectAll.type = 'button';
        selectAll.className = 'btn btn-sm btn-ghost-secondary flex-shrink-0';
        selectAll.innerHTML = '<i class="mdi mdi-checkbox-multiple-marked-outline"></i>';
        selectAll.title = '{% trans "Select all visible" %}';

        const clearAll = document.createElement('button');
        clearAll.type = 'button';
        clearAll.className = 'btn btn-sm btn-ghost-secondary flex-shrink-0';
        clearAll.innerHTML = '<i class="mdi mdi-checkbox-multiple-blank-outline"></i>';
        clearAll.title = '{% trans "Clear all" %}';

        toolbar.append(search, counter, selectAll, clearAll);

        // --- List ---
        const list = document.createElement('div');
        list.className = 'list-group list-group-flush hidebox-picker__list';

        const inputs = [];
        choices.forEach((field, index) => {
            const item = document.createElement('label');
            item.className = 'list-group-item hidebox-picker__item d-flex align-items-center gap-2 py-2';
            item.dataset.haystack = (field.label + ' ' + field.name).toLowerCase();

            const input = document.createElement('input');
            input.type = 'checkbox';
            input.name = 'field_names';
            input.value = field.name;
            input.className = 'form-check-input m-0';
            input.id = 'field_choice_' + index;
            input.checked = !field.required && selected.includes(field.name);
            input.disabled = !!field.required;

            const text = document.createElement('div');
            text.className = 'd-flex flex-column flex-grow-1 lh-sm';
            const label = document.createElement('span');
            label.className = 'fw-medium';
            label.textContent = field.label;
            const name = document.createElement('span');
            name.className = 'hidebox-picker__name text-muted';
            name.textContent = field.name;
            text.append(label, name);

            item.append(input, text);

            if (field.required) {
                item.classList.add('is-disabled');
                const badge = document.createElement('span');
                badge.className = 'badge text-bg-secondary flex-shrink-0';
                badge.textContent = '{% trans "Required" %}';
                badge.title = '{% trans "This field is required by NetBox and cannot be hidden." %}';
                item.appendChild(badge);
            }

            inputs.push(input);
            list.appendChild(item);
        });

        function refreshCounter() {
            const n = inputs.filter(i => i.checked).length;
            counter.textContent = n + ' {% trans "selected" %}';
        }
        function visibleEnabled() {
            return inputs.filter(i => !i.disabled && i.closest('.list-group-item').style.display !== 'none');
        }

        search.addEventListener('input', () => {
            const q = search.value.trim().toLowerCase();
            list.querySelectorAll('.list-group-item').forEach(el => {
                el.style.display = !q || el.dataset.haystack.includes(q) ? '' : 'none';
            });
        });
        selectAll.addEventListener('click', () => {
            visibleEnabled().forEach(i => { i.checked = true; });
            refreshCounter();
        });
        clearAll.addEventListener('click', () => {
            visibleEnabled().forEach(i => { i.checked = false; });
            refreshCounter();
        });
        list.addEventListener('change', refreshCounter);

        picker.append(toolbar, list);
        fieldContainer.innerHTML = '';
        fieldContainer.appendChild(picker);
        refreshCounter();
    }

    function loadFields(contentTypeId) {
        const selected = currentSelection();

        if (!contentTypeId) {
            renderState('<i class="mdi mdi-arrow-up-circle-outline me-1"></i>{% trans "Select a content type to choose fields." %}');
            return;
        }

        renderState('<div class="spinner-border spinner-border-sm" role="status"></div>');

        fetch(FETCH_URL + '?content_type_id=' + encodeURIComponent(contentTypeId))
            .then(r => r.json())
            .then(data => {
                if (!data.choices || data.choices.length === 0) {
                    renderState('{% trans "No fields found for this model." %}', 'danger');
                    return;
                }
                buildPicker(data.choices, selected);
            })
            .catch(() => renderState('{% trans "Failed to load fields. Please try again." %}', 'danger'));
    }

    if (ctSelect.value) loadFields(ctSelect.value);
    if (ctSelect.tomselect) {
        ctSelect.tomselect.on('change', loadFields);
    } else {
        ctSelect.addEventListener('change', () => loadFields(ctSelect.value));
    }
});
</script>
{% endblock %}