<template>
  <div class="admin-site-content">
    <div class="page-header">
      <h1>Site Content</h1>
      <p>Editable copy rendered on the public site. Leave fields blank to use defaults.</p>
    </div>

    <div v-if="pending" class="loading-state">Loading…</div>
    <div v-else class="content-blocks">
      <section v-for="entry in entries" :key="entry.key" class="content-block">
        <div class="block-header">
          <div>
            <div class="block-key">{{ entry.key }}</div>
            <div class="block-label">{{ KEY_LABELS[entry.key] || entry.key }}</div>
          </div>
          <div v-if="entry.updatedAt" class="block-meta">
            Updated {{ formatTime(entry.updatedAt) }}
          </div>
        </div>

        <div class="field">
          <label>Title</label>
          <input v-model="entry.title" type="text" maxlength="300" >
        </div>

        <div class="field">
          <label>Body</label>
          <textarea v-model="entry.body" rows="8" maxlength="5000" />
          <p class="help-text">Paragraphs separated by blank lines. Plain text only.</p>
        </div>

        <div class="block-actions">
          <button
            class="btn btn-primary"
            :disabled="entry.saving"
            @click="save(entry)"
          >
            {{ entry.saving ? 'Saving…' : 'Save' }}
          </button>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
definePageMeta({
  layout: 'admin',
  middleware: 'admin',
})

const toast = useToast()

const KEY_LABELS = {
  'homepage.wiki_feature': 'Homepage: From the Wiki',
}

const { data: keysData } = await useFetch('/api/site-content/keys')
const knownKeys = computed(() => keysData.value?.keys || [])

const entries = ref([])
const pending = ref(true)

const load = async () => {
  pending.value = true
  const results = await Promise.all(
    knownKeys.value.map((key) => $fetch(`/api/site-content/${key}`))
  )
  entries.value = results.map((r) => ({
    key: r.key,
    title: r.title || '',
    body: r.body || '',
    updatedAt: r.updatedAt || null,
    saving: false,
  }))
  pending.value = false
}

await load()

const save = async (entry) => {
  entry.saving = true
  try {
    const updated = await $fetch(`/api/admin/site-content/${entry.key}`, {
      method: 'PUT',
      body: { title: entry.title, body: entry.body },
    })
    entry.updatedAt = updated.updatedAt
    toast.add({ title: 'Saved', color: 'green' })
  } catch (err) {
    toast.add({
      title: 'Save failed',
      description: err.data?.statusMessage || err.message,
      color: 'red',
    })
  } finally {
    entry.saving = false
  }
}

const formatTime = (iso) => {
  if (!iso) return ''
  const d = new Date(iso)
  return d.toLocaleString('en-US', {
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
  })
}
</script>

<style scoped>
.admin-site-content {
  padding: 24px;
  max-width: 780px;
}

.page-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--border);
}

.page-header h1 {
  font-family: 'Brygada 1918', serif;
  font-size: 28px;
  margin-bottom: 4px;
}

.page-header p {
  color: var(--text-dim);
  font-size: 13px;
}

.loading-state {
  color: var(--text-faint);
  font-size: 13px;
  padding: 24px 0;
}

.content-blocks {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.content-block {
  border: 1px dashed var(--border);
  padding: 20px;
  background: var(--bg);
}

.block-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.block-key {
  font-family: 'Commit Mono', monospace;
  font-size: 11px;
  color: var(--text-faint);
  margin-bottom: 2px;
}

.block-label {
  font-size: 14px;
  color: var(--text-bright);
}

.block-meta {
  font-size: 11px;
  color: var(--text-faint);
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.field input,
.field textarea {
  width: 100%;
  padding: 8px 10px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
}

.field textarea {
  resize: vertical;
  font-family: 'Commit Mono', monospace;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--candle);
}

.help-text {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
}

.block-actions {
  display: flex;
  justify-content: flex-end;
}
</style>
