<script setup lang="ts">
const emit = defineEmits<{
  close: []
}>()

const { locale, setLocale, t } = useI18n()
const localePath = useLocalePath()
const router = useRouter()
const progressionStore = useProgressionStore()

function toggleLanguage() {
  const newLocale = locale.value === 'fr' ? 'en' : 'fr'
  setLocale(newLocale)
}

function resetProgress() {
  if (confirm(t('settings.confirmReset'))) {
    progressionStore.$reset()
    emit('close')
  }
}

function revokeConsent() {
  progressionStore.setConsent(false)
}

function giveConsent() {
  progressionStore.setConsent(true)
}

function goToResume() {
  router.push(localePath('/resume'))
  emit('close')
}
</script>

<template>
  <div class="settings-drawer">
    <!-- Handle -->
    <div class="w-12 h-1 bg-sky-dark-100 rounded-full mx-auto mb-4" />

    <h2 class="text-xl font-ui font-bold text-sky-text mb-6">
      {{ t('settings.title') }}
    </h2>

    <div class="space-y-4">
      <!-- Langue -->
      <div class="flex items-center justify-between py-3 border-b border-sky-dark-100">
        <span class="text-sky-text">{{ t('settings.language') }}</span>
        <button
          type="button"
          class="px-4 py-2 bg-sky-dark-100 rounded-lg text-sky-text font-ui"
          @click="toggleLanguage"
        >
          {{ locale === 'fr' ? 'English' : 'Français' }}
        </button>
      </div>

      <!-- Mode Express -->
      <div class="flex items-center justify-between py-3 border-b border-sky-dark-100">
        <div>
          <span class="text-sky-text block">{{ t('settings.expressMode') }}</span>
          <span class="text-xs text-sky-text-muted">{{ t('settings.expressModeDesc') }}</span>
        </div>
        <button
          type="button"
          class="px-4 py-2 bg-sky-dark-100 rounded-lg text-sky-text font-ui text-sm"
          @click="goToResume"
        >
          {{ t('settings.goToResume') }}
        </button>
      </div>

      <!-- RGPD -->
      <div class="flex items-center justify-between py-3 border-b border-sky-dark-100">
        <div>
          <span class="text-sky-text block">{{ t('settings.saveProgress') }}</span>
          <span class="text-xs text-sky-text-muted">{{ t('settings.saveProgressDesc') }}</span>
        </div>
        <button
          type="button"
          class="w-12 h-6 rounded-full transition-colors"
          :class="progressionStore.consentGiven ? 'bg-sky-accent' : 'bg-sky-dark-100'"
          @click="progressionStore.consentGiven ? revokeConsent() : giveConsent()"
        >
          <span
            class="block w-5 h-5 rounded-full bg-white shadow transition-transform"
            :class="progressionStore.consentGiven ? 'translate-x-6' : 'translate-x-0.5'"
          />
        </button>
      </div>

      <!-- Réinitialiser -->
      <button
        type="button"
        class="w-full py-3 bg-red-500/20 text-red-400 rounded-lg font-ui font-medium mt-4"
        @click="resetProgress"
      >
        {{ t('settings.reset') }}
      </button>
    </div>

    <!-- Fermer -->
    <button
      type="button"
      class="w-full py-3 bg-sky-dark-100 rounded-lg text-sky-text font-ui font-medium mt-6"
      @click="emit('close')"
    >
      {{ t('common.close') }}
    </button>
  </div>
</template>
