<!--
/**
 * Main App Component - Platform Neutral Vue 3 + vue-facing-decorator
 * 
 * Cross-platform DailyNotification test app for Android/iOS/Electron
 * 
 * @author Matthew Raymer
 * @version 1.0.0
 */
-->

<template>
  <div id="app" class="app-container">
    <!-- Header Navigation -->
    <AppHeader />
    
    <!-- Main Content -->
    <main class="main-content">
      <router-view />
    </main>
    
    <!-- Footer -->
    <AppFooter />
    
    <!-- Global Loading Overlay -->
    <LoadingOverlay v-if="isLoading" />
    
    <!-- Global Error Dialog -->
    <ErrorDialog 
      v-if="errorMessage" 
      :message="errorMessage"
      @close="clearError"
    />
  </div>
</template>

<script lang="ts">
import { Vue, Component, toNative } from 'vue-facing-decorator'
// NOTE: Native fetcher configuration imports removed - moved to HomeView.vue

@Component
class App extends Vue {
  isLoading = false
  errorMessage = ''
  
  async mounted() {
    // NOTE: Native fetcher configuration has been moved to HomeView.vue onMounted()
    // App.vue mounted() hook is not executing reliably (likely due to Vue router lifecycle).
    // HomeView.vue mounts after navigation, ensuring Capacitor is ready.
    // See: src/views/HomeView.vue - configureNativeFetcher() function
    console.log('🚀 App.vue: mounted() hook EXECUTED (configuration moved to HomeView)')
  }
  
  clearError() {
    this.errorMessage = ''
  }
}
export default toNative(App)
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.main-content {
  flex: 1;
  padding: 0;
  overflow-y: auto;
}

/* Platform-specific adjustments */
@media (max-width: 768px) {
  .main-content {
    padding: 0;
  }
}
</style>