<script setup>
import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
import { useCookieStore, useModalLoginOpen } from '@layouts/stores/config'
import { useAlert } from '@/composables/useAlert'
import UserDialog from '@/layouts/components/UserDialog.vue'
import { messaging, getToken, isSupported } from "@global/composables/firebase.js"

const modalLoginOpen = useModalLoginOpen()
const cookieStore = useCookieStore()
const { setAlert } = useAlert()

const router = useRouter()
const ability = useAbility()

const userData = useCookie('userData')
const userAbilityRules = useCookie('userAbilityRules')
const accessToken = useCookie('accessToken')

const abilityCookieStore = cookieStore.userAbilityRules
console.log('abilityCookieStore', abilityCookieStore)
if (abilityCookieStore) {
  ability.update(abilityCookieStore)
}

const userDataStore = cookieStore.userData
//console.log('userDataStore', userDataStore)

if (accessToken == '' || userData == '') {
  setAlert('Ocorreu um erro com seu acesso. Faça login novamente.', 'error', 'tabler-alert-triangle', 3000)

  //Redirect to login page
  router.push('/login')
}

watch(() => cookieStore.userData, (newValueUserData, oldValueUserData) => {
  if (newValueUserData) {
    userData.value = newValueUserData
  }

  //Se o ID do usuário mudou, limpe todos os cookies
  if (newValueUserData && oldValueUserData) {
    if (newValueUserData.id != oldValueUserData.id || newValueUserData.email != oldValueUserData.email) {
      useCookie('userAbilityRules').value = null
      ability.update([])
      useCookie('userData').value = null
      useCookie('accessToken').value = null

      setAlert('Seu acesso expirou! Faça login novamente para continuar.', 'error', 'tabler-alert-triangle', 3000)

      router.push('/login')
    }
  }

}, { deep: true })

watch(() => cookieStore.userAbilityRules, newValueUserAbilityRules => {
  if (newValueUserAbilityRules) {
    userAbilityRules.value = newValueUserAbilityRules
    let abilityValue = newValueUserAbilityRules
    if (typeof newValueUserAbilityRules === 'string') {
      abilityValue = JSON.parse(newValueUserAbilityRules)
    }
    ability.update(abilityValue)
    console.log('abilityNew', ability)
  }
}, { deep: true }, { immediate: true })

const userVisibility = ref(modalLoginOpen.isOpen)

watch(() => modalLoginOpen.isOpen, (newValue, oldValue) => {
  userVisibility.value = newValue
}, { immediate: true })

watch(() => userVisibility, (newValue, oldValue) => {
  modalLoginOpen.isOpen = newValue
}, { immediate: true })

const viewGetLocation = ref(false)
const permitido = ref(false)

const getLocation = () => {
  permitido.value = true;

  if (!navigator.geolocation) {
    setAlert('Geolocalização não é suportada por este navegador!', 'error', 'tabler-alert-triangle', 3000);
  } else {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        console.log('Position: ', position);

        let lat = position.coords.latitude;
        let long = position.coords.longitude;

        let endereco = {
          geolocation: {
            "lat": lat,
            "lng": long
          }
        }

        console.log('Endereço: ', endereco);

        let userDataCookie = useCookie('userData');
        let userEnderecoCookie = userDataCookie.value ? userDataCookie.value.endereco : null;
        let userEnderecoStore = userDataStore ? userDataStore.endereco : null;

        // Inicializa o objeto de usuário se ele ainda não existir
        if (!userDataCookie.value) {
          userDataCookie.value = {};
        }

        if (!userDataCookie.value.endereco) {
          userDataCookie.value.endereco = {};
        }

        // Atualiza o geolocation no cookie e na store
        if (userEnderecoCookie || userEnderecoStore) {
          if (userEnderecoCookie) {
            userDataCookie.value.endereco.geolocation = endereco.geolocation;
          }
          if (userEnderecoStore) {
            cookieStore.userData.endereco.geolocation = endereco.geolocation;
          }
        } else {
          userDataCookie.value.endereco = endereco;
          if (cookieStore && cookieStore.userData) {
            cookieStore.userData.endereco = endereco;
          }
        }

        const cookieOptions = {
          maxAge: 7 * 24 * 60 * 60
        }

        useCookie('permEndereco', cookieOptions).value = {
          geolocation: endereco.geolocation,
          permitiu: 'sim',
          dataPermissao: new Date()
        }

        viewGetLocation.value = false;

        router.go();

      },
      (err) => {
        console.error('Erro Localização: ', err);
        setAlert(`Erro ao obter localização!`, 'error', 'tabler-alert-triangle', 3000);
      }
    );
  }
};

const rejeitarLocalizacao = () => {
  const cookieOptions = {
    maxAge: 7 * 24 * 60 * 60
  }
  useCookie('permEndereco', cookieOptions).value = {
    permitiu: 'nao',
    dataPermissao: new Date()
  }

  permitido.value = false;
  viewGetLocation.value = false;
}

