<script setup lang="ts">
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '@/stores/app'
import { useSemanticModelsStore } from '@/stores/semantic-models'
import { useUnsavedChangesWarning } from '@/composables/useUnsavedChangesWarning'
import { Toaster } from '@/components/ui/sonner'
import { TooltipProvider } from '@/components/ui/tooltip'
import AppSidebar from '@/components/AppSidebar.vue'

const appStore = useAppStore()
const semanticModelsStore = useSemanticModelsStore()
const router = useRouter()

useUnsavedChangesWarning(() => semanticModelsStore.hasUnsavedChanges)

onMounted(async () => {
  appStore.initializeApp()
  await appStore.loadConfig()

  // Auto-navigate to configured semantic model if specified
  if (appStore.semanticModelId) {
    router.replace(`/semantic-models/${appStore.semanticModelId}`)
  }
})
</script>

<template>
  <TooltipProvider :delay-duration="300">
    <div class="flex h-screen w-full flex-col">
      <!-- Config error banner (full width, above sidebar and main) -->
      <div
        v-if="appStore.configError"
        class="flex items-center gap-2 border-b border-amber-500/30 bg-amber-500/10 px-4 py-2 text-sm text-amber-700 dark:text-amber-400"
      >
        <i class="dku-icon-error-circle-outline-16 flex-shrink-0" />
        <span>Failed to load configuration. Some features may not work correctly.</span>
      </div>
      <div class="flex flex-1 overflow-hidden">
        <AppSidebar />
        <main class="flex flex-1 flex-col overflow-hidden">
          <div class="flex-1 overflow-y-auto">
            <router-view />
          </div>
        </main>
      </div>
    </div>
    <Toaster />
  </TooltipProvider>
</template>
