{% extends "base.html" %}

{% block title %}CFO Executive Dashboard - OpenFinOps{% endblock %}

{% block extra_head %}
<style>
    .kpi-card {
        transition: all 0.3s ease;
    }

    .kpi-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 35px rgba(0, 212, 170, 0.25);
    }

    .trend-indicator {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 0.75rem;
    }

    .budget-progress {
        height: 8px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        overflow: hidden;
    }

    .budget-bar {
        height: 100%;
        border-radius: 4px;
        transition: width 0.5s ease;
    }
</style>
{% endblock %}

{% block content %}
<!-- Executive Header -->
<div class="mb-8">
    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-4xl font-bold bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
                CFO Executive Dashboard
            </h2>
            <p class="text-gray-400 mt-2">Financial Intelligence & Cost Optimization</p>
        </div>
        <div class="glass rounded-xl px-6 py-3">
            <div class="text-sm text-gray-400">Fiscal Year Progress</div>
            <div class="text-2xl font-bold mt-1">Q4 2025</div>
        </div>
    </div>
</div>

<!-- Key Financial Metrics -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <div class="glass kpi-card rounded-xl p-6">
        <div class="flex items-center justify-between mb-3">
            <div class="p-3 rounded-lg gradient-primary">
                <i class="fas fa-wallet text-2xl"></i>
            </div>
            <span class="trend-indicator bg-green-500/20 text-green-400">
                <i class="fas fa-arrow-down mr-1"></i>8.3%
            </span>
        </div>
        <h3 class="text-gray-400 text-sm">Total Cloud Spend</h3>
        <p class="text-3xl font-bold mt-2" id="cfo-total-spend">$0</p>
        <p class="text-xs text-gray-500 mt-2">YTD: $4.2M</p>
    </div>

    <div class="glass kpi-card rounded-xl p-6">
        <div class="flex items-center justify-between mb-3">
            <div class="p-3 rounded-lg gradient-warning">
                <i class="fas fa-chart-line text-2xl"></i>
            </div>
            <span class="trend-indicator bg-red-500/20 text-red-400">
                <i class="fas fa-arrow-up mr-1"></i>12%
            </span>
        </div>
        <h3 class="text-gray-400 text-sm">AI/ML Investment</h3>
        <p class="text-3xl font-bold mt-2" id="cfo-ai-spend">$0</p>
        <p class="text-xs text-gray-500 mt-2">35% of total budget</p>
    </div>

    <div class="glass kpi-card rounded-xl p-6">
        <div class="flex items-center justify-between mb-3">
            <div class="p-3 rounded-lg gradient-success">
                <i class="fas fa-piggy-bank text-2xl"></i>
            </div>
            <span class="trend-indicator bg-green-500/20 text-green-400">
                <i class="fas fa-arrow-up mr-1"></i>22%
            </span>
        </div>
        <h3 class="text-gray-400 text-sm">Cost Savings</h3>
        <p class="text-3xl font-bold mt-2" id="cfo-savings">$0</p>
        <p class="text-xs text-gray-500 mt-2">From optimization</p>
    </div>

    <div class="glass kpi-card rounded-xl p-6">
        <div class="flex items-center justify-between mb-3">
            <div class="p-3 rounded-lg gradient-info">
                <i class="fas fa-percentage text-2xl"></i>
            </div>
            <span class="trend-indicator bg-blue-500/20 text-blue-400">
                <i class="fas fa-check mr-1"></i>Good
            </span>
        </div>
        <h3 class="text-gray-400 text-sm">Cost Efficiency</h3>
        <p class="text-3xl font-bold mt-2" id="cfo-efficiency">87%</p>
        <p class="text-xs text-gray-500 mt-2">Industry avg: 72%</p>
    </div>
</div>

