<script setup>
import { computed } from 'vue'
import { useSettingsStore } from './stores/settings'
import SettingsPanel from './components/SettingsPanel.vue'

const settings = useSettingsStore()

const appStyle = computed(() => {
  const style = {}
  if (settings.backgroundType === 'warm') {
    style.background = '#fdfaf3ff'
    style.color = '#5d4037'
  } else if (settings.backgroundType === 'reading') {
    style.background = '#f5f0e1'
    style.color = '#333333'
  } else if (settings.backgroundType === 'default') {
    style.background = 'var(--app-bg)'
    style.color = 'var(--app-text)'
  } else if (settings.backgroundType === 'image') {
    style.background = settings.theme === 'dark' ? '#000000' : '#ffffff'
  }
  return style
})

const backgroundStyle = computed(() => {
  if (settings.backgroundType === 'image' && settings.backgroundImage) {
    return {
      backgroundImage: `url(${settings.backgroundImage})`,
      opacity: settings.backgroundOpacity,
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      position: 'absolute',
      inset: 0,
      zIndex: 0,
      pointerEvents: 'none'
    }
  }
  return {}
})
</script>

<template>
  <div class="app-shell" :style="appStyle">
    <div v-if="settings.backgroundType === 'image'" class="app-bg-layer" :style="backgroundStyle"></div>

    <router-view />

    <SettingsPanel />
  </div>
</template>

<style scoped>
.app-shell {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  background: var(--app-bg);
  color: var(--app-text);
  transition: background 0.3s, color 0.3s;
  isolation: isolate;
}
</style>
