<template>
  <div class="view image-gen-view">
    <div class="view-label">Direct ImageGen Carousel</div>
    <div class="view-header">
      <h1>Current image vs generated PDP carousel <span class="count-badge">{{ generatedCount }}</span></h1>
      <p class="subtitle">Shows the live Just Vitamins product image from the migration database beside the six direct ImageGen outputs using the locked article prompt format.</p>
    </div>

    <div v-if="loading" class="loading">Loading generated image set...</div>
    <div v-else-if="!set" class="empty">No generated image set available for this SKU.</div>
    <template v-else>
      <section class="source-panel">
        <div class="source-copy">
          <span class="eyebrow">Source image from database</span>
          <h2>{{ set.source?.title || set.sku }}</h2>
          <p>Original image URL: <a :href="set.source?.liveImageUrl" target="_blank" rel="noopener">{{ set.source?.liveImageUrl }}</a></p>
          <p class="muted">Prompt mode: {{ human(set.lockedPrompt?.mode) }}</p>
        </div>
        <div class="original-card">
          <img :src="set.source?.localOriginalUrl || set.source?.liveImageUrl" :alt="`${set.sku} original product`" />
          <span>Current / original product image</span>
        </div>
      </section>

      <section class="prompt-lock">
        <div>
          <span class="eyebrow">Locked prompt rule</span>
          <strong>Use the article's six image formats and generate the product directly inside the image.</strong>
          <p>{{ set.lockedPrompt?.note }}</p>
        </div>
        <code>{{ set.lockedPrompt?.path }}</code>
      </section>

      <section class="carousel-grid">
        <article v-for="image in set.generated" :key="image.key" class="image-card" :class="{ missing: image.missing }">
          <div class="image-wrap">
            <img v-if="image.url" :src="image.url" :alt="image.label" />
            <div v-else class="missing-box">Missing</div>
          </div>
          <div class="image-meta">
            <span>{{ image.key }}</span>
            <h3>{{ image.label }}</h3>
            <small v-if="image.bytes">{{ formatBytes(image.bytes) }}</small>
          </div>
        </article>
      </section>
    </template>
  </div>
</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const set = ref(null)
const loading = ref(false)
const generatedCount = computed(() => (set.value?.generated || []).filter(row => row.url).length)

function human(value) {
  return String(value || '').replace(/_/g, ' ').replace(/^./, c => c.toUpperCase())
}
function formatBytes(bytes) {
  const n = Number(bytes || 0)
  if (n > 1024 * 1024) return `${(n / 1024 / 1024).toFixed(1)} MB`
  if (n > 1024) return `${(n / 1024).toFixed(1)} KB`
  return `${n} B`
}
async function load(sku) {
  if (!sku) return
  loading.value = true
  try {
    const res = await fetch(`/api/product-image-generation/${sku}`)
    set.value = res.ok ? await res.json() : null
  } finally {
    loading.value = false
  }
}
onMounted(() => load(route.params.sku))
watch(() => route.params.sku, load)
</script>

<style scoped src="../views/view.css" />
<style scoped>
.image-gen-view { max-width: 1440px; }
.source-panel { display:grid; grid-template-columns: minmax(0,1fr) 360px; gap:18px; background:#111827; color:#f8fafc; border-radius:22px; padding:22px; margin-bottom:16px; }
.source-copy h2 { font-size:26px; margin:6px 0 10px; }
.source-copy p { font-size:13px; color:#d1d5db; line-height:1.5; margin:0 0 7px; word-break:break-word; }
.source-copy a { color:#bfdbfe; font-weight:700; }
.eyebrow { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#93c5fd; font-weight:800; }
.muted { color:#aab3c2!important; }
.original-card { background:#fff; color:var(--text-primary); border-radius:18px; padding:14px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.original-card img { width:100%; max-height:340px; object-fit:contain; border-radius:12px; background:#fff; }
.original-card span { font-size:12px; font-weight:800; color:var(--text-secondary); }
.prompt-lock { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; background:var(--bg-card); border:1px solid var(--border); border-radius:18px; padding:16px; margin-bottom:16px; }
.prompt-lock strong { display:block; margin:5px 0; font-size:15px; }
.prompt-lock p { margin:0; color:var(--text-secondary); font-size:13px; line-height:1.45; }
.prompt-lock code { max-width:420px; font-size:11px; color:var(--accent); word-break:break-all; background:var(--neutral-bg); border-radius:10px; padding:10px; }
.carousel-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap:14px; }
.image-card { background:var(--bg-card); border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:0 10px 30px rgba(15,23,42,.04); }
.image-wrap { aspect-ratio:1/1; background:#f8fafc; display:flex; align-items:center; justify-content:center; }
.image-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.missing-box { color:var(--negative); font-weight:800; }
.image-meta { padding:13px 14px 15px; }
.image-meta span { font-size:10px; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.image-meta h3 { font-size:15px; margin:4px 0 5px; }
.image-meta small { color:var(--text-muted); font-size:12px; }
@media(max-width:900px){ .source-panel,.prompt-lock{grid-template-columns:1fr; display:grid;} .prompt-lock code{max-width:none;} }
</style>
