{% extends 'generic/object.html' %}
{% load helpers %}

{% block title %}Import Preview - {{ pattern }}{% endblock %}

{% block header %}
<h1 class="ps-3 pt-2">
    <i class="mdi mdi-import"></i> Import Preview: <code>{{ pattern }}</code>
</h1>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        {% if error %}
        <div class="alert alert-danger">
            <i class="mdi mdi-alert-circle"></i> {{ error }}
        </div>
        <a href="{% url 'plugins:netbox_vitalqip:prefix_import' %}" class="btn btn-secondary">
            <i class="mdi mdi-arrow-left"></i> Back to Search
        </a>

        {% elif mode == "ip" %}
        {# Single IP Address Lookup #}
        <div class="card mb-3">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="mdi mdi-ip-network"></i> IP Address Lookup: <code>{{ ip_address }}</code>
                </h5>
            </div>
            <div class="card-body">
                {% if existing_ip %}
                <div class="alert alert-info">
                    <i class="mdi mdi-information"></i> This IP address already exists in NetBox.
                    <a href="{{ existing_ip.get_absolute_url }}" class="alert-link">View IP</a>
                </div>
                {% endif %}

                <table class="table table-hover">
                    <tbody>
                        <tr>
                            <th style="width: 200px;">IP Address</th>
                            <td><code>{{ ip_address }}</code></td>
                        </tr>
                        <tr>
                            <th>Object Name</th>
                            <td>{{ qip_data.objectName|default:"-" }}</td>
                        </tr>
                        <tr>
                            <th>Domain</th>
                            <td>{{ qip_data.domainName|default:"-" }}</td>
                        </tr>
                        <tr>
                            <th>DNS Name</th>
                            <td>
                                {% if dns_name %}
                                <code>{{ dns_name }}</code>
                                {% else %}
                                <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Object Class</th>
                            <td>{{ qip_data.objectClass|default:"-" }}</td>
                        </tr>
                        <tr>
                            <th>Config Type</th>
                            <td>
                                {% if qip_data.dynamicConfig == "Static" %}
                                <span class="badge text-bg-success">Static</span>
                                {% elif qip_data.dynamicConfig == "DHCP" %}
                                <span class="badge text-bg-info">DHCP</span>
                                {% elif qip_data.dynamicConfig %}
                                <span class="badge text-bg-secondary">{{ qip_data.dynamicConfig }}</span>
                                {% else %}
                                <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Subnet</th>
                            <td>{{ qip_data.subnetAddr|default:"-" }}</td>
                        </tr>
                    </tbody>
                </table>

                {% if can_import %}
                <form id="import-ip-form" method="post">
                    {% csrf_token %}
                    <input type="hidden" name="import_mode" value="ip">
                    <input type="hidden" name="ip_address" value="{{ ip_address }}">
                    <input type="hidden" name="dns_name" value="{{ dns_name }}">

                    <button type="submit" class="btn btn-success" id="import-ip-btn">
                        <i class="mdi mdi-import"></i> Import IP Address
                    </button>
                    <a href="{% url 'plugins:netbox_vitalqip:prefix_import' %}" class="btn btn-secondary">
                        <i class="mdi mdi-arrow-left"></i> Back
                    </a>
                </form>

                <div id="import-result" class="mt-3" style="display: none;"></div>
                {% else %}
                <a href="{% url 'plugins:netbox_vitalqip:prefix_import' %}" class="btn btn-secondary">
                    <i class="mdi mdi-arrow-left"></i> Back to Search
                </a>
                {% endif %}
            </div>
        </div>

        {% else %}
        {# Prefix/Network Search Results #}
        {% if total_count == 0 %}
        <div class="alert alert-warning">
            <i class="mdi mdi-alert"></i> No networks found in VitalQIP matching <code>{{ pattern }}</code>
        </div>
        <a href="{% url 'plugins:netbox_vitalqip:prefix_import' %}" class="btn btn-secondary">
            <i class="mdi mdi-arrow-left"></i> Back to Search
        </a>

        {% else %}
        <!-- Summary -->
        <div class="card mb-3">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="mdi mdi-chart-bar"></i> Summary for <code>{{ pattern }}</code>
                </h5>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col">
                        <div class="display-6">{{ total_count }}</div>
                        <div class="text-muted">Total in QIP</div>
                    </div>
                    <div class="col">
                        <div class="display-6 text-success">{{ new_count }}</div>
                        <div class="text-muted">New (Not in NetBox)</div>
                    </div>
                    <div class="col">
                        <div class="display-6 text-info">{{ existing_count }}</div>
                        <div class="text-muted">Already in NetBox</div>
                    </div>
                </div>
            </div>
        </div>

        {% if new_count > 0 %}
        <!-- New Networks to Import -->
        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">
                    <i class="mdi mdi-plus-circle text-success"></i> New Prefixes ({{ new_count }})
                </h5>
                <div>
                    <button type="button" class="btn btn-sm btn-outline-primary" id="select-all-btn">
                        <i class="mdi mdi-checkbox-multiple-marked"></i> Select All
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="deselect-all-btn">
                        <i class="mdi mdi-checkbox-multiple-blank-outline"></i> Deselect All
                    </button>
                </div>
            </div>
            <div class="card-body">
                <form id="import-form" method="post">
                    {% csrf_token %}
                    <input type="hidden" name="import_mode" value="prefix">

                    <div class="table-responsive">
                        <table class="table table-hover table-sm">
                            <thead>
                                <tr>
                                    <th style="width: 40px;">
                                        <input type="checkbox" class="form-check-input" id="select-all-checkbox">
                                    </th>
                                    <th>Prefix</th>
                                    <th>Name (Description)</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for network in new_networks %}
                                <tr>
                                    <td>
                                        <input type="checkbox" class="form-check-input prefix-checkbox"
                                               name="selected_prefixes" value="{{ network.prefix_str }}|{{ network.name }}">
                                    </td>
                                    <td><code>{{ network.prefix_str }}</code></td>
                                    <td>{{ network.name|default:"-" }}</td>
                                    <td>
                                        {% if "DISCONNECTED" in network.name|upper %}
                                        <span class="badge text-bg-warning">Disconnected</span>
                                        {% else %}
                                        <span class="badge text-bg-success">Active</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>

                    <div class="mt-3">
                        <button type="submit" class="btn btn-success" id="import-btn">
                            <i class="mdi mdi-import"></i> Import Selected Prefixes
                        </button>
                        <a href="{% url 'plugins:netbox_vitalqip:prefix_import' %}" class="btn btn-secondary">
                            <i class="mdi mdi-arrow-left"></i> Back
                        </a>
                    </div>
                </form>

                <div id="import-result" class="mt-3" style="display: none;"></div>
            </div>
        </div>
        {% endif %}

        {% if existing_count > 0 %}
        <!-- Existing Prefixes (Already in NetBox) -->
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="mdi mdi-check-circle text-info"></i> Already in NetBox ({{ existing_count }})
                </h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover table-sm">
                        <thead>
                            <tr>
                                <th>Prefix</th>
                                <th>Name in QIP</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for network in existing_networks %}
                            <tr class="table-secondary">
                                <td>
                                    <code>{{ network.prefix_str }}</code>
                                    <span class="badge text-bg-info ms-2">Exists</span>
                                </td>
                                <td>{{ network.name|default:"-" }}</td>
                                <td>
                                    {% if "DISCONNECTED" in network.name|upper %}
                                    <span class="badge text-bg-warning">Disconnected</span>
                                    {% else %}
                                    <span class="badge text-bg-success">Active</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% endif %}

        {% endif %}
        {% endif %}
    </div>