const viewPermissaoNotificacao = ref(false);
const pemitidoNotificacao = ref(false);
const tokenNotificacao = ref(null);
const isInstagramBrowser = /Instagram/i.test(navigator.userAgent);
const isFacebookBrowser = /FBAV/i.test(navigator.userAgent);

const getNotificacao = async () => {
  if (!userData || !userData?.value?.id || useCookie('tokenNotificacao').value == 'none' | useCookie('tokenNotificacao').value == 'ok') return

  pemitidoNotificacao.value = true;


  const cookieOptions = {
    maxAge: 7 * 24 * 60 * 60
  }

  const supported = await isSupported();

  if(!supported || isInstagramBrowser || isFacebookBrowser) {
    useCookie('tokenNotificacao', cookieOptions).value = 'none'
    return;
  } else {
    console.log('Notificações suportadas');
  }

  if (!('Notification' in window) || !supported || isInstagramBrowser || isFacebookBrowser) {
    setAlert('Este navegador não suporta notificações!', 'error', 'tabler-alert-triangle', 3000);
    useCookie('tokenNotificacao', cookieOptions).value = 'none'
  } else {
    try {
      const permission = await Notification.requestPermission();
      let notificationPermission = permission;
      console.log('Permissão:', permission);
      if (permission === "granted") {
        // Obter o token do FCM
        const lastToken = userData.value.tokenFCM;

        console.log('Token atual:', lastToken, tokenNotificacao.value);

        tokenNotificacao.value = await getToken(messaging, {
          vapidKey: "BBbebT4PPSIqjAbAKbdsZFLYr9izvRc5gSmoZxSIUC_0pMxoyZ6iCfZqv1TkrbgYyex7ktGCu34-Irq3lsYUTnY",
        });
        console.log("FCM Token:", tokenNotificacao.value);

        if (!lastToken || lastToken != tokenNotificacao.value) {
          // Atualizar o token no banco de dados
          try {
            const res = await $api('/users/update-token-firebase/' + userData.value.id, {
              method: 'PUT',
              body: {
                tokenFirebase: tokenNotificacao.value
              }
            });

            if (!res) return

            console.log('Token atualizado com sucesso:', res);
            let dataUser = userData.value;

            dataUser.tokenFCM = tokenNotificacao.value;
            userData.value = dataUser;
            useCookie('userData').value = dataUser;

            useCookie('tokenNotificacao', cookieOptions).value = 'ok'
          } catch (error) {
            console.error('Erro ao atualizar token:', error, error.response);
          }
        } else {
          console.log('Token já atualizado:', lastToken, tokenNotificacao.value);
          useCookie('tokenNotificacao', cookieOptions).value = 'ok'
        }
      } else {
        console.warn("Permissão de notificação negada!");
        useCookie('tokenNotificacao', cookieOptions).value = 'none'
      }
    } catch (error) {
      console.error("Erro ao solicitar permissão:", error);
    }
  }
};

if (userData && userData.value && userData.value.tokenFCM) {
  getNotificacao();
}

//Esperar 3 minutos para pedir a localização
setTimeout(async () => {
  const permEndereco = useCookie('permEndereco').value;

  try {
    const geolocationPermission = await navigator.permissions.query({ name: 'geolocation' });
    if (geolocationPermission.state === 'granted') {
      // Se a permissão já foi concedida, salva o cookie e não mostra o modal
      if (!permEndereco || permEndereco.permitiu !== 'sim') {
        useCookie('permEndereco', { maxAge: 7 * 24 * 60 * 60 }).value = {
          geolocation: null, // Você pode atualizar com valores reais após capturar a posição
          permitiu: 'sim',
          dataPermissao: new Date()
        };
      }
      viewGetLocation.value = false;
      return;
    }

    if (!permEndereco || !permEndereco.permitiu) {
      viewGetLocation.value = true;
    } else if (permEndereco.permitiu === 'nao') {
      const dataPermissao = new Date(permEndereco.dataPermissao);
      const dataAtual = new Date();
      const diff = Math.abs(dataAtual - dataPermissao);

      if (diff > 3 * 24 * 60 * 60 * 1000) { // 3 dias em milissegundos
        viewGetLocation.value = true;
      }
    }
  } catch (error) {
    console.error('Erro ao verificar permissão de geolocalização:', error);
    viewGetLocation.value = true;
  }
}, 180000); // 3 minutos em milissegundos


//Esperar 8 minutos para pedir a permissão de notificação
setTimeout(async () => {
  const tokenNotificacaoCookie = useCookie('tokenNotificacao').value;

  console.log('tokenNotificacaoCookie', tokenNotificacaoCookie);
  if (Notification.permission === 'granted') {
    // Se a permissão já foi concedida, salva o cookie e não mostra o modal
    if (!tokenNotificacaoCookie || tokenNotificacaoCookie !== 'ok') {
      useCookie('tokenNotificacao', { maxAge: 7 * 24 * 60 * 60 }).value = 'ok';
    }
    viewPermissaoNotificacao.value = false;
    return;
  }

  if ((!tokenNotificacaoCookie || tokenNotificacaoCookie !== 'none' && tokenNotificacaoCookie !== 'ok') &&
      userData?.value?.id &&
      !userData?.value?.tokenFCM) {
    viewPermissaoNotificacao.value = true;
  }
}, 480000);


