@extends('layouts.app')


@section('content')

<div class="page-header mb-4">
    <div class="row align-items-center">
        <div class="col">
            <h4 class="mb-1">Pre-flight Check - {{ $node->node_name }}</h4>
            <p class="text-muted mb-0">Verify remote server status before deployment</p>
        </div>
        <div class="col-auto">
            <a href="{{ route('release-center.nodes') }}" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-arrow-left me-1"></i>Back to Nodes
            </a>
        </div>
    </div>
</div>

<div class="row g-4">
    {{-- Node Information --}}
    <div class="col-lg-4">
        <div class="card mb-4">
            <div class="card-header"><h5 class="mb-0">Node Information</h5></div>
            <div class="card-body">
                <table class="table table-sm mb-0">
                    <tr>
                        <th class="text-muted" style="width:40%">Node Name</th>
                        <td>{{ $node->node_name }}</td>
                    </tr>
                    <tr>
                        <th class="text-muted">IP Address</th>
                        <td class="font-monospace">{{ $node->ip_address }}</td>
                    </tr>
                    <tr>
                        <th class="text-muted">Current Version</th>
                        <td><code>{{ $node->version ? 'v'.$node->version : 'Unknown' }}</code></td>
                    </tr>
                    <tr>
                        <th class="text-muted">Channel</th>
                        <td>{{ ucfirst($node->channel) }}</td>
                    </tr>
                    <tr>
                        <th class="text-muted">Status</th>
                        <td>
                            <span class="status-badge status-{{ $node->status }}">
                                {{ ucfirst($node->status) }}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <th class="text-muted">Last Seen</th>
                        <td>{{ $node->last_seen ? $node->last_seen->diffForHumans() : 'Never' }}</td>
                    </tr>
                </table>
            </div>
        </div>

        {{-- SSH Connection Info --}}
        <div class="card">
            <div class="card-header"><h5 class="mb-0">SSH Connection</h5></div>
            <div class="card-body">
                <table class="table table-sm mb-0">
                    <tr>
                        <th class="text-muted" style="width:40%">Host</th>
                        <td class="font-monospace">{{ $node->ip_address }}:{{ $node->ssh_port }}</td>
                    </tr>
                    <tr>
                        <th class="text-muted">Username</th>
                        <td>{{ $node->ssh_username }}</td>
                    </tr>
                    <tr>
                        <th class="text-muted">Auth Method</th>
                        <td>{{ $node->ssh_use_key ? 'SSH Key' : 'Password' }}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    {{-- Pre-flight Check Results --}}
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Pre-flight Check</h5>
                <button onclick="runPreflight()" class="btn btn-primary btn-sm">
                    <i class="bi bi-play-circle me-1"></i>Run Check
                </button>
            </div>
            <div class="card-body">
                <div id="preflight-status" class="alert alert-info">
                    <i class="bi bi-info-circle me-2"></i>
                    Click "Run Check" to verify the remote server status and identify any discrepancies.
                </div>

                <div id="preflight-results" class="d-none">
                    {{-- Deployment Readiness --}}
                    <div id="deployment-readiness" class="mb-4"></div>

                    {{-- Discrepancies --}}
                    <div id="discrepancies-section" class="mb-4 d-none">
                        <h6 class="fw-semibold mb-2 text-danger"><i class="bi bi-exclamation-triangle me-1"></i>Discrepancies Found</h6>
                        <div id="discrepancies-list"></div>
                    </div>

                    {{-- Target Release --}}
                    <div id="target-release-section" class="mb-4 d-none">
                        <h6 class="fw-semibold mb-2">Target Release</h6>
                        <div id="target-release-info"></div>
                    </div>

                    {{-- Version Check --}}
                    <div class="mb-3">
                        <h6 class="fw-semibold mb-2">Version Check</h6>
                        <div id="version-check"></div>
                    </div>

                    {{-- Connectivity --}}
                    <div class="mb-3">
                        <h6 class="fw-semibold mb-2">Node Status</h6>
                        <div id="connectivity-status"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function runPreflight() {
    const statusDiv = document.getElementById('preflight-status');
    const resultsDiv = document.getElementById('preflight-results');
    
    statusDiv.className = 'alert alert-warning';
    statusDiv.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>Running pre-flight check...';
    
    fetch('{{ route("release-center.node.preflight.run", $node) }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => {
        if (!response.ok) {
            return response.text().then(text => {
                throw new Error('Server returned ' + response.status + ': ' + text.substring(0, 200));
            });
        }
        return response.json();
    })
    .then(data => {
        const canDeploy = data.data.can_deploy;
        const hasDiscrepancies = data.data.discrepancies && data.data.discrepancies.length > 0;
        
        statusDiv.className = canDeploy ? 'alert alert-success' : (hasDiscrepancies ? 'alert alert-warning' : 'alert alert-danger');
        statusDiv.innerHTML = canDeploy
            ? '<i class="bi bi-check-circle me-2"></i>Node is ready for deployment'
            : (hasDiscrepancies 
                ? '<i class="bi bi-exclamation-triangle me-2"></i>Issues found - review discrepancies below'
                : '<i class="bi bi-x-circle me-2"></i>Node cannot be deployed');
        
        resultsDiv.classList.remove('d-none');
        
        // Populate deployment readiness
        const readinessDiv = document.getElementById('deployment-readiness');
        if (canDeploy) {
            readinessDiv.innerHTML = `
                <div class="alert alert-success bg-opacity-10 border-success">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center">
                            <i class="bi bi-check-circle-fill text-success fs-4 me-3"></i>
                            <div>
                                <div class="fw-semibold">Ready for Deployment</div>
                                <div class="text-muted small">Node is online and version matches target</div>
                            </div>
                        </div>
                    </div>
                </div>`;
        } else if (hasDiscrepancies && data.data.target_release) {
            // Show update button when there's a version mismatch
            const hasVersionMismatch = data.data.discrepancies.some(d => d.type === 'version');
            const isOnline = data.data.connectivity.pass;
            
            if (hasVersionMismatch && isOnline) {
                readinessDiv.innerHTML = `
                    <div class="alert alert-warning bg-opacity-10 border-warning">
                        <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
                            <div class="d-flex align-items-center">
                                <i class="bi bi-exclamation-triangle-fill text-warning fs-4 me-3"></i>
                                <div>
                                    <div class="fw-semibold">Update Available</div>
                                    <div class="text-muted small">Node is running an older version</div>
                                </div>
                            </div>
                            <button onclick="deployToNode()" class="btn btn-primary">
                                <i class="bi bi-rocket-takeoff me-1"></i>Update Remote Server
                            </button>
                        </div>
                    </div>`;
            } else {
                readinessDiv.innerHTML = `
                    <div class="alert alert-danger bg-opacity-10 border-danger">
                        <div class="d-flex align-items-center">
                            <i class="bi bi-x-circle-fill text-danger fs-4 me-3"></i>
                            <div>
                                <div class="fw-semibold">Not Ready for Deployment</div>
                                <div class="text-muted small">Please resolve the issues below before deploying</div>
                            </div>
                        </div>
                    </div>`;
            }
        } else {
            readinessDiv.innerHTML = `
                <div class="alert alert-danger bg-opacity-10 border-danger">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-x-circle-fill text-danger fs-4 me-3"></i>
                        <div>
                            <div class="fw-semibold">Not Ready for Deployment</div>
                            <div class="text-muted small">Please resolve the issues below before deploying</div>
                        </div>
                    </div>
                </div>`;
        }
        
        // Show discrepancies if any
        const discSection = document.getElementById('discrepancies-section');
        if (hasDiscrepancies) {
            discSection.classList.remove('d-none');
            document.getElementById('discrepancies-list').innerHTML = formatDiscrepancies(data.data.discrepancies);
        } else {
            discSection.classList.add('d-none');
        }
        
        // Show target release
        if (data.data.target_release) {
            document.getElementById('target-release-section').classList.remove('d-none');
            document.getElementById('target-release-info').innerHTML = formatTargetRelease(data.data.target_release);
        }
        
        // Populate basic results
        document.getElementById('connectivity-status').innerHTML = formatCheck(data.data.connectivity);
        document.getElementById('version-check').innerHTML = formatCheck(data.data.version_check);
    })
    .catch(error => {
        statusDiv.className = 'alert alert-danger';
        statusDiv.innerHTML = '<i class="bi bi-exclamation-triangle me-2"></i>Error running pre-flight check: ' + error.message;
    });
}

