<template>
  <MainLayout />
  <FullScreenPlayer />
  <Settings v-if="showSettings" @close="showSettings = false" />
</template>

<script setup lang="ts">
import { ref, provide, onMounted } from 'vue';
import MainLayout from './layout/MainLayout.vue';
import Settings from './components/Settings.vue';
import FullScreenPlayer from './components/FullScreenPlayer.vue';

const showSettings = ref(false);

// Provide to child components
provide('openSettings', () => { showSettings.value = true; });

// Apply saved theme on app startup
onMounted(() => {
  const savedTheme = localStorage.getItem('qz-theme') || 'dark';
  const savedAccentColor = localStorage.getItem('qz-accent-color') || '#ec4141';
  document.documentElement.setAttribute('data-theme', savedTheme);
  document.documentElement.style.setProperty('--color-accent', savedAccentColor);
});
</script>

<style>
@import "styles/main.css";
</style>
