<template>
  <div :data-theme="themeStore.currentTheme" class="app-container">
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>

    <!-- Toast Notification -->
    <div v-if="appStore.showToast" class="toast toast-top toast-end">
      <div
        :class="[
          'alert',
          {
            'alert-success': appStore.toastType === 'success',
            'alert-error': appStore.toastType === 'error',
            'alert-info': appStore.toastType === 'info',
          },
        ]"
      >
        <span>{{ appStore.toastMessage }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// App-level setup
useHead({
  title: 'Ziya - Trading Platform',
  meta: [
    { name: 'description', content: 'One Stop Shop for your trading needs' },
  ],
});

// Initialize stores
const appStore = useAppStore();
const themeStore = useThemeStore();

onMounted(() => {
  // Initialize both stores
  appStore.initializeFromStorage();
  themeStore.initializeTheme();
});
</script>

<style>
.app-container {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
</style>
