<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ environment.name }} - Details</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --primary: #667eea;
            --success: #10b981;
            --warning: #f59e0b;
            --error: #ef4444;
            --bg: #f5f7fa;
            --card-bg: #ffffff;
            --text: #1f2937;
            --text-light: #6b7280;
            --border: #e5e7eb;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--bg);
            color: var(--text);
        }
        
        .navbar {
            background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%);
            color: white;
            padding: 1rem 2rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .navbar a {
            color: white;
            text-decoration: none;
            margin-right: 1rem;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem;
        }
        
        .header {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .header h1 {
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }
        
        .header .meta {
            display: flex;
            gap: 2rem;
            margin-top: 1rem;
            color: var(--text-light);
        }
        
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .card {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .card h2 {
            font-size: 1.25rem;
            margin-bottom: 1rem;
            color: var(--primary);
        }
        
        .metric-item {
            display: flex;
            justify-content: space-between;
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--border);
        }
        
        .metric-item:last-child {
            border-bottom: none;
        }
        
        .metric-label {
            color: var(--text-light);
        }
        
        .metric-value {
            font-weight: 600;
        }
        
        .chart-container {
            position: relative;
            height: 300px;
            margin-top: 1rem;
        }
        
        .btn {
            padding: 0.75rem 1.5rem;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 1rem;
            margin-top: 1rem;
        }
        
        .btn:hover {
            opacity: 0.9;
        }
        
        .deployment-list {
            max-height: 400px;
            overflow-y: auto;
        }
        
        .deployment-item {
            padding: 1rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .status-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
        }
        
        .status-badge.completed {
            background: #d1fae5;
            color: #065f46;
        }
        
        .status-badge.queued {
            background: #dbeafe;
            color: #1e40af;
        }
        
        .status-badge.failed {
            background: #fee2e2;
            color: #991b1b;
        }
    </style>
</head>
<body>
    <div class="navbar">
        <a href="/"><i class="fas fa-arrow-left"></i> Back to Dashboard</a>
        <span>{{ environment.name }}</span>
    </div>
    
    <div class="container">
        <div class="header">
            <h1><%= environment.name %></h1>
            <p><%= environment.location %></p>
            <div class="meta">
                <span><strong>Provider:</strong> <%= (environment.provider || '').toUpperCase() %></span>
                <span><strong>Region:</strong> <%= environment.region %></span>
                <span><strong>Role:</strong> <%= (environment.role || '').charAt(0).toUpperCase() + (environment.role || '').slice(1) %></span>
                <span><strong>Status:</strong> <%= (status.status || '').charAt(0).toUpperCase() + (status.status || '').slice(1) %></span>
            </div>
        </div>
        
        <div class="grid">
            <div class="card">
                <h2><i class="fas fa-heartbeat"></i> Health Status</h2>
                <div class="metric-item">
                    <span class="metric-label">Cluster Health</span>
                    <span class="metric-value"><%= (status.cluster_health || '').charAt(0).toUpperCase() + (status.cluster_health || '').slice(1) %></span>
                </div>
                <div class="metric-item">
                    <span class="metric-label">Uptime</span>
                    <span class="metric-value"><%= status.uptime_days %> days</span>
                </div>
                <div class="metric-item">
                    <span class="metric-label">Last Health Check</span>
                    <span class="metric-value"><%= status.last_health_check ? status.last_health_check.substring(0, 19) : 'N/A' %></span>
                </div>
            </div>
            
            <div class="card">
                <h2><i class="fas fa-server"></i> Resources</h2>
                <div class="metric-item">
                    <span class="metric-label">Nodes</span>
                    <span class="metric-value"><%= status.node_count %></span>
                </div>
                <div class="metric-item">
                    <span class="metric-label">Pods Running</span>
                    <span class="metric-value"><%= status.pods_running %>/<%= status.pods_total %></span>
                </div>
                <div class="metric-item">
                    <span class="metric-label">CPU Usage</span>
                    <span class="metric-value"><%= status.cpu_usage_percent %>%</span>
                </div>
                <div class="metric-item">
                    <span class="metric-label">Memory Usage</span>
                    <span class="metric-value"><%= status.memory_usage_percent %>%</span>
                </div>
            </div>
            
            <div class="card">
                <h2><i class="fas fa-network-wired"></i> Network</h2>
                <div class="metric-item">
                    <span class="metric-label">Inbound</span>
                    <span class="metric-value"><%= status.network_in_mbps %> Mbps</span>
                </div>
                <div class="metric-item">
                    <span class="metric-label">Outbound</span>
                    <span class="metric-value"><%= status.network_out_mbps %> Mbps</span>
                </div>
            </div>
        </div>
        
        <div class="card">
            <h2><i class="fas fa-chart-line"></i> Metrics (24h)</h2>
            <div class="chart-container">
                <canvas id="metricsChart"></canvas>
            </div>
        </div>
        
        <div class="card">
            <h2><i class="fas fa-history"></i> Deployment History</h2>
            <div class="deployment-list">
                <% deployments.forEach(deployment => { %>
                <div class="deployment-item">
                    <div>
                        <strong><%= deployment.id %></strong>
                        <div style="color: var(--text-light); font-size: 0.875rem; margin-top: 0.25rem;">
                            <%= deployment.started_at ? deployment.started_at.substring(0, 19) : 'N/A' %> - <%= (deployment.strategy || '').toUpperCase() %> - <%= deployment.version || 'N/A' %>
                        </div>
                    </div>
                    <span class="status-badge <%= deployment.status %>">
                        <%= (deployment.status || '').toUpperCase() %>
                    </span>
                </div>
                <% }); %>
            </div>
        </div>
        
        <button class="btn" onclick="deploy()">
            <i class="fas fa-rocket"></i> Deploy to Environment
        </button>
    </div>
    
    <script>
        // Metrics Chart
        const ctx = document.getElementById('metricsChart').getContext('2d');
        const metricsData = <%- JSON.stringify(metrics) %>;
        
        // Prepare chart data
        const labels = [];
        const cpuData = [];
        const memoryData = [];
        
        if (metricsData.cpu_usage) {
            metricsData.cpu_usage.forEach(point => {
                labels.push(new Date(point.timestamp).toLocaleTimeString());
                cpuData.push(point.value);
            });
        }
        
        if (metricsData.memory_usage) {
            metricsData.memory_usage.forEach(point => {
                memoryData.push(point.value);
            });
        }
        
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'CPU Usage %',
                    data: cpuData,
                    borderColor: '#667eea',
                    backgroundColor: 'rgba(102, 126, 234, 0.1)',
                    tension: 0.4
                }, {
                    label: 'Memory Usage %',
                    data: memoryData,
                    borderColor: '#10b981',
                    backgroundColor: 'rgba(16, 185, 129, 0.1)',
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100
                    }
                }
            }
        });
        
        function deploy() {
            if (!confirm('Deploy to this environment?')) return;
            
            fetch(`/api/environments/<%= environment.name %>/deploy`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    strategy: 'blue-green',
                    version: 'latest'
                })
            })
            .then(response => response.json())
            .then(data => {
                alert(`Deployment queued: ${data.deployment_id}`);
                location.reload();
            })
            .catch(error => {
                alert(`Error: ${error.message}`);
            });
        }
    </script>
</body>
</html>

