<script setup>
import { useWailsEvents } from '@core/composables/useWailsEvents.js'

const { theme, isDark, toggleTheme, initTheme } = useTheme()
const appStore = useAppStore()
const servicesStore = useServicesStore()
const { on, off } = useWailsEvents()

onMounted(() => {
  initTheme()

  on('service:changed', (status) => {
    if (status && !servicesStore.isOperating) {
      servicesStore.list = Object.values(status)
      servicesStore.loaded = true
      const hasRunning = status.http?.status || status.https?.status
      appStore.setServerRunning(hasRunning)
    }
  })

  on('server:already_running', () => {
    appStore.setServerRunning(false)
  })
})

onUnmounted(() => {
  off('service:changed')
  off('server:already_running')
})
</script>

<template>
  <div class="app-layout">
    <TitleBar />
    <div class="app-body">
      <Sidebar />
      <div class="app-content">
        <main class="main-content">
          <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </main>
        <AppFooter />
      </div>
    </div>
    <VNotification />
    <VModal />
    <VConfirmDialog />
  </div>
</template>

<style scoped>
.app-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  
  /* Красивый грандиент */
  background:
    /*
    radial-gradient(circle at 100% 30%, rgba(53, 55, 126, 0.089) 0%, transparent 50%),
    radial-gradient(circle at 45% 100%, rgba(126, 53, 98, 0.082) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(53, 55, 126, 0.089) 0%, transparent 50%),
    */
    var(--bg-primary);
}

.app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.app-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main-content {
  --page-padding: 50px;
  flex: 1;
  overflow-y: auto;
  padding: var(--page-padding) var(--page-padding) var(--page-padding) var(--page-padding);
}
</style>
