<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>

          <!-- Tabs -->
          <div class="mb-8">
            <Tabs v-model="activeTab" default-value="fields" class="w-full">
              <TabsList class="grid w-full grid-cols-3 max-w-2xl">
                <TabsTrigger value="fields">Fields</TabsTrigger>
                <TabsTrigger value="layouts">Page Layouts</TabsTrigger>
                <TabsTrigger value="access">Access & Permissions</TabsTrigger>
              </TabsList>

              <!-- Fields Tab -->
              <TabsContent value="fields" class="mt-6">
                <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>
              </TabsContent>

              <!-- Page Layouts Tab -->
              <TabsContent value="layouts" class="mt-6">
                <div v-if="!selectedLayout" class="space-y-4">
                  <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-semibold">Page Layouts</h2>
                    <Button @click="handleCreateLayout">
                      <Plus class="w-4 h-4 mr-2" />
                      New Layout
                    </Button>
                  </div>

                  <div v-if="loadingLayouts" class="text-center py-8">
                    Loading layouts...
                  </div>
                  
                  <div v-else-if="layouts.length === 0" class="text-center py-8 text-muted-foreground">
                    No page layouts yet. Create one to get started.
                  </div>

                  <div v-else class="space-y-2">
                    <div
                      v-for="layout in layouts"
                      :key="layout.id"
                      class="p-4 border rounded-lg bg-card hover:border-primary cursor-pointer transition-colors"
                      @click="handleSelectLayout(layout)"
                    >
                      <div class="flex items-center justify-between">
                        <div>
                          <h3 class="font-semibold">{{ layout.name }}</h3>
                          <p v-if="layout.description" class="text-sm text-muted-foreground">
                            {{ layout.description }}
                          </p>
                        </div>
                        <div class="flex items-center gap-2">
                          <span
                            v-if="layout.isDefault"
                            class="px-2 py-1 bg-primary/10 text-primary rounded text-xs"
                          >
                            Default
                          </span>
                          <Button
                            variant="ghost"
                            size="sm"
                            @click.stop="handleDeleteLayout(layout.id)"
                          >
                            <Trash2 class="w-4 h-4" />
                          </Button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Layout Editor -->
                <div v-else>
                  <div class="mb-4">
                    <Button variant="outline" @click="selectedLayout = null">
                      <ArrowLeft class="w-4 h-4 mr-2" />
                      Back to Layouts
                    </Button>
                  </div>

                  <PageLayoutEditor
                    :fields="object.fields"
                    :initial-layout="(selectedLayout.layoutConfig || selectedLayout.layout_config)?.fields || []"
                    :layout-name="selectedLayout.name"
                    @save="handleSaveLayout"
                  />
                </div>
              </TabsContent>

              <!-- Access & Permissions Tab -->
              <TabsContent value="access" class="mt-6">
                <ObjectAccessSettings
                  :object-api-name="object.apiName"
                  :fields="object.fields"
                  @updated="fetchObject"
                />
              </TabsContent>
            </Tabs>
          </div>
        </div>
      </main>
    </NuxtLayout>
  </div>
</template>

<script setup lang="ts">
import { Plus, Trash2, ArrowLeft } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import PageLayoutEditor from '@/components/PageLayoutEditor.vue'
import ObjectAccessSettings from '@/components/ObjectAccessSettings.vue'
import type { PageLayout, FieldLayoutItem } from '~/types/page-layout'

const route = useRoute()
const { api } = useApi()
const { getPageLayouts, createPageLayout, updatePageLayout, deletePageLayout } = usePageLayouts()
const { toast } = useToast()

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

// Page layouts state
const layouts = ref<PageLayout[]>([])
const loadingLayouts = ref(false)
const selectedLayout = ref<PageLayout | 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
  }
}

const fetchLayouts = async () => {
  if (!object.value) return
  
  try {
    loadingLayouts.value = true
    layouts.value = await getPageLayouts(object.value.id)
  } catch (e: any) {
    console.error('Error fetching layouts:', e)
    toast.error('Failed to load page layouts')
  } finally {
    loadingLayouts.value = false
  }
}

const handleCreateLayout = async () => {
  const name = prompt('Enter a name for the new layout:')
  if (!name) return

  try {
    const newLayout = await createPageLayout({
      name,
      objectId: object.value.id,
      isDefault: layouts.value.length === 0,
      layoutConfig: { fields: [] },
    })
    
    layouts.value.push(newLayout)
    selectedLayout.value = newLayout
    toast.success('Layout created successfully')
  } catch (e: any) {
    console.error('Error creating layout:', e)
    toast.error('Failed to create layout')
  }
}

const handleSelectLayout = (layout: PageLayout) => {
  selectedLayout.value = layout
}

const handleSaveLayout = async (fields: FieldLayoutItem[]) => {
  if (!selectedLayout.value) return

  try {
    const updated = await updatePageLayout(selectedLayout.value.id, {
      layoutConfig: { fields },
    })
    
    // Update the layout in the list
    const index = layouts.value.findIndex(l => l.id === selectedLayout.value!.id)
    if (index !== -1) {
      layouts.value[index] = updated
    }
    
    selectedLayout.value = updated
    toast.success('Layout saved successfully')
  } catch (e: any) {
    console.error('Error saving layout:', e)
    toast.error('Failed to save layout')
  }
}

const handleDeleteLayout = async (layoutId: string) => {
  if (!confirm('Are you sure you want to delete this layout?')) return

  try {
    await deletePageLayout(layoutId)
    layouts.value = layouts.value.filter(l => l.id !== layoutId)
    toast.success('Layout deleted successfully')
  } catch (e: any) {
    console.error('Error deleting layout:', e)
    toast.error('Failed to delete layout')
  }
}

// Watch for tab changes to load layouts
watch(activeTab, (newTab) => {
  if (newTab === 'layouts' && layouts.value.length === 0 && !loadingLayouts.value) {
    fetchLayouts()
  }
})

onMounted(async () => {
  await fetchObject()
  // If we start on layouts tab, load them
  if (activeTab.value === 'layouts') {
    await fetchLayouts()
  }
})
</script>
