<template>
<q-page v-if="canUpdateSystem" class="flex flex-center">

<q-card style="width:420px; max-width:90vw">
<q-card-section>
<div class="text-h6 text-weight-bold">🔐 Şifre Değiştir</div>
<div class="text-caption text-grey-7">
Mevcut şifrenizi girerek yeni şifre belirleyin
</div>
</q-card-section>

<q-separator />

<q-form @submit.prevent="submit">
<q-card-section>
<q-input
v-model="current"
type="password"
label="Mevcut Şifre"
dense filled
/>

<q-input
v-model="password"
type="password"
label="Yeni Şifre"
dense filled
class="q-mt-sm"
/>

<q-input
v-model="password2"
type="password"
label="Yeni Şifre (Tekrar)"
dense filled
class="q-mt-sm"
/>

<q-banner
v-if="error"
class="bg-red-1 text-red q-mt-md"
>
{{ error }}
</q-banner>
</q-card-section>

<q-card-actions align="right">
<q-btn
v-if="canUpdateSystem"
type="submit"
label="GÜNCELLE"
color="primary"
:loading="loading"
:disable="!canSubmit"
/>
</q-card-actions>
</q-form>
</q-card>

</q-page>
<q-page v-else class="q-pa-md flex flex-center">
<div class="text-negative text-subtitle1">
Bu module erisim yetkiniz yok.
</div>
</q-page>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useQuasar } from 'quasar'
import api from 'src/services/api'
import { useAuthStore } from 'stores/authStore.js'
import { usePermission } from 'src/composables/usePermission'

const { canUpdate } = usePermission()
const canUpdateSystem = canUpdate('system')

const $q = useQuasar()
const auth = useAuthStore()

const current = ref('')
const password = ref('')
const password2 = ref('')
const loading = ref(false)
const error = ref(null)

const canSubmit = computed(() =>
  current.value &&
  password.value.length >= 8 &&
  password.value === password2.value &&
  !loading.value
)

/* =========================================================
   🔐 ŞİFRE DEĞİŞTİR
========================================================= */
async function submit () {
  error.value = null
  loading.value = true

  try {
    await api.post('/password/change', {
      current_password: current.value,
      new_password: password.value
    })

    $q.notify({
      type: 'positive',
      message: 'Şifre güncellendi'
    })

    current.value = ''
    password.value = ''
    password2.value = ''

  } catch (err) {
    error.value =
      err?.message ||
      'Şifre değiştirilemedi'
  } finally {
    loading.value = false
  }
}
</script>
