{% include 'overall_header.html' %}

<h1>{{ lang('ACP_ANUBISBB_TITLE') }}</h1>

{% if S_ERROR %}
	<div class="errorbox">
		<h3>{{ lang('WARNING') }}</h3>
		<p>{{ ERROR_MSG }}</p>
	</div>
{% endif %}

<form id="neodev_anubisbb_acp" name="neodev_anubisbb_acp" method="post" action="{{ U_ACTION }}" enctype="multipart/form-data">
	<fieldset>
		<legend>Images and Settings</legend>
		<dl class="anubisbb-img-dl">
			<dt><label for="anubisbb_img_pensive">Waiting image (pensive):</label></dt>
			<dd>
				<div class="anubisbb-img-upload">
					<input type="file" name="anubisbb_img_pensive" id="anubisbb_img_pensive" accept="image/webp,image/png,image/jpeg,image/jpg" />
					{% if ANUBISBB_IMG_PENSIVE %}
						<img src="{{ phpbb_root_path ~ 'ext/neodev/anubisbb/userimg/' ~ ANUBISBB_IMG_PENSIVE }}" alt="pensive" class="anubisbb-upload-img" />
					{% else %}
						<div class="anubisbb-upload-img anubisbb-upload-placeholder"></div>
					{% endif %}
				</div>
			</dd>
			<dt><label for="anubisbb_img_happy">Success image (happy):</label></dt>
			<dd>
				<div class="anubisbb-img-upload">
					<input type="file" name="anubisbb_img_happy" id="anubisbb_img_happy" accept="image/webp,image/png,image/jpeg,image/jpg" />
					{% if ANUBISBB_IMG_HAPPY %}
						<img src="{{ phpbb_root_path ~ 'ext/neodev/anubisbb/userimg/' ~ ANUBISBB_IMG_HAPPY }}" alt="happy" class="anubisbb-upload-img" />
					{% else %}
						<div class="anubisbb-upload-img anubisbb-upload-placeholder"></div>
					{% endif %}
				</div>
			</dd>
			<dt><label for="anubisbb_img_reject">Error image (reject):</label></dt>
			<dd>
				<div class="anubisbb-img-upload">
					<input type="file" name="anubisbb_img_reject" id="anubisbb_img_reject" accept="image/webp,image/png,image/jpeg,image/jpg" />
					{% if ANUBISBB_IMG_REJECT %}
						<img src="{{ phpbb_root_path ~ 'ext/neodev/anubisbb/userimg/' ~ ANUBISBB_IMG_REJECT }}" alt="reject" class="anubisbb-upload-img" />
					{% else %}
						<div class="anubisbb-upload-img anubisbb-upload-placeholder"></div>
					{% endif %}
				</div>
			</dd>
		</dl>
		<dl>
			<dt><label for="anubisbb_difficulty">{{ lang('ANUBISBB_DIFFICULTY_LABEL') }} (1.0-8.0):</label></dt>
			<dd>
				<input type="number" min="1.0" max="8.0" step="0.1" name="anubisbb_difficulty" id="anubisbb_difficulty" value="{{ ANUBISBB_DIFFICULTY|default(4.0) }}" />
				<span>{{ lang('ANUBISBB_DIFFICULTY_HELP') }}</span>
			</dd>
		</dl>
		<dl>
			<dt></dt>
				<input class="button1" type="submit" id="submit" name="submit" value="{{ lang('SUBMIT') }}" />&nbsp;
				{{ S_FORM_TOKEN }}
			</dd>
		</dl>
	</fieldset>
	<fieldset>
		<legend>Statistics table actions</legend>
		<dl>
			<dt><label for="delete_stats">Delete all statistics</label></dt>
			<dd>
				<input type="submit" class="button2" name="delete_stats" id="delete_stats" value="Delete statistics" onclick="return confirm('Are you sure you want to delete all verification statistics?');" />
			</dd>
		</dl>
	</fieldset>

	<h2>Verification statistics</h2>

	<div style="margin-bottom: 1em;">
		<label for="anubisbb-stats-range"><strong>Show statistics by:</strong></label>
		<select id="anubisbb-stats-range">
			<option value="days" selected>Day (last 30)</option>
			<option value="weeks">Week (last 12)</option>
			<option value="months">Month (last 12)</option>
			<option value="years">Year (all)</option>
		</select>
	</div>

	<div style="display: flex; flex-wrap: wrap; gap: 2em; margin-bottom: 1em;">
		<div id="anubisbb-summary-total" class="anubisbb-stat-badge" style="background:#e9f7ef; color:#14804b; padding:0.5em 1em; border-radius:.7em; font-size:1em; flex: 0 1 150px; min-width: 80px; text-align: center;">
			<b>Total:</b> <span>0</span>
		</div>
		<div id="anubisbb-summary-success" class="anubisbb-stat-badge" style="background:#e3f2fd; color:#1976d2; padding:0.5em 1em; border-radius:.7em; font-size:1em; flex: 0 1 150px; min-width: 80px; text-align: center;">
			<b>Success:</b> <span>0</span>
		</div>
		<div id="anubisbb-summary-fail" class="anubisbb-stat-badge" style="background:#ffebee; color:#b71c1c; padding:0.5em 1em; border-radius:.7em; font-size:1em; flex: 0 1 150px; min-width: 80px; text-align: center;">
			<b>Failure:</b> <span>0</span>
		</div>
	</div>

	<style>
		.anubisbb-img-dl dt {
			margin-top: 1em;
		}
		.anubisbb-img-upload {
			display: flex;
			align-items: center;
			gap: 1em;
		}
		.anubisbb-upload-img {
			width: 96px;
			height: 96px;
			object-fit: contain;
			display: block;
		}
		.anubisbb-upload-placeholder {
			display: flex;
			align-items: center;
			justify-content: center;
			background: #f0f0f0;
			color: #bbb;
			font-size: 2em;
		}
		.anubisbb-stats-flex {
			display: flex;
			gap: 2rem;
			flex-wrap: wrap;
			align-items: stretch;
		}
		.anubisbb-stats-card {
			background: #f9f9fb;
			border-radius: 1em;
			box-shadow: 0 2px 12px #0002;
			padding: 1.5em;
			margin-bottom: 2em;
			min-width: 320px;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			flex: 1 1 350px;
			box-sizing: border-box;
		}
		@media (max-width: 900px) {
			.anubisbb-stats-flex {
				flex-direction: column;
			}
			.anubisbb-stats-card {
				width: 100% !important;
				min-width: unset;
			}
		}
		@media (max-width: 600px) {
			.anubisbb-stats-card,
			.anubisbb-stat-badge {
				padding: 0.8em 0.5em !important;
				font-size: 1em !important;
			}
			.anubisbb-stats-card {
				margin-bottom: 1em;
			}
		}
		@media (max-width: 450px) {
			.anubisbb-stats-flex {
				gap: 0.5em;
			}
		}
	</style>

	<div class="anubisbb-stats-flex">
	  <div class="anubisbb-stats-card" style="flex:2 1 400px;">
	    <h3 style="margin-top:0;" id="stats-date-title">By day (last 30)</h3>
	    <div style="flex:1;">
	      <canvas id="anubisbb-stats-bydate" width="600" height="220" style="width:100%;max-width:100%;height:220px;display:block;"></canvas>
	    </div>
	  </div>
	  <div class="anubisbb-stats-card" style="flex:1 1 350px;">
	    <h3 style="margin-top:0;">Top 10 countries</h3>
	    <div style="flex:1;">
	      <canvas id="anubisbb-stats-countries" width="400" height="220" style="width:100%;max-width:100%;height:220px;display:block;"></canvas>
	    </div>
	  </div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<script>
	const statsByDay = {{ ANUBISBB_STATS_DAYS|json_encode|raw }};
	const statsByWeek = {{ ANUBISBB_STATS_WEEKS|json_encode|raw }};
	const statsByMonth = {{ ANUBISBB_STATS_MONTHS|json_encode|raw }};
	const statsByYear = {{ ANUBISBB_STATS_YEARS|json_encode|raw }};
	const statsByCountry = {{ ANUBISBB_STATS_BY_COUNTRY|json_encode|raw }};
	const ranges = {
		'days': { label: 'By day (last 30)', data: statsByDay },
		'weeks': { label: 'By week (last 12)', data: statsByWeek },
		'months': { label: 'By month (last 12)', data: statsByMonth },
		'years': { label: 'By year', data: statsByYear }
	};

	function updateStats(rangeKey) {
		const range = ranges[rangeKey] || ranges['days'];
		const chartData = range.data;
		let total = 0, success = 0, fail = 0;
		chartData.forEach(r => {
			total += Number(r.total);
			success += Number(r.success);
			fail += Number(r.fail);
		});
		document.querySelector('#anubisbb-summary-total span').textContent = total;
		document.querySelector('#anubisbb-summary-success span').textContent = success;
		document.querySelector('#anubisbb-summary-fail span').textContent = fail;
		document.getElementById('stats-date-title').textContent = range.label;

		statsByDateChart.data.labels = chartData.map(r => r.label);
		statsByDateChart.data.datasets[0].data = chartData.map(r => r.success);
		statsByDateChart.data.datasets[1].data = chartData.map(r => r.fail);
		statsByDateChart.update();
	}
	const ctxDays = document.getElementById('anubisbb-stats-bydate').getContext('2d');
	const statsByDateChart = new Chart(ctxDays, {
		type: 'bar',
		data: {
			labels: statsByDay.map(r => r.label),
			datasets: [
				{
					label: 'Success',
					data: statsByDay.map(r => r.success),
					backgroundColor: 'rgba(34, 139, 34, 0.7)',
					stack: 'Stack',
				},
				{
					label: 'Failure',
					data: statsByDay.map(r => r.fail),
					backgroundColor: 'rgba(178, 34, 34, 0.7)',
					stack: 'Stack',
				},
			]
		},
		options: {
			responsive: true,
			maintainAspectRatio: false,
			plugins: {
				legend: { position: 'top' },
				title: { display: false },
				tooltip: { mode: 'index', intersect: false }
			},
			scales: {
				x: { stacked: true },
				y: { stacked: true, beginAtZero: true }
			}
		}
	});
	const ctxCountries = document.getElementById('anubisbb-stats-countries').getContext('2d');
	new Chart(ctxCountries, {
		type: 'bar',
		data: {
			labels: statsByCountry.map(r => r.country),
			datasets: [
				{
					label: 'Success',
					data: statsByCountry.map(r => r.success),
					backgroundColor: 'rgba(34, 139, 34, 0.7)',
				},
				{
					label: 'Failure',
					data: statsByCountry.map(r => r.fail),
					backgroundColor: 'rgba(178, 34, 34, 0.7)',
				},
			]
		},
		options: {
			responsive: true,
			maintainAspectRatio: false,
			plugins: {
				legend: { position: 'top' },
				title: { display: false },
				tooltip: { mode: 'index', intersect: false }
			},
			scales: {
				x: { stacked: false },
				y: { beginAtZero: true }
			}
		}
	});
	document.getElementById('anubisbb-stats-range').addEventListener('change', function() {
		updateStats(this.value);
	});
	updateStats('days');
	</script>
</form>

{% include 'overall_footer.html' %}