<script setup lang="ts">
import type {
	SanitisedActor,
	SanitisedTicket,
	SanitisedTicketAttachment,
	SanitisedTicketComment,
	SanitisedTicketMessage,
} from "@stealth-developers/api";

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

import TicketAttachments from "@/components/Tickets/TicketAttachments.vue";
import TicketComments from "@/components/Tickets/TicketComments.vue";
import TicketMessages from "@/components/Tickets/TicketMessages.vue";
import TicketMeta from "@/components/Tickets/TicketMeta.vue";
import TicketReasons from "@/components/Tickets/TicketReasons.vue";
import { client } from "@/stores/api";

const route = useRoute();

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

const ticket = ref<SanitisedTicket | null>(null);
const messages = ref<SanitisedTicketMessage[]>([]);
const attachments = ref<SanitisedTicketAttachment[]>([]);
const comments = ref<SanitisedTicketComment[]>([]);

const highlightUploadButton = ref(false);

async function loadTicket() {
	if (!guildId.value || !ticketId.value) return;

	try {
		const [ticketRes, messagesRes, attachmentsRes, commentsRes] = await Promise.all([
			client.api.guilds({ guildId: guildId.value }).tickets({ ticketId: ticketId.value }).get(),
			client.api
				.guilds({ guildId: guildId.value })
				.tickets({ ticketId: ticketId.value })
				.messages.get(),
			client.api
				.guilds({ guildId: guildId.value })
				.tickets({ ticketId: ticketId.value })
				.attachments.get(),
			client.api
				.guilds({ guildId: guildId.value })
				.tickets({ ticketId: ticketId.value })
				.comments.get(),
		]);

		if (ticketRes.status === 200 && ticketRes.data) ticket.value = ticketRes.data;
		if (messagesRes.status === 200 && messagesRes.data) messages.value = messagesRes.data;
		if (attachmentsRes.status === 200 && attachmentsRes.data)
			attachments.value = attachmentsRes.data;
		if (commentsRes.status === 200 && commentsRes.data) comments.value = commentsRes.data;
	} catch (err) {
		console.error("Failed to load separate ticket data components:", err);
	}
}

watch(
	[guildId, ticketId],
	async ([newGuildId, newTicketId]) => {
		if (newGuildId && newTicketId) {
			if (route.hash) {
				highlightUploadButton.value = true;
			}
			await loadTicket();
		}
	},
	{ immediate: true },
);

const actorMap = computed(() => {
	const map: Record<string, SanitisedActor> = {};

	if (ticket.value?.subjects) {
		const subjects = ticket.value.subjects;
		if (subjects.subject) map[subjects.subject.discordId || ""] = subjects.subject;
		if (subjects.opener) map[subjects.opener.discordId || ""] = subjects.opener;
		if (subjects.closedBy) map[subjects.closedBy.discordId || ""] = subjects.closedBy;
		if (subjects.claimedBy) map[subjects.claimedBy.discordId || ""] = subjects.claimedBy;

		for (const p of subjects.participants || []) {
			if (p.discordId) map[p.discordId] = p;
		}
	}

	for (const msg of messages.value) {
		const author = msg.actors?.author;
		if (author && author.discordId) {
			map[author.discordId] = author;
		}
	}

	for (const comment of comments.value) {
		const author = comment.actors?.author;
		if (author && author.discordId) {
			map[author.discordId] = author;
		}
	}

	return map;
});
</script>

<template>
	<div class="ticket-detail-view" v-if="ticket">
		<div class="ticket-head">
			<div class="ticket-heading">
				<h1>Ticket #{{ ticket.localId }}</h1>
				<span :class="['status', ticket.status]">{{ ticket.status }}</span>
			</div>

			<TicketMeta :ticket="ticket" />
			<TicketReasons :ticket="ticket" />
			<TicketAttachments :attachments="attachments" />
		</div>

		<TicketComments :comments="comments" />

		<TicketMessages :messages="messages" :attachments="attachments" :actorMap="actorMap" />
	</div>

	<div class="loading-state" v-else>
		<p>Loading ticket details...</p>
	</div>
</template>

<style scoped>
.ticket-detail-view {
	display: flex;
	flex-direction: column;
}

.loading-state {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 200px;
	color: hsl(var(--subtext0));
	font-weight: 600;
}

.ticket-head {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-bottom: 0.5rem;

	.ticket-heading {
		display: flex;
		align-items: center;
		gap: 1rem;

		.status {
			font-size: 0.85rem;
			font-weight: 700;
			padding: 0.25rem 0.75rem;
			border-radius: 5rem;
			text-transform: uppercase;
			background-color: hsla(var(--surface1));
			color: hsl(var(--subtext1));

			&.open {
				background-color: hsla(var(--green) / 0.2);
				color: hsl(var(--green));
			}
			&.archived,
			&.closed {
				background-color: hsla(var(--red) / 0.2);
				color: hsl(var(--red));
			}
		}
	}
}
</style>