{% extends "admin/base_site.html" %}
{% load i18n admin_urls %}

{% block breadcrumbs %}
<div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
    &rsaquo;
    <a href="{% url 'admin:app_list' app_label=opts.app_label %}">{{ opts.app_config.verbose_name }}</a>
    &rsaquo;
    <a href="{% url 'admin:nodes_nodefeature_changelist' %}">{{ opts.verbose_name_plural|capfirst }}</a>
    &rsaquo;
    {% trans 'Discover node features' %}
</div>
{% endblock %}

{% block content %}
<div class="module" id="discover-node-features">
    <h2>{% trans 'Discover node features' %}</h2>
    <p>{% trans 'Check feature eligibility, choose what to apply, then run batch detection for the selected features.' %}</p>
    <p id="discover-summary"
       data-check-complete="{% blocktrans %}Eligibility checks complete for {{ features|length }} feature(s).{% endblocktrans %}"
       data-check-progress="{% blocktrans %}Checking eligibility __CURRENT__ of __TOTAL__…{% endblocktrans %}"
       data-run-complete="{% trans 'Batch detection complete for selected features.' %}"
       data-run-progress="{% blocktrans %}Applying batch detection __CURRENT__ of __TOTAL__…{% endblocktrans %}">
        {% blocktrans with count=features|length %}Preparing eligibility checks for {{ count }} feature(s)...{% endblocktrans %}
    </p>
    <form id="discover-features-form" style="display: none;">
        {% csrf_token %}
    </form>
    <table class="admin-table" id="discover-features-table">
        <thead>
            <tr>
                <th scope="col">{% trans 'Select' %}</th>
                <th scope="col">{% trans 'Feature' %}</th>
                <th scope="col">{% trans 'Eligibility' %}</th>
                <th scope="col">{% trans 'Manual' %}</th>
                <th scope="col">{% trans 'Enablement' %}</th>
            </tr>
        </thead>
        <tbody>
            {% for feature in features %}
            <tr data-feature-id="{{ feature.pk }}">
                <td data-field="selected">{% trans 'Pending…' %}</td>
                <th scope="row">{{ feature.display }}</th>
                <td data-field="eligibility">{% trans 'Pending…' %}</td>
                <td data-field="manual">{% trans 'Pending…' %}</td>
                <td data-field="enablement">{% trans 'Pending…' %}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <div class="module" id="discover-report">
        <h3>{% trans 'Discovery report' %}</h3>
        <ul>
            <li>{% trans 'Eligible features:' %} <strong id="discover-report-eligible">0</strong></li>
            <li>{% trans 'Selected features:' %} <strong id="discover-report-selected">0</strong></li>
            <li>{% trans 'Enabled features:' %} <strong id="discover-report-enabled">0</strong></li>
            <li>{% trans 'Warnings/errors:' %} <strong id="discover-report-errors">0</strong></li>
        </ul>
    </div>
    <p class="submit-row">
        <button type="button" class="button" id="discover-select-eligible" disabled>{% trans 'Select eligible' %}</button>
        <button type="button" class="button" id="discover-deselect-all" disabled>{% trans 'Deselect all' %}</button>
        <button type="button" class="button default" id="discover-run-selected" disabled>{% trans 'Run selected detection' %}</button>
    </p>
    <p class="submit-row">
        <a class="button" href="{% url 'admin:nodes_nodefeature_changelist' %}">{% trans 'Back to node features' %}</a>
    </p>
