{% extends "base.html" %}
{% load static %}

{% block title %}{{ object.name }} - {{ block.super }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">
                <i class="fas fa-{% if object.system_type == 'ehr' %}file-medical{% elif object.system_type == 'lis' %}flask{% elif object.system_type == 'ris' %}x-ray{% elif object.system_type == 'pacs' %}images{% elif object.system_type == 'pharmacy' %}pills{% elif object.system_type == 'billing' %}receipt{% else %}server{% endif %} me-2"></i>
                {{ object.name }}
            </h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{% url 'integration:dashboard' %}">Integration</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'integration:external_system_list' %}">External Systems</a></li>
                    <li class="breadcrumb-item active">{{ object.name }}</li>
                </ol>
            </nav>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-outline-info" onclick="testConnection()">
                <i class="fas fa-plug me-2"></i>Test Connection
            </button>
            <a href="{% url 'integration:external_system_update' object.system_id %}" class="btn btn-outline-primary">
                <i class="fas fa-edit me-2"></i>Edit
            </a>
            <div class="btn-group">
                <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                    <i class="fas fa-cogs me-2"></i>Actions
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#" onclick="refreshHealthCheck()">
                        <i class="fas fa-heartbeat me-2"></i>Health Check
                    </a></li>
                    <li><a class="dropdown-item" href="#" onclick="viewLogs()">
                        <i class="fas fa-file-alt me-2"></i>View Logs
                    </a></li>
                    <li><a class="dropdown-item" href="#" onclick="exportConfig()">
                        <i class="fas fa-download me-2"></i>Export Config
                    </a></li>
                    <li><hr class="dropdown-divider"></li>
                    {% if object.is_active %}
                    <li><a class="dropdown-item" href="#" onclick="toggleSystemStatus(false)">
                        <i class="fas fa-pause me-2"></i>Deactivate
                    </a></li>
                    {% else %}
                    <li><a class="dropdown-item" href="#" onclick="toggleSystemStatus(true)">
                        <i class="fas fa-play me-2"></i>Activate
                    </a></li>
                    {% endif %}
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item text-danger" href="{% url 'integration:external_system_delete' object.system_id %}">
                        <i class="fas fa-trash me-2"></i>Delete
                    </a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Status Cards -->
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-title text-muted mb-1">System Status</h6>
                            <h5 class="mb-0 text-{% if object.is_active %}success{% else %}secondary{% endif %}">
                                {% if object.is_active %}Active{% else %}Inactive{% endif %}
                            </h5>
                            <small class="text-muted">Current state</small>
                        </div>
                        <div class="bg-{% if object.is_active %}success{% else %}secondary{% endif %} bg-gradient rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                            <i class="fas fa-{% if object.is_active %}check-circle{% else %}pause-circle{% endif %} fa-lg text-white"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-title text-muted mb-1">Health Status</h6>
                            <h5 class="mb-0 text-{% if object.last_health_check_status == 'HEALTHY' %}success{% elif object.last_health_check_status == 'UNHEALTHY' %}danger{% else %}secondary{% endif %}">
                                {% if object.last_health_check_status == 'HEALTHY' %}Healthy{% elif object.last_health_check_status == 'UNHEALTHY' %}Unhealthy{% else %}Unknown{% endif %}
                            </h5>
                            <small class="text-muted">
                                {% if object.last_health_check %}{{ object.last_health_check|timesince }} ago{% else %}Never checked{% endif %}
                            </small>
                        </div>
                        <div class="bg-{% if object.last_health_check_status == 'HEALTHY' %}success{% elif object.last_health_check_status == 'UNHEALTHY' %}danger{% else %}secondary{% endif %} bg-gradient rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                            <i class="fas fa-{% if object.last_health_check_status == 'HEALTHY' %}heartbeat{% elif object.last_health_check_status == 'UNHEALTHY' %}exclamation-triangle{% else %}question-circle{% endif %} fa-lg text-white"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-title text-muted mb-1">Total Endpoints</h6>
                            <h5 class="mb-0 text-primary">{{ total_endpoints }}</h5>
                            <small class="text-muted">Configured</small>
                        </div>
                        <div class="bg-primary bg-gradient rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                            <i class="fas fa-link fa-lg text-white"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-title text-muted mb-1">Executions Today</h6>
                            <h5 class="mb-0 text-info">{{ executions_today }}</h5>
                            <small class="text-muted">{{ successful_executions }} successful</small>
                        </div>
                        <div class="bg-info bg-gradient rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                            <i class="fas fa-play fa-lg text-white"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- System Information -->
        <div class="col-lg-8">
            <!-- Basic Information -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>System Information
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td class="text-muted" width="120">Name:</td>
                                    <td class="fw-semibold">{{ object.name }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Type:</td>
                                    <td>
                                        <span class="badge bg-secondary">{{ object.get_system_type_display }}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Vendor:</td>
                                    <td>{{ object.vendor|default:"Not specified" }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Version:</td>
                                    <td>{{ object.version|default:"Not specified" }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Created:</td>
                                    <td>{{ object.created_at|date:"M d, Y H:i" }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td class="text-muted" width="120">Status:</td>
                                    <td>
                                        <span class="badge bg-{% if object.is_active %}success{% else %}secondary{% endif %}">
                                            {% if object.is_active %}Active{% else %}Inactive{% endif %}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Health:</td>
                                    <td>
                                        <span class="badge bg-{% if object.last_health_check_status == 'HEALTHY' %}success{% elif object.last_health_check_status == 'UNHEALTHY' %}danger{% else %}secondary{% endif %}">
                                            {% if object.last_health_check_status == 'HEALTHY' %}Healthy{% elif object.last_health_check_status == 'UNHEALTHY' %}Unhealthy{% else %}Unknown{% endif %}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Last Check:</td>
                                    <td>
                                        {% if object.last_health_check %}
                                            {{ object.last_health_check|date:"M d, Y H:i" }}
                                        {% else %}
                                            Never
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Updated:</td>
                                    <td>{{ object.updated_at|date:"M d, Y H:i" }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    
                    {% if object.description %}
                    <div class="mt-3">
                        <h6 class="text-muted">Description:</h6>
                        <p class="mb-0">{{ object.description }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Connection Details -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-plug me-2"></i>Connection Details
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                {% if object.base_url %}
                                <tr>
                                    <td class="text-muted" width="120">Base URL:</td>
                                    <td>
                                        <code>{{ object.base_url }}</code>
                                        <a href="{{ object.base_url }}" target="_blank" class="ms-2">
                                            <i class="fas fa-external-link-alt"></i>
                                        </a>
                                    </td>
                                </tr>
                                {% endif %}
                                {% if object.host %}
                                <tr>
                                    <td class="text-muted">Host:</td>
                                    <td><code>{{ object.host }}{% if object.port %}:{{ object.port }}{% endif %}</code></td>
                                </tr>
                                {% endif %}
                                {% if object.database_name %}
                                <tr>
                                    <td class="text-muted">Database:</td>
                                    <td><code>{{ object.database_name }}</code></td>
                                </tr>
                                {% endif %}
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td class="text-muted" width="120">Auth Type:</td>
                                    <td>
                                        <span class="badge bg-info">{{ object.get_authentication_type_display }}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Timeout:</td>
                                    <td>{{ object.timeout_seconds }} seconds</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Retry:</td>
                                    <td>{{ object.retry_attempts }} attempts, {{ object.retry_delay_seconds }}s delay</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Activity -->
            <div class="card mb-4">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="fas fa-history me-2"></i>Recent Activity
                        </h5>
                        <a href="{% url 'integration:integration_log_list' %}?system={{ object.system_id }}" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-list me-1"></i>View All
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    {% if recent_logs %}
                        <div class="timeline">
                            {% for log in recent_logs %}
                            <div class="timeline-item">
                                <div class="timeline-marker bg-{% if log.level == 'ERROR' %}danger{% elif log.level == 'WARNING' %}warning{% elif log.level == 'INFO' %}info{% else %}secondary{% endif %}"></div>
                                <div class="timeline-content">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            <h6 class="mb-1">{{ log.message }}</h6>
                                            <p class="text-muted mb-0">{{ log.details|truncatechars:100 }}</p>
                                        </div>
                                        <small class="text-muted">{{ log.timestamp|timesince }} ago</small>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="fas fa-history fa-3x text-muted mb-3"></i>
                            <h6 class="text-muted">No recent activity</h6>
                            <p class="text-muted">Activity logs will appear here once the system starts processing</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Quick Actions -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-bolt me-2"></i>Quick Actions
                    </h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-outline-info" onclick="testConnection()">
                            <i class="fas fa-plug me-2"></i>Test Connection
                        </button>
                        <button type="button" class="btn btn-outline-success" onclick="refreshHealthCheck()">
                            <i class="fas fa-heartbeat me-2"></i>Health Check
                        </button>
                        <a href="{% url 'integration:integration_endpoint_list' %}?system={{ object.system_id }}" class="btn btn-outline-primary">
                            <i class="fas fa-link me-2"></i>View Endpoints
                        </a>
                        <a href="{% url 'integration:integration_execution_list' %}?system={{ object.system_id }}" class="btn btn-outline-secondary">
                            <i class="fas fa-play me-2"></i>View Executions
                        </a>
                    </div>
                </div>
            </div>

            <!-- System Statistics -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-bar me-2"></i>Statistics
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6 mb-3">
                            <div class="border-end">
                                <h4 class="text-primary mb-0">{{ total_endpoints }}</h4>
                                <small class="text-muted">Endpoints</small>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <h4 class="text-success mb-0">{{ total_mappings }}</h4>
                            <small class="text-muted">Mappings</small>
                        </div>
                        <div class="col-6">
                            <div class="border-end">
                                <h4 class="text-info mb-0">{{ executions_today }}</h4>
                                <small class="text-muted">Today</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <h4 class="text-warning mb-0">{{ total_executions }}</h4>
                            <small class="text-muted">Total</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Configuration Preview -->
            {% if object.configuration %}
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-cogs me-2"></i>Configuration
                    </h5>
                </div>
                <div class="card-body">
                    <pre class="bg-light p-3 rounded"><code>{{ object.configuration|pprint }}</code></pre>
                    <button type="button" class="btn btn-outline-secondary btn-sm w-100 mt-2" onclick="exportConfig()">
                        <i class="fas fa-download me-1"></i>Export Full Config
                    </button>
                </div>
            </div>
            {% endif %}

            <!-- Related Systems -->
            {% if related_systems %}
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-sitemap me-2"></i>Related Systems
                    </h5>
                </div>
                <div class="card-body">
                    {% for system in related_systems %}
                    <div class="d-flex align-items-center mb-2">
                        <div class="bg-secondary bg-gradient rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 24px; height: 24px;">
                            <i class="fas fa-server text-white small"></i>
                        </div>
                        <div class="flex-grow-1">
                            <a href="{% url 'integration:external_system_detail' system.system_id %}" class="text-decoration-none">
                                {{ system.name }}
                            </a>
                            <br>
                            <small class="text-muted">{{ system.get_system_type_display }}</small>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<script>
// External system detail functionality
function testConnection() {
    const systemId = '{{ object.system_id }}';
    
    // Show loading state
    const btn = event.target;
    const originalText = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Testing...';
    btn.disabled = true;
    
    fetch(`{% url 'integration:test_connection' 0 %}`.replace('0', systemId), {
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            'Content-Type': 'application/json',
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(`Connection test successful!\n\nResponse time: ${data.response_time}ms\nStatus: ${data.status}`);
        } else {
            alert(`Connection test failed:\n\n${data.error}`);
        }
        location.reload();
    })
    .catch(error => {
        console.error('Error testing connection:', error);
        alert('Error testing connection: ' + error.message);
    })
    .finally(() => {
        btn.innerHTML = originalText;
        btn.disabled = false;
    });
}

function refreshHealthCheck() {
    const systemId = '{{ object.system_id }}';
    
    fetch(`/integration/systems/${systemId}/health-check/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            'Content-Type': 'application/json',
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Health check completed successfully!');
            location.reload();
        } else {
            alert('Health check failed: ' + data.error);
        }
    })
    .catch(error => {
        console.error('Error performing health check:', error);
        alert('Error performing health check');
    });
}

function toggleSystemStatus(activate) {
    const systemId = '{{ object.system_id }}';
    const action = activate ? 'activate' : 'deactivate';
    const confirmMessage = activate ? 
        'Are you sure you want to activate this system?' : 
        'Are you sure you want to deactivate this system? This will stop all integrations.';
    
    if (confirm(confirmMessage)) {
        fetch(`/integration/systems/${systemId}/${action}/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                'Content-Type': 'application/json',
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error: ' + data.error);
            }
        })
        .catch(error => {
            console.error('Error toggling system status:', error);
            alert('Error updating system status');
        });
    }
}

function viewLogs() {
    window.location.href = `{% url 'integration:integration_log_list' %}?system={{ object.system_id }}`;
}

function exportConfig() {
    const systemId = '{{ object.system_id }}';
    
    fetch(`/integration/systems/${systemId}/export-config/`, {
        method: 'GET',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
        },
    })
    .then(response => response.blob())
    .then(blob => {
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        a.download = `{{ object.name|slugify }}-config.json`;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
    })
    .catch(error => {
        console.error('Error exporting config:', error);
        alert('Error exporting configuration');
    });
}

// Auto-refresh health status every 30 seconds
setInterval(function() {
    fetch(`/integration/systems/{{ object.system_id }}/status/`, {
        method: 'GET',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
        },
    })
    .then(response => response.json())
    .then(data => {
        // Update health status badge
        const healthBadge = document.querySelector('.health-status-badge');
        if (healthBadge && data.health_status !== healthBadge.dataset.status) {
            location.reload();
        }
    })
    .catch(error => {
        console.error('Error checking status:', error);
    });
}, 30000);
</script>

<style>
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dee2e6;
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.timeline-marker {
    position: absolute;
    left: -22px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #dee2e6;
}

.timeline-content {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border-left: 3px solid #dee2e6;
}

.bg-gradient {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

.table-borderless td {
    border: none;
    padding: 0.5rem 0;
}

code {
    background-color: #f8f9fa;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

pre code {
    background: none;
    padding: 0;
}

.border-end {
    border-right: 1px solid #dee2e6 !important;
}

@media (max-width: 768px) {
    .d-flex.justify-content-between {
        flex-direction: column;
        gap: 1rem;
    }
    
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .timeline {
        padding-left: 20px;
    }
    
    .timeline-marker {
        left: -17px;
    }
}
</style>
{% endblock %}