<template>
  <div class="max-w-full mx-auto px-4 py-4">
    <div
      class="flex flex-wrap justify-center gap-2 sm:gap-4 border-b-2 border-gray-200 dark:border-gray-700 mb-6 pb-2 relative z-10">
      <button v-if="permissions.view_all || permissions.edit_workers" @click="activeTab = 'personnel'" :class="{
        'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400 font-bold':
          activeTab === 'personnel',
        'text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 hover:border-blue-300 dark:hover:border-blue-600':
          activeTab !== 'personnel',
      }"
        class="flex-shrink-0 px-3 py-2 text-sm sm:px-4 sm:py-2 sm:text-base transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 whitespace-nowrap">
        {{ $t('tabPersonnel') }}
      </button>
      <button v-if="permissions.view_all" @click="activeTab = 'warning'" :class="{
        'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400 font-bold':
          activeTab === 'warning',
        'text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 hover:border-blue-300 dark:hover:border-blue-600':
          activeTab !== 'warning',
      }"
        class="flex-shrink-0 px-3 py-2 text-sm sm:px-4 sm:py-2 sm:text-base transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 whitespace-nowrap">
        {{ $t('tabWarning') }}
      </button>
      <button v-if="permissions.view_all || permissions.manage_resources" @click="activeTab = 'qr'" :class="{
        'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400 font-bold':
          activeTab === 'qr',
        'text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 hover:border-blue-300 dark:hover:border-blue-600':
          activeTab !== 'qr',
      }"
        class="flex-shrink-0 px-3 py-2 text-sm sm:px-4 sm:py-2 sm:text-base transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 whitespace-nowrap">
        {{ $t('tabQrCodes') }}
      </button>
      <button v-if="permissions.view_all || permissions.manage_resources" @click="activeTab = 'geofencing'" :class="{
        'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400 font-bold':
          activeTab === 'geofencing',
        'text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 hover:border-blue-300 dark:hover:border-blue-600':
          activeTab !== 'geofencing',
      }"
        class="flex-shrink-0 px-3 py-2 text-sm sm:px-4 sm:py-2 sm:text-base transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 whitespace-nowrap">
        {{ $t('tabGeofencing') }}
      </button>
      <button v-if="permissions.view_all" @click="activeTab = 'killSwitch'" :class="{
        'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400 font-bold':
          activeTab === 'killSwitch',
        'text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 hover:border-blue-300 dark:hover:border-blue-600':
          activeTab !== 'killSwitch',
      }"
        class="flex-shrink-0 px-3 py-2 text-sm sm:px-4 sm:py-2 sm:text-base transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 whitespace-nowrap">
        {{ $t('workScheduleTitle') }}
      </button>
      <button v-if="permissions.manager_permissions" @click="activeTab = 'permissions'" :class="{
        'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400 font-bold':
          activeTab === 'permissions',
        'text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 hover:border-blue-300 dark:hover:border-blue-600':
          activeTab !== 'permissions',
      }"
        class="flex-shrink-0 px-3 py-2 text-sm sm:px-4 sm:py-2 sm:text-base transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 whitespace-nowrap">
        {{ $t('managerPermissions') }}
      </button>
      </div>
    <div class="tab-content">
      <WarningReporting v-if="activeTab === 'warning' && permissions.view_all" />
      <QrCodeManagement v-if="activeTab === 'qr' && (permissions.view_all || permissions.manage_resources)" />
      <PersonnelManagement v-if="activeTab === 'personnel' && (permissions.view_all || permissions.edit_workers)" />
      <ManagerPermissions v-if="activeTab === 'permissions' && permissions.manager_permissions" />
      <GeofenceManagement v-if="activeTab === 'geofencing' && (permissions.view_all || permissions.manage_resources)" />
      <KillSwitchManagement v-if="activeTab === 'killSwitch' && permissions.view_all" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { permissions, fetchPermissions } from '@/stores/permissions.js'
import WarningReporting from '@/components/WarningReporting.vue'
import QrCodeManagement from '@/components/QrCodeManagement.vue'
import PersonnelManagement from '@/components/PersonnelManagement.vue'
import ManagerPermissions from '@/components/ManagerPermissions.vue'
import GeofenceManagement from '@/components/GeofenceManagement.vue'
import KillSwitchManagement from '@/components/KillSwitchManagement.vue'

const activeTab = ref('personnel')

onMounted(async () => {
  await fetchPermissions();
  // Set the default active tab to the first one the user has permission for
  if (permissions.value.view_all) {
    activeTab.value = 'personnel'; // Default to personnel tab if view_all is true
  } else if (permissions.value.edit_workers) {
    activeTab.value = 'personnel';
  } else if (permissions.value.manager_permissions) {
    activeTab.value = 'permissions';
  } else if (permissions.value.manage_resources) {
    activeTab.value = 'qr';
  }
});
</script>

<style scoped>
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}
</style>
