<script lang="ts" setup>
import type { SanitisedTicket as Ticket } from "@stealth-developers/api";

import { computed, onMounted, ref } from "vue";
import { useRoute } from "vue-router";

import TimeAgo from "@/components/TimeAgo.vue";
import UserChip from "@/components/UserChip.vue";
import { client } from "@/stores/api";

const route = useRoute();
const guildId = computed(() => route.params.guildId as string);

const tickets = ref<Ticket[]>([]);
const cursor = computed(() => tickets.value.length);
const hasMore = ref(false);

onMounted(async () => {
	const res = await client.api
		.guilds({ guildId: guildId.value })
		.tickets.get({ query: { limit: 50, offset: cursor.value } });

	tickets.value = res.data?.tickets ?? [];
	hasMore.value = res.data?.tickets?.length === 50;
});
</script>

<template>
	<div>
		<h1>Tickets</h1>
		<div class="ticket-container">
			<div v-for="ticket in tickets" :key="ticket.id" class="ticket">
				<div class="ticket-header">
					<span class="ticket-header__id">#{{ ticket.localId }}</span>
					<span class="ticket-header__status">{{ ticket.status }}</span>
					<span class="ticket-header__time"><TimeAgo :time="ticket.openedAt"></TimeAgo></span>
				</div>
				<div class="ticket-body details">
					<div class="keypair">
						<span class="key">Opened by</span>
						<span class="value">
							<UserChip :user="ticket.subjects.subject" />
						</span>
					</div>

					<div class="keypair">
						<span class="key">Closed by</span>
						<span class="value">
							<UserChip v-if="ticket.subjects.closedBy" :user="ticket.subjects.closedBy" />
							<span v-else>/</span>
						</span>
					</div>
				</div>
				<div class="ticket-footer">
					<RouterLink class="link" :to="`./tickets/${ticket.localId}`">View Ticket</RouterLink>
				</div>
			</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: hsla(var(--crust) / 1);
	border-radius: 0.5rem;
	overflow: hidden;

	.ticket-header,
	.ticket-body,
	.ticket-footer {
		padding: 0.5rem 0.5rem;
	}

	.ticket-header {
		display: flex;
		align-items: center;
		gap: 1ch;
		line-height: 1;
		background-color: hsla(var(--base) / 1);

		.ticket-header__id {
			font-weight: bold;
		}

		.ticket-header__status {
			font-weight: bold;
			color: hsl(var(--subtext0));
		}

		.ticket-header__time {
			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;
		}
	}
}

.ticket-footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 1ch;
	line-height: 1;

	.link {
		color: hsl(var(--subtext1));
		font-weight: bold;
		background-color: hsla(var(--surface0) / 0.75);
		padding: 0.5rem;
		border-radius: 0.5rem;
		text-decoration: none;

		&:hover {
			background-color: hsla(var(--surface1) / 0.6);
		}
		&:active {
			background-color: hsla(var(--surface0) / 1);
		}
	}
}
</style>