<script setup lang="ts">
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import { GnCard, GnSelect, GnPageHeader } from "gnexus-ui-kit/vue";
import { SUPPORTED_LOCALES, setLocale, type Locale } from "../i18n";
import { useAuth } from "../stores/auth";
import AppShell from "../components/AppShell.vue";

const { t, locale } = useI18n();
const auth = useAuth();

const language = ref(locale.value as Locale);
const languageOptions = SUPPORTED_LOCALES.map((l) => ({
  value: l,
  label: l === "en" ? "English" : "Русский",
}));

function onLanguageChange(value: string) {
  language.value = value as Locale;
  setLocale(language.value);
}
</script>

<template>
  <AppShell>
    <GnPageHeader :title="t('settings.title')" :subtitle="auth.user.value?.email ?? undefined" />

    <GnCard class="settings-card">
      <h2 class="settings-card-title">{{ t("settings.profile") }}</h2>
      <div v-if="auth.user.value" class="settings-profile">
        <div class="settings-profile-info">
          <span class="settings-profile-name">{{ auth.user.value.nickname }}</span>
          <span class="settings-profile-email">{{ auth.user.value.email }}</span>
        </div>
      </div>
    </GnCard>

    <GnCard class="settings-card">
      <h2 class="settings-card-title">{{ t("settings.language") }}</h2>
      <GnSelect
        :model-value="language"
        :options="languageOptions"
        icon="ph-globe"
        @update:model-value="onLanguageChange"
      />
      <p class="settings-hint">{{ t("settings.languageHint") }}</p>
    </GnCard>
  </AppShell>
</template>

<style scoped>
.settings-card {
  width: 100%;
  padding: 18px;
  /* top margin, not bottom: the gap between cards comes from the next
     card's top margin — 16px uniform, no doubling */
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 560px;
}
.settings-card-title {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.6;
}
.settings-profile {
  display: flex;
  align-items: center;
  gap: 12px;
}
.settings-profile-info {
  display: flex;
  flex-direction: column;
  margin-right: auto;
}
.settings-profile-name {
  font-weight: 600;
}
.settings-profile-email {
  font-size: 12px;
  opacity: 0.7;
}
.settings-hint {
  margin: 0;
  font-size: 12px;
  opacity: 0.5;
}
</style>