<template>
  <div class="shell">
    <header class="shell__header">
      <div class="shell__brand">
        <UBadge color="neutral" variant="subtle" class="shell__badge">
          {{ t('app.badge') }}
        </UBadge>
        <h1 class="shell__title">{{ t('app.title') }}</h1>
        <p class="shell__subtitle">{{ t('app.subtitle') }}</p>
      </div>

      <div class="shell__actions">
        <USelect
          v-model="currentLocale"
          :items="localeOptions"
          size="sm"
          value-key="value"
          label-key="label"
          class="shell__select"
        />
        <ClientOnly>
          <USelect
            v-model="themePreference"
            :items="themeOptions"
            size="sm"
            value-key="value"
            label-key="label"
            class="shell__select"
          />
          <template #fallback>
            <USelect
              :model-value="defaultThemePreference"
              :items="themeOptions"
              size="sm"
              value-key="value"
              label-key="label"
              class="shell__select"
              disabled
            />
          </template>
        </ClientOnly>
      </div>
    </header>

    <main class="shell__main">
      <slot />
    </main>
  </div>
</template>

<script setup lang="ts">
type LocaleCode = 'sk' | 'en'
type ThemePreference = 'light' | 'dark' | 'system'

const { locale, setLocale, t } = useI18n()
const colorMode = useColorMode()

const localeOptions = computed(() => [
  { label: 'SK', value: 'sk' },
  { label: 'EN', value: 'en' }
])

const themeOptions = computed(() => [
  { label: `${t('theme.toggle')}: ${t('theme.preference.light')}`, value: 'light' },
  { label: `${t('theme.toggle')}: ${t('theme.preference.dark')}`, value: 'dark' },
  { label: `${t('theme.toggle')}: ${t('theme.preference.system')}`, value: 'system' }
])

const defaultThemePreference: ThemePreference = 'system'

const currentLocale = computed({
  get: () => locale.value as LocaleCode,
  set: (value: LocaleCode) => {
    if (value && value !== locale.value) {
      setLocale(value)
    }
  }
})

const themePreference = computed({
  get: () => colorMode.preference as ThemePreference,
  set: (value: ThemePreference) => {
    colorMode.preference = value
  }
})
</script>
