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

const tickets = ref<Ticket[]>([])
onMounted(async () => {
	const response = await fetch('/api/tickets')
	const data = await response.json()
	tickets.value = data.tickets
})

const formatTimeAgo = (dateString: string | null) => {
	if (!dateString) return ''
	const now = new Date()
	const ticketDate = new Date(dateString)
	const diff = now.getTime() - ticketDate.getTime()
	const seconds = Math.floor(diff / 1000)
	const minutes = Math.floor(seconds / 60)
	const hours = Math.floor(minutes / 60)
	const days = Math.floor(hours / 24)
	if (days > 0) return `${days}d`
	if (hours > 0) return `${hours}h`
	if (minutes > 0) return `${minutes}m`
	return `${seconds}s`
}
</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>
	</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);

		.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.3rem 1rem;
			border-radius: 0.5rem;
			text-decoration: none;

			&:hover {
				filter: brightness(1.1);
			}
			&:active {
				filter: brightness(0.9);
			}
		}
	}
}
</style>