<template>
  <div class="min-h-screen bg-background">
    <NuxtLayout name="default">
      <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="object">
          <div class="mb-6">
            <NuxtLink to="/setup/objects" class="text-sm text-primary hover:underline">
              ← Back to Objects
            </NuxtLink>
          </div>

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

          <div class="mb-8">
            <h2 class="text-2xl font-semibold mb-4">Fields</h2>
            <div class="space-y-2">
              <div
                v-for="field in object.fields"
                :key="field.id"
                class="p-4 border rounded-lg bg-card"
              >
                <div class="flex items-center justify-between">
                  <div>
                    <h3 class="font-semibold">{{ field.label }}</h3>
                    <p class="text-sm text-muted-foreground">
                      Type: {{ field.type }} | API Name: {{ field.apiName }}
                    </p>
                  </div>
                  <div class="flex gap-2 text-xs">
                    <span
                      v-if="field.isRequired"
                      class="px-2 py-1 bg-destructive/10 text-destructive rounded"
                    >
                      Required
                    </span>
                    <span
                      v-if="field.isUnique"
                      class="px-2 py-1 bg-primary/10 text-primary rounded"
                    >
                      Unique
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </NuxtLayout>
  </div>
</template>

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

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

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

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