<template>
  <div class="view">
    <div class="view-label">Image Pipeline</div>
    <div class="view-header">
      <h1>Shopify Files readiness</h1>
      <p class="subtitle">Matrixify imports only work after every referenced image/icon exists in Shopify Files. This view separates missing filename assignments from filenames that exist locally but still need upload confirmation.</p>
    </div>

    <div v-if="loading" class="loading">Loading...</div>
    <template v-else>
      <div class="summary">
        <div><strong>{{ status?.availableCount || 0 }}</strong><span>local asset files</span></div>
        <div><strong>{{ status?.requiredCount || 0 }}</strong><span>referenced filenames</span></div>
        <div :class="status?.missingUploadCount ? 'bad' : 'ok'"><strong>{{ status?.missingUploadCount || 0 }}</strong><span>missing uploads/files</span></div>
        <div :class="status?.missingReferenceCount ? 'bad' : 'ok'"><strong>{{ status?.missingReferenceCount || 0 }}</strong><span>missing filename refs</span></div>
      </div>

      <div class="asset-root">Asset root: <code>{{ status?.assetRoot }}</code></div>

      <div class="section-title">Product image assignment queue</div>
      <div class="table-wrap">
        <table class="data-table">
          <thead><tr><th>SKU</th><th>Results</th><th>Mobile</th><th>Compare</th><th>Photo brief</th><th>Status</th></tr></thead>
          <tbody>
            <tr v-for="p in productRows" :key="p.sku">
              <td class="sku">{{ p.sku }}</td>
              <td><AssetCell :filename="p.metafields?.pdpResults" :status="lookup(p.metafields?.pdpResults)" /></td>
              <td><AssetCell :filename="p.metafields?.pdpResultsMobile" :status="lookup(p.metafields?.pdpResultsMobile)" /></td>
              <td><AssetCell :filename="p.metafields?.pdpHowWeCompare" :status="lookup(p.metafields?.pdpHowWeCompare)" /></td>
              <td class="brief">{{ p.sources?.photoBrief || 'pending intelligence' }}</td>
              <td><span class="badge" :class="statusClass(p.approval?.images)">{{ p.approval?.images }}</span></td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="section-title with-top">Metaobject icon/image validation</div>
      <div class="table-wrap small-table">
        <table class="data-table">
          <thead><tr><th>Owner</th><th>Field</th><th>Filename</th><th>Exists locally</th></tr></thead>
          <tbody>
            <tr v-for="item in metaRows" :key="item.owner + item.field">
              <td>{{ item.owner }}</td><td>{{ item.field }}</td><td class="filename">{{ item.filename }}</td><td><span class="badge" :class="item.exists ? 'ok' : 'bad'">{{ item.exists ? 'yes' : 'no' }}</span></td>
            </tr>
            <tr v-if="!metaRows.length"><td colspan="4" class="empty-row">No metaobject assets referenced yet.</td></tr>
          </tbody>
        </table>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
const products = ref([])
const status = ref(null)
const loading = ref(false)
const productRows = computed(() => products.value.filter(p => p.status !== 'pending_intelligence' || p.approval?.images === 'needed'))
const requiredByName = computed(() => new Map((status.value?.required || []).map(item => [item.filename, item])))
const metaRows = computed(() => (status.value?.required || []).filter(item => item.kind === 'metaobject'))
function lookup(filename) { return filename ? requiredByName.value.get(filename) : null }
function statusClass(value) { return value === 'ready' ? 'ok' : 'bad' }
onMounted(async () => {
  loading.value = true
  try {
    const [pRes, aRes] = await Promise.all([fetch('/api/content/products'), fetch('/api/assets/status')])
    products.value = pRes.ok ? await pRes.json() : []
    status.value = aRes.ok ? await aRes.json() : null
  } finally { loading.value = false }
})
</script>
<script>
export default {
  components: {
    AssetCell: {
      props: ['filename', 'status'],
      template: `<span v-if="filename" class="asset-cell"><code>{{ filename }}</code><small :class="status?.exists ? 'ok' : 'bad'">{{ status?.exists ? 'exists locally' : 'missing file/upload' }}</small></span><span v-else class="missing">missing filename</span>`
    }
  }
}
</script>
<style scoped src="../views/view.css" />
<style scoped>
.summary { display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:12px; margin-bottom:16px; }
.summary>div { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; }
.summary strong { display:block; font-size:24px; }
.summary span { font-size:12px; color:var(--text-muted); }
.summary .ok strong { color:var(--positive); }
.summary .bad strong { color:var(--negative); }
.asset-root { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:12px 16px; margin-bottom:18px; font-size:12px; color:var(--text-secondary); }
.asset-root code { color:var(--accent); }
.section-title { font-size:18px; font-weight:600; margin:0 0 10px; }
.with-top { margin-top:22px; }
.sku { font-family:monospace; font-size:12px; }
.brief { font-size:12px; color:var(--text-secondary); }
.badge { padding:2px 8px; border-radius:999px; font-size:11px; background:#f3f4f6; color:#555; }
.badge.ok { background:var(--positive-bg); color:var(--positive); }
.badge.bad { background:var(--negative-bg); color:var(--negative); }
.filename { font-family:monospace; font-size:12px; }
.missing { color:var(--negative); font-size:12px; }
.asset-cell { display:flex; flex-direction:column; gap:3px; }
.asset-cell code { font-size:11px; white-space:pre-wrap; }
.asset-cell small { font-size:10px; font-weight:700; text-transform:uppercase; }
.asset-cell small.ok { color:var(--positive); }
.asset-cell small.bad { color:var(--negative); }
.empty-row { text-align:center; color:var(--text-muted); padding:24px!important; }
.small-table { max-height:420px; overflow:auto; }
@media (max-width:900px){ .summary{grid-template-columns:1fr 1fr;} }
</style>
