<template>
  <q-page v-if="canAccessPage" class="user-detail-page">

    <!-- LOADING -->
    <q-inner-loading :showing="loading">
      <q-spinner size="48px" />
    </q-inner-loading>

    <!-- ================= STICKY HEADER ================= -->
    <div class="sticky-stack">

      <div class="filter-bar row q-col-gutter-md q-mb-sm">
        <div class="col-3">
          <div class="text-caption text-grey-7 q-mb-xs">Kullanıcı Kodu</div>
          <q-input v-model="form.code" dense filled :rules="[codeRule]" lazy-rules />
        </div>

        <div class="col-4">
          <div class="text-caption text-grey-7 q-mb-xs">Ad Soyad</div>
          <q-input v-model="form.full_name" dense filled />
        </div>

        <div class="col-2 flex items-end">
          <q-toggle v-model="form.is_active" label="Aktif" color="primary" />
        </div>
        <q-badge
          :color="hasPassword ? 'positive' : 'grey'"
          class="q-ml-sm"
        >
          {{ hasPassword ? 'Parola Var' : 'Parola Yok' }}
        </q-badge>

      </div>

      <div class="save-toolbar">
        <div class="text-subtitle2 text-weight-bold">
          {{ pageTitle }}
        </div>

        <div>
          <q-btn
            v-if="canSaveUser"
            :label="saveLabel"
            color="primary"
            icon="save"
            :loading="saving"
            @click="onSave"
          />
          <q-btn
            v-if="canDeleteThisUser"
            label="SIL"
            color="negative"
            icon="delete"
            class="q-ml-sm"
            :loading="deleting"
            @click="confirmDeleteUser"
          />
          <q-btn
            v-if="canReadUser"
            label="LİSTEYE DÖN"
            flat
            icon="arrow_back"
            class="q-ml-sm"
            @click="goList"
          />
        </div>
      </div>
    </div>

    <!-- ================= BODY ================= -->
    <div class="q-pa-md">

      <!-- 🔐 PASSWORD ACTIONS -->
      <q-card flat bordered class="q-mb-md">
        <q-card-section class="row items-center justify-between">
          <div>
            <div class="text-subtitle2 text-weight-bold">Parola İşlemleri</div>
            <div class="text-caption text-grey-7">
              Kullanıcıya parola oluşturma / sıfırlama bağlantısı e-posta ile gönderilir.
            </div>

            <div class="text-caption q-mt-xs">
              <span class="text-grey-7">E-posta:</span>
              <span class="text-weight-medium q-ml-xs">{{ form.email || '-' }}</span>
            </div>

            <div v-if="lastPasswordMailSentAt" class="text-caption q-mt-xs text-grey-7">
              Son gönderim: {{ lastPasswordMailSentAt }}
            </div>
          </div>

          <div class="row items-center">
            <q-btn
              v-if="canUpdateUser"
              label="PAROLA MAİLİ GÖNDER"
              color="primary"
              icon="mail"
              :disable="!canSendPasswordMail"
              :loading="sendingPasswordMail"
              @click="confirmSendPasswordMail"
            />
          </div>
        </q-card-section>
      </q-card>

      <!-- USER FORM -->
      <q-card flat bordered>
        <q-card-section>
          <div class="row q-col-gutter-md">

            <!-- EMAIL -->
            <div class="col-4">
              <div class="text-caption text-grey-7 q-mb-xs">E-Posta</div>
              <q-input
                v-model="form.email"
                dense
                filled
                type="email"
                :rules="[emailRule]"
                lazy-rules
              />
            </div>

            <!-- PHONE -->
            <div class="col-4">
              <div class="text-caption text-grey-7 q-mb-xs">Telefon</div>
              <q-input
                v-model="form.mobile"
                dense
                filled
                placeholder="+90XXXXXXXXXX"
                mask="+#############"
                fill-mask
                :rules="[phoneRule]"
                lazy-rules
              />
            </div>

            <!-- ADDRESS -->
            <div class="col-4">
              <div class="text-caption text-grey-7 q-mb-xs">Adres</div>
              <q-input
                v-model="form.address"
                type="textarea"
                dense
                filled
                autogrow
              />
            </div>

            <!-- ROLES -->
            <div class="col-6">
              <div class="text-caption text-grey-7 q-mb-xs">Roller</div>
              <q-select
                v-model="form.roles"
                :options="roleOptions"
                option-label="label"
                option-value="value"
                emit-value
                map-options
                multiple
                use-input
                use-chips
                dense
                filled
                behavior="menu"
              >
                <template #selected-item="scope">
                  <q-chip
                    removable
                    dense
                    class="q-mr-xs"
                    @remove="scope.removeAtIndex(scope.index)"
                  >
                    {{ scope.opt.label }}
                  </q-chip>
                </template>
                <template #option="scope">
                  <q-item v-bind="scope.itemProps">
                    <q-item-section avatar>
                      <q-checkbox
                        :model-value="scope.selected"
                        tabindex="-1"
                      />
                    </q-item-section>
                    <q-item-section>
                      {{ scope.opt.label }}
                    </q-item-section>
                  </q-item>
                </template>
              </q-select>
            </div>

            <!-- DEPARTMENT -->
            <div class="col-3">
              <div class="text-caption text-grey-7 q-mb-xs">Departman</div>
              <q-select
                v-model="form.departments"
                :options="departmentOptions"
                option-label="label"
                option-value="value"
                emit-value
                map-options
                use-input
                dense
                filled
              />
            </div>

            <!-- PIYASALAR -->
            <div class="col-3">
              <div class="text-caption text-grey-7 q-mb-xs">Piyasalar</div>
              <q-select
                v-model="form.piyasalar"
                :options="piyasaOptions"
                option-label="label"
                option-value="value"
                emit-value
                map-options
                multiple
                use-input
                use-chips
                dense
                filled
                behavior="menu"
              >
                <template #before-options>
                  <q-item clickable @click="selectAllPiyasalar">
                    <q-item-section>Tümünü Seç</q-item-section>
                  </q-item>
                  <q-item clickable @click="clearPiyasalar">
                    <q-item-section>Temizle</q-item-section>
                  </q-item>
                  <q-separator />
                </template>
                <template #selected-item="scope">
                  <q-chip
                    removable
                    dense
                    class="q-mr-xs"
                    @remove="scope.removeAtIndex(scope.index)"
                  >
                    {{ scope.opt.label }}
                  </q-chip>
                </template>
                <template #option="scope">
                  <q-item v-bind="scope.itemProps">
                    <q-item-section avatar>
                      <q-checkbox
                        :model-value="scope.selected"
                        tabindex="-1"
                        @update:model-value="() => scope.toggleOption(scope.opt)"
                        @click.stop
                      />
                    </q-item-section>
                    <q-item-section>
                      {{ scope.opt.label }}
                    </q-item-section>
                  </q-item>
                </template>
              </q-select>
            </div>

            <!-- NEBIM -->
            <div class="col-12">
              <div class="text-caption text-grey-7 q-mb-xs">Nebim Kullanıcıları</div>
              <q-select
                v-model="form.nebim_users"
                :options="nebimUserOptions"
                option-label="label"
                option-value="value"
                emit-value
                map-options
                use-input
                dense
                filled
              />
            </div>

            <div class="col-12">
              <div class="text-caption text-grey-7 q-mb-xs">Fiyat Listesi Fiyat Gruplari</div>
              <q-select
                v-model="form.order_price_list_price_groups"
                :options="orderPriceListPriceGroupOptions"
                option-label="label"
                option-value="value"
                emit-value
                map-options
                multiple
                use-chips
                clearable
                dense
                filled
                behavior="menu"
              >
                <template #before-options>
                  <q-item clickable @click="selectAllOrderPriceGroups">
                    <q-item-section>Tumunu Sec</q-item-section>
                  </q-item>
                  <q-item clickable @click="clearOrderPriceGroups">
                    <q-item-section>Temizle</q-item-section>
                  </q-item>
                  <q-separator />
                </template>
              </q-select>
            </div>

          </div>
        </q-card-section>
      </q-card>
    </div>

  </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 { computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useQuasar } from 'quasar'
