<template>
  <!-- Applique le thème (dark/light) et la position de la sidebar via data-attributes -->
  <div
    :data-theme="uiStore.theme"
    :data-sidebar="uiStore.sidebarPosition"
    class="app-root"
  >
    <RouterView />
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { RouterView } from 'vue-router'
import { useUiStore } from '@/stores/ui.store'
import { useAuthStore } from '@/stores/auth.store'

const uiStore = useUiStore()
const authStore = useAuthStore()

onMounted(async () => {
  // Restaurer le thème depuis localStorage
  uiStore.initTheme()

  // Tenter de restaurer la session (refresh token via cookie httpOnly)
  await authStore.tryRefresh()
})
</script>

<style>
/* Reset minimal — pas de framework CSS externe */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body, #app, .app-root {
  height: 100%;
  min-height: 100vh;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  transition: background-color 0.3s ease, color 0.3s ease;
}
</style>
