<script setup>
import { watchEffect } from 'vue'
import TopBar from '@/components/ui/TopBar.vue'
import NavBar from '@/components/ui/NavBar.vue'
import { useUi } from '@/stores/useUi'

const ui = useUi()

watchEffect(() => {
  const root = document.documentElement

  root.style.setProperty('--primary-color', ui.primaryColor)
  root.style.setProperty('--secondary-color', ui.secondaryColor)
  root.style.setProperty('--warning-color', ui.warningColor)
  root.style.setProperty('--background-color', ui.backgroundColor)
  root.style.setProperty('--font-family', ui.fontFamily)
  root.style.setProperty('--font-size', `${ui.fontSize}px`)

  // Module-specific accent colors
  root.style.setProperty('--accent-color-empleados', ui.accentColorEmpleados)
  root.style.setProperty('--accent-color-tareas', ui.accentColorTareas)
  root.style.setProperty('--accent-color-planillas', ui.accentColorPlanillas)
  root.style.setProperty('--accent-color-asistencias', ui.accentColorAsistencias)
  // Note: Configuracion accent color is missing here, should be added if used for CSS vars.
  // root.style.setProperty('--accent-color-configuracion', ui.accentColorConfiguracion)


  // Per-module table background colors
  root.style.setProperty('--table-bg-color-empleados', ui.tableBgColorEmpleados)
  root.style.setProperty('--table-bg-color-tareas', ui.tableBgColorTareas)
  root.style.setProperty('--table-bg-color-planillas', ui.tableBgColorPlanillas)
  root.style.setProperty('--table-bg-color-asistencias', ui.tableBgColorAsistencias)
  root.style.setProperty('--table-bg-color-configuracion', ui.tableBgColorConfiguracion)

  if (ui.theme === 'dark') {
    root.classList.add('theme-dark')
    root.classList.remove('theme-light')
  } else {
    root.classList.add('theme-light')
    root.classList.remove('theme-dark')
  }

  if (ui.animationsEnabled) {
    root.classList.remove('animations-disabled')
  } else {
    root.classList.add('animations-disabled')
  }
})
</script>

<template>
  <!-- TopBar fija -->
  <TopBar />

  <!-- wrapper: deja espacio para TopBar (pt-14 = 56px) y, en desktop, para NavBar (pl-60) -->
  <div :class="[
    'pt-14 min-h-screen transition-[padding-left] duration-200',
    ui.sidebarOpen ? 'md:pl-60' : '',
    // The global style.css will handle base background and text color via body styling
    // but we can keep specific overrides here if needed or theme classes.
    // ui.theme === 'dark' ? 'bg-gray-800 text-gray-100' : 'bg-gray-100 text-gray-900'
  ]">
    <!-- NavBar fija -->
    <NavBar />

    <!-- contenido principal -->
    <main class="min-h-[calc(100vh-56px)] flex flex-col overflow-hidden">
      <RouterView class="flex-1 overflow-auto" />
    </main>
  </div>
</template>

<style scoped>
/* Scoped styles remain, global styles are in style.css */
/* We can add specific App.vue styling here if needed, that doesn't rely on theme variables directly */
</style>
