<?php if ( ! defined( 'ABSPATH' ) ) { exit; } ?>
<div class="wrap">
	<div class="zacls-action-bar">
		<div class="zacls-action-left">
			<h1 class="zacls-page-title"><?php esc_html_e( 'Analytics Dashboard', 'za-creative-login-shield' ); ?></h1>
		</div>
		<div class="zacls-action-right">
			<div class="zacls-analytics-period">
				<button type="button" class="zacls-btn active" data-period="7">7d</button>
				<button type="button" class="zacls-btn" data-period="14">14d</button>
				<button type="button" class="zacls-btn" data-period="30">30d</button>
			</div>
		</div>
	</div>

	<div class="zacls-stats-grid" id="zacls-analytics-stats">
		<div class="zacls-stat-card">
			<div class="stat-icon attempts"><span class="dashicons dashicons-chart-area"></span></div>
			<div class="stat-content">
				<span class="stat-value" id="stat-total">-</span>
				<span class="stat-label"><?php esc_html_e( 'Total Attempts (24h)', 'za-creative-login-shield' ); ?></span>
			</div>
		</div>
		<div class="zacls-stat-card">
			<div class="stat-icon failed-logins"><span class="dashicons dashicons-dismiss"></span></div>
			<div class="stat-content">
				<span class="stat-value" id="stat-failed">-</span>
				<span class="stat-label"><?php esc_html_e( 'Failed (24h)', 'za-creative-login-shield' ); ?></span>
			</div>
		</div>
		<div class="zacls-stat-card">
			<div class="stat-icon blocked"><span class="dashicons dashicons-shield"></span></div>
			<div class="stat-content">
				<span class="stat-value" id="stat-blocked">-</span>
				<span class="stat-label"><?php esc_html_e( 'Blocked IPs', 'za-creative-login-shield' ); ?></span>
			</div>
		</div>
		<div class="zacls-stat-card">
			<div class="stat-icon risk"><span class="dashicons dashicons-chart-line"></span></div>
			<div class="stat-content">
				<span class="stat-value" id="stat-attack-rate">-</span>
				<span class="stat-label"><?php esc_html_e( 'Attack Rate', 'za-creative-login-shield' ); ?></span>
			</div>
		</div>
	</div>

	<div class="zacls-card">
		<h2 class="zacls-card-title"><?php esc_html_e( 'Login Activity (14 days)', 'za-creative-login-shield' ); ?></h2>
		<div class="zacls-chart" id="zacls-activity-chart"></div>
	</div>

	<div class="zacls-dashboard-grid">
		<div class="zacls-dashboard-main">
			<div class="zacls-card">
				<h2 class="zacls-card-title"><?php esc_html_e( 'Browser Distribution', 'za-creative-login-shield' ); ?></h2>
				<div id="zacls-browser-chart" class="zacls-chart-pie"></div>
			</div>

			<div class="zacls-card">
				<h2 class="zacls-card-title"><?php esc_html_e( 'Operating Systems', 'za-creative-login-shield' ); ?></h2>
				<div id="zacls-os-chart" class="zacls-chart-pie"></div>
			</div>

			<div class="zacls-card">
				<h2 class="zacls-card-title"><?php esc_html_e( '24-Hour Attack Timeline', 'za-creative-login-shield' ); ?></h2>
				<div id="zacls-timeline-chart" class="zacls-chart-bar-horizontal"></div>
			</div>
		</div>

		<div class="zacls-dashboard-side">
			<div class="zacls-card">
				<h2 class="zacls-card-title"><?php esc_html_e( 'Top Attackers', 'za-creative-login-shield' ); ?></h2>
				<div id="zacls-top-attackers"></div>
			</div>

			<div class="zacls-card">
				<h2 class="zacls-card-title"><?php esc_html_e( 'Login Origins', 'za-creative-login-shield' ); ?></h2>
				<div id="zacls-country-stats"></div>
			</div>
		</div>
	</div>
