<template>
  <section v-if="img" class="fc-meta" aria-label="Image details">
    <!-- #4a: dimensions / size / type — already on the payload, shown nowhere
         until now. -->
    <dl class="fc-meta__grid">
      <div v-if="img.width && img.height" class="fc-meta__item">
        <dt>Dimensions</dt><dd>{{ img.width }} × {{ img.height }}</dd>
      </div>
      <div v-if="img.size_bytes" class="fc-meta__item">
        <dt>Size</dt><dd>{{ humanSize(img.size_bytes) }}</dd>
      </div>
      <div v-if="img.mime" class="fc-meta__item">
        <dt>Type</dt><dd>{{ shortType(img.mime) }}</dd>
      </div>
    </dl>

    <!-- #4b: split Download — default Download, chevron → Copy link. Image-to-
         clipboard is OFF the table on the plain-HTTP origin (rule 95), so the
         secondary action copies the link TEXT, which works everywhere. -->
    <v-btn-group divided density="comfortable" variant="tonal" color="accent" rounded="pill">
      <v-btn prepend-icon="mdi-download" @click="download">Download</v-btn>
      <v-menu location="bottom end">
        <template #activator="{ props }">
          <v-btn v-bind="props" icon="mdi-chevron-down" aria-label="More download options" />
        </template>
        <v-list density="compact">
          <v-list-item prepend-icon="mdi-link-variant" title="Copy link" @click="copyLink" />
          <v-list-item prepend-icon="mdi-download" title="Download" @click="download" />
        </v-list>
      </v-menu>
    </v-btn-group>
  </section>
</template>

<script setup>
import { computed } from 'vue'
import { useModalStore } from '../../stores/modal.js'
import { copyText } from '../../utils/clipboard.js'
import { toast } from '../../utils/toast.js'

const modal = useModalStore()
const img = computed(() => modal.current)

function humanSize (bytes) {
  const units = ['B', 'KB', 'MB', 'GB']
  let n = bytes
  let i = 0
  while (n >= 1024 && i < units.length - 1) { n /= 1024; i++ }
  return `${n < 10 && i > 0 ? n.toFixed(1) : Math.round(n)} ${units[i]}`
}
function shortType (mime) { return mime.split('/')[1]?.toUpperCase() || mime }

function absoluteUrl () {
  const origin = typeof window !== 'undefined' ? window.location.origin : ''
  return origin + img.value.image_url
}

function download () {
  // Same-origin /images/* link — the download attribute lets the browser save
  // the original (filename derived from the path) instead of navigating to it.
  const a = document.createElement('a')
  a.href = img.value.image_url
  a.setAttribute('download', '')
  document.body.appendChild(a)
  a.click()
  a.remove()
}

async function copyLink () {
  try {
    await copyText(absoluteUrl())
    toast({ text: 'Link copied to clipboard', type: 'success' })
  } catch {
    toast({ text: 'Could not copy the link', type: 'error' })
  }
}
</script>

<style scoped>
.fc-meta {
  padding: 14px 16px 0;
  display: flex; flex-direction: column; gap: 10px;
}
.fc-meta__grid {
  display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0;
}
.fc-meta__item { display: flex; flex-direction: column; }
.fc-meta__item dt {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgb(var(--v-theme-on-surface-variant));
}
.fc-meta__item dd {
  margin: 0; font-size: 13px; font-variant-numeric: tabular-nums;
  color: rgb(var(--v-theme-on-surface));
}
</style>
