<script setup lang="ts">
import Dashboard from '@/components/Dashboard.vue'
import CustomMainHeader from '@/components/CustomMainHeader.vue'
import { usePrefStore } from '@/store/prefStore'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/userStore'
import { computed } from 'vue'

const prefStore = usePrefStore()
const userStore = useUserStore()

const { userHasFullAccess } = storeToRefs(userStore)
const userCanEdit = computed(() => userHasFullAccess.value && prefStore.uiConf?.enable_quick_agents)
</script>

<template>
  <template v-if="userCanEdit">
    <header class="w-full h-[58px] md:h-[4px] py-1.5 md:py-0 border-t-[4px] border-t-primary">
      <CustomMainHeader />
    </header>

    <div class="flex-1 bg-white">
      <Dashboard />
    </div>
  </template>

  <template v-else>
    <Alert variant="info" class="mb-4">
      <i class="dku-icon-info-circle-outline-16 h-4 w-4"></i>
      <AlertTitle> Upgrade profile to access Monitoring page </AlertTitle>
      <AlertDescription>
        To access this feature, upgrade to the AI Consumer profile
      </AlertDescription>
    </Alert>
  </template>
</template>
