<template>
	<div class="stats">
		<div class="content-inner">
			<h1 class="heading">Stats</h1>

			<dl class="stat-table">
				<div class="stat-row">
					<dt class="stat-label">Version</dt>
					<dd class="stat-value">{{ version }}</dd>
				</div>
			</dl>

			<template v-if="loaded">
				<dl class="stat-table">
					<div class="stat-row">
						<dt class="stat-label">Content updated</dt>
						<dd
							class="stat-value"
							:title="format(lastScrape, 'yyyy-MM-dd HH:mm')"
						>{{ formatDistance(lastScrape, new Date(), { includeSeconds: true }) }} ago</dd>
					</div>
				</dl>

				<dl class="stat-table">
					<div class="stat-row">
						<dt class="stat-label">Networks</dt>
						<dd class="stat-value">{{ totalNetworks.toLocaleString() }}</dd>
					</div>

					<div class="stat-row">
						<dt class="stat-label">Channels</dt>
						<dd class="stat-value">{{ totalChannels.toLocaleString() }}</dd>
					</div>

					<div class="stat-row">
						<dt class="stat-label">Scenes</dt>
						<dd class="stat-value">{{ totalScenes.toLocaleString() }}</dd>
					</div>

					<div class="stat-row">
						<dt class="stat-label">Movies</dt>
						<dd class="stat-value">{{ totalMovies.toLocaleString() }}</dd>
					</div>

					<div class="stat-row">
						<dt class="stat-label">Actors</dt>
						<dd class="stat-value">{{ totalActors.toLocaleString() }}</dd>
					</div>
				</dl>
			</template>

			<Ellipsis v-else />
		</div>

		<Footer />
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useStore } from 'vuex';
import { format, formatDistance } from 'date-fns';

import Ellipsis from '../loading/ellipsis.vue';

const store = useStore();
const version = VERSION; // eslint-disable-line no-undef

const loaded = ref(false);
const totalScenes = ref(0);
const totalMovies = ref(0);
const totalActors = ref(0);
const totalNetworks = ref(0);
const totalChannels = ref(0);
const lastScrape = ref(null);

onMounted(async () => {
	const stats = await store.dispatch('fetchStats');

	totalScenes.value = stats.totalScenes;
	totalMovies.value = stats.totalMovies;
	totalActors.value = stats.totalActors;
	totalNetworks.value = stats.totalNetworks;
	totalChannels.value = stats.totalChannels;
	lastScrape.value = stats.lastScrape;

	loaded.value = true;
});
</script>

<style lang="scss" scoped>
.stats {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.content-inner {
	padding: 1rem;
}

.stat-table {
	margin: 0 0 1rem 0;
}

.stat-row {
	width: 20rem;
	max-width: 100%;
	display: flex;
	padding: .5rem 0;
	justify-content: space-between;

	&:not(:last-child) {
		border-bottom: solid 1px var(--shadow-hint);
	}
}

.stat-label {
	display: inline-block;
	font-weight: bold;
	color: var(--shadow-strong);
}

.stat-value {
	display: inline-block;
}
</style>
