<template>
  <q-page v-if="canReadOrder" class="costing-gateway-page flex flex-center">
    <div class="gateway-container">
      <div class="gateway-header">
        <div class="text-h5">Üretim'den Ürün Maliyetlendirme</div>
        <div class="text-subtitle2 text-grey-7">
          İşlem seçerek maliyetlendirme ekranına geçin
        </div>
      </div>

      <div class="gateway-actions row q-col-gutter-lg q-mt-lg">
        <q-card
          class="gateway-card cursor-pointer"
          flat
          bordered
          @click="goHasCostProducts"
        >
          <q-card-section class="text-center">
            <q-icon name="fact_check" size="48px" color="primary" />
            <div class="text-h6 q-mt-sm">Mevcut Maliyeti Olan Ürünleri Göster</div>
          </q-card-section>
        </q-card>

        <q-card
          class="gateway-card cursor-pointer"
          flat
          bordered
          @click="goNoCostProducts"
        >
          <q-card-section class="text-center">
            <q-icon name="price_change" size="48px" color="primary" />
            <div class="text-h6 q-mt-sm">Maliyeti Olmayan Ürünler İçin Maliyet Oluştur</div>
          </q-card-section>
	        </q-card>

	        <q-card
	          class="gateway-card cursor-pointer"
	          flat
	          bordered
	          @click="goMTBolumMapping"
	        >
	        <q-card-section class="text-center">
	            <q-icon name="hub" size="48px" color="primary" />
	            <div class="text-h6 q-mt-sm">Maliyet Parça Eşleştirme</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 } = usePermission()
const canReadOrder = canRead('order')
const router = useRouter()

function goHasCostProducts () {
  if (!canReadOrder.value) return
  router.push({ name: 'production-product-costing-has-cost' })
}

function goNoCostProducts () {
  if (!canReadOrder.value) return
  router.push({ name: 'production-product-costing-no-cost' })
}

function goMTBolumMapping () {
  if (!canReadOrder.value) return
  router.push({ name: 'production-product-costing-maliyet-parca-eslestirme' })
}
</script>

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

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

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

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

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

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