{% load helpers %}

{% if error %}
<div class="alert alert-warning">
    <i class="mdi mdi-alert"></i> {{ error }}
</div>
{% elif client_data %}
<div class="row">
    <!-- Connection Status Card -->
    <div class="col-md-4 mb-3">
        <div class="card h-100">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="mdi mdi-wifi"></i> Connection Status
                </h5>
            </div>
            <div class="card-body text-center">
                {% if client_data.connected %}
                <div class="p-3 mb-2 bg-success rounded">
                    <span class="text-white fs-3 fw-bold">
                        <i class="mdi mdi-check-circle"></i> Connected
                    </span>
                </div>
                {% else %}
                <div class="p-3 mb-2 bg-secondary rounded">
                    <span class="text-white fs-3 fw-bold">
                        <i class="mdi mdi-close-circle"></i> {{ client_data.connection_status|default:"Offline" }}
                    </span>
                </div>
                {% endif %}

                {% if client_data.overall_health is not None %}
                <div class="mt-3">
                    <span class="fs-5 fw-bold">Health Score:</span>
                    {% if client_data.overall_health >= 8 %}
                    <div class="mt-2 p-2 bg-success rounded d-inline-block">
                        <span class="text-white fs-4 fw-bold">{{ client_data.overall_health }}/10</span>
                    </div>
                    <div class="small text-muted mt-1">Good - Operating normally</div>
                    {% elif client_data.overall_health >= 5 %}
                    <div class="mt-2 p-2 bg-warning rounded d-inline-block">
                        <span class="text-dark fs-4 fw-bold">{{ client_data.overall_health }}/10</span>
                    </div>
                    <div class="small text-muted mt-1">Fair - Some issues detected</div>
                    {% elif client_data.overall_health >= 1 %}
                    <div class="mt-2 p-2 bg-danger rounded d-inline-block">
                        <span class="text-white fs-4 fw-bold">{{ client_data.overall_health }}/10</span>
                    </div>
                    <div class="small text-muted mt-1">Poor - Connectivity issues</div>
                    {% else %}
                    <div class="mt-2 p-2 bg-secondary rounded d-inline-block">
                        <span class="text-white fs-4 fw-bold">{{ client_data.overall_health }}/10</span>
                    </div>
                    <div class="small text-muted mt-1">No health data - Client offline or no recent activity</div>
                    {% endif %}
                </div>
                {% endif %}

                {% if client_data.device_type %}
                <div class="mt-2 text-muted">
                    {{ client_data.device_type }}
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Network Details Card -->
    <div class="col-md-4 mb-3">
        <div class="card h-100">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="mdi mdi-ip-network"></i> Network Details
                </h5>
            </div>
            <div class="card-body">
                <table class="table table-sm table-borderless mb-0">
                    <tr>
                        <th>IP Address:</th>
                        <td>
                            {% if client_data.ip_address %}
                            <code>{{ client_data.ip_address }}</code>
                            {% else %}
                            <span class="text-muted">N/A</span>
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <th>MAC Address:</th>
                        <td><code>{{ client_data.mac_address }}</code></td>
                    </tr>
                    <tr>
                        <th>VLAN:</th>
                        <td>{{ client_data.vlan|default:"N/A" }}</td>
                    </tr>
                    <tr>
                        <th>SSID:</th>
                        <td>{{ client_data.ssid|default:"N/A" }}</td>
                    </tr>
                    {% if client_data.frequency %}
                    <tr>
                        <th>Frequency:</th>
                        <td>{{ client_data.frequency }} GHz</td>
                    </tr>
                    {% endif %}
                </table>
            </div>
        </div>
    </div>

    <!-- Connected AP Card -->
    <div class="col-md-4 mb-3">
        <div class="card h-100">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="mdi mdi-access-point"></i> Connected Device
                </h5>
            </div>
            <div class="card-body">
                <table class="table table-sm table-borderless mb-0">
                    <tr>
                        <th>AP/Switch:</th>
                        <td>{{ client_data.connected_device_name|default:"N/A" }}</td>
                    </tr>
                    <tr>
                        <th>Interface:</th>
                        <td>{{ client_data.connected_interface|default:"N/A" }}</td>
                    </tr>
                    {% if client_data.location %}
                    <tr>
                        <th>Location:</th>
                        <td>{{ client_data.location }}</td>
                    </tr>
                    {% endif %}
                    {% if client_data.ap_group %}
                    <tr>
                        <th>AP Group:</th>
                        <td>{{ client_data.ap_group }}</td>
                    </tr>
                    {% endif %}
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Signal Quality Row (for wireless clients) -->
{% if client_data.rssi or client_data.snr %}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="mdi mdi-signal"></i> Signal Quality
                </h5>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    {% if client_data.rssi %}
                    <div class="col-md-4">
                        <h6>RSSI</h6>
                        <span class="fs-4">{{ client_data.rssi }} dBm</span>
                    </div>
                    {% endif %}
                    {% if client_data.snr %}
                    <div class="col-md-4">
                        <h6>SNR</h6>
                        <span class="fs-4">{{ client_data.snr }} dB</span>
                    </div>
                    {% endif %}
                    {% if client_data.data_rate %}
                    <div class="col-md-4">
                        <h6>Data Rate</h6>
                        <span class="fs-4">{{ client_data.data_rate }} Mbps</span>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- Cache indicator -->
{% if client_data.cached %}
<div class="text-muted small mt-2">
    <i class="mdi mdi-cached"></i> Data from cache
