<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>
          <div class="flex gap-4">
            <NuxtLink
              to="/setup/apps"
              class="text-sm text-muted-foreground hover:text-foreground"
            >
              Apps
            </NuxtLink>
            <NuxtLink
              to="/setup/objects"
              class="text-sm text-muted-foreground hover:text-foreground"
            >
              Objects
            </NuxtLink>
          </div>
        </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>
        <div class="flex items-center justify-between mb-6">
          <h1 class="text-3xl font-bold">Applications</h1>
          <button
            @click="showCreateForm = true"
            class="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
          >
            New App
          </button>
        </div>

        <div v-if="showCreateForm" class="mb-6 p-6 border rounded-lg bg-card">
          <h2 class="text-xl font-semibold mb-4">Create New App</h2>
          <form @submit.prevent="createApp" class="space-y-4">
            <div>
              <label class="block text-sm font-medium mb-2">Slug</label>
              <input
                v-model="newApp.slug"
                type="text"
                required
                class="w-full px-3 py-2 border rounded-md bg-background"
                placeholder="my-app"
              />
            </div>
            <div>
              <label class="block text-sm font-medium mb-2">Label</label>
              <input
                v-model="newApp.label"
                type="text"
                required
                class="w-full px-3 py-2 border rounded-md bg-background"
                placeholder="My App"
              />
            </div>
            <div>
              <label class="block text-sm font-medium mb-2">Description</label>
              <textarea
                v-model="newApp.description"
                class="w-full px-3 py-2 border rounded-md bg-background"
                rows="3"
              />
            </div>
            <div class="flex gap-2">
              <button
                type="submit"
                class="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
              >
                Create
              </button>
              <button
                type="button"
                @click="showCreateForm = false"
                class="px-4 py-2 bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/90"
              >
                Cancel
              </button>
            </div>
          </form>
        </div>

        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          <NuxtLink
            v-for="app in apps"
            :key="app.id"
            :to="`/setup/apps/${app.slug}`"
            class="p-6 border rounded-lg hover:border-primary transition-colors bg-card"
          >
            <h3 class="text-xl font-semibold mb-2">{{ app.label }}</h3>
            <p class="text-sm text-muted-foreground mb-4">{{ app.description || 'No description' }}</p>
            <div class="text-sm">
              <span class="text-muted-foreground">{{ app.pages?.length || 0 }} pages</span>
            </div>
          </NuxtLink>
        </div>
      </div>
    </main>
  </div>
</template>

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

const apps = ref([])
const loading = ref(true)
const error = ref(null)
const showCreateForm = ref(false)
const newApp = ref({
  slug: '',
  label: '',
  description: '',
})

const fetchApps = async () => {
  try {
    loading.value = true
    apps.value = await api.get('/setup/apps')
  } catch (e: any) {
    error.value = e.message
  } finally {
    loading.value = false
  }
}

const createApp = async () => {
  try {
    await api.post('/setup/apps', newApp.value)
    showCreateForm.value = false
    newApp.value = { slug: '', label: '', description: '' }
    await fetchApps()
  } catch (e: any) {
    alert('Error creating app: ' + e.message)
  }
}

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