<template>
  <div>
    <!-- Navbar -->
    <div class="max-w-screen-2xl mx-auto xl:px-20 md:px-12 sm:px-8 px-6 py-6 h-full flex items-center justify-between gap-4">
      <div class="flex items-center xl:gap-24 gap-10">
        <router-link :to="{name: 'home'}" class="shrink-0">
          <img v-if="whiteHeaderList.includes($route.name)" src="@/assets/images/logo-blue.svg" class="w-28" alt="Value plus logo">
          <img v-else-if="redHeaderList.includes($route.name)" src="@/assets/images/logo-red.svg" class="w-28" alt="Value plus logo">
          <img v-else src="@/assets/images/logo-white.svg" class="w-28" alt="Value plus logo">
        </router-link>
        <div :class="`lg:flex hidden items-center xl:gap-8 gap-4 ${whiteHeaderList.includes($route.name) ? 'text-carbon' : 'text-white'}`">
          <router-link :to="{name: 'home'}" :exact-active-class="`${$route.name === 'home' ? 'text-white' : redHeaderList.includes($route.name) ? 'text-amour' : 'text-ambassador-blue'} font-semibold border-b-2 border-solid ${$route.name === 'home' ? 'border-white' : redHeaderList.includes($route.name) ? 'border-amour' : 'border-ambassador-blue'}`">{{ $t('Home') }}</router-link>
          <div class="relative">
            <button @click="toggleDropdown('sectorsDropdownVisible')" class="menu-btn flex gap-0.5" aria-expanded="sectorsDropdownVisible" aria-haspopup="true">
              <span class="menu-btn">{{ $t('Sectors') }}</span>
              <span class="menu-btn material-symbols-outlined font-light" aria-hidden="true">keyboard_arrow_down</span>
            </button>
            <div v-if="sectorsDropdownVisible" class="absolute ltr:left-0 rtl:right-0 ltr:origin-top-right rtl:origin-top-left z-10 mt-2 min-w-56" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
              <div class="grid grid-cols-2 gap-2 border border-solid border-white text-[#B4B9C9] rounded-lg bg-white p-4 w-[500px]" role="none">
                <div v-for="(item, index) in sectorsList" :key="index" class="hover:text-ambassador-blue hover:underline">
                  <router-link :to="`/${$i18n.locale}/sectors/${item['slug_' + $i18n.locale]}`" :class="`${[item.slug_en, item.slug_ar].includes($route.params.slug) ? 'text-ambassador-blue border-b border-solid border-ambassador-blue' : ''}`">{{ item[`name_${$i18n.locale}`] }}</router-link>
                  <!-- <router-link :to="{ path: `/${$i18n.locale}/sectors/${item['slug_' + $i18n.locale]}` }">{{ item[`name_${$i18n.locale}`] }}</router-link> --> 
                </div>
              </div>
            </div>
          </div>
          <div class="relative">
            <button @click="toggleDropdown('modulesDropdownVisible')" class="menu-btn flex gap-0.5" aria-expanded="modulesDropdownVisible" aria-haspopup="true">
              <span class="menu-btn">{{ $t('Modules') }}</span>
              <span class="menu-btn material-symbols-outlined font-light" aria-hidden="true">keyboard_arrow_down</span>
            </button>
            <div v-if="modulesDropdownVisible" class="absolute ltr:left-0 rtl:right-0 ltr:origin-top-right rtl:origin-top-left z-10 mt-2 min-w-56" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
              <div class="grid xl:grid-cols-3 grid-cols-2 gap-3 border border-solid border-white text-[#B4B9C9] rounded-lg bg-white p-4 xl:w-[850px] w-[600px]" role="none">
                <div v-for="(item, index) in modulesList" :key="index" class="hover:text-ambassador-blue hover:underline">
                  <router-link :to="`/${$i18n.locale}/modules/${item['slug_' + $i18n.locale]}`" :class="`text-start ${[item.slug_en, item.slug_ar].includes($route.params.slug) ? 'text-ambassador-blue border-b border-solid border-ambassador-blue' : ''}`">{{ item[`name_${$i18n.locale}`] }}</router-link>
                  <!-- <router-link :to="{ path: `/${$i18n.locale}/modules/${item['slug_' + $i18n.locale]}` }">{{ item[`name_${$i18n.locale}`] }}</router-link> -->
                </div>
              </div>
            </div>
          </div>
          <router-link :to="{name: 'clients'}" :active-class="`${$route.name === 'home' ? 'text-white' : redHeaderList.includes($route.name) ? 'text-amour' : 'text-ambassador-blue'} font-semibold border-b-2 border-solid ${$route.name === 'home' ? 'border-white' : redHeaderList.includes($route.name) ? 'border-amour' : 'border-ambassador-blue'}`">{{ $t('Clients') }}</router-link>
          <router-link :to="{name: 'blogs'}" :active-class="`${$route.name === 'home' ? 'text-white' : redHeaderList.includes($route.name) ? 'text-amour' : 'text-ambassador-blue'} font-semibold border-b-2 border-solid ${$route.name === 'home' ? 'border-white' : redHeaderList.includes($route.name) ? 'border-amour' : 'border-ambassador-blue'}`">{{ $t('Blogs') }}</router-link>
          <router-link :to="{name: 'contact-us'}" :active-class="`${$route.name === 'home' ? 'text-white' : redHeaderList.includes($route.name) ? 'text-amour' : 'text-ambassador-blue'} font-semibold border-b-2 border-solid ${$route.name === 'home' ? 'border-white' : redHeaderList.includes($route.name) ? 'border-amour' : 'border-ambassador-blue'}`">{{ $t('Contact Us') }}</router-link>
        </div>
      </div>

      <div :class="`flex items-center xl:gap-4 gap-2 font-medium text-sm ${whiteHeaderList.includes($route.name) ? 'text-carbon' : 'text-white'}`">
        <router-link :to="languageSwitchHref" :class="`flex items-center shrink-0 cursor-pointer select-none sm:py-2 py-1 sm:px-4 px-2 rounded-md border border-solid bg-[#F8FAFF1A] ${whiteHeaderList.includes($route.name) ? 'border-carbon' : 'border-white'}`">{{ $t('English') }}</router-link>
        <p @click="sidebarActive = true" class="material-symbols-rounded cursor-pointer font-medium lg:hidden block">menu</p>
      </div>
    </div>

    <!-- Sidebar -->
    <div :class="`${sidebarActive ? 'fixed opacity-100' : 'opacity-0'} inset-0 bg-[#4D4D4D70] transition-opacity duration-500 ease-in-out`"></div>
    <div :class="sidebarActive ? 'inset-0' : '-inset-full'" class="fixed top-0 bottom-0 h-dvh w-full transition-all duration-300">
      <div class="relative h-full w-72 overflow-y-auto shadow-xl bg-[#EB5757]">
        <div class="flex justify-between items-center sticky top-0 px-4 py-6 bg-[#EB5757]">
          <router-link :to="{name: 'home'}" class="shrink-0">
            <img src="@/assets/images/logo.svg" class="w-28" alt="Value plus logo">
          </router-link>
          <p @click="sidebarActive = false" class="material-symbols-rounded cursor-pointer text-xl font-semibold text-white">close</p>
        </div>

        <div class="p-6 flex flex-col gap-4 text-white font-medium">
          <router-link :to="{name: 'home'}" exact-active-class="text-ambassador-blue font-semibold border-b-2 border-solid border-ambassador-blue w-fit">{{ $t('Home') }}</router-link>
          <div>
            <p>{{ $t('Sectors') }}</p>
            <div v-for="(item, index) in sectorsList" :key="index" class="text-sm font-normal mt-1.5 ps-3 flex items-center gap-1.5">
              <span class="rounded-full w-1 h-1 bg-white inline-block shrink-0"></span>
              <router-link :to="`/${$i18n.locale}/sectors/${item['slug_' + $i18n.locale]}`" :class="`${[item.slug_en, item.slug_ar].includes($route.params.slug) ? 'text-ambassador-blue font-semibold border-b-2 border-solid border-ambassador-blue' : ''}`">{{ item[`name_${$i18n.locale}`] }}</router-link>
              <!-- <router-link :to="{ path: `/${$i18n.locale}/sectors/${item['slug_' + $i18n.locale]}` }" active-class="text-ambassador-blue font-semibold border-b-2 border-solid border-ambassador-blue" class="truncate">{{ item[`name_${$i18n.locale}`] }}</router-link> -->
            </div>
          </div>
          <div>
            <p>{{ $t('Modules') }}</p>
            <div v-for="(item, index) in modulesList" :key="index" class="text-sm font-normal mt-1.5 ps-3 flex items-center gap-1.5 truncate">
              <span class="rounded-full w-1 h-1 bg-white inline-block shrink-0"></span>
              <router-link :to="`/${$i18n.locale}/modules/${item['slug_' + $i18n.locale]}`" :class="`truncate ${[item.slug_en, item.slug_ar].includes($route.params.slug) ? 'text-ambassador-blue font-semibold border-b-2 border-solid border-ambassador-blue' : ''}`">{{ item[`name_${$i18n.locale}`] }}</router-link>
              <!-- <router-link :to="{ path: `/${$i18n.locale}/modules/${item['slug_' + $i18n.locale]}` }" active-class="text-ambassador-blue font-semibold border-b-2 border-solid border-ambassador-blue" class="truncate">{{ item[`name_${$i18n.locale}`] }}</router-link> -->
            </div>
          </div>
          <router-link :to="{name: 'clients'}" active-class="text-ambassador-blue font-semibold border-b-2 border-solid border-ambassador-blue w-fit">{{ $t('Clients') }}</router-link>
          <router-link :to="{name: 'blogs'}" active-class="text-ambassador-blue font-semibold border-b-2 border-solid border-ambassador-blue w-fit">{{ $t('Blogs') }}</router-link>
          <router-link :to="{name: 'contact-us'}" active-class="text-ambassador-blue font-semibold border-b-2 border-solid border-ambassador-blue w-fit">{{ $t('Contact Us') }}</router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios';

