<template>
  <q-layout view="hHh Lpr fFf">

    <!-- HEADER -->
    <q-header elevated class="bg-primary text-white">
      <q-toolbar>

        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />

        <q-toolbar-title>
          <q-avatar class="bg-secondary q-mr-sm">
            <img src="/images/Baggi-tekstilas-logolu.jpg" />
          </q-avatar>
          {{ t('app.title') }}
        </q-toolbar-title>

        <q-select
          v-model="selectedLocale"
          dense
          outlined
          emit-value
          map-options
          options-dense
          class="q-mr-sm lang-select"
          option-value="value"
          option-label="label"
          :options="languageOptions"
        >
          <template #selected-item="scope">
            <div class="lang-item">
              <span class="lang-flag">{{ scope.opt.flag }}</span>
              <span class="lang-short">{{ scope.opt.short }}</span>
            </div>
          </template>

          <template #option="scope">
            <q-item v-bind="scope.itemProps">
              <q-item-section>
                <div class="lang-item">
                  <span class="lang-flag">{{ scope.opt.flag }}</span>
                  <span class="lang-short">{{ scope.opt.short }}</span>
                  <span>{{ scope.opt.label }}</span>
                </div>
              </q-item-section>
            </q-item>
          </template>
        </q-select>

        <q-btn flat dense round icon="logout" @click="confirmLogout" />

      </q-toolbar>
    </q-header>

    <!-- DRAWER -->
    <q-drawer
      v-if="perm.loaded"
      v-model="leftDrawerOpen"
      :show-if-above="!$q.screen.lt.md"
      :overlay="$q.screen.lt.md"
      :behavior="$q.screen.lt.md ? 'mobile' : 'desktop'"
      :breakpoint="1023"
      bordered
      class="bg-secondary text-white"
    >

      <div class="drawer-scroll">

        <q-list padding>

          <!-- DYNAMIC MENU -->
          <template
            v-for="(item, i) in filteredMenu"
            :key="i"
          >

            <!-- GROUP -->
            <q-expansion-item
              v-if="item.children"
              :icon="item.icon"
              :label="item.label"
              expand-separator
            >

              <q-item
                v-for="(c, j) in item.children"
                :key="j"
                clickable
                :to="c.to"
              >

                <q-item-section avatar>
                  <q-icon name="chevron_right" />
                </q-item-section>

                <q-item-section>
                  {{ c.label }}
                </q-item-section>

              </q-item>

            </q-expansion-item>


            <!-- SINGLE -->
            <q-item
              v-else
              clickable
              :to="item.to"
            >

              <q-item-section avatar>
                <q-icon :name="item.icon" />
              </q-item-section>

              <q-item-section>
                {{ item.label }}
              </q-item-section>

            </q-item>

            <q-separator spaced />

          </template>


          <!-- PASSWORD -->
          <q-item clickable to="/app/change-password">

            <q-item-section avatar>
              <q-icon name="vpn_key" />
            </q-item-section>

            <q-item-section>
              {{ t('app.changePassword') }}
            </q-item-section>

          </q-item>

        </q-list>

      </div>

    </q-drawer>


    <!-- CONTENT -->
    <q-page-container class="with-bg">
      <router-view />
    </q-page-container>


    <!-- FOOTER -->
    <q-footer class="bg-grey-8 text-white">
      <q-toolbar class="bg-secondary">

        <q-toolbar-title>
          {{ t('app.title') }}
        </q-toolbar-title>

      </q-toolbar>
    </q-footer>

  </q-layout>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Dialog, useQuasar } from 'quasar'

import { useAuthStore } from 'stores/authStore'
import { usePermissionStore } from 'stores/permissionStore'
import { useI18n } from 'src/composables/useI18n'
import { useRuntimeDomTranslations } from 'src/composables/useRuntimeDomTranslations'
import { UI_LANGUAGE_OPTIONS } from 'src/i18n/languages'
import { useLocaleStore } from 'src/stores/localeStore'
import { activityLogsMenuItem, getAuthUserId } from 'src/modules/activityLogs'


/* ================= STORES ================= */

const router = useRouter()
const route = useRoute()
const $q = useQuasar()
const auth = useAuthStore()
const perm = usePermissionStore()
const localeStore = useLocaleStore()
const { t } = useI18n()
useRuntimeDomTranslations()

