<template>
	<div v-if="attachments.length" class="attachment-preview">
		<div v-for="item in attachments" :key="item.id" class="attachment-preview__item">
			<img v-if="item.type === 'image' && item.previewUrl" :src="item.previewUrl" class="attachment-preview__thumb" />
			<div v-else class="attachment-preview__icon">
				<el-icon :size="24"><Document /></el-icon>
			</div>
			<div class="attachment-preview__info">
				<span class="attachment-preview__name">{{ item.name }}</span>
				<span class="attachment-preview__size">{{ formatSize(item.size) }}</span>
			</div>
			<el-progress
				v-if="item.progress !== undefined && item.progress < 100"
				:percentage="item.progress"
				:show-text="false"
				:stroke-width="3"
				class="attachment-preview__progress"
			/>
			<button class="attachment-preview__remove" @click="emit('remove', item.id)">
				<el-icon :size="14"><Close /></el-icon>
			</button>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { Close, Document } from '@element-plus/icons-vue';

export interface AttachmentItem {
	id: string;
	type: 'image' | 'video' | 'pdf' | 'document' | 'other';
	name: string;
	size: number;
	mimeType: string;
	url?: string;
	previewUrl?: string;
	progress?: number;
	role?: 'start_frame' | 'end_frame';
}

defineProps<{ attachments: AttachmentItem[] }>();
const emit = defineEmits<{ remove: [id: string] }>();

function formatSize(bytes: number) {
	if (bytes < 1024) return bytes + ' B';
	if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
	return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
}
</script>
<style scoped>
.attachment-preview {
	display: flex;
	gap: 8px;
	padding: 8px 12px;
	overflow-x: auto;
	border-bottom: 1px solid var(--el-border-color-lighter);
}
.attachment-preview__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border: 1px solid var(--el-border-color-light);
	border-radius: 8px;
	background: var(--el-fill-color-blank);
	min-width: 0;
	flex-shrink: 0;
}
.attachment-preview__thumb {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 4px;
}
.attachment-preview__icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--el-fill-color-light);
	border-radius: 4px;
}
.attachment-preview__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.attachment-preview__name {
	font-size: 12px;
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.attachment-preview__size {
	font-size: 11px;
	color: var(--el-text-color-secondary);
}
.attachment-preview__progress {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
.attachment-preview__remove {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid var(--el-border-color-light);
	background: var(--el-bg-color);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
}
</style>
