<script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useApi } from '@/composables/useApi'
import { useFields, useViewState } from '@/composables/useFieldViews'
import ListView from '@/components/views/ListView.vue'
import DetailView from '@/components/views/DetailViewEnhanced.vue'
import EditView from '@/components/views/EditViewEnhanced.vue'

const route = useRoute()
const router = useRouter()
const { api } = useApi()
const { buildListViewConfig, buildDetailViewConfig, buildEditViewConfig } = useFields()

// Use breadcrumbs composable
const { setBreadcrumbs } = useBreadcrumbs()

// Get object API name from route (case-insensitive)
const objectApiName = computed(() => {
  const name = route.params.objectName as string
  // We'll look up the actual case-sensitive name from the backend
  return name
})
const recordId = computed(() => route.params.recordId as string)
const view = computed(() => {
  // If recordId is 'new', default to 'edit' view
  if (route.params.recordId === 'new' && !route.params.view) {
    return 'edit'
  }
  return (route.params.view as 'list' | 'detail' | 'edit') || 'list'
})

// State
const objectDefinition = ref<any>(null)
const loading = ref(true)
const error = ref<string | null>(null)

// Use view state composable
const {
  records,
  totalCount,
  currentRecord,
  loading: dataLoading,
  saving,
  fetchRecords,
  fetchRecord,
  deleteRecord,
  deleteRecords,
  handleSave,
} = useViewState(`/runtime/objects/${objectApiName.value}/records`)

const handleAiRecordCreated = (event: Event) => {
  const detail = (event as CustomEvent).detail || {}
  if (
    detail?.objectApiName &&
    detail.objectApiName.toLowerCase() !== objectApiName.value.toLowerCase()
  ) {
    return
  }
  if (view.value === 'list') {
    initializeListRecords()
  }
}

onMounted(() => {
  window.addEventListener('ai-record-created', handleAiRecordCreated)
})

onBeforeUnmount(() => {
  window.removeEventListener('ai-record-created', handleAiRecordCreated)
})

// Compute breadcrumbs based on the current route and object data
const updateBreadcrumbs = () => {
  if (!objectDefinition.value) {
    return
  }
  
  const crumbs: Array<{ name: string; path?: string; isLast?: boolean }> = []
  
  // Add app breadcrumb if object belongs to an app
  if (objectDefinition.value?.app) {
    crumbs.push({
      name: objectDefinition.value.app.label || objectDefinition.value.app.name,
      path: undefined, // No path for app grouping
    })
  }
  
  // Add object breadcrumb - always use plural
  const objectLabel = objectDefinition.value?.pluralLabel || objectDefinition.value?.label || objectApiName.value
  
  crumbs.push({
    name: objectLabel,
    path: `/${objectApiName.value.toLowerCase()}`,
  })
  
  // Add record name if viewing/editing a specific record
  if (recordId.value && recordId.value !== 'new' && currentRecord.value) {
    const nameField = objectDefinition.value?.nameField
    let recordName = recordId.value // fallback to ID
    
    // Try to get the display name from the nameField
    if (nameField && currentRecord.value[nameField]) {
      recordName = currentRecord.value[nameField]
    }
    
    crumbs.push({
      name: recordName,
      isLast: true,
    })
  } else if (recordId.value === 'new') {
    crumbs.push({
      name: 'New',
      isLast: true,
    })
  }
  
  setBreadcrumbs(crumbs)
}

// Watch for changes that affect breadcrumbs
watch([objectDefinition, currentRecord, recordId], () => {
  updateBreadcrumbs()
}, { deep: true })

// View configs
const listConfig = computed(() => {
  if (!objectDefinition.value) return null
  return buildListViewConfig(objectDefinition.value, {
    searchable: true,
    exportable: true,
    filterable: true,
  })
})

const detailConfig = computed(() => {
  if (!objectDefinition.value) return null
  return buildDetailViewConfig(objectDefinition.value)
})

const editConfig = computed(() => {
  if (!objectDefinition.value) return null
  return buildEditViewConfig(objectDefinition.value)
})

const listPageSize = computed(() => listConfig.value?.pageSize ?? 25)
const maxFrontendRecords = computed(() => listConfig.value?.maxFrontendRecords ?? 500)

// Fetch object definition
const fetchObjectDefinition = async () => {
  try {
    loading.value = true
    error.value = null
    const response = await api.get(`/setup/objects/${objectApiName.value}`)
    objectDefinition.value = response
  } catch (e: any) {
    error.value = e.message || 'Failed to load object definition'
    console.error('Error fetching object definition:', e)
  } finally {
    loading.value = false
  }
}

// Navigation handlers - use lowercase URLs
const handleRowClick = (row: any) => {
  router.push(`/${objectApiName.value.toLowerCase()}/${row.id}/detail`)
}

const handleCreate = () => {
  router.push(`/${objectApiName.value.toLowerCase()}/new`)
}

const handleEdit = (row?: any) => {
  const id = row?.id || recordId.value
  router.push(`/${objectApiName.value.toLowerCase()}/${id}/edit`)
}

const handleBack = () => {
  // Navigate to list view explicitly
  router.push(`/${objectApiName.value.toLowerCase()}/`)
}

const handleNavigate = (relatedObjectApiName: string, relatedRecordId: string) => {
  router.push(`/${relatedObjectApiName.toLowerCase()}/${relatedRecordId}/detail`)
}

const handleCreateRelated = (relatedObjectApiName: string, _parentId: string) => {
  router.push(`/${relatedObjectApiName.toLowerCase()}/new`)
}

