<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cost Dashboard - Multi-Cloud Orchestration</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: 1600px;
            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;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .stat-card {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            border-left: 4px solid var(--primary);
        }
        
        .stat-card h3 {
            font-size: 0.875rem;
            color: var(--text-light);
            text-transform: uppercase;
            margin-bottom: 0.5rem;
        }
        
        .stat-card .value {
            font-size: 2rem;
            font-weight: 700;
            color: var(--text);
        }
        
        .chart-container {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .chart-container h2 {
            font-size: 1.25rem;
            margin-bottom: 1rem;
        }
        
        .chart-wrapper {
            position: relative;
            height: 400px;
        }
        
        .cost-table {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            overflow-x: auto;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        th, td {
            padding: 0.75rem;
            text-align: left;
            border-bottom: 1px solid var(--border);
        }
        
        th {
            background: var(--bg);
            font-weight: 600;
        }
        
        .cost-value {
            font-weight: 600;
            color: var(--primary);
        }
    </style>
</head>
<body>
    <div class="navbar">
        <a href="/"><i class="fas fa-arrow-left"></i> Back to Dashboard</a>
        <span>Cost Dashboard</span>
    </div>
    
    <div class="container">
        <div class="header">
            <h1><i class="fas fa-dollar-sign"></i> Cost Analysis</h1>
            <p>Cost tracking and optimization across all environments</p>
        </div>
        
        <div class="stats-grid">
            <div class="stat-card">
                <h3>Total Cost (30 days)</h3>
                <div class="value">$<%= total_cost.toFixed(2) %></div>
            </div>
            <% Object.keys(by_provider).forEach(provider => { %>
            <div class="stat-card">
                <h3><%= provider.toUpperCase() %></h3>
                <div class="value">$<%= by_provider[provider].toFixed(2) %></div>
            </div>
            <% }); %>
        </div>
        
        <div class="chart-container">
            <h2>Cost Trend (90 days)</h2>
            <div class="chart-wrapper">
                <canvas id="costChart"></canvas>
            </div>
        </div>
        
        <div class="cost-table">
            <h2 style="margin-bottom: 1rem;">Cost Breakdown</h2>
            <table>
                <thead>
                    <tr>
                        <th>Environment</th>
                        <th>Provider</th>
                        <th>Resource Type</th>
                        <th>Cost</th>
                        <th>Period</th>
                    </tr>
                </thead>
                <tbody>
                    <% costs.slice(0, 50).forEach(cost => { %>
                    <tr>
                        <td><strong><%= cost.environment %></strong></td>
                        <td><%= (cost.provider || '').toUpperCase() %></td>
                        <td><%= cost.resource_type ? (cost.resource_type.charAt(0).toUpperCase() + cost.resource_type.slice(1)) : 'N/A' %></td>
                        <td class="cost-value">$<%= cost.cost.toFixed(2) %></td>
                        <td><%= cost.period_start ? cost.period_start.substring(0, 10) : 'N/A' %> to <%= cost.period_end ? cost.period_end.substring(0, 10) : 'N/A' %></td>
                    </tr>
                    <% }); %>
                </tbody>
            </table>
        </div>
    </div>
    
    <script>
        // Cost trend chart
        const ctx = document.getElementById('costChart').getContext('2d');
        const costs = <%- JSON.stringify(costs) %>;
        
        // Group costs by date
        const costByDate = {};
        costs.forEach(cost => {
            const date = cost.period_start.substring(0, 10);
            if (!costByDate[date]) {
                costByDate[date] = 0;
            }
            costByDate[date] += cost.cost;
        });
        
        const dates = Object.keys(costByDate).sort();
        const values = dates.map(date => costByDate[date]);
        
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: dates,
                datasets: [{
                    label: 'Daily Cost (USD)',
                    data: values,
                    borderColor: '#667eea',
                    backgroundColor: 'rgba(102, 126, 234, 0.1)',
                    tension: 0.4,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return '$' + value.toFixed(2);
                            }
                        }
                    }
                },
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return '$' + context.parsed.y.toFixed(2);
                            }
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

