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

{% block title %}Test Connection - {{ block.super }}{% endblock %}

{% block css %}
<style>
.connection-test {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
}
.test-result {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
    border-left: 4px solid #007bff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.test-success {
    border-left-color: #28a745;
    background: #d4edda;
}
.test-error {
    border-left-color: #dc3545;
    background: #f8d7da;
}
.test-warning {
    border-left-color: #ffc107;
    background: #fff3cd;
}
.connection-details {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
}
.test-progress {
    display: none;
    text-align: center;
    padding: 20px;
}
.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.endpoint-card {
    background: white;
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    border: 1px solid #dee2e6;
}
.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}
.status-online { background: #28a745; }
.status-offline { background: #dc3545; }
.status-warning { background: #ffc107; }
.status-unknown { background: #6c757d; }
.test-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}
.metric-card {
    background: white;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    border: 1px solid #dee2e6;
}
.metric-value {
    font-size: 2rem;
    font-weight: bold;
    color: #007bff;
}
.log-entry {
    background: #f8f9fa;
    border-radius: 4px;
    padding: 10px;
    margin: 5px 0;
    font-family: monospace;
    font-size: 0.9rem;
    border-left: 3px solid #dee2e6;
}
.log-info { border-left-color: #17a2b8; }
.log-success { border-left-color: #28a745; }
.log-error { border-left-color: #dc3545; }
.log-warning { border-left-color: #ffc107; }
</style>
{% endblock %}

{% block content %}
<div class="content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="row">
            <div class="col-12">
                <div class="page-header">
                    <div class="page-title">
                        <h4><i class="fas fa-plug"></i> Test Connection</h4>
                        <h6>Test and validate external system connections</h6>
                    </div>
                    <div class="page-btn">
                        <a href="{% url 'integration:external_system_list' %}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back to Systems
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Connection Test Interface -->
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-network-wired"></i> Connection Test</h5>
                    </div>
                    <div class="card-body">
                        <div class="connection-test">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6>System Information</h6>
                                    <div class="connection-details">
                                        <p><strong>System Name:</strong> Epic EMR Integration</p>
                                        <p><strong>Type:</strong> HL7 FHIR API</p>
                                        <p><strong>Base URL:</strong> https://api.epic.com/fhir/r4</p>
                                        <p><strong>Authentication:</strong> OAuth 2.0</p>
                                        <p><strong>Status:</strong> <span class="status-indicator status-online"></span>Active</p>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h6>Test Configuration</h6>
                                    <div class="form-group mb-3">
                                        <label>Test Type</label>
                                        <select class="form-control" id="testType">
                                            <option value="basic">Basic Connectivity</option>
                                            <option value="auth">Authentication Test</option>
                                            <option value="endpoints">Endpoint Validation</option>
                                            <option value="data">Data Exchange Test</option>
                                            <option value="full">Full Integration Test</option>
                                        </select>
                                    </div>
                                    <div class="form-group mb-3">
                                        <label>Timeout (seconds)</label>
                                        <input type="number" class="form-control" value="30" min="5" max="300">
                                    </div>
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" id="verboseLogging">
                                        <label class="form-check-label" for="verboseLogging">
                                            Enable verbose logging
                                        </label>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="text-center mt-4">
                                <button type="button" class="btn btn-primary btn-lg" id="startTest">
                                    <i class="fas fa-play"></i> Start Connection Test
                                </button>
                                <button type="button" class="btn btn-warning btn-lg ms-2" id="stopTest" style="display: none;">
                                    <i class="fas fa-stop"></i> Stop Test
                                </button>
                            </div>
                        </div>

                        <!-- Test Progress -->
                        <div class="test-progress" id="testProgress">
                            <div class="spinner"></div>
                            <h6>Testing connection...</h6>
                            <p id="progressText">Initializing test...</p>
                        </div>

                        <!-- Test Results -->
                        <div id="testResults" style="display: none;">
                            <h6>Test Results</h6>
                            <div class="test-result test-success">
                                <h6><i class="fas fa-check-circle"></i> Connection Successful</h6>
                                <p>Successfully connected to Epic EMR Integration system</p>
                                <small class="text-muted">Test completed at: January 20, 2024 14:30:25</small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Test Metrics -->
                <div class="card mt-3">
                    <div class="card-header">
                        <h5><i class="fas fa-chart-line"></i> Performance Metrics</h5>
                    </div>
                    <div class="card-body">
                        <div class="test-metrics">
                            <div class="metric-card">
                                <div class="metric-value" id="responseTime">--</div>
                                <div class="metric-label">Response Time (ms)</div>
                            </div>
                            <div class="metric-card">
                                <div class="metric-value" id="throughput">--</div>
                                <div class="metric-label">Throughput (req/sec)</div>
                            </div>
                            <div class="metric-card">
                                <div class="metric-value" id="successRate">--</div>
                                <div class="metric-label">Success Rate (%)</div>
                            </div>
                            <div class="metric-card">
                                <div class="metric-value" id="errorCount">--</div>
                                <div class="metric-label">Error Count</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <!-- Endpoint Status -->
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-list"></i> Endpoint Status</h5>
                    </div>
                    <div class="card-body">
                        <div class="endpoint-card">
                            <h6><span class="status-indicator status-online"></span>Patient API</h6>
                            <p>/Patient</p>
                            <small class="text-muted">Last tested: 5 minutes ago</small>
                        </div>
                        <div class="endpoint-card">
                            <h6><span class="status-indicator status-online"></span>Observation API</h6>
                            <p>/Observation</p>
                            <small class="text-muted">Last tested: 5 minutes ago</small>
                        </div>
                        <div class="endpoint-card">
                            <h6><span class="status-indicator status-warning"></span>Medication API</h6>
                            <p>/Medication</p>
                            <small class="text-muted">Slow response detected</small>
                        </div>
                        <div class="endpoint-card">
                            <h6><span class="status-indicator status-offline"></span>Appointment API</h6>
                            <p>/Appointment</p>
                            <small class="text-muted">Connection timeout</small>
                        </div>
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="card mt-3">
                    <div class="card-header">
                        <h5><i class="fas fa-tools"></i> Quick Actions</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <button class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-sync"></i> Refresh Status
                            </button>
                            <button class="btn btn-outline-success btn-sm">
                                <i class="fas fa-download"></i> Export Results
                            </button>
                            <button class="btn btn-outline-info btn-sm">
                                <i class="fas fa-history"></i> View History
                            </button>
                            <button class="btn btn-outline-warning btn-sm">
                                <i class="fas fa-cog"></i> Configure Test
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Recent Tests -->
                <div class="card mt-3">
                    <div class="card-header">
                        <h5><i class="fas fa-clock"></i> Recent Tests</h5>
                    </div>
                    <div class="card-body">
                        <div class="list-group list-group-flush">
                            <div class="list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-1">Full Integration Test</h6>
                                    <small>2 hours ago</small>
                                </div>
                                <span class="badge bg-success">Passed</span>
                            </div>
                            <div class="list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-1">Authentication Test</h6>
                                    <small>4 hours ago</small>
                                </div>
                                <span class="badge bg-success">Passed</span>
                            </div>
                            <div class="list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-1">Endpoint Validation</h6>
                                    <small>6 hours ago</small>
                                </div>
                                <span class="badge bg-warning">Warning</span>
                            </div>
                            <div class="list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-1">Basic Connectivity</h6>
                                    <small>8 hours ago</small>
                                </div>
                                <span class="badge bg-danger">Failed</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Test Log -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-terminal"></i> Test Log</h5>
                        <div class="card-tools">
                            <button class="btn btn-sm btn-outline-secondary" id="clearLog">
                                <i class="fas fa-trash"></i> Clear Log
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="testLog" style="max-height: 300px; overflow-y: auto;">
                            <div class="log-entry log-info">
                                [14:25:10] INFO: Connection test initialized
                            </div>
                            <div class="log-entry log-info">
                                [14:25:11] INFO: Testing basic connectivity to https://api.epic.com/fhir/r4
                            </div>
                            <div class="log-entry log-success">
                                [14:25:12] SUCCESS: Connection established successfully
                            </div>
                            <div class="log-entry log-info">
                                [14:25:13] INFO: Testing authentication with OAuth 2.0
                            </div>
                            <div class="log-entry log-success">
                                [14:25:15] SUCCESS: Authentication successful
                            </div>
                            <div class="log-entry log-info">
                                [14:25:16] INFO: Validating API endpoints
                            </div>
                            <div class="log-entry log-success">
                                [14:25:18] SUCCESS: Patient API endpoint validated
                            </div>
                            <div class="log-entry log-success">
                                [14:25:20] SUCCESS: Observation API endpoint validated
                            </div>
                            <div class="log-entry log-warning">
                                [14:25:22] WARNING: Medication API response time exceeded threshold (2.5s)
                            </div>
                            <div class="log-entry log-error">
                                [14:25:25] ERROR: Appointment API connection timeout after 30 seconds
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
$(document).ready(function() {
    var testRunning = false;
    var testInterval;
    
    // Start test button
    $('#startTest').click(function() {
        if (!testRunning) {
            startConnectionTest();
        }
    });
    
    // Stop test button
    $('#stopTest').click(function() {
        if (testRunning) {
            stopConnectionTest();
        }
    });
    
    function startConnectionTest() {
        testRunning = true;
        $('#startTest').hide();
        $('#stopTest').show();
        $('#testResults').hide();
        $('#testProgress').show();
        
        // Clear previous metrics
        $('#responseTime, #throughput, #successRate, #errorCount').text('--');
        
        // Simulate test progress
        var steps = [
            'Initializing connection test...',
            'Testing basic connectivity...',
            'Validating authentication...',
            'Checking API endpoints...',
            'Testing data exchange...',
            'Analyzing performance metrics...',
            'Generating test report...'
        ];
        
        var currentStep = 0;
        testInterval = setInterval(function() {
            if (currentStep < steps.length) {
                $('#progressText').text(steps[currentStep]);
                addLogEntry('INFO', steps[currentStep]);
                currentStep++;
            } else {
                completeTest();
            }
        }, 2000);
    }
    
    function stopConnectionTest() {
        testRunning = false;
        clearInterval(testInterval);
        $('#startTest').show();
        $('#stopTest').hide();
        $('#testProgress').hide();
        addLogEntry('WARNING', 'Connection test stopped by user');
    }
    
    function completeTest() {
        testRunning = false;
        clearInterval(testInterval);
        $('#startTest').show();
        $('#stopTest').hide();
        $('#testProgress').hide();
        $('#testResults').show();
        
        // Update metrics with sample data
        $('#responseTime').text('245');
        $('#throughput').text('12.5');
        $('#successRate').text('87.5');
        $('#errorCount').text('2');
        
        addLogEntry('SUCCESS', 'Connection test completed successfully');
    }
    
    function addLogEntry(level, message) {
        var timestamp = new Date().toLocaleTimeString();
        var logClass = 'log-' + level.toLowerCase();
        var logEntry = '<div class="log-entry ' + logClass + '">[' + timestamp + '] ' + level + ': ' + message + '</div>';
        $('#testLog').append(logEntry);
        $('#testLog').scrollTop($('#testLog')[0].scrollHeight);
    }
    
    // Clear log button
    $('#clearLog').click(function() {
        $('#testLog').empty();
    });
    
    // Quick action buttons
    $('.btn-outline-primary').click(function() {
        location.reload();
    });
    
    $('.btn-outline-success').click(function() {
        alert('Exporting test results...');
    });
    
    $('.btn-outline-info').click(function() {
        alert('Opening test history...');
    });
    
    $('.btn-outline-warning').click(function() {
        alert('Opening test configuration...');
    });
});
</script>
{% endblock %}