function formatCheck(check) {
    if (!check) return '<span class="text-muted">No data</span>';
    const icon = check.pass ? 'check-circle text-success' : 'x-circle text-danger';
    return `<i class="bi bi-${icon} me-2"></i>${check.message}`;
}

function formatInfo(info) {
    if (!info) return '<span class="text-muted">No data</span>';
    let html = '<table class="table table-sm mb-0">';
    for (const [key, value] of Object.entries(info)) {
        html += `<tr><th class="text-muted" style="width:40%">${key}</th><td>${value}</td></tr>`;
    }
    html += '</table>';
    return html;
}

function formatDisk(disk) {
    if (!disk) return '<span class="text-muted">No data</span>';
    const percentage = (disk.used / disk.total * 100).toFixed(1);
    const colorClass = percentage > 80 ? 'bg-danger' : percentage > 60 ? 'bg-warning' : 'bg-success';
    return `
        <div class="d-flex justify-content-between mb-1">
            <span>${disk.used} / ${disk.total} (${percentage}%)</span>
        </div>
        <div class="progress" style="height: 8px;">
            <div class="progress-bar ${colorClass}" style="width: ${percentage}%"></div>
        </div>
    `;
}

function formatServices(services) {
    if (!services) return '<span class="text-muted">No data</span>';
    let html = '<div class="d-flex flex-wrap gap-2">';
    for (const [service, status] of Object.entries(services)) {
        const statusClass = status === 'running' ? 'success' : 'danger';
        html += `<span class="badge bg-${statusClass} bg-opacity-10 text-${statusClass} border border-${statusClass} border-opacity-25">${service}: ${status}</span>`;
    }
    html += '</div>';
    return html;
}