const isOffline = ref(false)

onMounted(() => {
  window.addEventListener('offline', () => {
    isOffline.value = true
  })

  window.addEventListener('online', () => {
    isOffline.value = false
  })
})

onUnmounted(() => {
  window.removeEventListener('offline', () => {
    isOffline.value = true
  })
  window.removeEventListener('online', () => {
    isOffline.value = false
  })
})

const updateAvatar = (avatar) => {
  userData.value.avatar = avatar
}

const windowsWidth = window.innerWidth
  const isMobile = ref(false)

  if (windowsWidth < 768) {
    isMobile.value = true
  }
</script>

<template>

  <VDialog v-model="viewGetLocation" persistent maxWidth="400">
    <VCard>
      <VCardText>

        <div v-if="!permitido">
          <h2 class="text-center">
            <VIcon icon="tabler-map" class="mr-2" color="primary" />
            Sua localização
          </h2>
          <p class="mt-2 text-center">Para melhorar a sua experiência no AkkiPerto, permita que acessamos sua
            localização.</p>
          <div class="d-flex flex-row gap-3 align-center justify-center">
            <VBtn color="primary" @click="getLocation()">Permitir</VBtn>
            <VBtn variant="tonal" @click="rejeitarLocalizacao()">Depois</VBtn>
          </div>
        </div>

        <div v-if="permitido">
          <h2 class="text-center">
            <VIcon icon="tabler-check" class="mr-2" color="primary" />
            Localização permitida
          </h2>
          <p class="mt-2 text-center">Agora é só permitir quando o seu navegador perguntar e aproveitar o AkkiPerto.</p>
          <div class="d-flex flex-row gap-3 align-center justify-center">
            <VBtn color="primary" @click="viewGetLocation = false">Continuar</VBtn>
          </div>
        </div>

      </VCardText>
    </VCard>
  </VDialog>

  <VDialog v-model="viewPermissaoNotificacao" persistent maxWidth="400">
    <VCard>
      <VCardText>

        <div v-if="!pemitidoNotificacao">
          <h2 class="text-center">
            <VIcon icon="tabler-bell" class="mr-2" color="primary" />
            Notificações
          </h2>
          <p class="mt-2 text-center">
            Melhore sua experiência no AkkiPerto permitindo que enviamos notificações para você.
          </p>
          <div class="d-flex flex-row gap-3 align-center justify-center">
            <VBtn color="primary" @click="getNotificacao()">Permitir</VBtn>
            <VBtn variant="tonal"
              @click="useCookie('tokenNotificacao', { maxAge: 7 * 24 * 60 * 60 }).value = 'none'; viewPermissaoNotificacao = false;">
              Depois</VBtn>
          </div>
        </div>

        <div v-if="pemitidoNotificacao">
          <h2 class="text-center">
            <VIcon icon="tabler-check" class="mr-2" color="primary" />
            Notificações permitidas
          </h2>
          <p class="mt-2 text-center">Agora é só permitir quando o seu navegador perguntar e aproveitar as notificações
            do AkkiPerto.</p>
          <div class="d-flex flex-row gap-3 align-center justify-center">
            <VBtn color="primary" @click="viewPermissaoNotificacao = false">Continuar</VBtn>
          </div>
        </div>

      </VCardText>
    </VCard>
  </VDialog>

  <VDialog v-model="isOffline" persistent maxWidth="400">
    <VCard>
      <VCardText>
        <h2 class="text-center">
          <VIcon icon="tabler-wifi-off" class="mr-2" color="error" />
          Sem conexão
        </h2>
        <p class="mt-2 text-center">Você está sem conexão com a internet. Para utilizar os serviços do AkkiPerto, você
          precisa estar conectado.</p>
      </VCardText>
    </VCard>
  </VDialog>

  <VList class="overflow-visible pa-0" style="cursor: pointer;" :style="isMobile ? 'background-color: var(--color-akkiperto) !important;' : ''">
    <VListItem class="pa-0" @click="userVisibility = !userVisibility">
      <template #prepend>
        <VListItemAction start>
          <VBadge color="white" bordered location="bottom left" icon="tabler-menu-2" style="cursor: pointer;"
            class="badge-ver-perfil">
            <VAvatar :color="!(userData && userData.avatar) ? isMobile ? 'white' : 'primary' : undefined"
              :variant="!(userData && userData.avatar) ? 'tonal' : undefined">
              <VImg v-if="userData && userData.avatar" :src="userData.avatar" cover />
              <VIcon v-else icon="tabler-user" />
            </VAvatar>
          </VBadge>
        </VListItemAction>
      </template>
    </VListItem>

    <UserDialog v-if="userVisibility" :userData="userData" v-model:isDrawerOpen="userVisibility"
      @updateAvatar="updateAvatar" />
  </VList>
  <!-- !SECTION -->
</template>

<style>
.layout-vertical-nav-collapsed .icone-trocar {
  display: none !important;
}

.layout-vertical-nav.hovered .icone-trocar {
  display: block !important;
}
</style>