// nuxt.config.ts
export default defineNuxtConfig({
  extends: [
    '@fyit/crouton',
    '@fyit/crouton-editor'  // Required for rich text blocks
  ]
})

// app.config.ts
export default defineAppConfig({
  croutonApps: {
    bookings: {
      id: 'bookings',
      name: 'Bookings',
      pageTypes: [
        {
          id: 'calendar',
          name: 'Booking Calendar',
          component: 'CroutonBookingsCalendar',
          icon: 'i-lucide-calendar',
          category: 'customer',
          description: 'Interactive calendar for bookings'
        }
      ]
    }
  }
})

const {
  pageTypes,           // All aggregated page types (apps + publishable collections)
  getPageType          // Get by fullId (e.g., 'bookings:calendar')
} = usePageTypes()

<template>
  <CroutonPagesBlockContent
    v-model="content"
    placeholder="Type / to insert a block..."
  />
</template>

interface PageBlockContent {
  type: 'doc'
  content: PageBlock[]
}

interface PageBlock {
  type: 'heroBlock' | 'sectionBlock' | 'ctaBlock' | 'cardGridBlock' | 'separatorBlock' | 'richTextBlock' | 'faqBlock' | 'twoColumnBlock' | 'imageBlock' | 'videoBlock' | 'fileBlock' | 'embedBlock' | 'buttonRowBlock' | 'statsBlock' | 'galleryBlock' | 'logoBlock' | 'collectionBlock' | 'addonBlock'
  attrs: Record<string, any>
}

interface PageRecord {
  id: string
  teamId: string
  title: string
  slug: string
  pageType: string        // 'core:regular' or 'appId:pageTypeId'
  content?: string        // For regular pages (JSON blocks or HTML)
  config?: object         // For app pages (type-specific settings)
  status: 'draft' | 'published' | 'archived'
  visibility: 'public' | 'members' | 'hidden'
  showInNavigation: boolean
  parentId?: string       // For hierarchy
  order: number           // For sorting
  path?: string           // Materialized path
  depth?: number          // Nesting level
}

Custom Domain Request: booking.acme.com/about
    │
    ▼
Domain resolver middleware
    │ looks up 'booking.acme.com' in domain table
    │ finds: organizationId → org with slug 'acme'
    ▼
URL Rewrite: /about → /acme/about
    │
    ▼
Normal routing: [team]/[...slug].vue

const {
  isCustomDomain,    // Whether request is from custom domain
  resolvedDomain,    // The custom domain hostname
  resolvedTeamId,    // Team ID from domain lookup
  hideTeamInUrl,     // true on custom domains
  hostname,          // Current hostname
  isAppDomain        // Whether hostname is known app domain
} = useDomainContext()

runtimeConfig: {
  public: {
    croutonPages: {
      // Domains to skip (not custom domains)
      appDomains: ['myapp.com', 'staging.myapp.com'],
      debug: false
    }
  }
}

const {
  navigation,        // Hierarchical navigation tree
  flatNavigation,    // Flat list of all nav items
  isLoading,         // Loading state
  currentPage,       // Current active page
  isActive,          // Check if nav item is active
  refresh,           // Refresh navigation data
  team               // Current team slug
} = useNavigation()

<template>
  <CroutonCollection
    collection="pagesPages"
    layout="tree"
    :columns="['title', 'slug', 'pageType', 'status']"
  />
</template>

<template>
  <CroutonPagesRenderer :page="pageData" />
</template>