<template>
  <section v-if="img" class="fc-meta" aria-label="Image details">
    <!-- #4a: dimensions / size / type sit as a compact top block alongside a
         small save action (operator-asked 2026-06-26) — meta on the left, the
         download control shrunk to a floppy-disk icon on the right. -->
    <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: floppy-disk save icon = download; the kebab menu keeps 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. -->
    <div class="fc-meta__actions">
      <v-btn
        icon="mdi-content-save" size="small" variant="tonal" color="accent"
        aria-label="Download image" title="Download" @click="download"
      />
      <v-menu location="bottom end">
        <template #activator="{ props }">
          <v-btn
            v-bind="props" icon="mdi-dots-vertical" size="small" variant="text"
            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-content-save" title="Download" @click="download" />
        </v-list>
      </v-menu>
    </div>
  </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'

// `image` lets a non-modal surface (the Explore workspace) render the same
// meta + download block for its anchor. Defaults to the modal store's current
// image so the image modal is unchanged.
const props = defineProps({ image: { type: Object, default: null } })
const modal = useModalStore()
const img = computed(() => props.image ?? 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; align-items: flex-start; gap: 12px;
}
.fc-meta__grid {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0;
}
.fc-meta__actions {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 2px;
}
.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>
