<script setup lang="ts">
// List all available objects
const { api } = useApi()
const router = useRouter()

const objects = ref<any[]>([])
const loading = ref(true)

onMounted(async () => {
  try {
    const response = await api.get('/setup/objects')
    objects.value = response.data || response || []
  } catch (e) {
    console.error('Failed to load objects:', e)
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <NuxtLayout name="default">
    <div class="container mx-auto p-8">
      <h1 class="text-3xl font-bold mb-6">Objects</h1>
      
      <div v-if="loading" class="text-center py-12">
        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
      </div>
      
      <div v-else class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        <NuxtLink
          v-for="obj in objects"
          :key="obj.id"
          :to="`/app/objects/${obj.apiName}/`"
          class="block p-6 border rounded-lg hover:bg-accent transition-colors"
        >
          <h3 class="text-xl font-semibold mb-2">{{ obj.label }}</h3>
          <p v-if="obj.description" class="text-sm text-muted-foreground">{{ obj.description }}</p>
        </NuxtLink>
      </div>
    </div>
  </NuxtLayout>
</template>
