<template>
  <RouterView></RouterView>
  <SharedSnackbar />
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router';
import { onMounted, watch } from 'vue';
import { useTheme } from 'vuetify';
import SharedSnackbar from '@KTXC/components/shared/SharedSnackbar.vue';
import { useLayoutStore } from '@KTXC/stores/layoutStore';
import { useUserStore } from '@KTXC/stores/userStore';
import { useTenantStore } from '@KTXC/stores/tenantStore';

const theme = useTheme();
const layoutStore = useLayoutStore();
const userStore = useUserStore();
const tenantStore = useTenantStore();

// Maps user/tenant setting keys → Vuetify color token names
const COLOR_SETTINGS: Array<{ token: string; key: string }> = [
  { token: 'primary',   key: 'primary_color' },
  { token: 'secondary', key: 'secondary_color' },
];

/**
 * Apply brand color overrides from stored preferences to all Vuetify theme
 * variants (light & dark).  Tenant colors take priority when lock is active.
 */
function applyThemeColors(): void {
  const locked = tenantStore.getSetting('lock_user_colors') as boolean | null;

  for (const { token, key } of COLOR_SETTINGS) {
    const value = locked
      ? ((tenantStore.getSetting(key) as string | null) ?? (userStore.getSetting(key) as string | null))
      : ((userStore.getSetting(key) as string | null) ?? (tenantStore.getSetting(key) as string | null));

    if (value) {
      for (const variant of Object.keys(theme.themes.value)) {
        theme.themes.value[variant].colors[token] = value;
      }
    }
  }
}

/** Apply font preference via CSS custom property and body style. */
function applyFont(): void {
  const font =
    ((userStore.getSetting('font') as string | null) ??
     (tenantStore.getSetting('font') as string | null));

  if (font && font !== 'Public Sans') {
    document.documentElement.style.setProperty('--themer-font', font);
    document.body.style.fontFamily = `"${font}", sans-serif`;
  }
}

onMounted(() => {
  // Apply saved theme mode
  if (layoutStore.theme) {
    theme.global.name.value = layoutStore.theme;
  }

  applyThemeColors();
  applyFont();
});

// Re-apply whenever tenant settings change (e.g. admin saves new brand colors)
watch(() => tenantStore.settings, () => {
  applyThemeColors();
  applyFont();
}, { deep: true });
</script>
