<template>
  <div class="view">
    <div class="view-label">Metaobject Library</div>
    <div class="view-header">
      <h1>Metaobject production</h1>
      <p class="subtitle">Six Matrixify metaobject definitions from the Lewis/Euan template. Draft seed rows are separated from clinical claims, which remain empty until source-backed evidence exists.</p>
    </div>
    <div v-if="loading" class="loading">Loading...</div>
    <div v-else-if="!metaobjects" class="empty">No metaobject library found.</div>
    <template v-else>
      <div class="tabs">
        <button v-for="name in definitionNames" :key="name" class="tab" :class="{ active: active === name }" @click="active = name">{{ name }} <span>{{ rows(name).length }}</span></button>
      </div>
      <div class="table-wrap">
        <table class="data-table">
          <thead><tr><th>Handle</th><th>Name / Heading</th><th>Description / Source</th><th>Status</th><th>Asset</th></tr></thead>
          <tbody>
            <tr v-for="row in rows(active)" :key="row.handle || row.name">
              <td class="sku-cell">{{ row.handle }}</td>
              <td>{{ row.name || row.heading || row.name_internal }}</td>
              <td><div>{{ row.description || row.source || row.subtitle }}</div><small>{{ row.source }}</small></td>
              <td><span class="status" :class="row.status">{{ row.status || 'draft' }}</span></td>
              <td>{{ row.icon || row.image || row.background_image || '—' }}</td>
            </tr>
            <tr v-if="!rows(active).length"><td colspan="5" class="empty-row">No rows yet. This definition is blocked until source content exists.</td></tr>
          </tbody>
        </table>
      </div>
    </template>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
const metaobjects = ref(null)
const loading = ref(false)
const active = ref('dietary_tag')
const definitionNames = computed(() => Object.keys(metaobjects.value?.definitions || {}))
function rows(name) { return metaobjects.value?.definitions?.[name] || [] }
onMounted(async () => { loading.value = true; try { const res = await fetch('/api/content/metaobjects'); metaobjects.value = res.ok ? await res.json() : null; active.value = definitionNames.value[0] || 'dietary_tag' } finally { loading.value = false } })
</script>
<style scoped src="../views/view.css" />
<style scoped>
.tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.tab { border:1px solid var(--border); background:#fff; border-radius:999px; padding:7px 12px; font-size:12px; cursor:pointer; }
.tab.active { background:var(--text-primary); color:#fff; border-color:var(--text-primary); }
.tab span { opacity:.65; margin-left:4px; }
.sku-cell { font-family:monospace; font-size:12px; color:var(--text-secondary); }
.status { padding:2px 8px; border-radius:999px; font-size:11px; background:#f3f4f6; color:#555; }
.status.needs_review { background:#fff7ed; color:#c2410c; }
.empty-row { text-align:center; color:var(--text-muted); padding:28px!important; }
small { display:block; color:var(--text-muted); margin-top:3px; }
</style>
