<template>
  <div class="min-h-screen flex flex-col bg-base-200/40">
    <!-- Subtle dot pattern background -->
    <div class="fixed inset-0 -z-10 bg-[radial-gradient(oklch(85%_0.02_260)_1px,transparent_1px)] bg-[size:24px_24px] opacity-40" />

    <AppNavbar
      @open-settings="displaySettingsOpen = true"
      @logout="handleLogout"
    />

    <main class="flex-1">
      <NuxtPage :transition="{ name: 'page', mode: 'out-in' }" />
    </main>

    <ToastContainer />

    <ConfirmModal />

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

    <footer class="border-t border-base-300/50 bg-base-100/60 backdrop-blur-sm">
      <div class="container mx-auto flex items-center justify-between px-6 py-3">
        <p class="text-xs text-base-content/40 font-medium tracking-wide">
          &copy; Malio {{ new Date().getFullYear() }}
        </p>
        <NuxtLink
          to="/changelog"
          class="text-xs text-base-content/40 hover:text-primary transition-colors font-medium"
        >
          v{{ appVersion }}
        </NuxtLink>
      </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>