</div>
<script>
(function () {
    const progressUrl = "{{ progress_url }}";
    const manualToggleUrl = "{% url 'admin:nodes_nodefeature_discover_manual_toggle' %}";
    const discoveryId = "{{ discovery_id }}";
    const form = document.getElementById("discover-features-form");
    const tokenInput = form.querySelector('input[name="csrfmiddlewaretoken"]');
    const csrfToken = tokenInput ? tokenInput.value : "";
    const rows = Array.from(document.querySelectorAll('#discover-features-table tbody tr'));
    const summary = document.getElementById('discover-summary');
    const eligibleCount = document.getElementById('discover-report-eligible');
    const selectedCount = document.getElementById('discover-report-selected');
    const enabledCount = document.getElementById('discover-report-enabled');
    const errorCount = document.getElementById('discover-report-errors');
    const selectEligibleButton = document.getElementById('discover-select-eligible');
    const deselectAllButton = document.getElementById('discover-deselect-all');
    const runSelectedButton = document.getElementById('discover-run-selected');
    const total = rows.length;
    let checkingCompleted = 0;
    let runningCompleted = 0;
    let runTotal = 0;
    let eligible = 0;
    let selected = 0;
    let enabled = 0;
    let errors = 0;
    let phase = 'checking';

    function setCellText(cell, text) {
        if (!cell) {
            return;
        }
        cell.textContent = text || '';
    }

    function renderManualToggleCell(cell, data, featureId, enablementCell) {
        if (!cell) {
            return;
        }
        cell.innerHTML = '';
        if (!data) {
            cell.textContent = '';
            return;
        }
        if (!data.can_toggle) {
            cell.textContent = data.label || '';
            return;
        }

        const wrapper = document.createElement('label');
        wrapper.style.display = 'inline-flex';
        wrapper.style.gap = '0.35rem';
        wrapper.style.alignItems = 'center';

        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.checked = !!data.enabled;
        checkbox.dataset.featureId = featureId;

        const text = document.createElement('span');
        text.textContent = data.label || 'Manual';

        checkbox.addEventListener('change', function () {
            const toggleBody = new FormData();
            toggleBody.append('feature_id', featureId);
            toggleBody.append('enabled', checkbox.checked ? 'true' : 'false');
            checkbox.disabled = true;

            fetch(manualToggleUrl, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': csrfToken
                },
                body: toggleBody
            }).then(function (response) {
                if (!response.ok) {
                    throw new Error(response.status + ' ' + response.statusText);
                }
                return response.json();
            }).then(function (payload) {
                checkbox.checked = !!(payload.manual_enablement && payload.manual_enablement.enabled);
                setCellText(enablementCell, payload.message || '');
            }).catch(function (error) {
                checkbox.checked = !checkbox.checked;
                setCellText(enablementCell, error.toString());
                errors += 1;
                updateReport();
            }).finally(function () {
                checkbox.disabled = false;
            });
        });

        wrapper.appendChild(checkbox);
        wrapper.appendChild(text);
        cell.appendChild(wrapper);
    }

    function updateSummary() {
        if (!summary) {
            return;
        }
        if (phase === 'checking') {
            if (checkingCompleted >= total) {
                summary.textContent = summary.dataset.checkComplete;
                return;
            }
            const template = summary.dataset.checkProgress || 'Checking eligibility __CURRENT__ of __TOTAL__…';
            summary.textContent = template
                .replace('__CURRENT__', checkingCompleted + 1)
                .replace('__TOTAL__', total);
            return;
        }
        if (runTotal === 0 || runningCompleted >= runTotal) {
            summary.textContent = summary.dataset.runComplete;
        } else {
            const template = summary.dataset.runProgress || 'Applying batch detection __CURRENT__ of __TOTAL__…';
            summary.textContent = template
                .replace('__CURRENT__', runningCompleted + 1)
                .replace('__TOTAL__', runTotal);
        }
    }

    function updateReport() {
        if (eligibleCount) {
            eligibleCount.textContent = eligible.toString();
        }
        if (selectedCount) {
            selectedCount.textContent = selected.toString();
        }
        if (enabledCount) {
            enabledCount.textContent = enabled.toString();
        }
        if (errorCount) {
            errorCount.textContent = errors.toString();
        }
    }

    function updateSelectedCount() {
        selected = rows.reduce(function (count, row) {
            const checkbox = row.querySelector('[data-field="selected"] input[type="checkbox"]');
            return checkbox && checkbox.checked ? count + 1 : count;
        }, 0);
        updateReport();
        if (runSelectedButton) {
            runSelectedButton.disabled = phase !== 'ready' || selected === 0;
        }
    }

    function renderSelectionCell(cell, isEligible, featureId, featureName) {
        if (!cell) {
            return;
        }
        cell.innerHTML = '';
        if (!isEligible) {
            cell.textContent = '—';
            return;
        }

        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.checked = true;
        checkbox.id = 'feature-select-' + featureId;
        checkbox.dataset.featureId = featureId;
        checkbox.setAttribute('aria-label', featureName || ('Select ' + featureId));
        checkbox.addEventListener('change', updateSelectedCount);
        cell.appendChild(checkbox);
    }

    function setControlButtonsEnabled(enabledState) {
        if (selectEligibleButton) {
            selectEligibleButton.disabled = !enabledState;
        }
        if (deselectAllButton) {
            deselectAllButton.disabled = !enabledState;
        }
    }

    function runEligibilityChecks(index) {
        if (index >= rows.length) {
            phase = 'ready';
            setControlButtonsEnabled(true);
            updateSelectedCount();
            updateSummary();
            updateReport();
            return;
        }
        const row = rows[index];
        const featureId = row.getAttribute('data-feature-id');
        const selectedCell = row.querySelector('[data-field="selected"]');
        const eligibilityCell = row.querySelector('[data-field="eligibility"]');
        const manualCell = row.querySelector('[data-field="manual"]');
        const enablementCell = row.querySelector('[data-field="enablement"]');
        updateSummary();
        const body = new FormData();
        body.append('feature_id', featureId);
        body.append('apply', 'false');
        if (discoveryId) {
            body.append('discovery_id', discoveryId);
        }

        fetch(progressUrl, {
            method: 'POST',
            headers: {
                'X-CSRFToken': csrfToken
            },
            body: body
        }).then(function (response) {
            if (!response.ok) {
                setCellText(eligibilityCell, response.status + ' ' + response.statusText);
                setCellText(manualCell, '');
                setCellText(enablementCell, response.status + ' ' + response.statusText);
                errors += 1;
                return null;
            }
            return response.json();
        }).then(function (data) {
            if (!data) {
                return;
            }
            const featureName = row.querySelector('th[scope="row"]')
                ? row.querySelector('th[scope="row"]').textContent.trim()
                : '';
            renderSelectionCell(selectedCell, !!data.eligible, featureId, featureName);
            setCellText(eligibilityCell, data.message || '');
            renderManualToggleCell(manualCell, data.manual_enablement, featureId, enablementCell);
            if (data.eligible) {
                eligible += 1;
            }
            if (data.status === 'error' || data.status === 'warning') {
                errors += 1;
            }
            if (data.enablement && data.enablement.status === 'enabled') {
                enabled += 1;
            }
            setCellText(enablementCell, data.enablement ? data.enablement.message : '');
        }).catch(function (error) {
            setCellText(selectedCell, '—');
            setCellText(eligibilityCell, error.toString());
            setCellText(manualCell, '');
            setCellText(enablementCell, error.toString());
            errors += 1;
        }).finally(function () {
            checkingCompleted += 1;
            updateSummary();
            updateReport();
            runEligibilityChecks(index + 1);
        });
    }

    function runSelectedFeatures() {
        const queue = rows.filter(function (row) {
            const checkbox = row.querySelector('[data-field="selected"] input[type="checkbox"]');
            return checkbox && checkbox.checked;
        });
        runTotal = queue.length;
        runningCompleted = 0;
        phase = 'running';
        setControlButtonsEnabled(false);
        updateSummary();

        function runAt(index) {
            if (index >= queue.length) {
                phase = 'ready';
                setControlButtonsEnabled(true);
                updateSelectedCount();
                updateSummary();
                return;
            }
            const row = queue[index];
            const featureId = row.getAttribute('data-feature-id');
            const eligibilityCell = row.querySelector('[data-field="eligibility"]');
            const enablementCell = row.querySelector('[data-field="enablement"]');
            const body = new FormData();
            body.append('feature_id', featureId);
            body.append('apply', 'true');
            if (discoveryId) {
                body.append('discovery_id', discoveryId);
            }

            fetch(progressUrl, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': csrfToken
                },
                body: body
            }).then(function (response) {
                if (!response.ok) {
                    throw new Error(response.status + ' ' + response.statusText);
                }
                return response.json();
            }).then(function (data) {
                setCellText(eligibilityCell, data.message || '');
                setCellText(enablementCell, data.enablement ? data.enablement.message : '');
                if (data.status === 'error' || data.status === 'warning') {
                    errors += 1;
                }
                if (data.enablement && data.enablement.status === 'enabled') {
                    enabled += 1;
                }
                updateReport();
            }).catch(function (error) {
                setCellText(enablementCell, error.toString());
                errors += 1;
                updateReport();
            }).finally(function () {
                runningCompleted += 1;
                updateSummary();
                runAt(index + 1);
            });
        }

        runAt(0);
    }

    if (selectEligibleButton) {
        selectEligibleButton.addEventListener('click', function () {
            rows.forEach(function (row) {
                const checkbox = row.querySelector('[data-field="selected"] input[type="checkbox"]');
                if (checkbox) {
                    checkbox.checked = true;
                }
            });
            updateSelectedCount();
        });
    }

    if (deselectAllButton) {
        deselectAllButton.addEventListener('click', function () {
            rows.forEach(function (row) {
                const checkbox = row.querySelector('[data-field="selected"] input[type="checkbox"]');
                if (checkbox) {
                    checkbox.checked = false;
                }
            });
            updateSelectedCount();
        });
    }

    if (runSelectedButton) {
        runSelectedButton.addEventListener('click', function () {
            if (phase !== 'ready') {
                return;
            }
            runSelectedFeatures();
        });
    }

    if (rows.length) {
        runEligibilityChecks(0);
    } else {
        phase = 'ready';
        updateSummary();
        updateReport();
    }
})();
</script>
{% endblock %}