</div>

{% if mode == "ip" and can_import %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const importForm = document.getElementById('import-ip-form');
    const importBtn = document.getElementById('import-ip-btn');
    const importResult = document.getElementById('import-result');

    importForm.addEventListener('submit', function(e) {
        e.preventDefault();

        importBtn.disabled = true;
        importBtn.innerHTML = '<i class="mdi mdi-loading mdi-spin"></i> Importing...';
        importResult.style.display = 'none';

        const formData = new FormData(importForm);

        fetch('{% url "plugins:netbox_vitalqip:prefix_import_preview" %}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRFToken': '{{ csrf_token }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            importResult.style.display = 'block';
            if (data.success) {
                importResult.innerHTML = '<div class="alert alert-success">' +
                    '<i class="mdi mdi-check-circle"></i> ' + data.message +
                    '</div>';
                importBtn.innerHTML = '<i class="mdi mdi-check"></i> Imported';
                importBtn.classList.remove('btn-success');
                importBtn.classList.add('btn-secondary');
            } else {
                importResult.innerHTML = '<div class="alert alert-danger">' +
                    '<i class="mdi mdi-alert-circle"></i> ' + data.error +
                    '</div>';
                importBtn.disabled = false;
                importBtn.innerHTML = '<i class="mdi mdi-import"></i> Import IP Address';
            }
        })
        .catch(error => {
            importResult.style.display = 'block';
            importResult.innerHTML = '<div class="alert alert-danger">' +
                '<i class="mdi mdi-alert-circle"></i> Error: ' + error.message +
                '</div>';
            importBtn.disabled = false;
            importBtn.innerHTML = '<i class="mdi mdi-import"></i> Import IP Address';
        });
    });
});
</script>
{% elif new_count > 0 %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const selectAllCheckbox = document.getElementById('select-all-checkbox');
    const selectAllBtn = document.getElementById('select-all-btn');
    const deselectAllBtn = document.getElementById('deselect-all-btn');
    const checkboxes = document.querySelectorAll('.prefix-checkbox');
    const importForm = document.getElementById('import-form');
    const importBtn = document.getElementById('import-btn');
    const importResult = document.getElementById('import-result');

    // Select all checkbox
    selectAllCheckbox.addEventListener('change', function() {
        checkboxes.forEach(cb => cb.checked = this.checked);
    });

    // Select all button
    selectAllBtn.addEventListener('click', function() {
        checkboxes.forEach(cb => cb.checked = true);
        selectAllCheckbox.checked = true;
    });

    // Deselect all button
    deselectAllBtn.addEventListener('click', function() {
        checkboxes.forEach(cb => cb.checked = false);
        selectAllCheckbox.checked = false;
    });

    // Form submission
    importForm.addEventListener('submit', function(e) {
        e.preventDefault();

        const selectedCount = document.querySelectorAll('.prefix-checkbox:checked').length;
        if (selectedCount === 0) {
            alert('Please select at least one prefix to import.');
            return;
        }

        importBtn.disabled = true;
        importBtn.innerHTML = '<i class="mdi mdi-loading mdi-spin"></i> Importing...';
        importResult.style.display = 'none';

        const formData = new FormData(importForm);

        fetch('{% url "plugins:netbox_vitalqip:prefix_import_preview" %}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRFToken': '{{ csrf_token }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            importResult.style.display = 'block';
            if (data.success) {
                importResult.innerHTML = '<div class="alert alert-success">' +
                    '<i class="mdi mdi-check-circle"></i> ' + data.message +
                    '</div>';
                // Disable imported checkboxes
                document.querySelectorAll('.prefix-checkbox:checked').forEach(cb => {
                    cb.disabled = true;
                    cb.closest('tr').classList.add('table-success');
                });
                importBtn.innerHTML = '<i class="mdi mdi-check"></i> Imported';
                importBtn.classList.remove('btn-success');
                importBtn.classList.add('btn-secondary');
            } else {
                importResult.innerHTML = '<div class="alert alert-danger">' +
                    '<i class="mdi mdi-alert-circle"></i> ' + data.error +
                    '</div>';
                importBtn.disabled = false;
                importBtn.innerHTML = '<i class="mdi mdi-import"></i> Import Selected Prefixes';
            }

            if (data.errors && data.errors.length > 0) {
                let errorHtml = '<div class="alert alert-warning mt-2"><strong>Errors:</strong><ul class="mb-0">';
                data.errors.forEach(err => {
                    errorHtml += '<li>' + err + '</li>';
                });
                errorHtml += '</ul></div>';
                importResult.innerHTML += errorHtml;
            }
        })
        .catch(error => {
            importResult.style.display = 'block';
            importResult.innerHTML = '<div class="alert alert-danger">' +
                '<i class="mdi mdi-alert-circle"></i> Error: ' + error.message +
                '</div>';
            importBtn.disabled = false;
            importBtn.innerHTML = '<i class="mdi mdi-import"></i> Import Selected Prefixes';
        });
    });
});
</script>
{% endif %}
{% endblock %}