<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated class="bg-warning text-black">
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          :aria-label="t('nav.menu')"
          @click="toggleLeftDrawer"
        />

        <q-toolbar-title>
          {{ t('app.title') }}
        </q-toolbar-title>

        <q-select
          v-model="selectedLocale"
          :options="localeOptions"
          option-label="label"
          option-value="value"
          emit-value
          map-options
          dense
          borderless
          class="q-ml-md language-select"
          :aria-label="t('nav.language')"
        />

      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      bordered
    >
      <q-list>
        <DrawerUserCard />
        <q-separator />
        <q-item clickable to="/">
          <q-item-section avatar>
            <q-icon name="home" />
          </q-item-section>
          <q-item-section>
            <q-item-label>{{ t('pages.home') }}</q-item-label>
          </q-item-section>
        </q-item>
        <q-item clickable to="/admin/dashboard">
          <q-item-section avatar>
            <q-icon name="dashboard" />
          </q-item-section>
          <q-item-section>
            <q-item-label>{{ t('admin.dashboard') }}</q-item-label>
          </q-item-section>
        </q-item>
        <q-item clickable to="/admin/profiles">
          <q-item-section avatar>
            <q-icon name="people" />
          </q-item-section>
          <q-item-section>
            <q-item-label>{{ t('nav.profiles') }}</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import DrawerUserCard from '@/components/DrawerUserCard.vue';
import { useProfilesStore } from '@/stores/profiles-store';
import { localeOptions, setLocale, type SupportedLocale } from '@/i18n';

const profilesStore = useProfilesStore();
const router = useRouter();
const { locale, t } = useI18n();
const selectedLocale = computed({
  get: () => locale.value as SupportedLocale,
  set: (value: SupportedLocale) => setLocale(value),
});

onMounted(async () => {
  try {
    if (profilesStore.isAuthenticated && !profilesStore.profile) {
      await profilesStore.me();
    }
  } catch {
    profilesStore.logout();
  }

  if (!profilesStore.isAuthenticated || profilesStore.profile?.role !== 'admin') {
    await router.replace('/401');
  }
});


const leftDrawerOpen = ref(false);

function toggleLeftDrawer () {
  leftDrawerOpen.value = !leftDrawerOpen.value;
}

async function logout() {
  profilesStore.logout();
  await router.push('/');
}
</script>

<style scoped>
.language-select {
  width: 90px;
  max-width: 90px;
  color: #000;
  font-weight: 700;
}

.language-select :deep(.q-field__native),
.language-select :deep(.q-field__append),
.language-select :deep(.q-icon) {
  color: #000;
  font-weight: 700;
}
</style>
