{% extends 'dcim/device/base.html' %}
{% load helpers %}

{% block content %}
<div class="row">
    <div class="col-12">
        {% 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 = '';

            fetch('{% url "plugins:netbox_catalyst_center:sync_device" object.pk %}', {
                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 %}
    </div>
</div>
{% endblock %}