{% extends "base.html" %}
{% block title %}Financial Charts — {{ report.project_name }}{% endblock %}
{% block content %}
<div class="max-w-5xl mx-auto px-4 py-12">
    <a href="{{ url_for('study.view', report_id=report.id) }}" class="text-sm text-slate-400 hover:text-white transition mb-4 inline-block">&larr; العودة للتقرير</a>
    <div class="mb-8">
        <div class="text-xs text-gold-500 font-mono tracking-widest uppercase">INTERACTIVE FINANCIAL CHARTS</div>
        <h1 class="text-2xl font-bold text-white">الرسوم البيانية المالية — {{ report.project_name }}</h1>
    </div>

    <div class="grid md:grid-cols-4 gap-4 mb-8">
        <div class="glass p-4 rounded-xl border-t-2 border-t-emerald-500/50 text-center">
            <div class="text-xs text-emerald-400 font-mono uppercase mb-1">ROI</div>
            <div class="text-xl text-white font-bold">{{ chart_data.get('roi', 'N/A') }}%</div>
        </div>
        <div class="glass p-4 rounded-xl border-t-2 border-t-blue-500/50 text-center">
            <div class="text-xs text-blue-400 font-mono uppercase mb-1">NPV</div>
            <div class="text-xl text-white font-bold">{{ chart_data.get('npv', 'N/A') }}</div>
        </div>
        <div class="glass p-4 rounded-xl border-t-2 border-t-purple-500/50 text-center">
            <div class="text-xs text-purple-400 font-mono uppercase mb-1">IRR</div>
            <div class="text-xl text-white font-bold">{{ chart_data.get('irr', 'N/A') }}%</div>
        </div>
        <div class="glass p-4 rounded-xl border-t-2 border-t-gold-500/50 text-center">
            <div class="text-xs text-gold-400 font-mono uppercase mb-1">Payback</div>
            <div class="text-xl text-white font-bold">{{ chart_data.get('payback', 'N/A') }} yr</div>
        </div>
    </div>

    <div class="grid md:grid-cols-2 gap-6">
        <div class="glass p-5 rounded-xl border border-white/10">
            <h3 class="text-sm text-gold-400 font-mono uppercase mb-3">Revenue vs Costs (5 Years)</h3>
            <canvas id="revenueCostChart" height="250"></canvas>
        </div>
        <div class="glass p-5 rounded-xl border border-white/10">
            <h3 class="text-sm text-gold-400 font-mono uppercase mb-3">Cash Flow Projection</h3>
            <canvas id="cashflowChart" height="250"></canvas>
        </div>
        <div class="glass p-5 rounded-xl border border-white/10 md:col-span-2">
            <h3 class="text-sm text-gold-400 font-mono uppercase mb-3">Net Profit Projection</h3>
            <canvas id="profitChart" height="200"></canvas>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
const chartData = {{ chart_data|tojson }};
const labels = ['Year 1', 'Year 2', 'Year 3', 'Year 4', 'Year 5'];
const chartOpts = {
    responsive: true,
    plugins: { legend: { labels: { color: '#94a3b8' } } },
    scales: {
        x: { ticks: { color: '#64748b' }, grid: { color: 'rgba(255,255,255,0.03)' } },
        y: { ticks: { color: '#64748b' }, grid: { color: 'rgba(255,255,255,0.05)' } }
    }
};

if (chartData.revenue && chartData.revenue.length) {
    new Chart(document.getElementById('revenueCostChart'), {
        type: 'bar', data: { labels,
            datasets: [
                { label: 'Revenue', data: chartData.revenue, backgroundColor: 'rgba(16,185,129,0.3)', borderColor: '#10b981', borderWidth: 1 },
                { label: 'Costs', data: chartData.costs, backgroundColor: 'rgba(239,68,68,0.3)', borderColor: '#ef4444', borderWidth: 1 }
            ]
        }, options: chartOpts
    });
}
if (chartData.cashflow && chartData.cashflow.length) {
    new Chart(document.getElementById('cashflowChart'), {
        type: 'line', data: { labels,
            datasets: [{ label: 'Cash Flow', data: chartData.cashflow, borderColor: '#3b82f6', backgroundColor: 'rgba(59,130,246,0.1)', fill: true, tension: 0.3 }]
        }, options: chartOpts
    });
}
if (chartData.profit && chartData.profit.length) {
    new Chart(document.getElementById('profitChart'), {
        type: 'line', data: { labels,
            datasets: [{ label: 'Net Profit', data: chartData.profit, borderColor: '#d4af37', backgroundColor: 'rgba(212,175,55,0.1)', fill: true, tension: 0.3, pointRadius: 5 }]
        }, options: chartOpts
    });
}
</script>
{% endblock %}