<template>
  <q-card flat bordered class="q-pa-md">
    <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 8px">
      <div style="display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0">
        <q-icon :name="mimeIcon" size="28px" :color="mimeColor" style="flex-shrink: 0" />
        <div style="min-width: 0">
          <div class="text-body2 text-weight-medium ellipsis" style="max-width: 260px">
            {{ fileName }}
          </div>
          <div class="text-caption text-grey-6 q-mt-xs">
            {{ createdAt }} &mdash; {{ userName }}
          </div>
        </div>
      </div>
      <div style="display: flex; gap: 4px; flex-shrink: 0">
        <q-btn
          v-if="isPreviewable"
          flat
          dense
          round
          icon="mdi-eye-outline"
          size="sm"
          color="grey-7"
          tag="a"
          :href="fileUrl"
          target="_blank"
        />
        <q-btn
          flat
          dense
          round
          icon="mdi-download-outline"
          size="sm"
          color="primary"
          tag="a"
          :href="fileUrl"
          target="_blank"
        />
        <q-btn
          v-if="canDelete"
          flat
          dense
          round
          icon="mdi-trash-can-outline"
          size="sm"
          color="negative"
          @click="$emit('delete')"
        />
      </div>
    </div>
  </q-card>
</template>

<script setup>
import { computed } from "vue";

defineEmits(["delete"]);

const props = defineProps({
  canDelete: { type: Boolean, default: false },
  fileName:  { type: String, required: true },
  fileUrl:   { type: String, required: true },
  mimeType:  { type: String, default: null },
  createdAt: { type: String, required: true },
  userName:  { type: String, default: "" },
});

const isPreviewable = computed(() => {
  const t = props.mimeType ?? "";
  return t.startsWith("image/") || t === "application/pdf";
});

const mimeIcon = computed(() => {
  const t = props.mimeType ?? "";
  if (t.startsWith("image/"))       return "mdi-file-image-outline";
  if (t === "application/pdf")      return "mdi-file-pdf-box";
  if (t.includes("word"))           return "mdi-file-word-outline";
  if (t.includes("spreadsheet") || t.includes("excel")) return "mdi-file-excel-outline";
  if (t.startsWith("video/"))       return "mdi-file-video-outline";
  if (t.startsWith("audio/"))       return "mdi-file-music-outline";
  return "mdi-file-outline";
});

const mimeColor = computed(() => {
  const t = props.mimeType ?? "";
  if (t.startsWith("image/"))  return "teal";
  if (t === "application/pdf") return "red";
  if (t.includes("word"))      return "blue";
  if (t.includes("spreadsheet") || t.includes("excel")) return "green";
  if (t.startsWith("video/"))  return "purple";
  return "grey-7";
});
</script>
