{% extends 'netbox_meraki/base.html' %}

{% block page_content %}
<div class="row">
    <div class="col-md-12">
        <h1>Sync from Meraki Dashboard</h1>
    </div>
</div>

<div class="row mt-4">
    <div class="col-md-8 offset-md-2">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <strong>Synchronization</strong>
            </div>
            <div class="card-body">
                <p>This will start a synchronization from the Meraki Dashboard API to NetBox.</p>
                
                <div class="alert alert-info">
                    <strong>Note:</strong> Data will be synchronized in the following order to ensure proper dependencies:
                    <ol>
                        <li>Sites (from Meraki Networks)</li>
                        <li>Device Types (Manufacturers & Models)</li>
                        <li>VLANs</li>
                        <li>Prefixes/Subnets</li>
                        <li>Devices</li>
                        <li>Interfaces</li>
                        <li>IP Addresses</li>
                        <li>SSIDs</li>
                    </ol>
                </div>

                <form method="post" id="syncForm">
                    {% csrf_token %}
                    
                    <div class="mb-4">
                        <label class="form-label"><strong>Organization</strong></label>
                        <select class="form-select" name="organization_id" id="organizationSelect">
                            <option value="">All Organizations</option>
                            {% for org in organizations %}
                            <option value="{{ org.id }}">{{ org.name }}</option>
                            {% endfor %}
                        </select>
                        <div id="network-count-badge-sync" style="display: none; margin-top: 8px;">
                            <span class="badge" style="background-color: #0d6efd; color: #fff; font-weight: 600;">
                                <i class="mdi mdi-network"></i> <span id="network-count-sync">0</span> Networks
                            </span>
                        </div>
                        <small class="text-muted">Select a specific organization or sync all</small>
                    </div>
                    
                    <div class="mb-4" id="networkSelectContainer" style="display: none;">
                        <label class="form-label"><strong>Networks</strong></label>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" id="syncAllNetworks" name="sync_all_networks" value="true" checked>
                            <label class="form-check-label" for="syncAllNetworks">
                                Sync all networks in organization
                            </label>
                        </div>
                        <div id="networkListContainer" style="display: none;">
                            <div class="border rounded p-3" style="max-height: 300px; overflow-y: auto;">
                                <div id="networkList" class="mb-0">
                                    <div class="text-muted text-center py-3">
                                        <span class="spinner-border spinner-border-sm me-2" role="status"></span>
                                        Loading networks...
                                    </div>
                                </div>
                            </div>
                            <div id="selected-network-count" style="display: none; margin-top: 8px;">
                                <span class="badge" style="background-color: #198754; color: #fff; font-weight: 600;">
                                    <i class="mdi mdi-checkbox-marked-circle"></i> <span id="selected-count">0</span> selected
                                </span>
                            </div>
                            <small class="text-muted">Select specific networks to sync</small>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="form-label"><strong>Sync Mode</strong></label>
                        
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="sync_mode" id="mode_auto" value="auto" checked>
                            <label class="form-check-label" for="mode_auto">
                                <strong>Auto Sync</strong>
                                <p class="text-muted small mb-0">All changes will be applied immediately to NetBox without review.</p>
                            </label>
                        </div>
                        
                        <div class="form-check mt-2">
                            <input class="form-check-input" type="radio" name="sync_mode" id="mode_review" value="review">
                            <label class="form-check-label" for="mode_review">
                                <strong>Sync with Review</strong>
                                <p class="text-muted small mb-0">Changes will be staged for review. You can approve or reject individual items before applying.</p>
                            </label>
                        </div>
                        
                        <div class="form-check mt-2">
                            <input class="form-check-input" type="radio" name="sync_mode" id="mode_dry_run" value="dry_run">
                            <label class="form-check-label" for="mode_dry_run">
                                <strong>Dry Run</strong>
                                <p class="text-muted small mb-0">Preview all changes without applying anything. Useful for testing.</p>
                            </label>
                        </div>
                    </div>

                    <div class="alert alert-warning">
                        <strong>Warning:</strong> This operation may take several minutes depending on the size of your Meraki deployment.
                    </div>

                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="mdi mdi-sync"></i> Start Synchronization
                        </button>
                        <a href="{% url 'plugins:netbox_meraki:dashboard' %}" class="btn btn-secondary">
                            Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const orgSelect = document.getElementById('organizationSelect');
    const networkContainer = document.getElementById('networkSelectContainer');
    const networkListContainer = document.getElementById('networkListContainer');
    const networkList = document.getElementById('networkList');
    const syncAllCheckbox = document.getElementById('syncAllNetworks');
    const form = document.getElementById('syncForm');
    const networkCountBadge = document.getElementById('network-count-badge-sync');
    const networkCountSpan = document.getElementById('network-count-sync');
    
    // Handle organization selection
    orgSelect.addEventListener('change', function() {
        const orgId = this.value;
        
        if (orgId) {
            // Show network selection
            networkContainer.style.display = 'block';
            loadNetworks(orgId);
            fetchNetworkCount(orgId);
        } else {
            // Hide network selection for "All Organizations"
            networkContainer.style.display = 'none';
            networkList.innerHTML = '';
            networkCountBadge.style.display = 'none';
        }
    });
    
    // Fetch network count for organization
    function fetchNetworkCount(orgId) {
        networkCountSpan.textContent = '...';
        networkCountBadge.style.display = 'block';
        
        fetch(`/plugins/meraki/api/organizations/`)
            .then(response => response.json())
            .then(data => {
                const org = data.organizations.find(o => o.id === orgId);
                if (org) {
                    networkCountSpan.textContent = org.network_count || 0;
                }
            })
            .catch(error => {
                console.error('Error fetching network count:', error);
                networkCountBadge.style.display = 'none';
            });
    }
    
    // Handle sync all networks checkbox
    syncAllCheckbox.addEventListener('change', function() {
        if (this.checked) {
            networkListContainer.style.display = 'none';
        } else {
            networkListContainer.style.display = 'block';
        }
    });
    
    // Update selected network count
    function updateSelectedCount() {
        const checkboxes = networkList.querySelectorAll('input[name="network_ids[]"]:checked');
        const count = checkboxes.length;
        const countBadge = document.getElementById('selected-network-count');
        const countSpan = document.getElementById('selected-count');
        
        if (count > 0 && countBadge && countSpan) {
            countSpan.textContent = count;
            countBadge.style.display = 'block';
        } else if (countBadge) {
            countBadge.style.display = 'none';
        }
    }
    
    // Load networks for selected organization
    function loadNetworks(orgId) {
        networkList.innerHTML = `
            <div class="text-muted text-center py-3">
                <span class="spinner-border spinner-border-sm me-2" role="status"></span>
                Loading networks...
            </div>
        `;
        
        fetch(`/plugins/meraki/api/networks/${orgId}/`)
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    networkList.innerHTML = `
                        <div class="alert alert-danger mb-0">
                            <strong>Error:</strong> ${data.error}
                        </div>
                    `;
                    return;
                }
                
                const networks = data.networks || [];
                
                if (networks.length === 0) {
                    networkList.innerHTML = `
                        <div class="text-muted text-center py-3">
                            No networks found in this organization
                        </div>
                    `;
                    return;
                }
                
                // Build network checkboxes
                let html = '';
                networks.forEach(network => {
                    const productTypes = network.productTypes ? network.productTypes.join(', ') : 'Unknown';
                    const tags = network.tags && network.tags.length > 0 
                        ? `<span class="badge bg-secondary ms-2">${network.tags.join(', ')}</span>`
                        : '';
                    
                    html += `
                        <div class="form-check">
                            <input class="form-check-input network-checkbox" type="checkbox" 
                                   name="network_ids" value="${network.id}" id="net_${network.id}">
                            <label class="form-check-label" for="net_${network.id}">
                                <strong>${network.name}</strong>
                                <small class="text-muted ms-2">(${productTypes})</small>
                                ${tags}
                            </label>
                        </div>
                    `;
                });
                
                networkList.innerHTML = html;
                
                // Add change listeners to all checkboxes
                const checkboxes = networkList.querySelectorAll('.network-checkbox');
                checkboxes.forEach(checkbox => {
                    checkbox.addEventListener('change', updateSelectedCount);
                });
            })
            .catch(error => {
                console.error('Error loading networks:', error);
                networkList.innerHTML = `
                    <div class="alert alert-danger mb-0">
                        <strong>Error:</strong> Failed to load networks. Please try again.
                    </div>
                `;
            });
    }
    
    // Form validation
    form.addEventListener('submit', function(e) {
        const orgId = orgSelect.value;
        const syncAll = syncAllCheckbox.checked;
        
        if (orgId && !syncAll) {
            // Check if any networks are selected
            const selectedNetworks = document.querySelectorAll('.network-checkbox:checked');
            if (selectedNetworks.length === 0) {
                e.preventDefault();
                alert('Please select at least one network or enable "Sync all networks"');
                return false;
            }
        }
        
        return true;
    });
});
</script>
{% endblock %}