import { storeToRefs } from 'pinia'
import { useUserDetailStore } from 'src/stores/UserDetailStore'
import { usePermission } from 'src/composables/usePermission'

const { canRead, canWrite, canUpdate, canDelete } = usePermission()
const canReadUser = canRead('user')
const canWriteUser = canWrite('user')
const canUpdateUser = canUpdate('user')
const canDeleteUser = canDelete('user')

const $q = useQuasar()
const route = useRoute()
const router = useRouter()
const store = useUserDetailStore()

/* 🔒 REAKTİVİTE */
const {
  form,
  loading,
  saving,
  deleting,
  roleOptions,
  departmentOptions,
  piyasaOptions,
  nebimUserOptions,
  orderPriceListPriceGroupOptions,
  sendingPasswordMail,
  lastPasswordMailSentAt
} = storeToRefs(store)
const codeRule = v => !!v || 'Kullanıcı kodu zorunludur'

/* ================= MODE ================= */
const mode = computed(() => route.meta.mode || 'edit')
const isNew = computed(() => mode.value === 'new')
const isEdit = computed(() => mode.value === 'edit')
const isView = computed(() => mode.value === 'view')
const canAccessPage = computed(() => {
  if (isNew.value) return canWriteUser.value
  if (isEdit.value) return canUpdateUser.value
  return canReadUser.value
})
const canSaveUser = computed(() => isNew.value ? canWriteUser.value : canUpdateUser.value)

