{% extends "layout.html" %}
{% set active_page = 'tenants' %}
{% block title %}Dashboard Tenants - {{ super() }}{% endblock %}

{% block content %}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 id="page-title" class="mb-0">Dashboard Tenant Management</h2>
    </div>
    <div class="row align-items-end">
        <div class="col-md-4" id="dashboard-select-wrapper">
            <label for="dashboard-select" class="form-label">HPE P5G Dashboard</label>
            <select class="form-select" id="dashboard-select">
                <option selected>Triton</option>
                <option>Star</option>
                <option>Bluebonnet</option>
                <option>Lonestar</option>
                <option>Production</option>
                <option>Test (future)</option>
            </select>
        </div>
    </div>
    <hr>
    <div id="tenant-view">
        <p>Retrieve the tenant hierarchy from the selected dashboard. Click on any item to expand it.</p>
        <button class="btn btn-primary" id="getTenantsBtn">Get Tenants</button>
    </div>
    <div class="mt-4">
        <h4>Results</h4>
        <div id="spinner" class="d-none spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>
        <div id="results-output" class="p-3"></div>
    </div>
{% endblock %}

{% block extra_scripts %}
<script defer>
    document.getElementById('getTenantsBtn').addEventListener('click', async () => {
        const dashboard = document.getElementById('dashboard-select').value;
        const tenants = await apiCall('/api/tenants/list', { dashboard });
        if (tenants) {
            resultsOutput.innerHTML = '<ul class="list-group"></ul>';
            const listContainer = resultsOutput.querySelector('.list-group');
            tenants.forEach(tenant => {
                const li = document.createElement('li');
                li.className = 'list-group-item list-group-item-dark tree-item';
                li.dataset.level = 'tenant';
                li.dataset.id = tenant.id;
                li.dataset.loaded = 'false';
                li.innerHTML = `<i class="bi bi-chevron-right me-2"></i> <strong>${tenant.name}</strong> <small class="text-muted">(${tenant.type})</small>`;
                listContainer.appendChild(li);
            });
        }
    });

    resultsOutput.addEventListener('click', async (event) => {
        const item = event.target.closest('.tree-item');
        if (item) {
            const level = item.dataset.level;
            const id = item.dataset.id;
            const isLoaded = item.dataset.loaded === 'true';
            const isOpen = item.classList.contains('open');
            const dashboard = document.getElementById('dashboard-select').value;

            if (isLoaded) {
                const childrenContainer = item.nextElementSibling;
                if (childrenContainer && childrenContainer.classList.contains('nested-group')) {
                    childrenContainer.classList.toggle('d-none');
                    item.classList.toggle('open', !isOpen);
                    item.querySelector('.bi-chevron-right')?.classList.toggle('open');
                }
                return;
            }
            
            item.dataset.loaded = 'true';
            item.classList.add('open');
            item.querySelector('.bi-chevron-right')?.classList.add('open');
            const spinnerSpan = document.createElement('span');
            spinnerSpan.className = 'spinner-border spinner-border-sm ms-2';
            item.appendChild(spinnerSpan);

            let childrenData = [];
            if (level === 'tenant') {
                // CHANGED: Added 'false' to prevent clearing the results
                childrenData = await apiCall('/api/plmns/list', { dashboard, tenant_id: id }, false);
                renderChildren(item, childrenData, 'plmn');
            } else if (level === 'plmn') {
                const tenantId = item.dataset.tenantId;
                // CHANGED: Added 'false' to prevent clearing the results
                childrenData = await apiCall('/api/hnks/list/by-plmn', { dashboard, tenant_id: tenantId, plmn_id: id }, false);
                renderChildren(item, childrenData, 'hnk');
            }
            
            spinnerSpan.remove();
        }
    });

    function renderChildren(parentItem, children, childLevel) {
        if (!children || children.length === 0) {
            const icon = parentItem.querySelector('.bi');
            if(icon) icon.classList.replace('bi-chevron-right', 'bi-dot');
            return;
        }

        const nestedGroup = document.createElement('ul');
        nestedGroup.className = 'list-group mt-2 mb-2 ms-4 nested-group';
        
        children.forEach(child => {
            const li = document.createElement('li');
            li.className = 'list-group-item list-group-item-dark tree-item';
            li.dataset.level = childLevel;
            li.dataset.id = child.id;
            li.dataset.loaded = 'false';
            
            let content = '';
            if (childLevel === 'plmn') {
                li.dataset.tenantId = child.tenant_id;
                content = `<i class="bi bi-chevron-right me-2"></i> <strong>${child.name}</strong> <small class="text-muted">(MCC: ${child.mcc}, MNC: ${child.mnc})</small>`;
            } else if (childLevel === 'hnk') {
                content = `<i class="bi bi-key-fill me-2"></i> <strong>Key ID: ${child.key_id}</strong>`;
            }
            li.innerHTML = content;
            nestedGroup.appendChild(li);
        });
        parentItem.after(nestedGroup);
    }
</script>
{% endblock %}