{# OSEP — Onglet Exécution financière du suivi-évaluation
   Affiche : KPIs budgétaires + chart évolution mensuelle (engagements/décaissements)
   + tableau des dépenses par activité + ligne budgétaire.
   Les données sont calculées en Twig à partir de project.budgetLines / activities. #}

{% set _allocated   = project.totalBudget|default(0) %}
{% set _committed   = project.getTotalCommittedBudget|default(0) %}
{% set _disbursed   = project.totalDisbursedBudget|default(0) %}
{% set _remaining   = _allocated - _disbursed %}
{% set _pctCommit   = _allocated > 0 ? (_committed / _allocated * 100) : 0 %}
{% set _pctDisburse = _allocated > 0 ? (_disbursed / _allocated * 100) : 0 %}
{% set _currency    = project.currency|default('XOF') %}

<div class="osep-tab-head">
	<div class="left">
		<div class="ic" style="background:var(--osep-success-soft);color:var(--osep-sn-green)">
			<i class="mdi mdi-cash-multiple"></i>
		</div>
		<div>
			<h4>Exécution financière</h4>
			<p class="sub">Suivi des engagements, décaissements et reste à dépenser sur le budget alloué du projet.</p>
		</div>
	</div>
	<div class="right">
		<a href="{{ url('app_project_budget_tracking', {acronym: project.acronym}) }}"
		   class="btn btn-outline-secondary btn-sm">
			<i class="mdi mdi-chart-bar me-1"></i> Suivi budgétaire détaillé
		</a>
	</div>
</div>

{# === KPI strip financier === #}
<div class="osep-projects-stats mb-3">
	<div class="stat">
		<div class="ic"><i class="mdi mdi-bank-transfer-in"></i></div>
		<div>
			<div class="v">{{ _allocated|minify_budget }}</div>
			<div class="l">Alloué ({{ _currency }})</div>
		</div>
	</div>
	<div class="stat gold">
		<div class="ic"><i class="mdi mdi-bank-check"></i></div>
		<div>
			<div class="v">{{ _committed|minify_budget }}</div>
			<div class="l">Engagé · {{ _pctCommit|round(0) }}%</div>
		</div>
	</div>
	<div class="stat green">
		<div class="ic"><i class="mdi mdi-bank-transfer-out"></i></div>
		<div>
			<div class="v">{{ _disbursed|minify_budget }}</div>
			<div class="l">Décaissé · {{ _pctDisburse|round(0) }}%</div>
		</div>
	</div>
	<div class="stat warn">
		<div class="ic"><i class="mdi mdi-cash-clock"></i></div>
		<div>
			<div class="v">{{ _remaining|minify_budget }}</div>
			<div class="l">Restant à dépenser</div>
		</div>
	</div>
</div>

{# === Charts : évolution mensuelle + répartition === #}
<div class="osep-finance-grid">
	<div class="osep-finance-card">
		<h4><i class="mdi mdi-chart-bar"></i> Évolution mensuelle</h4>
		<p class="sub">Engagements vs Décaissements cumulés (en {{ _currency }})</p>
		<div class="canvas-wrap">
			<canvas id="followupBudgetEvolutionChart"
			        data-allocated="{{ _allocated }}"
			        data-committed="{{ _committed }}"
			        data-disbursed="{{ _disbursed }}"
			        data-currency="{{ _currency }}"></canvas>
		</div>
	</div>
	<div class="osep-finance-card">
		<h4><i class="mdi mdi-chart-donut"></i> Répartition</h4>
		<p class="sub">Décaissé · Engagé non décaissé · Disponible</p>
		<div class="canvas-wrap">
			<canvas id="followupBudgetDonut"
			        data-disbursed="{{ _disbursed }}"
			        data-committed="{{ _committed }}"
			        data-allocated="{{ _allocated }}"></canvas>
		</div>
	</div>
</div>

{# === Tableau dépenses par activité === #}
<h4 class="osep-section-title mt-4">
	<i class="mdi mdi-format-list-checks"></i> Dépenses par activité
	<span class="sub d-block">Allocation, engagement et décaissement détaillés</span>
</h4>

{% if activities is defined and activities|length > 0 %}
	<div class="osep-table-wrap mb-3">
		<table class="table table-hover align-middle mb-0">
			<thead>
				<tr>
					<th>Activité</th>
					<th class="text-end">Alloué</th>
					<th class="text-end">Engagé</th>
					<th class="text-end">Décaissé</th>
					<th>Avancement</th>
					<th class="text-end">Reste</th>
				</tr>
			</thead>
			<tbody>
				{% for activity in activities %}
					{% set _aBudget = activity.budget|default(0) %}
					{% set _aCommit = activity.committedBudget|default(0) %}
					{% set _aDisb   = activity.disbursedBudget|default(0) %}
					{% set _aRest   = _aBudget - _aDisb %}
					{% set _aPct    = _aBudget > 0 ? (_aDisb / _aBudget * 100) : 0 %}
					{% set _aOver   = _aDisb > _aBudget %}
					<tr {% if _aOver %}class="osep-row-overdue"{% endif %}>
						<td>
							<div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">
								{% if activity.parent %}
									<span class="badge bg-soft-secondary text-secondary" style="font-size:10px;padding:2px 7px;border-radius:4px">{{ activity.parent.acronym }}</span>
								{% endif %}
								<span class="badge bg-primary-subtle text-primary" style="font-size:10.5px;padding:3px 8px;border-radius:5px;font-weight:700;letter-spacing:.04em">{{ activity.acronym }}</span>
								<span style="font-size:13px;font-weight:600;color:var(--osep-ink-900)">{{ activity.name }}</span>
							</div>
						</td>
						<td class="text-end" style="font-weight:700;color:var(--osep-ink-900)">{{ _aBudget|minify_budget }}</td>
						<td class="text-end" style="color:var(--osep-navy-800);font-weight:600">{{ _aCommit|minify_budget }}</td>
						<td class="text-end" style="color:#8a6b29;font-weight:700">{{ _aDisb|minify_budget }}</td>
						<td>
							<div class="osep-progress-cell">
								<div class="bar">
									<div class="actual {{ _aOver ? 'down' : 'up' }}" style="width:{{ _aPct < 100 ? _aPct : 100 }}%"></div>
								</div>
								<div class="info">
									<span>Décaissé</span>
									<b>{{ _aPct|round(0) }}%</b>
								</div>
							</div>
						</td>
						<td class="text-end" style="font-weight:700;color:{{ _aOver ? 'var(--osep-red, #E31B23)' : 'var(--osep-ink-700)' }}">
							{{ _aRest|minify_budget }}
							{% if _aOver %}
								<i class="mdi mdi-alert-circle-outline" style="color:var(--osep-red, #E31B23)" title="Dépassement budgétaire"></i>
							{% endif %}
						</td>
					</tr>
				{% endfor %}
			</tbody>
			<tfoot style="background:var(--osep-bg);font-weight:800">
				<tr>
					<td>Total projet</td>
					<td class="text-end">{{ _allocated|minify_budget }}</td>
					<td class="text-end">{{ _committed|minify_budget }}</td>
					<td class="text-end">{{ _disbursed|minify_budget }}</td>
					<td>
						<div class="osep-progress-cell">
							<div class="bar">
								<div class="actual up" style="width:{{ _pctDisburse|round(0) }}%"></div>
							</div>
							<div class="info"><span>Décaissé global</span><b>{{ _pctDisburse|round(0) }}%</b></div>
						</div>
					</td>
					<td class="text-end">{{ _remaining|minify_budget }}</td>
				</tr>
			</tfoot>
		</table>
	</div>
{% else %}
	<div class="osep-projects-empty">
		<div class="ic-circle"><i class="mdi mdi-cash-off"></i></div>
		<h4>Aucune activité budgétisée</h4>
		<p>Définissez des activités avec budget pour voir le détail des dépenses ici.</p>
	</div>
{% endif %}

<script>
(function () {
	const navy  = '#0A2A52';
	const gold  = '#C9A659';
	let evoChart = null;
	let donutChart = null;
	let initialized = false;

	function loadChartJs() {
		// Chart.js est fourni par le bundle followup (assets/js/project/followup.js)
		// qui exporte window.Chart. On attend qu'il soit dispo (cas où le bundle
		// finit de s'initialiser après ce script inline).
		return new Promise((resolve, reject) => {
			if (typeof window.Chart !== 'undefined') return resolve(window.Chart);
			let attempts = 0;
			const interval = setInterval(() => {
				if (typeof window.Chart !== 'undefined') {
					clearInterval(interval);
					resolve(window.Chart);
				} else if (++attempts > 50) { // 5 secondes max
					clearInterval(interval);
					reject(new Error('Chart.js indisponible après 5s — vérifiez le bundle followup.'));
				}
			}, 100);
		});
	}

	function renderEvolution(C) {
		const evoCanvas = document.getElementById('followupBudgetEvolutionChart');
		if (!evoCanvas || evoChart) return;
		const committed = parseFloat(evoCanvas.dataset.committed) || 0;
		const disbursed = parseFloat(evoCanvas.dataset.disbursed) || 0;
		const months = ['M-5','M-4','M-3','M-2','M-1','M0'];
		// Projection linéaire mensuelle (à remplacer dès qu'un endpoint réel sera dispo)
		const commitData = months.map((_, i) => +((committed * (i + 1)) / months.length / 1e6).toFixed(2));
		const disbData   = months.map((_, i) => +((disbursed * (i + 1)) / months.length / 1e6).toFixed(2));

		evoChart = new C(evoCanvas, {
			type: 'bar',
			data: {
				labels: months,
				datasets: [
					{ label: 'Engagé (M)',   backgroundColor: navy + 'cc', borderRadius: 6, data: commitData },
					{ label: 'Décaissé (M)', backgroundColor: gold + 'cc', borderRadius: 6, data: disbData   },
				],
			},
			options: {
				responsive: true, maintainAspectRatio: false,
				plugins: {
					legend:  { position: 'bottom', labels: { usePointStyle: true, boxWidth: 8, padding: 12, font: { size: 11, weight: '600' }, color: '#34425E' } },
					tooltip: { backgroundColor: navy, titleColor: '#fff', bodyColor: '#fff', borderColor: gold, borderWidth: 1, padding: 10, cornerRadius: 8 },
				},
				scales: {
					x: { grid: { display: false }, ticks: { color: '#6B7A99', font: { size: 11 } } },
					y: { beginAtZero: true, grid: { color: '#EEF1F7', drawBorder: false }, ticks: { color: '#6B7A99', font: { size: 11 } } },
				},
			},
		});
	}

	function renderDonut(C) {
		const donutCanvas = document.getElementById('followupBudgetDonut');
		if (!donutCanvas || donutChart) return;
		const all = parseFloat(donutCanvas.dataset.allocated) || 0;
		const com = parseFloat(donutCanvas.dataset.committed) || 0;
		const dis = parseFloat(donutCanvas.dataset.disbursed) || 0;
		const committedPending = Math.max(0, com - dis);
		const remaining        = Math.max(0, all - com);

		donutChart = new C(donutCanvas, {
			type: 'doughnut',
			data: {
				labels: ['Décaissé', 'Engagé non décaissé', 'Disponible'],
				datasets: [{
					data: [dis, committedPending, remaining],
					backgroundColor: [gold, navy, '#EEF1F7'],
					borderColor: '#fff',
					borderWidth: 3,
				}],
			},
			options: {
				responsive: true, maintainAspectRatio: false, cutout: '65%',
				plugins: {
					legend:  { position: 'bottom', labels: { usePointStyle: true, boxWidth: 8, padding: 10, font: { size: 11, weight: '600' }, color: '#34425E' } },
					tooltip: { backgroundColor: navy, titleColor: '#fff', bodyColor: '#fff', borderColor: gold, borderWidth: 1, padding: 10, cornerRadius: 8 },
				},
			},
		});
	}

	function renderAllCharts() {
		// Garde-fou : ne pas relancer si déjà fait
		if (initialized && evoChart && donutChart) {
			// Reflow au cas où le canvas a changé de taille pendant qu'il était caché
			evoChart.resize();
			donutChart.resize();
			return;
		}
		loadChartJs().then((C) => {
			renderEvolution(C);
			renderDonut(C);
			initialized = true;
		}).catch((err) => {
			// eslint-disable-next-line no-console
			console.error('[OSEP] Impossible de charger Chart.js', err);
		});
	}

	// Lazy-init au premier affichage de l'onglet financier (canvas mesurable seulement quand visible).
	const tabLink = document.querySelector('a[href="#financeExecutionTab"]');
	if (tabLink) {
		tabLink.addEventListener('shown.bs.tab', renderAllCharts);
	}

	// Si l'onglet est déjà actif (rechargement direct sur cette tab), on lance.
	if (document.querySelector('#financeExecutionTab.active.show')
		|| document.querySelector('#financeExecutionTab.active')) {
		// Léger délai pour laisser le DOM se stabiliser et le canvas avoir une taille
		setTimeout(renderAllCharts, 80);
	}

	// Re-render au resize de la fenêtre (le maintainAspectRatio:false nécessite un resize manuel parfois)
	window.addEventListener('resize', () => {
		if (evoChart)   evoChart.resize();
		if (donutChart) donutChart.resize();
	});
})();
</script>