<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue';
import SnackbarContainer from './components/SnackBar/Container.vue';

const theme = ref('light');

const setColorTheme = () => {
  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    theme.value = 'dark';
    document.documentElement.classList.add('dark');
  } else {
    theme.value = 'light';
    document.documentElement.classList.remove('dark');
  }
};

const listenToThemeChanges = () => {
  const mql = window.matchMedia('(prefers-color-scheme: dark)');

  mql.onchange = e => {
    if (e.matches) {
      theme.value = 'dark';
      document.documentElement.classList.add('dark');
    } else {
      theme.value = 'light';
      document.documentElement.classList.remove('dark');
    }
  };
};

const setLocale = locale => {
  const instance = getCurrentInstance();
  if (instance) {
    instance.appContext.config.globalProperties.$i18n.locale = locale;
  }
};

onMounted(() => {
  // Add background color class once - it automatically handles light/dark modes
  document.documentElement.classList.add('bg-n-background');
  setColorTheme();
  listenToThemeChanges();
  setLocale(window.chatwootConfig.selectedLocale);
});
</script>

<template>
  <div class="h-full min-h-screen w-full antialiased" dir="ltr" :class="theme">
    <router-view />
    <SnackbarContainer />
  </div>
</template>

<style lang="scss">
@tailwind base;
@tailwind components;
@tailwind utilities;

@import '../dashboard/assets/scss/next-colors';

html,
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  @apply h-full w-full;

  input,
  select {
    outline: none;
  }
}

.text-link {
  @apply text-n-brand font-medium hover:text-n-blue-10;
}

.v-popper--theme-tooltip .v-popper__inner {
  background: black !important;
  font-size: 0.75rem;
  padding: 4px 8px !important;
  border-radius: 6px;
  font-weight: 400;
}

.v-popper--theme-tooltip .v-popper__arrow-container {
  display: none;
}
</style>
