{% extends 'base/layout.html' %}
{% load i18n %}
{% load static %}
{% load wug_filters %}

{% block title %}WhatsUp Gold Sync Dashboard{% endblock %}

{% block content %}
<style>
    .metric-card {
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .metric-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .metric-icon {
        font-size: 2.5rem;
        opacity: 0.8;
    }
    .metric-value {
        font-size: 2rem;
        font-weight: bold;
    }
    .status-indicator {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 8px;
    }
    .status-active { background-color: #28a745; }
    .status-inactive { background-color: #dc3545; }
    .status-warning { background-color: #ffc107; }
    .refresh-btn {
        position: absolute;
        top: 15px;
        right: 15px;
    }
    .action-buttons .btn {
        margin-right: 5px;
        margin-bottom: 5px;
    }
    .dashboard-logo {
        margin-right: 12px;
        vertical-align: middle;
    }
    .dashboard-logo img {
        height: 2rem;
        width: auto;
        vertical-align: middle;
        filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(5783%) hue-rotate(206deg) brightness(96%) contrast(96%);
    }
    .dashboard-title {
        display: flex;
        align-items: center;
    }
</style>
<!-- Header with refresh button -->
<div class="row">
    <div class="col-12 position-relative">
        <h1 class="mb-4 dashboard-title">
            <span class="dashboard-logo text-primary">
                <img src="{% static 'netbox_wug_sync/img/wug-logo.svg' %}" alt="WUG" />
            </span>
            <i class="mdi mdi-view-dashboard me-2 text-primary"></i>
            {% trans "Sync Dashboard" %}
        </h1>
        <button class="btn btn-outline-primary refresh-btn" onclick="location.reload()">
            <i class="mdi mdi-refresh"></i> Refresh
        </button>
    </div>
</div>

<!-- Statistics Cards -->
<div class="row mb-4">
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="card border-primary metric-card h-100">
            <div class="card-body text-center">
                <i class="mdi mdi-server-network text-primary metric-icon"></i>
                <div class="metric-value text-primary">{{ connections|length }}</div>
                <p class="card-text text-muted mb-0">Active Connections</p>
                <small class="text-muted">
                    {% if connections %}
                        <span class="status-indicator status-active"></span>Online
                    {% else %}
                        <span class="status-indicator status-inactive"></span>None configured
                    {% endif %}
                </small>
            </div>
        </div>
    </div>
    
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="card border-success metric-card h-100">
            <div class="card-body text-center">
                <i class="mdi mdi-devices text-success metric-icon"></i>
                <div class="metric-value text-success">{{ synced_devices }}</div>
                <p class="card-text text-muted mb-0">Synced Devices</p>
                <small class="text-muted">
                    {% if synced_devices > 0 %}
                        <span class="status-indicator status-active"></span>Synchronized
                    {% else %}
                        <span class="status-indicator status-warning"></span>No devices synced
                    {% endif %}
                </small>
            </div>
        </div>
    </div>
    
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="card border-warning metric-card h-100">
            <div class="card-body text-center">
                <i class="mdi mdi-clock text-warning metric-icon"></i>
                <div class="metric-value text-warning">{{ pending_devices }}</div>
                <p class="card-text text-muted mb-0">Pending Sync</p>
                <small class="text-muted">
                    {% if pending_devices > 0 %}
                        <span class="status-indicator status-warning"></span>Awaiting sync
                    {% else %}
                        <span class="status-indicator status-active"></span>Up to date
                    {% endif %}
                </small>
            </div>
        </div>
    </div>
    
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="card border-danger metric-card h-100">
            <div class="card-body text-center">
                <i class="mdi mdi-alert-circle text-danger metric-icon"></i>
                <div class="metric-value text-danger">{{ error_devices }}</div>
                <p class="card-text text-muted mb-0">Sync Errors</p>
                <small class="text-muted">
                    {% if error_devices > 0 %}
                        <span class="status-indicator status-inactive"></span>Needs attention
                    {% else %}
                        <span class="status-indicator status-active"></span>No errors
                    {% endif %}
                </small>
            </div>
        </div>
    </div>
</div>

<!-- Connections Overview -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">
                    <i class="mdi mdi-server-network me-2"></i>
                    Active Connections
                </h5>
                <a href="{% url 'plugins:netbox_wug_sync:wugconnection_add' %}" class="btn btn-primary btn-sm">
                    <i class="mdi mdi-plus"></i> Add Connection
                </a>
            </div>
            <div class="card-body">
                {% if connections %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Connection</th>
                                    <th>Status</th>
                                    <th>Last Sync</th>
                                    <th>Devices</th>
                                    <th class="text-center">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for connection in connections %}
                                <tr>
                                    <td>
                                        <div>
                                            <strong>
                                                <a href="{% url 'plugins:netbox_wug_sync:wugconnection' pk=connection.pk %}" 
                                                   class="text-decoration-none">
                                                    {{ connection.name }}
                                                </a>
                                            </strong>
                                            <br>
                                            <small class="text-muted">
                                                <i class="mdi mdi-web"></i> {{ connection.host }}:{{ connection.port }}
                                            </small>
                                        </div>
                                    </td>
                                    <td>
                                        {% if connection.is_active %}
                                            <span class="badge bg-success">
                                                <i class="mdi mdi-check-circle"></i> Active
                                            </span>
                                        {% else %}
                                            <span class="badge bg-secondary">
                                                <i class="mdi mdi-pause-circle"></i> Inactive
                                            </span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if connection.last_sync %}
                                            <span title="{{ connection.last_sync }}">
                                                <i class="mdi mdi-clock-outline"></i>
                                                {{ connection.last_sync|timesince }} ago
                                            </span>
                                        {% else %}
                                            <span class="text-muted">
                                                <i class="mdi mdi-clock-alert-outline"></i> Never synced
                                            </span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <span class="badge bg-info">
                                            {{ connection.devices.count }} devices
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        <div class="action-buttons">
                                            <button class="btn btn-sm btn-outline-primary" 
                                                    onclick="testConnection({{ connection.pk }})"
                                                    title="Test Connection">
                                                <i class="mdi mdi-connection"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-success" 
                                                    onclick="triggerSync({{ connection.pk }})"
                                                    title="Sync WUG to NetBox">
                                                <i class="mdi mdi-sync"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-warning" 
                                                    onclick="triggerNetBoxExport({{ connection.pk }})"
                                                    title="Export NetBox to WUG">
                                                <i class="mdi mdi-export"></i>
                                            </button>
                                            <a href="{% url 'plugins:netbox_wug_sync:wugconnection_edit' pk=connection.pk %}" 
                                               class="btn btn-sm btn-outline-secondary"
                                               title="Edit Connection">
                                                <i class="mdi mdi-pencil"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center py-5">
                        <i class="mdi mdi-server-off text-muted" style="font-size: 4rem;"></i>
                        <h5 class="text-muted mt-3">No WhatsUp Gold Connections</h5>
                        <p class="text-muted">Get started by adding your first WhatsUp Gold server connection.</p>
                        <a href="{% url 'plugins:netbox_wug_sync:wugconnection_add' %}" class="btn btn-primary">
                            <i class="mdi mdi-plus"></i> Add First Connection
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Recent Sync Logs -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">
                    <i class="mdi mdi-clipboard-text me-2"></i>
                    Recent Sync Activity
                </h5>
                <a href="{% url 'plugins:netbox_wug_sync:wugsynclog_list' %}" class="btn btn-outline-primary btn-sm">
                    <i class="mdi mdi-format-list-bulleted"></i> View All Logs
                </a>
            </div>
            <div class="card-body">
                {% if recent_logs %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Connection</th>
                                    <th>Type</th>
                                    <th>Status</th>
                                    <th>Started</th>
                                    <th>Duration</th>
                                    <th>Results</th>
                                    <th>Success Rate</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for log in recent_logs %}
                                <tr>
                                    <td>
                                        <a href="{% url 'plugins:netbox_wug_sync:wugsynclog' pk=log.pk %}" 
                                           class="text-decoration-none">
                                            <strong>{{ log.connection.name }}</strong>
                                        </a>
                                    </td>
                                    <td>
                                        <span class="badge bg-info">
                                            <i class="mdi mdi-sync"></i> {{ log.sync_type|capfirst }}
                                        </span>
                                    </td>
                                    <td>
                                        {% if log.status == 'completed' %}
                                            <span class="badge bg-success">
                                                <i class="mdi mdi-check-circle"></i> {{ log.status|capfirst }}
                                            </span>
                                        {% elif log.status == 'running' %}
                                            <span class="badge bg-primary">
                                                <i class="mdi mdi-play-circle"></i> {{ log.status|capfirst }}
                                            </span>
                                        {% elif log.status == 'failed' %}
                                            <span class="badge bg-danger">
                                                <i class="mdi mdi-alert-circle"></i> {{ log.status|capfirst }}
                                            </span>
                                        {% else %}
                                            <span class="badge bg-warning">
                                                <i class="mdi mdi-pause-circle"></i> {{ log.status|capfirst }}
                                            </span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <span title="{{ log.start_time }}">
                                            <i class="mdi mdi-clock-outline"></i>
                                            {{ log.start_time|timesince }} ago
                                        </span>
                                    </td>
                                    <td>
                                        {% if log.duration %}
                                            <span class="badge bg-secondary">
                                                {{ log.duration|format_duration }}
                                            </span>
                                        {% else %}
                                            <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <small class="text-muted">
                                            <div>{{ log.devices_discovered }} discovered</div>
                                            <div>{{ log.devices_created }} created</div>
                                            <div>{{ log.devices_updated }} updated</div>
                                        </small>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="progress flex-grow-1 me-2" style="height: 20px;">
                                                <div class="progress-bar 
                                                    {% if log.success_rate >= 90 %}bg-success
                                                    {% elif log.success_rate >= 70 %}bg-warning
                                                    {% else %}bg-danger{% endif %}" 
                                                    role="progressbar" 
                                                    style="width: {{ log.success_rate }}%">
                                                </div>
                                            </div>
                                            <small class="text-muted">{{ log.success_rate|floatformat:1 }}%</small>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center py-5">
                        <i class="mdi mdi-clipboard-text-off text-muted" style="font-size: 4rem;"></i>
                        <h5 class="text-muted mt-3">No Sync Activity</h5>
                        <p class="text-muted">No sync operations have been performed yet. Start by testing a connection or triggering a sync.</p>
                        {% if connections %}
                            <button class="btn btn-success" onclick="triggerSync({{ connections.0.pk }})">
                                <i class="mdi mdi-sync"></i> Start First Sync
                            </button>
                        {% endif %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- JavaScript for AJAX actions -->
<script>
// Show loading spinner for buttons
function showLoading(button, text = 'Loading...') {
    button.disabled = true;
    button.innerHTML = `<span class="spinner-border spinner-border-sm me-2" role="status"></span>${text}`;
}

// Reset button state
function resetButton(button, icon, text) {
    button.disabled = false;
    button.innerHTML = `<i class="${icon}"></i> ${text}`;
}

function testConnection(connectionId) {
    const button = event.target;
    const originalHtml = button.innerHTML;
    
    showLoading(button, 'Testing...');
    
    fetch(`/plugins/wug-sync/connections/${connectionId}/test/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        button.innerHTML = originalHtml;
        button.disabled = false;
        
        if (data.success) {
            // Show success message
            const alertDiv = document.createElement('div');
            alertDiv.className = 'alert alert-success alert-dismissible fade show mt-2';
            alertDiv.innerHTML = `
                <i class="mdi mdi-check-circle me-2"></i>
                Connection test successful! Found ${data.device_count || 'unknown'} devices.
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            button.closest('.card-body').insertBefore(alertDiv, button.closest('.card-body').firstChild);
            
            // Auto-hide after 5 seconds
            setTimeout(() => {
                if (alertDiv.parentNode) {
                    alertDiv.remove();
                }
            }, 5000);
        } else {
            // Show error message
            const alertDiv = document.createElement('div');
            alertDiv.className = 'alert alert-danger alert-dismissible fade show mt-2';
            alertDiv.innerHTML = `
                <i class="mdi mdi-alert-circle me-2"></i>
                Connection test failed: ${data.message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            button.closest('.card-body').insertBefore(alertDiv, button.closest('.card-body').firstChild);
            
            // Auto-hide after 8 seconds
            setTimeout(() => {
                if (alertDiv.parentNode) {
                    alertDiv.remove();
                }
            }, 8000);
        }
    })
    .catch(error => {
        button.innerHTML = originalHtml;
        button.disabled = false;
        
        const alertDiv = document.createElement('div');
        alertDiv.className = 'alert alert-danger alert-dismissible fade show mt-2';
        alertDiv.innerHTML = `
            <i class="mdi mdi-alert-circle me-2"></i>
            Error testing connection: ${error.message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        button.closest('.card-body').insertBefore(alertDiv, button.closest('.card-body').firstChild);
        
        setTimeout(() => {
            if (alertDiv.parentNode) {
                alertDiv.remove();
            }
        }, 8000);
    });
}

function triggerSync(connectionId) {
    if (confirm('Are you sure you want to trigger a sync for this connection? This may take several minutes.')) {
        const button = event.target;
        const originalHtml = button.innerHTML;
        
        showLoading(button, 'Starting...');
        
        fetch(`/plugins/wug-sync/connections/${connectionId}/sync/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            button.innerHTML = originalHtml;
            button.disabled = false;
            
            if (data.success) {
                const alertDiv = document.createElement('div');
                alertDiv.className = 'alert alert-info alert-dismissible fade show mt-2';
                alertDiv.innerHTML = `
                    <i class="mdi mdi-sync me-2"></i>
                    ${data.message} The page will refresh to show updated status.
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                `;
                button.closest('.card-body').insertBefore(alertDiv, button.closest('.card-body').firstChild);
                
                // Refresh page after 3 seconds
                setTimeout(() => {
                    location.reload();
                }, 3000);
            } else {
                const alertDiv = document.createElement('div');
                alertDiv.className = 'alert alert-danger alert-dismissible fade show mt-2';
                alertDiv.innerHTML = `
                    <i class="mdi mdi-alert-circle me-2"></i>
                    Sync failed: ${data.message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                `;
                button.closest('.card-body').insertBefore(alertDiv, button.closest('.card-body').firstChild);
                
                setTimeout(() => {
                    if (alertDiv.parentNode) {
                        alertDiv.remove();
                    }
                }, 8000);
            }
        })
        .catch(error => {
            button.innerHTML = originalHtml;
            button.disabled = false;
            
            const alertDiv = document.createElement('div');
            alertDiv.className = 'alert alert-danger alert-dismissible fade show mt-2';
            alertDiv.innerHTML = `
                <i class="mdi mdi-alert-circle me-2"></i>
                Error triggering sync: ${error.message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            button.closest('.card-body').insertBefore(alertDiv, button.closest('.card-body').firstChild);
            
            setTimeout(() => {
                if (alertDiv.parentNode) {
                    alertDiv.remove();
                }
            }, 8000);
        });
    }
}

function triggerNetBoxExport(connectionId) {
    if (confirm('Are you sure you want to export NetBox devices to WhatsUp Gold? This will create devices in WUG for all active NetBox devices with primary IP addresses.')) {
        const button = event.target;
        const originalHtml = button.innerHTML;
        
        showLoading(button, 'Exporting...');
        
        fetch(`/plugins/wug-sync/connections/${connectionId}/export/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            button.innerHTML = originalHtml;
            button.disabled = false;
            
            if (data.success) {
                const alertDiv = document.createElement('div');
                alertDiv.className = 'alert alert-success alert-dismissible fade show mt-2';
                alertDiv.innerHTML = `
                    <i class="mdi mdi-check-circle me-2"></i>
                    <strong>NetBox Export Completed!</strong><br>
                    ${data.message}<br>
                    <small>Created: ${data.devices_created || 0} devices | Failed: ${data.devices_failed || 0} devices | Total: ${data.total_devices || 0} devices</small>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                `;
                button.closest('.card-body').insertBefore(alertDiv, button.closest('.card-body').firstChild);
                
                // Refresh page after 3 seconds
                setTimeout(() => {
                    location.reload();
                }, 3000);
            } else {
                const alertDiv = document.createElement('div');
                alertDiv.className = 'alert alert-danger alert-dismissible fade show mt-2';
                alertDiv.innerHTML = `
                    <i class="mdi mdi-alert-circle me-2"></i>
                    NetBox export failed: ${data.message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                `;
                button.closest('.card-body').insertBefore(alertDiv, button.closest('.card-body').firstChild);
                
                setTimeout(() => {
                    if (alertDiv.parentNode) {
                        alertDiv.remove();
                    }
                }, 8000);
            }
        })
        .catch(error => {
            button.innerHTML = originalHtml;
            button.disabled = false;
            
            const alertDiv = document.createElement('div');
            alertDiv.className = 'alert alert-danger alert-dismissible fade show mt-2';
            alertDiv.innerHTML = `
                <i class="mdi mdi-alert-circle me-2"></i>
                Error triggering NetBox export: ${error.message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            button.closest('.card-body').insertBefore(alertDiv, button.closest('.card-body').firstChild);
            
            setTimeout(() => {
                if (alertDiv.parentNode) {
                    alertDiv.remove();
                }
            }, 8000);
        });
    }
}

// Auto-refresh dashboard every 30 seconds if there are running syncs
document.addEventListener('DOMContentLoaded', function() {
    const runningBadges = document.querySelectorAll('.badge:contains("running")');
    if (runningBadges.length > 0) {
        console.log('Found running syncs, will auto-refresh in 30 seconds');
        setTimeout(() => {
            location.reload();
        }, 30000);
    }
});
</script>

{% csrf_token %}
{% endblock %}