const userId = computed(() => (isEdit.value || isView.value) ? Number(route.params.id) : null)
const canDeleteThisUser = computed(() =>
  (isEdit.value || isView.value) &&
  !!userId.value &&
  canDeleteUser.value
)

const hasPassword = computed(() => store.hasPassword)

const pageTitle = computed(() => (isNew.value ? 'Yeni Kullanıcı' : 'Kullanıcı Düzenleme'))
const saveLabel = computed(() => (isNew.value ? 'KAYDET' : 'GÜNCELLE'))

/* ================= VALIDATION ================= */
const emailRule = v =>
  !v || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) || 'Geçerli bir e-posta giriniz'

const phoneRule = v =>
  !v || /^\+\d{10,15}$/.test(v.replace(/_/g, '')) || 'Telefon +90XXXXXXXXXX formatında olmalı'

const canSendPasswordMail = computed(() => {
  if (isNew.value) return false                 // önce kullanıcı oluşmalı
  if (!userId.value) return false
  if (!form.value.is_active) return false       // pasif kullanıcıya mail yok
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test((form.value.email || '').trim())
})

function selectAllPiyasalar () {
  form.value.piyasalar = (piyasaOptions.value || [])
    .map((o) => o.value)
    .filter(Boolean)
}

function clearPiyasalar () {
  form.value.piyasalar = []
}

function selectAllOrderPriceGroups () {
  form.value.order_price_list_price_groups = (orderPriceListPriceGroupOptions.value || [])
    .map((o) => o.value)
    .filter(Boolean)
}

function clearOrderPriceGroups () {
  form.value.order_price_list_price_groups = []
}

/* ================= LIFECYCLE ================= */
watch(
  () => userId.value,
  async (id) => {
    if (!canAccessPage.value) return

    await store.fetchLookups()

    if (!id) {
      store.resetForm()
      return
    }

    await store.fetchUser(id)
  },
  { immediate: true }
)

/* ================= ACTIONS ================= */
async function onSave () {
  if (!canSaveUser.value) {
    $q.notify({ type: 'negative', message: 'Kaydetme yetkiniz yok' })
    return
  }

  if (!(form.value.code || '').trim()) {
    $q.notify({ type: 'negative', message: 'Kullanıcı kodu zorunludur' })
    return
  }

  try {
    if (form.value.mobile) {
      form.value.mobile = form.value.mobile.replace(/_/g, '').trim()
    }

    let id

    if (isNew.value) {
      id = await store.createUser()

      // 🔄 EDIT MODE’A GEÇ
      router.replace({
        name: 'user-edit',
        params: { id }
      })

    } else {
      await store.saveUser(userId.value)
      router.push({ name: 'user-list' })
    }

    $q.notify({ type: 'positive', message: 'İşlem başarılı' })

  } catch (e) {
    $q.notify({ type: 'negative', message: store.error || 'İşlem başarısız' })
  }
}




function goList () {
  router.push({ name: 'user-list' })
}

function confirmDeleteUser () {
  if (!canDeleteThisUser.value) {
    $q.notify({ type: 'negative', message: 'Silme yetkiniz yok' })
    return
  }

  const code = (form.value.code || '').trim()
  const label = code || `ID ${userId.value}`

  $q.dialog({
    title: 'Kullanici silinsin mi?',
    message: `${label} kaydi tablodan silinecek. Bu islem geri alinamaz.`,
    cancel: true,
    persistent: true
  }).onOk(async () => {
    await deleteUser()
  })
}

async function deleteUser () {
  try {
    await store.deleteUser(userId.value)
    $q.notify({ type: 'positive', message: 'Kullanici silindi' })
    await router.replace({ name: 'user-list' })
    window.location.reload()
  } catch {
    $q.notify({ type: 'negative', message: store.error || 'Kullanici silinemedi' })
  }
}


function confirmSendPasswordMail () {
  $q.dialog({
    title: 'Parola maili gönderilsin mi?',
    message: `${form.value.email} adresine parola oluşturma/sıfırlama bağlantısı gönderilecek.`,
    cancel: true,
    persistent: true
  }).onOk(async () => {
    await sendPasswordMail()
  })
}

async function sendPasswordMail () {
  try {
    await store.sendPasswordMail(userId.value)
    $q.notify({ type: 'positive', message: 'Parola maili gönderildi' })
  } catch {
    $q.notify({ type: 'negative', message: store.error || 'Mail gönderilemedi' })
  }
}
</script>
