<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { LeaderboardStat, OverallStatsResponse } from '@/types'
import UserChip from '@/components/UserChip.vue'
import { useStateStore } from '@/stores/state'

const stateStore = useStateStore()

type StatsOverall = OverallStatsResponse

type LeaderboardRow = LeaderboardStat

const overallStats = ref<StatsOverall | null>(null)
const leaderboard = ref<LeaderboardRow[]>([])
const daysFilter = ref<number | ''>('')

const fetchStats = async () => {
	const params = daysFilter.value ? `?days=${daysFilter.value}` : ''
	const [overallRes, leaderboardRes] = await Promise.all([
		fetch(`/api/stats/overall${params}`),
		fetch(`/api/stats/leaderboard${params}`),
	])

	if (overallRes.ok) overallStats.value = await overallRes.json()
	if (leaderboardRes.ok) leaderboard.value = await leaderboardRes.json()
}

onMounted(fetchStats)

const formatMs = (ms: number) => {
	const secs = Math.floor(ms / 1000)
	if (secs < 60) return `${secs}s`
	const mins = Math.floor(secs / 60)
	if (mins < 60) return `${mins}m ${secs % 60}s`
	const hours = Math.floor(mins / 60)
	if (hours < 24) return `${hours}h ${mins % 60}m`
	const days = Math.floor(hours / 24)
	return `${days}d ${hours % 24}h`
}
</script>

<template>
	<div class="stats-header">
		<h1>Stats</h1>
		<div class="filter">
			<label class="sr-only" for="daysFilter">Timeframe</label>
			<select id="daysFilter" v-model="daysFilter" @change="fetchStats">
				<option value="">All time</option>
				<option value="1">Past 24 hours</option>
				<option value="7">Past 7 days</option>
				<option value="30">Past 30 days</option>
				<option value="90">Past 90 days</option>
			</select>
		</div>
	</div>

	<div v-if="!stateStore.isAuthenticated" class="login-prompt">
		<p>Log in to view your tickets.</p>
		<a href="/api/login" class="login-button">Login</a>
	</div>

	<div v-if="overallStats" class="overall-stats">
		<div class="stat-card">
			<h3>Total Closed</h3>
			<p>{{ overallStats.global.count }}</p>
		</div>
		<div class="stat-card">
			<h3>Mean TTC</h3>
			<p>{{ formatMs(overallStats.global.mean) }}</p>
		</div>
		<div class="stat-card">
			<h3>Median TTC</h3>
			<p>{{ formatMs(overallStats.global.median) }}</p>
		</div>
	</div>

	<div class="stats-layout">
		<section v-if="overallStats && overallStats.hourly.length" class="hourly-stats">
			<h2>Hourly Stats</h2>
			<div class="table-container">
				<table>
					<thead>
						<tr>
							<th>Hour</th>
							<th>Closed</th>
							<th>Mean TTC</th>
							<th>Median TTC</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="row in overallStats.hourly" :key="row.hour">
							<td>{{ row.hour.toString().padStart(2, '0') }}:00</td>
							<td>{{ row.count }}</td>
							<td>{{ formatMs(row.mean) }}</td>
							<td>{{ formatMs(row.median) }}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</section>

		<section v-if="leaderboard.length" class="leaderboard">
			<h2>Moderator Leaderboard</h2>
			<div class="table-container">
				<table>
					<thead>
						<tr>
							<th>User</th>
							<th>Closed</th>
							<th>Median TTC</th>
							<th>Mean TTC</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="row in leaderboard" :key="row.user.id">
							<td class="user-cell">
								<div class="user-content">
									<UserChip :user="row.user" />
								</div>
							</td>
							<td>{{ row.count }}</td>
							<td>{{ formatMs(row.median) }}</td>
							<td>{{ formatMs(row.mean) }}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</section>
	</div>
</template>

<style scoped>
.stats-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;

	.filter {
		display: flex;
		gap: 0.75rem;
		align-items: center;

		label {
			font-weight: bold;
			color: hsl(var(--subtext0));
		}

		select {
			padding: 0.5rem 2.5rem 0.5rem 1rem;
			border-radius: 5rem;
			border: 2px solid hsl(var(--surface0));
			background-color: hsl(var(--base));
			color: hsl(var(--text));
			font-size: 1rem;
			font-family: inherit;
			cursor: pointer;
			appearance: none;
			position: relative;


			background-repeat: no-repeat;
			background-position: right 0.75rem top 50%;
			background-size: 0.65rem auto;

			&:active {
				scale: 0.975;
			}
		}
	}
}

.overall-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-bottom: 2rem;
}

.stat-card {
	background-color: hsl(var(--base));
	padding: 1.5rem;
	border-radius: 1rem;
	text-align: center;

	h3 {
		color: hsl(var(--subtext0));
		margin: 0 0 0.5rem 0;
		font-size: 1.1rem;
	}

	p {
		color: hsl(var(--text));
		font-size: 1.5rem;
		font-weight: bold;
		margin: 0;
	}
}

.stats-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;

	> section {
		min-width: 0;
	}

	@media (max-width: 1024px) {
		grid-template-columns: 1fr;
	}
}

.table-container {
	background-color: hsl(var(--base));
	border-radius: 1rem;
	overflow-x: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	white-space: nowrap;

	th,
	td {
		text-align: left;
		padding: 1rem;
		border-bottom: 1px solid hsl(var(--surface0));
	}

	th {
		color: hsl(var(--subtext0));
		font-weight: bold;
	}

	td {
		color: hsl(var(--text));
	}

	tr:last-child td {
		border-bottom: none;
	}
}

.user-cell {
	width: 100%;
}

.user-content {
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

h1,
h2 {
	color: hsl(var(--text));
}
</style>