portfolio/pages/admin.vue

<template>
  <div class="min-h-screen bg-gray-100">
    <div v-if="!authenticated" class="flex items-center justify-center min-h-screen">
      <FormKit type="form" @submit="checkPassword" submit-label="Login">
        <FormKit
          type="password"
          name="password"
          label="Password"
          validation="required"
        />
      </FormKit>
    </div>

    <div v-else class="flex min-h-screen">
      <div class="w-64 bg-white border-r p-4">
        <h2 class="text-xl font-bold mb-4">Admin</h2>
        <nav class="space-y-2">
          <button
            v-for="col in collections"
            :key="col.key"
            @click="selectedCollection = col.key"
            class="w-full text-left px-4 py-2 rounded"
            :class="selectedCollection === col.key ? 'bg-black text-white' : 'hover:bg-gray-100'"
          >
            {{ col.label }}
          </button>
        </nav>
        <button @click="logout" class="mt-8 w-full px-4 py-2 text-sm text-gray-600 hover:text-gray-800">
          Logout
        </button>
      </div>

      <div class="flex-1 p-8 overflow-auto">
        <div class="flex justify-between items-center mb-6">
          <h1 class="text-2xl font-bold">{{ collections.find(c => c.key === selectedCollection)?.label }}</h1>
          <button @click="createNew" class="px-4 py-2 bg-black text-white rounded hover:bg-gray-800">
            Add New
          </button>
        </div>

        <div class="bg-white rounded-lg shadow overflow-hidden mb-8">
          <table class="w-full">
            <thead class="bg-gray-50">
              <tr>
                <th class="px-4 py-2 text-left text-sm font-medium text-gray-500">Title</th>
                <th class="px-4 py-2 text-left text-sm font-medium text-gray-500">Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in items" :key="item.id" class="border-t hover:bg-gray-50">
                <td class="px-4 py-3">{{ getTitle(item) }}</td>
                <td class="px-4 py-3 space-x-2">
                  <button @click="viewRawJson(item)" class="text-green-600 hover:text-green-800">JSON</button>
                  <button @click="deleteItem(item)" class="text-red-600 hover:text-red-800">Delete</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div v-if="rawJsonItem" class="fixed inset-0 z-50 bg-black bg-opacity-50 flex items-center justify-center p-4">
          <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl h-[80vh] flex flex-col p-6">
            <h2 class="text-xl font-bold mb-4">Raw JSON</h2>
            <textarea 
              v-model="rawJsonContent" 
              class="flex-1 w-full font-mono text-sm border rounded p-4 resize-none"
              spellcheck="false"
            ></textarea>
            <div class="flex justify-end gap-2 mt-4">
              <button @click="rawJsonItem = null" class="px-4 py-2 border rounded hover:bg-gray-50">Cancel</button>
              <button @click="saveRawJson" class="px-4 py-2 bg-black text-white rounded hover:bg-gray-800">Save</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { collections } from '@/admin/schemas'

const password = ref('')
const authenticated = ref(false)
const selectedCollection = ref('works')
const items = ref([])
const rawJsonItem = ref(null)
const rawJsonContent = ref('')

function checkPassword(data) {
  if (data.password === 'admin123') {
    authenticated.value = true
    loadItems()
  } else {
    alert('Incorrect password')
  }
}

function logout() {
  authenticated.value = false
  password.value = ''
}

function getTitle(item) {
  return item.title || item.citationKey || item.name || item.id
}

async function loadItems() {
  const { data } = await useFetch(`/api/admin/${selectedCollection.value}`)
  items.value = data.value || []
}

function createNew() {
  rawJsonItem.value = { id: null }
  rawJsonContent.value = '{\n  \n}'
}

function viewRawJson(item) {
  rawJsonItem.value = item
  rawJsonContent.value = JSON.stringify(item, null, 2)
}

async function saveRawJson() {
  try {
    const parsed = JSON.parse(rawJsonContent.value)
    const method = parsed.id ? 'PUT' : 'POST'
    await useFetch(`/api/admin/${selectedCollection.value}`, {
      method,
      body: parsed
    })
    rawJsonItem.value = null
    loadItems()
  } catch (e) {
    alert('Invalid JSON')
  }
}

async function deleteItem(item) {
  if (confirm('Are you sure you want to delete this item?')) {
    await useFetch(`/api/admin/${selectedCollection.value}/${item.id}`, {
      method: 'DELETE'
    })
    loadItems()
  }
}

watch(selectedCollection, () => {
  loadItems()
})
</script>