</div>
{% endif %}

{% else %}
<div class="alert alert-info">
    <i class="mdi mdi-information"></i> No client data available. The device may not be connected to the network.
</div>
{% endif %}

<!-- Actions -->
<div class="mt-3">
    <!-- Sync from Catalyst Center Button -->
    {% if client_data.ip_address %}
    <button type="button" class="btn btn-success btn-sm" id="sync-from-cc-btn">
        <i class="mdi mdi-sync"></i> Sync IP from Catalyst Center
    </button>
    <span id="sync-result" class="ms-2"></span>
    {% endif %}

    <!-- External link to Catalyst Center -->
    {% if catalyst_url %}
    <a href="{{ catalyst_url }}" target="_blank" class="btn btn-outline-primary btn-sm">
        <i class="mdi mdi-open-in-new"></i> Open Catalyst Center
    </a>
    {% endif %}
</div>

{% if client_data.ip_address %}
<script>
document.getElementById('sync-from-cc-btn').addEventListener('click', function() {
    var btn = this;
    var resultSpan = document.getElementById('sync-result');

    btn.disabled = true;
    btn.innerHTML = '<i class="mdi mdi-loading mdi-spin"></i> Syncing...';
    resultSpan.innerHTML = '';

    // Use endpoint sync URL if this is an endpoint, otherwise device sync
    {% if object.endpoint_type %}
    var syncUrl = '{% url "plugins:netbox_catalyst_center:sync_endpoint" object.pk %}';
    {% else %}
    var syncUrl = '{% url "plugins:netbox_catalyst_center:sync_device" object.pk %}';
    {% endif %}

    fetch(syncUrl, {
        method: 'POST',
        headers: {
            'X-CSRFToken': '{{ csrf_token }}',
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            resultSpan.innerHTML = '<span class="text-success"><i class="mdi mdi-check-circle"></i> ' + data.message + '</span>';
            // Reload page after short delay to show updated data
            setTimeout(function() {
                window.location.reload();
            }, 1500);
        } else {
            resultSpan.innerHTML = '<span class="text-danger"><i class="mdi mdi-alert-circle"></i> ' + data.error + '</span>';
        }
    })
    .catch(error => {
        resultSpan.innerHTML = '<span class="text-danger"><i class="mdi mdi-alert-circle"></i> Request failed: ' + error + '</span>';
    })
    .finally(() => {
        btn.disabled = false;
        btn.innerHTML = '<i class="mdi mdi-sync"></i> Sync IP from Catalyst Center';
    });
});
</script>
{% endif %}