<!-- Budget vs Actual -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    <div class="glass rounded-xl p-6">
        <h3 class="text-xl font-semibold mb-6">
            <i class="fas fa-balance-scale mr-2 text-cyan-400"></i>Budget vs Actual Spend
        </h3>
        <div class="space-y-4">
            <div>
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm">Compute (EC2, Lambda)</span>
                    <span class="text-sm font-semibold">$42K / $50K</span>
                </div>
                <div class="budget-progress">
                    <div class="budget-bar gradient-primary" style="width: 84%"></div>
                </div>
            </div>
            <div>
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm">AI/ML Training</span>
                    <span class="text-sm font-semibold">$58K / $60K</span>
                </div>
                <div class="budget-progress">
                    <div class="budget-bar gradient-warning" style="width: 97%"></div>
                </div>
            </div>
            <div>
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm">Storage (S3, EBS)</span>
                    <span class="text-sm font-semibold">$18K / $30K</span>
                </div>
                <div class="budget-progress">
                    <div class="budget-bar gradient-success" style="width: 60%"></div>
                </div>
            </div>
            <div>
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm">Data Transfer</span>
                    <span class="text-sm font-semibold">$12K / $15K</span>
                </div>
                <div class="budget-progress">
                    <div class="budget-bar gradient-info" style="width: 80%"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="glass rounded-xl p-6">
        <h3 class="text-xl font-semibold mb-4">
            <i class="fas fa-money-bill-trend-up mr-2 text-green-400"></i>Cost Trend Analysis
        </h3>
        <div class="chart-container" style="height: 250px;">
            <canvas id="cfoTrendChart"></canvas>
        </div>
    </div>
</div>

<!-- ROI & Business Value -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
    <div class="glass rounded-xl p-6">
        <h3 class="text-xl font-semibold mb-4">
            <i class="fas fa-rocket mr-2 text-purple-400"></i>AI/ML ROI
        </h3>
        <div class="chart-container" style="height: 200px;">
            <canvas id="roiChart"></canvas>
        </div>
        <div class="mt-4 pt-4 border-t border-white/10">
            <div class="flex items-center justify-between">
                <span class="text-sm text-gray-400">Projected Annual ROI</span>
                <span class="text-xl font-bold text-green-400">324%</span>
            </div>
        </div>
    </div>

    <div class="glass rounded-xl p-6">
        <h3 class="text-xl font-semibold mb-4">
            <i class="fas fa-globe mr-2 text-blue-400"></i>Multi-Cloud Distribution
        </h3>
        <div class="chart-container" style="height: 200px;">
            <canvas id="cloudDistChart"></canvas>
        </div>
        <div class="mt-4 pt-4 border-t border-white/10">
            <div class="grid grid-cols-3 gap-2 text-center text-sm">
                <div>
                    <div class="text-gray-400">AWS</div>
                    <div class="font-bold">62%</div>
                </div>
                <div>
                    <div class="text-gray-400">Azure</div>
                    <div class="font-bold">25%</div>
                </div>
                <div>
                    <div class="text-gray-400">GCP</div>
                    <div class="font-bold">13%</div>
                </div>
            </div>
        </div>
    </div>

    <div class="glass rounded-xl p-6">
        <h3 class="text-xl font-semibold mb-4">
            <i class="fas fa-funnel-dollar mr-2 text-yellow-400"></i>Cost Attribution
        </h3>
        <div class="space-y-3">
            <div class="flex items-center justify-between p-3 rounded-lg glass-strong">
                <div class="flex items-center">
                    <div class="w-3 h-3 rounded-full bg-cyan-400 mr-3"></div>
                    <span class="text-sm">Product Development</span>
                </div>
                <span class="font-semibold">45%</span>
            </div>
            <div class="flex items-center justify-between p-3 rounded-lg glass-strong">
                <div class="flex items-center">
                    <div class="w-3 h-3 rounded-full bg-blue-400 mr-3"></div>
                    <span class="text-sm">ML Research</span>
                </div>
                <span class="font-semibold">30%</span>
            </div>
            <div class="flex items-center justify-between p-3 rounded-lg glass-strong">
                <div class="flex items-center">
                    <div class="w-3 h-3 rounded-full bg-purple-400 mr-3"></div>
                    <span class="text-sm">Data Engineering</span>
                </div>
                <span class="font-semibold">15%</span>
            </div>
            <div class="flex items-center justify-between p-3 rounded-lg glass-strong">
                <div class="flex items-center">
                    <div class="w-3 h-3 rounded-full bg-green-400 mr-3"></div>
                    <span class="text-sm">Infrastructure</span>
                </div>
                <span class="font-semibold">10%</span>
            </div>
        </div>
    </div>
</div>

