<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useToast } from 'gnexus-ui-kit/vue'
import { api } from '../api'
import { setLocale } from '../i18n/locale'
import { currencyOptions, setCurrency } from '../taskui'

// Глобальные настройки: валюта бюджетов и язык интерфейса.

const { t } = useI18n()
const toast = useToast()

const currency = ref('UAH')
const language = ref('') // '' = как в аккаунте (SSO)
const error = ref('')
const saving = ref(false)

const languageOptions = computed(() => [
  { value: '', label: t('settings.languageAuto') },
  { value: 'ru', label: t('settings.langRu') },
  { value: 'en', label: t('settings.langEn') },
  { value: 'uk', label: t('settings.langUk') },
])

onMounted(async () => {
  try {
    const s = await api.getSettings()
    currency.value = s.currency
    language.value = s.language
  } catch (e) {
    error.value = String(e)
  }
})

async function save() {
  error.value = ''
  saving.value = true
  try {
    const s = await api.updateSettings({ currency: currency.value, language: language.value })
    setCurrency(s.currency)
    // язык применяется сразу; без переопределения — SSO locale или ru
    if (s.language === '') {
      const me = await fetch('/auth/me').then((r) => (r.ok ? r.json() : null))
      setLocale(me?.user?.locale || 'ru')
    } else {
      setLocale(s.language)
    }
    language.value = s.language
    toast.success({ title: t('common.saved') })
  } catch (e) {
    toast.error({ title: t('common.error'), text: String(e) })
  } finally {
    saving.value = false
  }
}
</script>

<template>
  <section>
    <GnPageHeader kicker="gntodo" :title="t('settings.title')" />

    <GnAlert v-if="error" variant="error">{{ error }}</GnAlert>

    <GnCard>
      <template #title>{{ t('settings.currencyTitle') }}</template>
      <p class="hint">{{ t('settings.currencyHint') }}</p>
      <GnRadioGroup v-model="currency" :options="currencyOptions()" />
      <div class="form-actions">
        <GnButton variant="primary" icon="ph-floppy-disk" :disabled="saving" @click="save">
          {{ t('common.save') }}
        </GnButton>
      </div>
    </GnCard>

    <GnCard>
      <template #title>{{ t('settings.languageTitle') }}</template>
      <p class="hint">{{ t('settings.languageHint') }}</p>
      <GnRadioGroup v-model="language" :options="languageOptions" />
      <div class="form-actions">
        <GnButton variant="primary" icon="ph-floppy-disk" :disabled="saving" @click="save">
          {{ t('common.save') }}
        </GnButton>
      </div>
    </GnCard>
  </section>
</template>

<style scoped>
.hint {
  color: var(--muted, #888);
  margin: 0 0 0.75rem;
}
/* карточки кита не имеют собственного вертикального отступа */
.card + .card {
  margin-top: 1.5rem;
}
.form-actions {
  margin-top: 0.75rem;
}
</style>