export default {
  data () {
    return {
      whiteHeaderList: ['contact-us', 'clients', 'blog-details'],
      redHeaderList: ['modules', 'modules-details', 'sectors', 'sectors-details', 'blogs'],
      sidebarActive: false,
      sectorsDropdownVisible: false,
      modulesDropdownVisible: false,
      windowWidth: typeof window === 'undefined' ? 1024 : window.innerWidth,
      sectorsList: [],
      modulesList: []
    }
  },
  watch: {
    windowWidth () {
      this.sidebarActive = false
      this.sectorsDropdownVisible = false
      this.modulesDropdownVisible = false
    },
    '$route' () {
      this.sidebarActive = false
    }
  },
  computed: {
    languageSwitchHref () {
      const current = this.$route.fullPath || this.$route.path || '/'
      const nextLang = this.$route.params.lang === 'en' ? 'ar' : 'en'

      if (/^\/(en|ar)(\/|$)/.test(current)) {
        return current.replace(/^\/(en|ar)(?=\/|\?|$)/, `/${nextLang}`)
      }

      return `/${nextLang}${current.startsWith('/') ? '' : '/'}${current}`
    }
  },
  methods: {
    toggleDropdown(dropdown) {
      this.sectorsDropdownVisible = dropdown !== 'sectorsDropdownVisible' ? false : this.sectorsDropdownVisible
      this.modulesDropdownVisible = dropdown !== 'modulesDropdownVisible' ? false : this.modulesDropdownVisible
      this[dropdown] = !this[dropdown];
    },
    closeDropdown(event) {
      if (event.target.classList[0] !== 'menu-btn') {
        this.sectorsDropdownVisible = false
        this.modulesDropdownVisible = false
      }
    },
    updateWidth() {
      this.windowWidth = window.innerWidth;
    },
    async loadSectorsModulesLists () {
      try {
        const response = await axios.get('https://admin.valueerp.net/api/sectorsModules');
        this.sectorsList = response.data.data.data
        this.modulesList = response.data.data.modules
      } catch (error) {
        // this.error = error.message || 'Something went wrong';
      } finally {
        // this.loading = false;
      }
    }
  },
  mounted () {
    document.addEventListener('click', this.closeDropdown);
    window.addEventListener('resize', this.updateWidth);
  },
  beforeUnmount () {
    document.removeEventListener('click', this.closeDropdown);
  },
  unmounted () {
    window.removeEventListener('resize', this.updateWidth);
  },
  created () {
    if (typeof window !== 'undefined') {
      this.loadSectorsModulesLists();
    }
  },
  async serverPrefetch () {
    await this.loadSectorsModulesLists()
  }
}
</script>
