<template>
  <div class="min-h-screen bg-background">
    <header class="border-b">
      <div class="container mx-auto px-4 py-4">
        <NuxtLink to="/" class="text-xl font-bold">Neo Platform</NuxtLink>
      </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="record">
        <div class="mb-6">
          <NuxtLink
            :to="`/app/${appSlug}/${pageSlug}`"
            class="text-sm text-primary hover:underline"
          >
            ← Back to List
          </NuxtLink>
        </div>

        <h1 class="text-3xl font-bold mb-6">{{ record.name || 'Record Detail' }}</h1>

        <div class="space-y-4">
          <div v-for="(value, key) in record" :key="key" class="border-b pb-2">
            <div class="text-sm text-muted-foreground">{{ key }}</div>
            <div class="font-medium">{{ value }}</div>
          </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 recordId = computed(() => route.params.recordId as string)

const record = ref(null)
const loading = ref(true)
const error = ref(null)
const objectApiName = ref('')

const fetchRecord = async () => {
  try {
    loading.value = true
    
    // First get page metadata to know which object this is
    const page = await api.get(`/runtime/apps/${appSlug.value}/pages/${pageSlug.value}`)
    objectApiName.value = page.objectApiName
    
    // Then fetch the record
    record.value = await api.get(`/runtime/objects/${objectApiName.value}/records/${recordId.value}`)
  } catch (e: any) {
    error.value = e.message
  } finally {
    loading.value = false
  }
}

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