<?php
$labels_json = json_encode($signup_labels);
$values_json = json_encode($signup_values);
?>

<link href="<?php echo base_url('assets/css/admin-panel.css'); ?>" rel="stylesheet">

<div class="care-admin">
	<div class="ca-hero">
		<div class="ca-hero-inner row align-items-center g-3">
			<div class="col-lg-8">
				<p class="ca-kicker">Insights</p>
				<h1 class="ca-title"><?php echo isset($page_title) ? htmlspecialchars($page_title) : 'Analytics'; ?></h1>
				<p class="ca-sub">Illustrative KPIs and trends — connect to live metrics when ready.</p>
			</div>
			<div class="col-lg-4">
				<div class="ca-nav justify-content-lg-end">
					<a href="<?php echo base_url('admin'); ?>" class="btn btn-light">Overview</a>
					<a href="<?php echo base_url('admin/payments'); ?>" class="btn btn-primary">Payments</a>
				</div>
			</div>
		</div>
	</div>

	<div class="row g-3 mb-4">
		<div class="col-12 col-md-4">
			<div class="ca-stat">
				<div class="ca-kpi-mini">
					<div class="ca-stat-icon mb-0"><i class="fa-solid fa-sack-dollar"></i></div>
					<div>
						<p class="ca-stat-label">Revenue · 30 days</p>
						<p class="ca-stat-value mb-0"><?php echo htmlspecialchars($kpis['revenue_30d']); ?></p>
					</div>
				</div>
			</div>
		</div>
		<div class="col-12 col-md-4">
			<div class="ca-stat">
				<div class="ca-kpi-mini">
					<div class="ca-stat-icon mb-0"><i class="fa-solid fa-clock"></i></div>
					<div>
						<p class="ca-stat-label">Avg. caregiver time</p>
						<p class="ca-stat-value mb-0"><?php echo htmlspecialchars($kpis['avg_caregiver_hours']); ?></p>
					</div>
				</div>
			</div>
		</div>
		<div class="col-12 col-md-4">
			<div class="ca-stat">
				<div class="ca-kpi-mini">
					<div class="ca-stat-icon mb-0"><i class="fa-solid fa-list-check"></i></div>
					<div>
						<p class="ca-stat-label">Task completion</p>
						<p class="ca-stat-value mb-0"><?php echo htmlspecialchars($kpis['task_completion']); ?></p>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="row g-3">
		<div class="col-lg-8">
			<div class="ca-card ca-chart-card">
				<div class="ca-card-header border-0 pb-0">
					<h5 class="ca-card-title mb-0"><i class="fa-solid fa-chart-area me-2 text-success"></i>Sign-up trends</h5>
					<p class="mt-2 mb-0">Monthly new registrations (sample series)</p>
				</div>
				<div class="ca-card-body pt-2">
					<div style="height: 300px; position: relative;">
						<canvas id="signupChart"></canvas>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4">
			<div class="ca-card h-100">
				<div class="ca-card-header border-0 pb-0">
					<h5 class="ca-card-title mb-0"><i class="fa-solid fa-fire me-2 text-warning"></i>Top 10 active</h5>
					<p class="mt-2 mb-0">By hours logged</p>
				</div>
				<div class="ca-card-body p-0">
					<ul class="list-group list-group-flush ca-rank-list">
						<?php $rank = 1; foreach ($top_users as $tu): ?>
						<li class="list-group-item d-flex justify-content-between align-items-center border-start-0 border-end-0">
							<span><span class="ca-rank-num"><?php echo $rank++; ?></span><?php echo htmlspecialchars($tu['name']); ?></span>
							<span class="badge rounded-pill ca-pill bg-light text-dark border"><?php echo htmlspecialchars($tu['hours']); ?></span>
						</li>
						<?php endforeach; ?>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
(function () {
	var labels = <?php echo $labels_json; ?>;
	var values = <?php echo $values_json; ?>;
	var ctx = document.getElementById('signupChart');
	if (!ctx) return;
	var g1 = 'rgb(45, 106, 79)';
	var g2 = 'rgba(64, 145, 108, 0.15)';
	new Chart(ctx, {
		type: 'line',
		data: {
			labels: labels,
			datasets: [{
				label: 'New sign-ups (sample)',
				data: values,
				borderColor: g1,
				backgroundColor: g2,
				fill: true,
				tension: 0.4,
				borderWidth: 2,
				pointRadius: 4,
				pointHoverRadius: 6,
				pointBackgroundColor: '#fff',
				pointBorderColor: g1,
				pointBorderWidth: 2
			}]
		},
		options: {
			responsive: true,
			maintainAspectRatio: false,
			plugins: {
				legend: {
					display: true,
					labels: { font: { family: "'Noto Sans', sans-serif", size: 12 }, color: '#5c6b7a' }
				}
			},
			scales: {
				x: {
					grid: { display: false },
					ticks: { color: '#5c6b7a', font: { size: 11 } }
				},
				y: {
					beginAtZero: true,
					grid: { color: 'rgba(27, 38, 52, 0.06)' },
					ticks: { color: '#5c6b7a' }
				}
			}
		}
	});
})();
</script>
