@{
    ViewData["Title"] = "Home";
}

<div class="row">
    <div class="col-12">
        <div class="jumbotron bg-primary text-white p-5 rounded" style="background-color: @ViewBag.ServerColor !important;">
            <div class="container-fluid text-center">
                <h1 class="display-4">
                    <i class="fas fa-server"></i>
                    @ViewBag.ServerName
                </h1>
                <p class="lead">BCards Infrastructure Test Application</p>
                <hr class="my-4 bg-white">
                <div class="row">
                    <div class="col-md-4">
                        <h5><i class="fas fa-computer"></i> Hostname</h5>
                        <p class="font-monospace">@ViewBag.Hostname</p>
                    </div>
                    <div class="col-md-4">
                        <h5><i class="fas fa-clock"></i> Timestamp</h5>
                        <p class="font-monospace">@ViewBag.Timestamp</p>
                    </div>
                    <div class="col-md-4">
                        <h5><i class="fas fa-network-wired"></i> Load Balancer</h5>
                        <p>Status: <span class="badge bg-success">Active</span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-info-circle"></i> Server Information</h5>
            </div>
            <div class="card-body">
                <table class="table table-sm">
                    <tr>
                        <td><strong>Server Name:</strong></td>
                        <td>@ViewBag.ServerName</td>
                    </tr>
                    <tr>
                        <td><strong>Container Host:</strong></td>
                        <td>@ViewBag.Hostname</td>
                    </tr>
                    <tr>
                        <td><strong>Generated At:</strong></td>
                        <td>@ViewBag.Timestamp</td>
                    </tr>
                    <tr>
                        <td><strong>Environment:</strong></td>
                        <td><span class="badge bg-info">Production</span></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-chart-line"></i> Quick Tests</h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <button class="btn btn-outline-primary" onclick="testServerInfo()">
                        <i class="fas fa-server"></i> Test Server Info API
                    </button>
                    <button class="btn btn-outline-success" onclick="testHealthCheck()">
                        <i class="fas fa-heart"></i> Test Health Check
                    </button>
                    <button class="btn btn-outline-warning" onclick="refreshPage()">
                        <i class="fas fa-refresh"></i> Refresh Page (Test Load Balancer)
                    </button>
                </div>
                
                <div id="testResults" class="mt-3"></div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="alert alert-info">
            <h6><i class="fas fa-lightbulb"></i> Infrastructure Test Info</h6>
            <p class="mb-0">
                Esta aplicação está sendo servida através de um load balancer NGINX configurado para distribuir 
                requisições entre dois servidores OCI. Cada refresh da página pode mostrar um servidor diferente, 
                demonstrando o balanceamento de carga em funcionamento.
            </p>
        </div>
    </div>
</div>

@section Scripts {
<script>
    async function testServerInfo() {
        const resultDiv = document.getElementById('testResults');
        try {
            const response = await fetch('/server-info');
            const data = await response.json();
            resultDiv.innerHTML = `
                <div class="alert alert-success">
                    <strong>Server Info API Response:</strong><br>
                    <pre>${JSON.stringify(data, null, 2)}</pre>
                </div>
            `;
        } catch (error) {
            resultDiv.innerHTML = `
                <div class="alert alert-danger">
                    <strong>Error:</strong> ${error.message}
                </div>
            `;
        }
    }

    async function testHealthCheck() {
        const resultDiv = document.getElementById('testResults');
        try {
            const response = await fetch('/health');
            const status = response.ok ? 'Healthy' : 'Unhealthy';
            resultDiv.innerHTML = `
                <div class="alert alert-${response.ok ? 'success' : 'danger'}">
                    <strong>Health Check:</strong> ${status} (${response.status})
                </div>
            `;
        } catch (error) {
            resultDiv.innerHTML = `
                <div class="alert alert-danger">
                    <strong>Health Check Error:</strong> ${error.message}
                </div>
            `;
        }
    }

    function refreshPage() {
        window.location.reload();
    }

    // Auto-refresh a cada 30 segundos para demonstrar load balancing
    setInterval(() => {
        const autoRefresh = document.getElementById('autoRefresh');
        if (autoRefresh && autoRefresh.checked) {
            refreshPage();
        }
    }, 30000);
</script>
}