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

import AttachmentCard from "./AttachmentComponent.vue";

defineProps<{
	attachments: SanitisedTicketAttachment[];
}>();
</script>

<template>
	<div class="ticket-attachments">
		<div class="attachments-header">
			<span class="label">Attachments</span>
		</div>

		<div class="attachments-grid" v-if="attachments.length > 0">
			<AttachmentCard v-for="att in attachments" :key="att.id" :attachment="att" />
		</div>
		<div v-else class="no-attachments">No attachments uploaded yet.</div>
	</div>
</template>

<style scoped>
.ticket-attachments {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1rem;
	background-color: hsl(var(--crust));
	border-radius: 1.5rem;

	.attachments-header {
		font-weight: 700;
		font-size: 1.1rem;
		color: hsl(var(--text));
	}

	.no-attachments {
		color: hsl(var(--subtext0));
		font-style: italic;
		font-size: 0.9rem;
	}

	.ticket-attachments-upload {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 1rem;

		.upload-btn {
			display: inline-block;
			padding: 0.5rem 1.2rem;
			background-color: hsla(var(--surface0) / 0.8);
			color: hsl(var(--accent));
			border-radius: 5rem;
			cursor: pointer;
			font-weight: 600;
			user-select: none;

			&:hover {
				background-color: hsla(var(--accent) / 1);
				color: hsl(var(--on-accent));
			}

			&.highlighted {
				position: relative;
				overflow: hidden;
				border: 2px solid hsl(var(--accent));

				&::after {
					content: "";
					position: absolute;
					top: -50%;
					left: -60%;
					width: 20%;
					height: 200%;
					background: white;
					opacity: 0.3;
					transform: rotate(30deg);
					animation: shimmer 2s infinite;
					filter: blur(4px);
				}
			}

			.hidden-input {
				display: none;
			}
		}

		.upload-status {
			font-size: 0.85rem;
			min-width: 140px;
			font-variant-numeric: tabular-nums;
			opacity: 0;

			&.visible {
				opacity: 1;
			}

			.uploading {
				color: hsl(var(--accent));
				font-weight: 600;
			}
			.error {
				color: hsl(var(--red));
				font-weight: 600;
			}
		}

		.progress-bar-container {
			width: 180px;
			height: 6px;
			background-color: hsla(var(--surface1));
			border-radius: 5rem;
			overflow: hidden;
			opacity: 0;

			&.visible {
				opacity: 1;
			}

			.progress-bar {
				height: 100%;
				background-color: hsl(var(--accent));
				transition: width 0.1s ease;
			}
		}
	}
}

.attachments-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

@keyframes shimmer {
	0% {
		left: -60%;
	}
	100% {
		left: 150%;
	}
}
</style>