{% extends "base.html" %}
{% block title %}kuu dashboard{% endblock %}
{% block content %}

<div hx-get="fragments/stats" hx-trigger="load, every 2s" hx-swap="innerHTML">
	<div class="stat-strip">
		<div class="stat-cell">
			<div class="stat-num dim">—</div>
			<div class="stat-key">enqueued</div>
		</div>
		<div class="stat-cell">
			<div class="stat-num dim">—</div>
			<div class="stat-key">succeeded</div>
		</div>
		<div class="stat-cell">
			<div class="stat-num dim">—</div>
			<div class="stat-key">failed</div>
		</div>
		<div class="stat-cell">
			<div class="stat-num dim">—</div>
			<div class="stat-key">retried</div>
		</div>
		<div class="stat-cell">
			<div class="stat-num dim">—</div>
			<div class="stat-key">dead</div>
		</div>
	</div>
</div>

<div class="surface">
	<div class="surface-head">
		<span class="surface-title">activity</span>
	</div>
	<div class="surface-body">
		<div id="activity-chart" style="height:200px; width:100%;"></div>
	</div>
</div>

<div class="surface">
	<div class="surface-head"><span class="surface-title">presets</span></div>
	<div class="surface-body flush" hx-get="fragments/presets" hx-trigger="load, every 3s" hx-swap="innerHTML">
		<p class="placeholder">loading…</p>
	</div>
</div>

<div class="col2">
	<div class="surface">
		<div class="surface-head"><span class="surface-title">tasks</span></div>
		<div class="surface-body flush" hx-get="fragments/tasks" hx-trigger="load, every 5s" hx-swap="innerHTML">
			<p class="placeholder">loading…</p>
		</div>
	</div>

	<div class="surface">
		<div class="surface-head"><span class="surface-title">scheduler</span></div>
		<div id="scheduler-frag" class="surface-body flush" hx-get="fragments/scheduler" hx-trigger="load, every 5s" hx-swap="innerHTML">
			<p class="placeholder">loading…</p>
		</div>
	</div>
</div>

<div class="surface">
	<div class="surface-head"><span class="surface-title">queues</span></div>
	<div class="surface-body flush" hx-get="fragments/queues" hx-trigger="load, every 3s" hx-swap="innerHTML">
		<p class="placeholder">loading…</p>
	</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0/dist/echarts.min.js"></script>
<script>
	(function () {
		const el = document.getElementById('activity-chart');
		const chart = echarts.init(el, null, { renderer: 'svg' });

		function tokens() {
			const cs = getComputedStyle(document.documentElement);
			return {
				INK: cs.getPropertyValue('--ink').trim(),
				INK2: cs.getPropertyValue('--ink-2').trim(),
				INK3: cs.getPropertyValue('--ink-3').trim(),
				HAIR: cs.getPropertyValue('--hair').trim(),
				PAPER: cs.getPropertyValue('--paper').trim(),
				GOOD: cs.getPropertyValue('--good').trim(),
				BAD: cs.getPropertyValue('--bad').trim(),
				BAD_DARK: cs.getPropertyValue('--bad-dark').trim(),
			};
		}

		function buildBase() {
			const t = tokens();
			return {
				backgroundColor: 'transparent',
				animation: false,
				tooltip: {
					trigger: 'axis',
					backgroundColor: t.PAPER,
					borderColor: t.HAIR,
					borderWidth: 1,
					textStyle: { color: t.INK, fontSize: 11, fontFamily: "'Geist Mono', monospace" },
					axisPointer: { lineStyle: { color: t.HAIR } }
				},
				legend: {
					data: ['enqueued', 'succeeded', 'failed', 'retried', 'dead'],
					right: 0,
					top: 0,
					itemWidth: 12,
					itemHeight: 2,
					textStyle: { fontSize: 10, fontFamily: "'Geist Mono', monospace", color: t.INK3 }
				},
				grid: { left: 32, right: 8, top: 28, bottom: 20, containLabel: false },
				xAxis: {
					type: 'category',
					boundaryGap: false,
					axisLine: { lineStyle: { color: t.HAIR } },
					axisTick: { show: false },
					axisLabel: {
						color: t.INK3, fontSize: 10,
						fontFamily: "'Geist Mono', monospace",
						interval: 11
					},
					splitLine: { show: false }
				},
				yAxis: {
					type: 'value',
					minInterval: 1,
					axisLine: { show: false },
					axisTick: { show: false },
					axisLabel: { color: t.INK3, fontSize: 10, fontFamily: "'Geist Mono', monospace" },
					splitLine: { lineStyle: { color: t.HAIR } }
				},
				series: [
					{ name: 'enqueued', type: 'line', smooth: false, showSymbol: false, lineStyle: { color: t.INK, width: 1.5 }, itemStyle: { color: t.INK } },
					{ name: 'succeeded', type: 'line', smooth: false, showSymbol: false, lineStyle: { color: t.GOOD, width: 1.5 }, itemStyle: { color: t.GOOD } },
					{ name: 'failed', type: 'line', smooth: false, showSymbol: false, lineStyle: { color: t.BAD, width: 1.5 }, itemStyle: { color: t.BAD } },
					{ name: 'retried', type: 'line', smooth: false, showSymbol: false, lineStyle: { color: t.INK3, width: 1.5 }, itemStyle: { color: t.INK3 } },
					{ name: 'dead', type: 'line', smooth: false, showSymbol: false, lineStyle: { color: t.BAD_DARK, width: 1.5 }, itemStyle: { color: t.BAD_DARK } },
				]
			};
		}

		chart.setOption(buildBase());

		async function refresh() {
			try {
				const r = await fetch('api/activity');
				const d = await r.json();
				chart.setOption({
					xAxis: { data: d.times.map(t => new Date(t * 1000).toLocaleTimeString()) },
					series: [
						{ name: 'enqueued', data: d.enqueued },
						{ name: 'succeeded', data: d.succeeded },
						{ name: 'failed', data: d.failed },
						{ name: 'retried', data: d.retried },
						{ name: 'dead', data: d.dead },
					]
				});
			} catch (_) { }
		}

		refresh();
		setInterval(refresh, 3000);
		window.addEventListener('resize', () => chart.resize());

		window.addEventListener('kuu-theme-change', () => {
			chart.setOption(buildBase(), true);
			refresh();
		});
	}());
</script>

{% endblock %}