<template>
  <q-page class="flex flex-center">
    <q-card style="width:420px; max-width:90vw">
      <q-card-section>
        <div class="text-h6">Şifre Yenileme Zorunlu</div>
        <div class="text-caption text-grey-7 q-mt-xs">
          Sistemi kullanabilmek için yeni bir şifre belirlemelisiniz.
        </div>
      </q-card-section>

      <q-form @submit.prevent="submit">
        <q-card-section class="q-gutter-md">
          <q-input
            v-model="currentPassword"
            type="password"
            label="Mevcut Şifre"
            outlined
            dense
          />

          <q-input
            v-model="newPassword"
            type="password"
            label="Yeni Şifre"
            outlined
            dense
          />

          <q-input
            v-model="newPassword2"
            type="password"
            label="Yeni Şifre (Tekrar)"
            outlined
            dense
          />

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

        <q-card-actions align="right">
          <q-btn
            type="submit"
            label="Kaydet"
            color="primary"
            :loading="loading"
          />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-page>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import api, { extractApiErrorDetail } from 'src/services/api'
import { useAuthStore } from 'stores/authStore.js'

const router = useRouter()
const auth = useAuthStore()

const currentPassword = ref('')
const newPassword = ref('')
const newPassword2 = ref('')
const loading = ref(false)
const error = ref('')

function resolveFirstPasswordError(status, detail) {
  const text = String(detail || '').trim()
  const lower = text.toLowerCase()

  if (status === 401) {
    if (lower.includes('mevcut sifre') || lower.includes('current password')) {
      return 'Mevcut şifreyi yanlış girdiniz.'
    }

    if (lower.includes('token') || lower.includes('authorization')) {
      return 'Oturum doğrulanamadı. Lütfen tekrar giriş yapın.'
    }

    return text || 'Kimlik doğrulama hatası (401). Lütfen tekrar giriş yapın.'
  }

  if (status === 403) {
    if (lower.includes('permission')) {
      return 'Şifre değiştirme yetkiniz yok (403). Sistem yöneticinize başvurun.'
    }

    return text || 'Bu işlem için yetkiniz yok (403).'
  }

  return text || 'Şifre güncellenemedi'
}

async function submit () {
  error.value = ''

  if (!currentPassword.value || !newPassword.value || !newPassword2.value) {
    error.value = 'Tüm alanlar zorunludur'
    return
  }

  if (newPassword.value !== newPassword2.value) {
    error.value = 'Yeni şifreler eşleşmiyor'
    return
  }

  loading.value = true
  try {
    await api.post('/password/change', {
      current_password: currentPassword.value,
      new_password: newPassword.value
    })

    auth.clearSession()
    router.replace('/login')
  } catch (e) {
    const status = e?.response?.status
    const detail = await extractApiErrorDetail(e)

    console.error('FIRST_PASSWORD_CHANGE failed', {
      status,
      detail
    })

    error.value = resolveFirstPasswordError(status, detail)
  } finally {
    loading.value = false
  }
}
</script>
