<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="app">
        <div class="mb-6">
          <NuxtLink to="/setup/apps" class="text-sm text-primary hover:underline">
            ← Back to Apps
          </NuxtLink>
        </div>

        <h1 class="text-3xl font-bold mb-6">{{ app.label }}</h1>

        <div class="mb-8">
          <h2 class="text-2xl font-semibold mb-4">Pages</h2>
          <div class="space-y-2">
            <div
              v-for="page in app.pages"
              :key="page.id"
              class="p-4 border rounded-lg bg-card"
            >
              <div class="flex items-center justify-between">
                <div>
                  <h3 class="font-semibold">{{ page.label }}</h3>
                  <p class="text-sm text-muted-foreground">
                    Type: {{ page.type }} | Slug: {{ page.slug }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

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

const app = ref<any>(null)
const loading = ref(true)
const error = ref<string | null>(null)

const fetchApp = async () => {
  try {
    loading.value = true
    const slug = route.params.slug as string
    app.value = await api.get(`/setup/apps/${slug}`)
  } catch (e: any) {
    error.value = e.message
  } finally {
    loading.value = false
  }
}

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