<!-- Renders a message's attachments: image previews inline, everything else as a download link -->
<template>
  <div class="attachments">
    <template v-for="a in attachments" :key="a.id">
      <a
        v-if="isImage(a)"
        class="att-image"
        :href="urlFor(a.id)"
        target="_blank"
        rel="noopener noreferrer"
      >
        <img :src="urlFor(a.id)" :alt="a.filename" loading="lazy" />
      </a>
      <a
        v-else
        class="att-file"
        :href="urlFor(a.id)"
        target="_blank"
        rel="noopener noreferrer"
        :download="a.filename"
      >
        <span class="att-icon">{{ isExe(a) ? '⚠️' : '📎' }}</span>
        <span class="att-name">{{ a.filename }}</span>
        <span class="att-size">{{ kb(a.size) }}</span>
        <span v-if="isExe(a)" class="att-warn">exécutable</span>
      </a>
    </template>
  </div>
</template>

<script setup lang="ts">
import type { Attachment } from '@/composables/useMessages';
import { useAttachments } from '@/composables/useAttachments';

defineProps<{ attachments: Attachment[] }>();

const { kb, urlFor } = useAttachments();

function isImage(a: Attachment): boolean {
  return a.mimeType.startsWith('image/');
}
function isExe(a: Attachment): boolean {
  return /\.(exe|bat|cmd|msi|sh|app)$/i.test(a.filename) || a.mimeType === 'application/x-msdownload';
}
</script>

<style scoped>
.attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 25px 0;
}
.att-image img {
  max-width: 220px;
  max-height: 160px;
  border-radius: 8px;
  border: 1px solid #222234;
  display: block;
}
.att-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #141420;
  border: 1px solid #222234;
  border-radius: 10px;
  padding: 7px 12px;
  text-decoration: none;
  font-family: Arial, sans-serif;
}
.att-file:hover { background: #1c1c2e; }
.att-icon { font-size: 14px; }
.att-name { font-size: 12px; color: #aaccdd; }
.att-size { font-size: 10px; color: #555577; }
.att-warn {
  font-size: 8px; font-weight: bold; color: #ff5544;
  background: #2a0a08; border: 1px solid #662211; border-radius: 4px; padding: 1px 5px;
}
</style>