const languageOptions = UI_LANGUAGE_OPTIONS
const selectedLocale = computed({
  get: () => localeStore.locale,
  set: (value) => {
    localeStore.setLocale(value)
  }
})


/* ================= UI ================= */

const leftDrawerOpen = ref(!$q.screen.lt.md)

function toggleLeftDrawer () {
  leftDrawerOpen.value = !leftDrawerOpen.value
}

function confirmLogout () {
  Dialog.create({
    title: t('app.logoutTitle'),
    message: t('app.logoutConfirm'),
    cancel: true,
    persistent: true
  }).onOk(() => {
    auth.clearSession()
    perm.clear()
    router.push('/login')
  })
}


/* ================= LOAD PERMISSIONS ================= */

onMounted(async () => {
  if (!perm.loaded) {
    await perm.fetchPermissions()
  }
  leftDrawerOpen.value = !$q.screen.lt.md
})

watch(
  () => route.fullPath,
  () => {
    if ($q.screen.lt.md) {
      leftDrawerOpen.value = false
    }
  }
)

watch(
  () => $q.screen.lt.md,
  (isMobile) => {
    if (isMobile) {
      leftDrawerOpen.value = false
    }
  }
)


/* ================= MENU CONFIG ================= */

const menuItems = [

  {
    label: 'Ana Panel',
    icon: 'dashboard',
    to: '/app',
    permission: 'system:view'
  },

  {
    label: 'Finans',
    icon: 'account_balance',

    children: [
      {
        label: 'Cari Ekstre',
        to: '/app/statementofaccount',
        permission: 'finance:view'
      },
      {
        label: 'Cari Bakiye Listesi',
        to: '/app/customer-balance-list',
        permission: 'finance:view'
      },
      {
        label: 'Cari Yaşlandırmalı Ekstre',
        to: '/app/account-aging-statement',
        permission: 'finance:view'
      },
      {
        label: 'Cari Yaşlandırmalı Cari Bakiye Listesi',
        to: '/app/aged-customer-balance-list',
        permission: 'finance:view'
      }
    ]
  },

  {
    label: 'Sipariş',
    icon: 'shopping_cart',

    children: [
      {
        label: 'Siparişler',
        to: '/app/order-gateway',
        permission: 'order:view'
      },
      {
        label: 'Fiyat Listesi',
        to: '/app/order-price-list',
        permission: 'order:view'
      },
      {
        label: 'Üretime Verilen Siparişleri Güncelle',
        to: '/app/orderproductionupdate',
        permission: 'order:update'
      },
      {
        label: 'Tamamlanan Siparişleri Toplu Kapatma',
        to: '/app/order-bulk-close',
        permission: 'order:update'
      }
    ]
  },

  {
    label: 'Ürün',
    icon: 'inventory_2',

    children: [
      {
        label: 'Ürün Kodundan Stok Sorgula',
        to: '/app/product-stock-query',
        permission: 'order:view'
      },
      {
        label: 'Ürün Özelliklerinden Stok Bul',
        to: '/app/product-stock-by-attributes',
        permission: 'order:view'
      }
    ]
  },

  { 
    label: 'Ürün Maliyetlendirme', 
    icon: 'request_quote', 
 
    children: [ 
      { 
        label: "Üretim'den Ürün Maliyetlendirme", 
        to: '/app/costing/production-product-costing', 
        permission: 'costing:view' 
      }, 
      { 
        label: 'Maliyet Parça Eşleştirme', 
        to: '/app/costing/production-product-costing/maliyet-parca-eslestirme', 
        permission: 'costing:view' 
      }, 
      { 
        label: 'Maliyet Varsayilan Miktarlar', 
        to: '/app/costing/production-product-costing/default-quantities', 
        permission: 'costing:view' 
      } 
    ] 
  }, 
 
  { 
    label: 'Ürün Fiyatlandırma ve Analiz', 
    icon: 'sell', 
 
    children: [ 
      { 
        label: 'Fiyatlandırma', 
        to: '/app/pricing/product-pricing', 
        permission: 'pricing:view' 
      }, 
      {
        label: 'Ürün Performans ve Karlılık Analizi',
        to: '/app/pricing/product-performance-profitability',
        permission: 'pricing:view'
      },
      {
        label: 'Toptan Kampanya Yönetimi',
        to: '/app/pricing/wholesale-campaigns',
        permission: 'pricing:view'
      },
      {
        label: 'Ürün Seri Eşleşmeleri',
        to: '/app/pricing/product-series-mappings',
        permission: 'pricing:view'
      },
      {
        label: 'B2B Olmayan Stok',
        to: '/app/pricing/product-series-mappings-orphans',
        permission: 'pricing:view'
      },
      {
        label: 'Ürün Seri Tanımlamaları',
        to: '/app/pricing/product-series-definitions',
        permission: 'pricing:view'
      },
      { 
        label: 'Marka Sınıflandırma', 
        to: '/app/pricing/brand-classification', 
        permission: 'pricing:view' 
      }, 
      { 
        label: 'Fiyat Çarpan Kuralları', 
        to: '/app/pricing/pricing-rules', 
        permission: 'pricing:view' 
      } 
    ] 
  }, 
 
  { 
    label: 'Sistem', 
    icon: 'settings', 

    children: [

      {
        label: 'Rol + Departman Yetkileri',
        to: '/app/role-dept-permissions',
        permission: 'system:update'
      },

      {
        label: 'Kullanıcı Yetkileri',
        to: '/app/user-permissions',
        permission: 'system:update'
      },

      {
        label: 'Piyasa Mail Eşleştirme',
        to: '/app/market-mail-mapping',
        permission: 'system:update'
      },
      {
        label: 'Maliyet Mail Eşleştirme',
        to: '/app/costing-mail-mapping',
        permission: 'system:update'
      },
      {
        label: 'Fiyatlandırma Mail Eşleştirme',
        to: '/app/pricing-mail-mapping',
        permission: 'system:update'
      },
      {
        label: 'Fiyat Listesi Mail Eşleştirme',
        to: '/app/order-price-list-mail-mapping',
        permission: 'system:update'
      },
      {
        label: 'Kullanıcı Fiyat Eşleştirme',
        to: '/app/order-price-list-user-price-groups',
        permission: 'system:update'
      }

    ]
  },

  {
    label: 'SüperAdmin',
    icon: 'admin_panel_settings',
    onlyUserIds: activityLogsMenuItem.onlyUserIds,

    children: [
      {
        label: 'Log İzleme',
        to: activityLogsMenuItem.to,
        permission: activityLogsMenuItem.permission,
        onlyUserIds: activityLogsMenuItem.onlyUserIds
      },
      {
        label: 'Test Mail',
        to: '/app/test-mail',
        permission: 'system:update',
        onlyUserIds: activityLogsMenuItem.onlyUserIds
      }
    ]
  },
  {
    label: 'Dil Çeviri',
    icon: 'translate',

    children: [
      {
        label: 'Çeviri Tablosu',
        to: '/app/language/translations',
        permission: 'language:update'
      }
    ]
  },

  {
    label: 'Kullanıcı Yönetimi',
    icon: 'people',

    children: [
      {
        label: 'Kullanıcılar',
        to: '/app/users',
        permission: 'system:read'
      }
    ]
  }

]


/* ================= FILTERED MENU ================= */

function isAllowedForUser (item) {
  const only = item?.onlyUserIds
  if (!Array.isArray(only) || only.length === 0) return true

  const id = getAuthUserId(auth.user)
  if (id == null) return false

  return only.includes(id)
}

const filteredMenu = computed(() => {

  if (!perm.loaded) return []

  return menuItems
    .map(item => {

      if (item.children) {
        if (!isAllowedForUser(item)) return null

        const children = item.children.filter(c =>
          isAllowedForUser(c) && perm.hasApiPermission(c.permission)
        )

        if (!children.length) return null

        return {
          ...item,
          children
        }
      }

      if (!isAllowedForUser(item)) {
        return null
      }

      if (!perm.hasApiPermission(item.permission)) {
        return null
      }

      return item
    })
    .filter(Boolean)
})
</script>

<style scoped>
.drawer-scroll {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.lang-select {
  width: 140px;
  background: #fff;
  border-radius: 6px;
}

.lang-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lang-flag {
  font-size: 15px;
  line-height: 1;
}

.lang-short {
  font-weight: 700;
  letter-spacing: 0.3px;
}
</style>

