<template>
  <div class="min-h-screen bg-background">
    <header class="border-b">
      <div class="container mx-auto px-4 py-4">
        <div class="flex items-center justify-between">
          <NuxtLink to="/" class="text-xl font-bold">Neo Platform</NuxtLink>
          <nav class="flex gap-4">
            <NuxtLink
              v-for="page in pages"
              :key="page.id"
              :to="`/app/${appSlug}/${page.slug}`"
              class="text-sm hover:text-primary"
            >
              {{ page.label }}
            </NuxtLink>
          </nav>
        </div>
      </div>
    </header>
    <main class="container mx-auto px-4 py-8">
      <div v-if="loading" class="text-center py-12">Loading...</div>
      <div v-else-if="error" class="text-destructive">Error: {{ error }}</div>
      <div v-else-if="page">
        <h1 class="text-3xl font-bold mb-6">{{ page.label }}</h1>
        <p class="text-muted-foreground mb-4">Page Type: {{ page.type }}</p>

        <div v-if="page.objectApiName">
          <h2 class="text-xl font-semibold mb-4">{{ page.object?.label }} Records</h2>

          <div v-if="loadingRecords" class="text-center py-8">Loading records...</div>
          <div v-else-if="records.length === 0" class="text-center py-8 text-muted-foreground">
            No records found
          </div>
          <div v-else class="space-y-2">
            <NuxtLink
              v-for="record in records"
              :key="record.id"
              :to="`/app/${appSlug}/${pageSlug}/${record.id}`"
              class="block p-4 border rounded-lg hover:border-primary transition-colors bg-card"
            >
              <div class="font-medium">{{ record.name || record.id }}</div>
            </NuxtLink>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
const route = useRoute()
const { api } = useApi()

const appSlug = computed(() => route.params.appSlug as string)
const pageSlug = computed(() => route.params.pageSlug as string)

const pages = ref<any[]>([])
const page = ref<any>(null)
const records = ref<any[]>([])
const loading = ref(true)
const loadingRecords = ref(false)
const error = ref<string | null>(null)

const fetchPage = async () => {
  try {
    loading.value = true
    page.value = await api.get(`/runtime/apps/${appSlug.value}/pages/${pageSlug.value}`)

    const app = await api.get(`/runtime/apps/${appSlug.value}`)
    pages.value = app.pages

    if (page.value.objectApiName) {
      loadingRecords.value = true
      const response = await api.get(
        `/runtime/objects/${page.value.objectApiName}/records`
      )
      records.value = Array.isArray(response)
        ? response
        : response?.data || response?.records || []
    }
  } catch (e: any) {
    error.value = e.message
  } finally {
    loading.value = false
    loadingRecords.value = false
  }
}

onMounted(() => {
  fetchPage()
})
</script>
