﻿<script setup>
import { onMounted, onBeforeUnmount } from 'vue'
import { RouterView } from 'vue-router'
import { App } from '@capacitor/app'
import BottomDock from './components/BottomDock.vue'
import AddEntryView from './views/AddEntryView.vue'
import { bootstrapApp } from './services/appBootstrap.js'
import { useUiStore } from './stores/ui'

const uiStore = useUiStore()

let backButtonListener = null

void bootstrapApp()

onMounted(() => {
  if (typeof App?.addListener === 'function') {
    App.addListener('backButton', ({ canGoBack }) => {
      if (uiStore.addEntryVisible) {
        uiStore.closeAddEntry()
      } else if (!canGoBack) {
        // Keep Capacitor default back behavior.
      }
    })
      .then((handle) => {
        backButtonListener = handle
      })
      .catch(() => {
        backButtonListener = null
      })
  }
})

onBeforeUnmount(() => {
  if (backButtonListener && typeof backButtonListener.remove === 'function') {
    backButtonListener.remove()
    backButtonListener = null
  }
})
</script>

<template>
  <div class="min-h-screen bg-warmOffwhite text-stone-800 flex items-center justify-center">
    <div
      class="h-screen max-h-[844px] max-w-md w-full mx-auto bg-warmOffwhite shadow-2xl relative overflow-hidden flex flex-col"
      style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);"
    >
      <main class="flex-1 overflow-y-auto hide-scrollbar px-5 pt-2 pb-28 relative">
        <RouterView />
      </main>

      <BottomDock />

      <transition name="slide-up">
        <AddEntryView v-if="uiStore.addEntryVisible" />
      </transition>
    </div>
  </div>
</template>