const handleDelete = async (rows: any[]) => {
  if (confirm(`Delete ${rows.length} record(s)? This action cannot be undone.`)) {
    try {
      const ids = rows.map(r => r.id)
      await deleteRecords(ids)
      if (view.value !== 'list') {
        await router.push(`/${objectApiName.value.toLowerCase()}/`)
      }
    } catch (e: any) {
      error.value = e.message || 'Failed to delete records'
    }
  }
}

const handleSaveRecord = async (data: any) => {
  try {
    const savedRecord = await handleSave(data)
    if (savedRecord?.id) {
      router.push(`/${objectApiName.value.toLowerCase()}/${savedRecord.id}/detail`)
    } else {
      // Fallback to list if no ID available
      router.push(`/${objectApiName.value.toLowerCase()}/`)
    }
  } catch (e: any) {
    error.value = e.message || 'Failed to save record'
  }
}

const handleCancel = () => {
  if (recordId.value && recordId.value !== 'new') {
    router.push(`/${objectApiName.value.toLowerCase()}/${recordId.value}/detail`)
  } else {
    router.push(`/${objectApiName.value.toLowerCase()}/`)
  }
}

const loadListRecords = async (
  page = 1,
  options?: { append?: boolean; pageSize?: number }
) => {
  const pageSize = options?.pageSize ?? listPageSize.value
  const result = await fetchRecords({ page, pageSize }, { append: options?.append })
  const resolvedTotal = result?.totalCount ?? totalCount.value ?? records.value.length
  totalCount.value = resolvedTotal
  return result
}

const initializeListRecords = async () => {
  const firstResult = await loadListRecords(1)
  const resolvedTotal = firstResult?.totalCount ?? totalCount.value ?? records.value.length
  const shouldPrefetchAll =
    resolvedTotal <= maxFrontendRecords.value && records.value.length < resolvedTotal

  if (shouldPrefetchAll) {
    await loadListRecords(1, { append: false, pageSize: maxFrontendRecords.value })
  }
}

const handlePageChange = async (page: number, pageSize: number) => {
  const loadedPages = Math.ceil(records.value.length / pageSize)
  if (page > loadedPages && totalCount.value > records.value.length) {
    await loadListRecords(page, { append: true, pageSize })
  }
}

const handleLoadMore = async (page: number, pageSize: number) => {
  await loadListRecords(page, { append: true, pageSize })
}

// Watch for route changes
watch(() => route.params, async (newParams, oldParams) => {
  // Reset current record when navigating to 'new'
  if (newParams.recordId === 'new') {
    currentRecord.value = null
  }
  
  // Fetch record if navigating to existing record
  if (newParams.recordId && newParams.recordId !== 'new' && newParams.recordId !== oldParams.recordId) {
    await fetchRecord(newParams.recordId as string)
  }
  
  // Fetch records if navigating back to list
  if (!newParams.recordId && !newParams.view) {
    await initializeListRecords()
  }
}, { deep: true })

// Initialize
onMounted(async () => {
  await fetchObjectDefinition()
  
  if (view.value === 'list') {
    await initializeListRecords()
  } else if (recordId.value && recordId.value !== 'new') {
    await fetchRecord(recordId.value)
  }
  
  // Update breadcrumbs after data is loaded
  updateBreadcrumbs()
})
</script>

<template>
  <NuxtLayout name="default">
    <div class="object-view-container">
      
      <!-- Page Header -->
      <div v-if="!loading && !error && view === 'list'" class="mb-6">
        <h1 class="text-3xl font-bold">{{ objectDefinition?.label || objectApiName }}</h1>
        <p v-if="objectDefinition?.description" class="text-muted-foreground mt-2">
          {{ objectDefinition.description }}
        </p>
      </div>

      <!-- Loading State -->
      <div v-if="loading" class="flex items-center justify-center min-h-screen">
        <div class="text-center space-y-4">
          <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
          <p class="text-muted-foreground">Loading {{ objectApiName }}...</p>
        </div>
      </div>

      <!-- Error State -->
      <div v-else-if="error" class="flex items-center justify-center min-h-screen">
        <div class="text-center space-y-4 max-w-md">
          <div class="text-destructive text-5xl">⚠️</div>
          <h2 class="text-2xl font-bold">Error</h2>
          <p class="text-muted-foreground">{{ error }}</p>
          <Button @click="router.back()">Go Back</Button>
        </div>
      </div>

      <!-- List View -->
      <ListView
        v-else-if="view === 'list' && listConfig"
        :config="listConfig"
        :data="records"
        :loading="dataLoading"
        :total-count="totalCount"
        :base-url="`/runtime/objects`"
        selectable
        @row-click="handleRowClick"
        @create="handleCreate"
        @edit="handleEdit"
        @delete="handleDelete"
        @page-change="handlePageChange"
        @load-more="handleLoadMore"
      />

      <!-- Detail View -->
      <DetailView
        v-else-if="view === 'detail' && detailConfig && currentRecord"
        :config="detailConfig"
        :data="currentRecord"
        :loading="dataLoading"
        :object-id="objectDefinition?.id"
        :base-url="`/runtime/objects`"
        @edit="handleEdit"
        @delete="() => handleDelete([currentRecord])"
        @back="handleBack"
        @navigate="handleNavigate"
        @create-related="handleCreateRelated"
      />

      <!-- Edit View -->
      <EditView
        v-else-if="(view === 'edit' || recordId === 'new') && editConfig"
        :config="editConfig"
        :data="currentRecord || {}"
        :loading="dataLoading"
        :saving="saving"
        :object-id="objectDefinition?.id"
        :base-url="`/runtime/objects`"
        @save="handleSaveRecord"
        @cancel="handleCancel"
        @back="handleBack"
      />
    </div>
  </NuxtLayout>
</template>

<style scoped>
.object-view-container {
  padding: 2rem;
}
</style>
