<template>
  <q-page v-if="canReadUser" class="user-gateway-page flex flex-center">

    <div class="gateway-container">

      <div class="gateway-header">
        <div class="text-h5">Kullanıcı Yönetim Merkezi</div>
        <div class="text-subtitle2 text-grey-7">
          Kullanıcı oluşturma ve yetkilendirme işlemleri
        </div>
      </div>

      <div class="gateway-actions row q-col-gutter-lg q-mt-lg">

        <!-- ➕ YENİ KULLANICI -->
        <q-card
          v-if="canWriteUser"
          class="gateway-card cursor-pointer"
          flat
          bordered
          @click="goCreate"
        >
          <q-card-section class="text-center">
            <q-icon name="person_add" size="48px" color="primary" />
            <div class="text-h6 q-mt-sm">Yeni Kullanıcı</div>
            <div class="text-caption text-grey-7 q-mt-xs">
              Sisteme yeni kullanıcı ekle
            </div>
          </q-card-section>
        </q-card>

        <!-- 👥 MEVCUT KULLANICILAR -->
        <q-card
          v-if="canReadUser"
          class="gateway-card cursor-pointer"
          flat
          bordered
          @click="goList"
        >
          <q-card-section class="text-center">
            <q-icon name="groups" size="48px" color="primary" />
            <div class="text-h6 q-mt-sm">Mevcut Kullanıcılar</div>
            <div class="text-caption text-grey-7 q-mt-xs">
              Kullanıcıları görüntüle ve düzenle
            </div>
          </q-card-section>
        </q-card>

      </div>

    </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 { useRouter } from 'vue-router'
import { usePermission } from 'src/composables/usePermission'

const { canRead, canWrite } = usePermission()
const canReadUser = canRead('user')
const canWriteUser = canWrite('user')

const router = useRouter()

function goCreate () {
  if (!canWriteUser.value) return

  router.push({
    path: '/app/users/new',
    query: { mode: 'new' }
  })
}


function goList () {
  if (!canReadUser.value) return
  router.push({ name: 'user-list' })
}
</script>


<style scoped>
.user-gateway-page {
  background: #fafafa;
}

.gateway-container {
  width: 100%;
  max-width: 900px;
  padding: 24px;
}

.gateway-header {
  text-align: center;
}

.gateway-actions {
  justify-content: center;
}

.gateway-card {
  width: 280px;
  transition: all 0.2s ease;
}

.gateway-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
</style>