</div>

<script>
jQuery(function($) {
	function loadAnalytics(period) {
		period = period || 7;
		$.get(zaclsData.ajaxUrl, { action: 'zacls_get_analytics', nonce: zaclsData.nonce, type: 'all' }, function(response) {
			if (!response.success) return;
			var data = response.data;
			$('#stat-total').text(data.stats.total);
			$('#stat-failed').text(data.stats.failed);
			$('#stat-blocked').text(data.stats.blocked);
			$('#stat-attack-rate').text(data.stats.attack_rate + '%');
			renderActivityChart(data.activity);
			renderTopAttackers(data.attackers);
			renderCountryStats(data.countries);
		});
	}

	function renderActivityChart(activity) {
		if (!activity || !activity.length) return;
		var html = '', max = 1;
		$.each(activity, function(i, day) { if (day.failed + day.success > max) max = day.failed + day.success; });
		$.each(activity, function(i, day) {
			var failedH = max > 0 ? (day.failed / max) * 120 : 0;
			var successH = max > 0 ? (day.success / max) * 120 : 0;
			var totalH = failedH + successH;
			var isToday = i === activity.length - 1;
			html += '<div class="zacls-chart-bar-wrapper ' + (isToday ? 'chart-today' : '') + '">';
			html += '<div class="zacls-chart-tooltip">' + day.label + ': ' + day.failed + ' failed / ' + day.success + ' success</div>';
			html += '<div class="zacls-chart-bar" style="height:' + Math.max(totalH, 2) + 'px">';
			if (day.failed > 0) html += '<div class="zacls-chart-bar-failed" style="height:' + failedH + 'px"></div>';
			if (day.success > 0) html += '<div class="zacls-chart-bar-success" style="height:' + successH + 'px"></div>';
			html += '</div><div class="chart-label">' + day.label + '</div></div>';
		});
		$('#zacls-activity-chart').html('<div class="zacls-chart-container">' + html + '</div>');
	}

	function renderTopAttackers(attackers) {
		if (!attackers || attackers.length === 0) {
			$('#zacls-top-attackers').html('<p class="description"><?php esc_html_e( 'No attackers in the selected period.', 'za-creative-login-shield' ); ?></p>');
			return;
		}
		var html = '<div class="zacls-table-wrap"><table class="wp-list-table widefat fixed striped"><thead><tr><th><?php esc_html_e( 'IP', 'za-creative-login-shield' ); ?></th><th><?php esc_html_e( 'Attempts', 'za-creative-login-shield' ); ?></th></tr></thead><tbody>';
		$.each(attackers.slice(0, 10), function(i, a) { html += '<tr><td><code>' + a.ip + '</code></td><td><strong>' + a.attempts + '</strong></td></tr>'; });
		html += '</tbody></table></div>';
		$('#zacls-top-attackers').html(html);
	}

	function renderCountryStats(countries) {
		if (!countries || countries.length === 0) {
			$('#zacls-country-stats').html('<p class="description"><?php esc_html_e( 'No country data available.', 'za-creative-login-shield' ); ?></p>');
			return;
		}
		var html = '<div class="zacls-table-wrap"><table class="wp-list-table widefat fixed striped"><thead><tr><th><?php esc_html_e( 'Country', 'za-creative-login-shield' ); ?></th><th><?php esc_html_e( 'Attempts', 'za-creative-login-shield' ); ?></th></tr></thead><tbody>';
		$.each(countries.slice(0, 10), function(i, c) { html += '<tr><td>' + c.country_code + '</td><td><strong>' + c.cnt + '</strong></td></tr>'; });
		html += '</tbody></table></div>';
		$('#zacls-country-stats').html(html);
	}

	$('.zacls-analytics-period .button').on('click', function() {
		$('.zacls-analytics-period .button').removeClass('active');
		$(this).addClass('active');
		loadAnalytics($(this).data('period'));
	});

	loadAnalytics(7);
});
</script>
