<script setup lang="ts">
import { onMounted, ref, shallowRef } from 'vue'

import type { Ticket } from '@/types'
import { formatTimeAgo } from '@/utils'
import UserChip from '@/components/UserChip.vue'

const isLoading = ref(false)
const tickets = shallowRef<Ticket[]>([])
const cursor = ref<string | null>(null)
const sentinel = ref<HTMLDivElement | null>(null)

onMounted(() => {
	fetchTickets()

	const observer = new IntersectionObserver((entries) => {
		if (entries[0]?.isIntersecting && !isLoading.value) fetchTickets()
	}, { threshold: 0.5 })

  if (sentinel.value) observer.observe(sentinel.value)
})

async function fetchTickets() {
	if (isLoading.value) return
	isLoading.value = true

	const url = new URL('/api/tickets', window.location.origin)
	if (cursor.value) url.searchParams.set('cursor', cursor.value)
	url.searchParams.set('limit', '50')

	const response = await fetch(url.toString())
	const data = await response.json()

	// TODO global var for dev
	const isDev = window.location.protocol === 'http:'
	if (isDev) await new Promise(resolve => setTimeout(resolve, 1500))

	tickets.value = [...tickets.value, ...data.tickets]
	cursor.value = data.cursor
	isLoading.value = false
}
</script>

<template>
	<h1>Tickets</h1>

	<div class="ticket-container">
		<div v-for="ticket in tickets" :key="ticket.number" class="ticket">
			<div class="head">
				<span class="id">{{ ticket.number }}</span>
				<span :class="['status', ticket.status]">{{ ticket.status }}</span>
				<div class="time-ago">
					<template v-if="ticket.status === 'open'">
						 for {{ formatTimeAgo(ticket.openedAt) }}
					</template>
					<template v-else> {{ formatTimeAgo(ticket.closedAt) }} ago </template>
				</div>
			</div>

			<div class="details">
				<div class="keypair">
					<span class="key">Opened by</span>
					<span class="value">
						<UserChip :user="ticket.openedBy ?? ticket.subject" />
					</span>
				</div>

				<div class="keypair">
					<span class="key">Closed by</span>
					<span class="value">
						<UserChip
							v-if="ticket.closedBy"
							:user="ticket.closedBy"
						/>
						<span v-else>/</span>
					</span>
				</div>
			</div>

			<div class="footer">
				<RouterLink :to="`/tickets/${ticket.number}`">View Ticket</RouterLink>
			</div>
		</div>

		<template v-if="isLoading">
			<div v-for="i in 10" :key="i" class="ticket skeleton-container">
				<div class="head">
					<div class="skeleton skeleton-id">f</div>
					<div class="skeleton skeleton-status">f</div>
					<div class="skeleton skeleton-time">f</div>
				</div>

				<div class="details">
					<div class="keypair">
						<span class="key">Opened by</span>
						<div class="skeleton skeleton-chip"></div>
					</div>
					<div class="keypair">
						<span class="key">Closed by</span>
						<div class="skeleton skeleton-chip"></div>
					</div>
				</div>

				<div class="footer">
					<div class="skeleton skeleton-button">View Ticket</div>
				</div>
			</div>
		</template>
	</div>

	<div class="sentinel" ref="sentinel"></div>
</template>

<style scoped>
.ticket-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 0.5rem;
}

.ticket {
	display: flex;
	flex-direction: column;
	background-color: hsl(var(--base));
	border-radius: 1rem;
	overflow: hidden;

	.head {
		display: flex;
		align-items: center;
		gap: 1ch;
		padding: 0.5rem;
		background-color: hsla(var(--surface0) / 0.75);
		line-height: 1;

		.id {
			font-weight: bold;
			color: hsl(var(--subtext1));

			&::before {
				content: '#';
			}
		}

		.status,
		.time-ago {
			font-weight: bold;
			color: hsl(var(--subtext0));

			&.open {
				color: hsl(var(--green));
			}
			&.archived {
				color: hsl(var(--subtext0));
			}
		}
	}

	.details {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);

		align-items: center;
		row-gap: 0.5ch;
		column-gap: 1ch;
		padding: 0.5rem;

		.keypair {
			display: contents;

			.key {
				font-weight: bolder;
				color: hsl(var(--subtext0));
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.value {
				color: hsl(var(--subtext1));
				font-weight: bold;
				overflow: hidden;
			}
		}
	}

	.footer {
		display: flex;
		justify-content: flex-end;
		gap: 1ch;
		padding: 0 0.5rem 0.5rem 0.5rem;

		a {
			background-color: hsla(var(--accent) / 0.75);
			color: hsl(var(--on-accent));
			padding: 0.5rem 1rem;
			border-radius: 0.5rem;
			text-decoration: none;
			line-height: 1;

			&:hover {
				filter: brightness(1.1);
			}
			&:active {
				filter: brightness(0.9);
			}
		}
	}
}

.skeleton {
	background-color: hsla(var(--surface0) / 0.5);
	background-image: linear-gradient(
		90deg,
		transparent,
		hsla(var(--surface1) / 0.5),
		transparent
	);
	background-size: 200% 100%;
	animation: shimmer 2s infinite linear;
	border-radius: 10rem;
}

.skeleton-id { width: 4ch; }
.skeleton-status { width: 9ch; }
.skeleton-time { width: 10ch; }

.skeleton-container {
	pointer-events: none;
	user-select: none;

	.head {
		* {
			color: transparent !important;
		}
	}

	.skeleton-chip {
		width: 120px;
		height: 24px;
		border-radius: 5rem;
	}

	.skeleton-button {
		line-height: 1;
		border-radius: 0.5rem;
		padding: 0.5rem 1rem;
		color: transparent;
	}

	details .keypair {
		height: 1.5rem;
	}
}

@keyframes shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
</style>