<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
    <LayoutAppNavbar
      @open-settings="displaySettingsOpen = true"
      @logout="handleLogout"
    />

    <NuxtPage />

    <ToastContainer />

    <CommonConfirmModal />

    <DisplaySettings
      :is-open="displaySettingsOpen"
      @close="displaySettingsOpen = false"
      @update-settings="handleSettingsUpdate"
    />

    <footer class="footer p-4 bg-neutral text-neutral-content">
      <div class="items-center grid-flow-col">
        <p>@Malio 2025 · v{{ appVersion }}</p>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { navigateTo, useRuntimeConfig } from '#imports'
import { useProfileSession } from '~/composables/useProfileSession'

const displaySettingsOpen = ref(false)
const { ensureSession, logout } = useProfileSession()
const runtimeConfig = useRuntimeConfig()
const appVersion = computed(() => (runtimeConfig.public?.appVersion as string) ?? '0.1.0')

const handleSettingsUpdate = (_settings: unknown) => {
  // Placeholder for future persistence
}

const handleLogout = async () => {
  await logout()
  await navigateTo('/profiles')
}

onMounted(async () => {
  await ensureSession()
})
</script>