<!-- Financial Recommendations -->
<div class="glass rounded-xl p-6">
    <h3 class="text-xl font-semibold mb-4">
        <i class="fas fa-briefcase mr-2 text-yellow-400"></i>Executive Recommendations
    </h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="p-4 rounded-lg glass-strong border-l-4 border-cyan-400">
            <div class="flex items-start justify-between mb-2">
                <h4 class="font-semibold">Reserved Instance Strategy</h4>
                <span class="px-2 py-1 rounded bg-cyan-500/20 text-cyan-400 text-xs">High Impact</span>
            </div>
            <p class="text-sm text-gray-400 mb-3">
                Convert 40% of on-demand usage to 3-year RIs for predictable workloads
            </p>
            <div class="flex items-center justify-between">
                <span class="text-2xl font-bold text-cyan-400">$42K/mo savings</span>
                <button class="px-4 py-2 rounded-lg gradient-primary text-sm font-medium">
                    Review Plan
                </button>
            </div>
        </div>

        <div class="p-4 rounded-lg glass-strong border-l-4 border-green-400">
            <div class="flex items-start justify-between mb-2">
                <h4 class="font-semibold">Optimize ML Training</h4>
                <span class="px-2 py-1 rounded bg-green-500/20 text-green-400 text-xs">Quick Win</span>
            </div>
            <p class="text-sm text-gray-400 mb-3">
                Use spot instances for fault-tolerant training jobs (85% cost reduction)
            </p>
            <div class="flex items-center justify-between">
                <span class="text-2xl font-bold text-green-400">$28K/mo savings</span>
                <button class="px-4 py-2 rounded-lg gradient-success text-sm font-medium">
                    Implement
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    // CFO Trend Chart
    const cfoTrendCtx = document.getElementById('cfoTrendChart').getContext('2d');
    const cfoTrendChart = new Chart(cfoTrendCtx, {
        type: 'line',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
            datasets: [
                {
                    label: 'Actual',
                    data: [95000, 105000, 98000, 112000, 108000, 102000],
                    borderColor: '#00d4aa',
                    backgroundColor: 'rgba(0, 212, 170, 0.1)',
                    fill: true,
                    tension: 0.4
                },
                {
                    label: 'Budget',
                    data: [100000, 100000, 100000, 110000, 110000, 110000],
                    borderColor: '#ff6b6b',
                    borderDash: [5, 5],
                    fill: false
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    labels: { color: '#9ca3af', font: { family: 'Inter' } }
                }
            },
            scales: {
                x: { grid: { color: 'rgba(255, 255, 255, 0.1)' }, ticks: { color: '#9ca3af' } },
                y: { grid: { color: 'rgba(255, 255, 255, 0.1)' }, ticks: { color: '#9ca3af' } }
            }
        }
    });

    // ROI Chart
    const roiCtx = document.getElementById('roiChart').getContext('2d');
    const roiChart = new Chart(roiCtx, {
        type: 'bar',
        data: {
            labels: ['Q1', 'Q2', 'Q3', 'Q4'],
            datasets: [{
                label: 'ROI %',
                data: [245, 278, 302, 324],
                backgroundColor: 'rgba(168, 85, 247, 0.6)',
                borderColor: '#a855f7',
                borderWidth: 2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false }
            },
            scales: {
                x: { grid: { color: 'rgba(255, 255, 255, 0.1)' }, ticks: { color: '#9ca3af' } },
                y: { grid: { color: 'rgba(255, 255, 255, 0.1)' }, ticks: { color: '#9ca3af' } }
            }
        }
    });

    // Cloud Distribution Chart
    const cloudDistCtx = document.getElementById('cloudDistChart').getContext('2d');
    const cloudDistChart = new Chart(cloudDistCtx, {
        type: 'doughnut',
        data: {
            labels: ['AWS', 'Azure', 'GCP'],
            datasets: [{
                data: [62, 25, 13],
                backgroundColor: ['#00d4aa', '#00a8ff', '#3742fa']
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false }
            }
        }
    });

    // WebSocket updates for CFO dashboard
    socket.on('dashboard_update', function(data) {
        document.getElementById('cfo-total-spend').textContent =
            '$' + (data.total_cost || 0).toLocaleString('en-US', {maximumFractionDigits: 0});
        document.getElementById('cfo-ai-spend').textContent =
            '$' + (data.ai_ml_cost || 0).toLocaleString('en-US', {maximumFractionDigits: 0});

        const savings = Math.round(data.total_cost * 0.18);
        document.getElementById('cfo-savings').textContent =
            '$' + savings.toLocaleString('en-US');

        // Update trend chart if data available
        if (data.cost_trend && data.cost_trend.length > 0) {
            cfoTrendChart.data.datasets[0].data = data.cost_trend.map(d => d.cost);
            cfoTrendChart.update('none');
        }
    });

    // Initial data fetch
    fetch('/api/dashboard/cfo')
        .then(response => response.json())
        .then(data => {
            console.log('CFO Dashboard data loaded:', data);
        });
</script>
{% endblock %}