function formatDiscrepancies(discrepancies) {
    if (!discrepancies || discrepancies.length === 0) return '<span class="text-muted">No discrepancies found</span>';
    let html = '<div class="list-group">';
    for (const disc of discrepancies) {
        const iconClass = disc.severity === 'error' ? 'x-circle text-danger' : 'exclamation-triangle text-warning';
        const borderClass = disc.severity === 'error' ? 'border-danger' : 'border-warning';
        html += `
            <div class="list-group-item d-flex align-items-start gap-2 ${borderClass}">
                <i class="bi bi-${iconClass} mt-1"></i>
                <div>
                    <div class="fw-semibold">${disc.title}</div>
                    <div class="text-muted small">${disc.message}</div>
                </div>
            </div>`;
    }
    html += '</div>';
    return html;
}

function formatTargetRelease(release) {
    if (!release) return '<span class="text-muted">No target release assigned</span>';
    return `
        <div class="card border-primary">
            <div class="card-body py-2">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <span class="badge bg-primary me-2">v${release.version}</span>
                        <span class="fw-semibold">${release.name}</span>
                    </div>
                    <span class="badge bg-${release.status === 'published' ? 'success' : 'warning'}">${release.status}</span>
                </div>
                ${release.published_at ? `<div class="text-muted small mt-1"><i class="bi bi-calendar me-1"></i>Published: ${release.published_at}</div>` : ''}
            </div>
        </div>`;
}

function deployToNode() {
    if (!confirm('Are you sure you want to deploy the target release to this node?')) {
        return;
    }
    
    const btn = document.querySelector('button[onclick="deployToNode()"]');
    const originalText = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="bi bi-hourglass-split me-1"></i>Deploying...';
    
    fetch('{{ route("release-center.node.deploy", $node) }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => {
        if (!response.ok) {
            return response.text().then(text => {
                throw new Error('Server returned ' + response.status + ': ' + text.substring(0, 200));
            });
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            alert('Deployment initiated successfully!\n\n' + data.message);
            // Refresh the preflight check
            runPreflight();
        } else {
            alert('Deployment failed: ' + data.message);
            btn.disabled = false;
            btn.innerHTML = originalText;
        }
    })
    .catch(error => {
        alert('Error during deployment: ' + error.message);
        btn.disabled = false;
        btn.innerHTML = originalText;
    });
}
</script>

@endsection