<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useModalLoginOpen } from '@layouts/stores/config'
import { useAlert } from '@/composables/useAlert'

import logo from "@images/logo.png"

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

// Configurações iniciais
const router = useRouter();
const userData = useCookie("userData").value;
//console.log(userData);
const loading = ref(false);
const loadingMore = ref(false);
const viewLoadMore = ref(false);
const drawerFilter = ref(false);
//const userName = userData.fullName;
const isLoading = ref(true);
const inscrito = ref({});
const apiData = ref(null);
const dadosCandidaturaPrevia = ref(null);
const idVagaCandidaturaPrevia = ref(null);
const candidaturas = ref(null);
const checkedValuesFormato = ref([]);
const checkedValuesContratacao = ref([]);
const checkedValuesArea = ref([]);
const checkedMyCandid = ref(false);
const areas = ref([]);
const dataInicio = ref("");
const dataFinal = ref("");
const modelModalDatePickerPrimeira = ref(false);
const modelModalDatePickerSegunda = ref(false);
const modelModalConfirmarCandidatura = ref(false);
const modelDatePicker = ref(null);

const page = ref(1);

const loadMoreVagas = async () => {
  page.value++;
  await buscarTodos();
};

// Ícones
const icon = "tabler-briefcase";
const icon2 = "tabler-map-pin";
const icon3 = "tabler-device-laptop";
const icon4 = "tabler-eye";
const icon5 = "tabler-search";

const isMobile = ref(window.innerWidth < 768)

//Formulário de busca
const filtroBusca = {
  dados: "",
};

// Funções auxiliares
const truncateTitle = (title) => {
  if (!title) return "";
  //Remover HTML do texto
  title = title.replace(/<[^>]*>?/gm, ' ');
  let quantidade = isMobile.value ? 150 : 450;
  return title?.length > quantidade ? title.substring(0, quantidade) + "..." : title;
};

const formatDate = (date) => {
  return new Date(date).toLocaleDateString("pt-BR");
};

const detalhesVaga = (id) => {
  router.push({ name: "DetalhesVaga", params: { slug: id } });
};

const pageCandidatar = async (id) => {

  if (!userData || !userData.id) {
    setAlert("Você precisa estar logado para se candidatar a uma vaga!", "error", "tabler-alert-triangle", 3000);
    modalLoginOpen.isOpen = true
    return;
  }

  //Achar a vaga que o usuário clicou e alterar loadingCandidatar
  const vaga = apiData.value.find((vaga) => vaga.id === id);
  vaga.loadingCandidatar = true;


  router.push({ name: "DetalhesVaga", params: { slug: vaga.slug } });

  vaga.loadingCandidatar = false;
};

const loadingCandidatar = ref(false);

const confirmCandidaturaPrevia = async () => {
  if (!userData || !userData.id) {
    setAlert("Você precisa estar logado para se candidatar a uma vaga!", "error", "tabler-alert-triangle", 3000);
    modalLoginOpen.isOpen = true
    return;
  }

  loadingCandidatar.value = true;

  try {
    // console.log(dadosCandidaturaPrevia);
    await $api(`/vagas/candidaturaPrevia/`, {
      method: "POST",
      body: {
        userId: userData.id,
        vagaId: vaga.value.id,
      },
    }).then((response) => {
      console.log(response);
      vaga.value.inscrito = true;
      modelModalConfirmarCandidatura.value = false;

      setAlert("Candidatura confirmada com sucesso, você será informado sobre o processo via email! Boa sorte!", "success", "tabler-check", 6000);
    });
  } catch (error) { console.error("Erro ao confirmar candidatura prévia:", error); }

  loadingCandidatar.value = false;
}

const editarDadosCandidatura = () => {
  router.push({ name: "meuCurriculo", query: { vaga: vaga.slug } });
}

watch([checkedValuesFormato, checkedValuesContratacao, checkedValuesArea, checkedMyCandid], async () => {
  if(isMobile.value) return
  buscarTodos();
});

const clearFilters = () => {
  checkedValuesFormato.value = [];
  checkedValuesContratacao.value = [];
  checkedValuesArea.value = [];
  checkedMyCandid.value = false;
  dataInicio.value = "";
  dataFinal.value = "";
  drawerFilter.value = false;
};

const buscarTodosMobile = async () => {
  drawerFilter.value = false;
  buscarTodos();
};

const buscarTodos = async () => {
  try {

    if (page.value === 1) {
      isLoading.value = true;
    } else {
      loadingMore.value = true;
    }

    let body = {};

    body.page = page.value;
    body.prazo = true;

    if (dataInicio.value instanceof Date) {
      body.dataInicio = dataInicio.value.toLocaleDateString("en-CA");
    }

    if (dataFinal.value instanceof Date) {
      body.dataFim = dataFinal.value.toLocaleDateString("en-CA");
    }

    if (checkedValuesFormato.value.length > 0) {
      body.formato = checkedValuesFormato.value;
    }

    if (checkedValuesContratacao.value.length > 0) {
      body.contratacao = checkedValuesContratacao.value;
    }

    if (checkedValuesArea.value.length > 0) {
      body.area = checkedValuesArea.value;
    }

    if (checkedMyCandid.value) {
      body.myCandid = true;
    }

    if (stateFilter.value) {
      body.state = stateFilter.value
    }

    if (textFilter.value) {
      body.text = textFilter.value
    }

    let data = null;
    if (userData && userData.id !== undefined && userData.id !== null) {
      data = userData
      body.userData = JSON.stringify(data)
    } else if (useCookie('permEndereco').value && useCookie('permEndereco').value.geolocation !== undefined && useCookie('permEndereco').value.geolocation !== null) {
      let perm = useCookie('permEndereco').value
      data = {
        endereco: { geolocation: perm.geolocation }
      }
      body.userData = JSON.stringify(data)
    }


    const response = await $api("/vagas/getApprovedUsers", {
      method: "POST",
      body: body,
    });

    if (!response) {
      isLoading.value = false;
      return;
    }

    console.log('Resposne API', response);

    if (userData && userData.id !== undefined && userData.id !== null) {
      for (let vagai of response.vagas) {
        if (vagai.candidaturas.length > 0) {
          for (let candidatura of vagai.candidaturas) {
            if (candidatura.userId === userData.id) {
              vagai.inscrito = true;
            }
          }
        }
      }
    }

    if (page.value === 1) {
      /* areas.value = response.areas; */

      apiData.value = response.vagas.sort(
        (a, b) => new Date(b.createdAt) - new Date(a.createdAt)
      );
    } else {
      apiData.value = apiData.value.concat(response.vagas.sort(
        (a, b) => new Date(b.createdAt) - new Date(a.createdAt)
      ));

      /*  for(let area of response.areas) {
         if(!areas.value.includes(area)) {
           areas.value.push(area);
         }
       } */
    }

    if (apiData.value.length >= response.totalVagas) {
      viewLoadMore.value = false;
    } else {
      viewLoadMore.value = true;
    }

    isLoading.value = false;
    loadingMore.value = false;
  } catch (error) {
    console.error("Erro ao obter dados da API:", error, error.response);
  }
};

const buscarCandidaturas = async () => {
  try {
    const response = await $api(`/vagas/candidaturasAll/${userData.id}`, {
      method: "GET",
    });
    candidaturas.value = response;
    //console.log('Buscar Candidaturas', candidaturas, 'Response', response);
  } catch (error) {
    console.error("Erro ao obter dados da API:", error);
  }
};

onMounted(async () => {
  await buscarTodos();
});

watch(
  () => dataFinal.value,
  async () => {
    await buscarTodos();
  }
);

const onConfirmDatePicker = () => {
  modelModalDatePickerPrimeira.value = false;
  modelModalDatePickerSegunda.value = true;
};

const onConfirmDatePickerFinal = () => {
  modelModalDatePickerPrimeira.value = false;
  modelModalDatePickerSegunda.value = false;
};

const onCancelDatePicker = () => {
  modelModalDatePickerPrimeira.value = false;
  modelModalDatePickerSegunda.value = false;
};

const onCancelConfirmCandidatura = () => {
  modelModalConfirmarCandidatura.value = false;
};


const stateFilter = ref(/*userData?.endereco?.state ??*/ 'RJ')
const textFilter = ref('')

const estados = [
  /*{ value: 'AC', text: 'Acre' },
  { value: 'AL', text: 'Alagoas' },
  { value: 'AP', text: 'Amapá' },
  { value: 'AM', text: 'Amazonas' },
  { value: 'BA', text: 'Bahia' },
  { value: 'CE', text: 'Ceará' },
  { value: 'DF', text: 'Distrito Federal' },
  { value: 'ES', text: 'Espírito Santo' },
  { value: 'GO', text: 'Goiás' },
  { value: 'MA', text: 'Maranhão' },
  { value: 'MT', text: 'Mato Grosso' },
  { value: 'MS', text: 'Mato Grosso do Sul' },
  { value: 'MG', text: 'Minas Gerais' },
  { value: 'PA', text: 'Pará' },
  { value: 'PB', text: 'Paraíba' },
  { value: 'PR', text: 'Paraná' },
  { value: 'PE', text: 'Pernambuco' },
  { value: 'PI', text: 'Piauí' },*/
  { value: 'RJ', text: 'Macaé' },
  /*{ value: 'RN', text: 'Rio Grande do Norte' },
  { value: 'RS', text: 'Rio Grande do Sul' },
  { value: 'RO', text: 'Rondônia' },
  { value: 'RR', text: 'Roraima' },
  { value: 'SC', text: 'Santa Catarina' },
  { value: 'SP', text: 'São Paulo' },
  { value: 'SE', text: 'Sergipe' },
  { value: 'TO', text: 'Tocantins' },*/
]

</script>

<template>

  <v-dialog transition="dialog-top-transition" v-model="modelModalDatePickerPrimeira" width="auto">
    <v-date-picker color="primary" title="Escolha a data de início" header="Selecione" inputMode="calendar" hideActions
      v-model="dataInicio" @update:model-value="onConfirmDatePicker">
    </v-date-picker>
    <div class="text-center">
      <v-btn slim icon="tabler-circle-x" variant="outline" color="dark" @click="onCancelDatePicker"
        style="font-size: 2rem" />
    </div>
  </v-dialog>

  <v-dialog transition="dialog-top-transition" v-model="modelModalDatePickerSegunda" width="auto">
    <v-date-picker color="primary" title="Escolha a data Final" header="Selecione" inputMode="calendar" hideActions
      v-model="dataFinal" @update:model-value="onConfirmDatePickerFinal">
    </v-date-picker>
    <div class="text-center">
      <v-btn slim icon="tabler-circle-x" variant="outline" color="dark" @click="onCancelDatePicker"
        style="font-size: 2rem" />
    </div>
  </v-dialog>

  <VRow :class="!isMobile ? 'mx-4' : ''">
    <VCol cols="12" sm="2" v-if="!isMobile">
      <p class="mb-3 font-weight-bold" style="font-size: 15px;">
        <VIcon icon="tabler-filter" class="mr-1" /> Refine sua busca
      </p>

      <p class="mb-1 mt-5 font-weight-bold">Data de publicação</p>
      <div v-if="dataInicio && dataFinal">
        <p>
          {{ dataInicio.toLocaleDateString("pt-BR") }} -
          {{ dataFinal.toLocaleDateString("pt-BR") }}
          <VIcon icon="tabler-x" @click="dataInicio = ''; dataFinal = ''" />
        </p>
      </div>
      <v-text-field v-model="modelDatePicker" v-else label="Filtro por período"
        prepend-inner-icon="tabler-calendar-month" readonly @click="modelModalDatePickerPrimeira = true" />

      <p class="mb-1 my-7 font-weight-bold">Formato de trabalho</p>
      <div>
        <v-checkbox label="Presencial" value="Presencial" v-model="checkedValuesFormato"></v-checkbox>
        <v-checkbox label="Híbrido" value="Híbrido" v-model="checkedValuesFormato"></v-checkbox>
        <v-checkbox label="Remoto" value="Remoto" v-model="checkedValuesFormato"></v-checkbox>
      </div>

      <p class="mb-1 my-7 font-weight-bold">Tipo de contratação</p>
      <div>
        <v-checkbox label="Temporário" value="Temporário" v-model="checkedValuesContratacao"></v-checkbox>
        <v-checkbox label="Freelancer" value="Freelancer" v-model="checkedValuesContratacao"></v-checkbox>
        <v-checkbox label="Efetivo/CLT" value="Efetivo/CLT" v-model="checkedValuesContratacao"></v-checkbox>
        <v-checkbox label="Contrato Intermitente" value="Contrato Intermitente"
          v-model="checkedValuesContratacao"></v-checkbox>
        <v-checkbox label="Não Efetivo" value="Não Efetivo" v-model="checkedValuesContratacao"></v-checkbox>
      </div>

      <!--  <v-fade-transition>
        <div v-if="areas?.length > 0">
          <p class="mb-1 my-7 font-weight-bold">Áreas de atuação</p>
          <div>
            <v-checkbox v-for="area in areas" :key="area" :label="area" :value="area"
              v-model="checkedValuesArea"></v-checkbox>
          </div>
        </div>
      </v-fade-transition> -->

      <VBtn class="mt-5 w-100" color="primary" variant="tonal" @click="clearFilters()"
        v-if="checkedValuesFormato.length > 0 || checkedValuesContratacao.length > 0 || checkedValuesArea.length > 0 || dataInicio || dataFinal">
        Limpar filtros
      </VBtn>

      <VDivider class="my-5" v-if="userData && userData.id" />

      <v-checkbox label="Minhas Candidaturas" v-model="checkedMyCandid" v-if="userData && userData.id"/>

    </VCol>
    <VCol cols="12" sm="10">

      <VCard class="mb-5 w-100">
        <VCardText class="py-5">
          <v-row class="d-flex align-center py-0">
            <v-col class="v-col-12 v-col-md-4">
              <VSelect v-model="stateFilter" variant="outlined" :items="estados" item-title="text" item-value="value"
                placeholder="Escolha o estado" @update:modelValue="buscarTodos()" :loading="loading"
                prepend-inner-icon="tabler-map-pin" class="select-filter-events" />
            </v-col>

            <v-col class="v-col-12 v-col-md-6">
              <v-text-field class="select-filter-events" v-model="textFilter" label="Qual vaga você quer buscar?"
                :disabled="loading" clearable prepend-inner-icon="tabler-search" @click:clear="buscarTodos()" />
            </v-col>

            <v-col class="v-col-12 v-col-md-2 pl-0">
              <VBtn variant="elevated" class="select-filter-events w-100" color="primary" @click="buscarTodos()"
                :disabled="loading">
                Buscar
              </VBtn>
            </v-col>

          </v-row>
        </VCardText>
      </VCard>

      <v-row class="mb-2" v-if="isMobile">
        <v-col class="v-col-12" align="end">
          <v-btn variant="text" color="primary" @click="drawerFilter = true">
            <VIcon icon="tabler-filter" class="mr-2" />
            Refinar busca
          </v-btn>
        </v-col>
      </v-row>

      <v-dialog v-model="drawerFilter" location="bottom" temporary class="pa-5" v-if="isMobile"
        style="min-height: 90vh;">
        <VCard>

          <VCardText>
            <p class="mb-3 mt-3 font-weight-bold" style="font-size: 15px;">
              <VIcon icon="tabler-filter" class="mr-1" /> Refine sua busca
            </p>
            <VIcon icon="tabler-x" class="position-absolute" style="top: 15px; right: 15px; cursor: pointer;"
              @click="drawerFilter = false" size="25" />
            <p class="mb-1 mt-5 font-weight-bold">Data de publicação</p>
            <div v-if="dataInicio && dataFinal">
              <p>
                {{ dataInicio.toLocaleDateString("pt-BR") }} -
                {{ dataFinal.toLocaleDateString("pt-BR") }}
                <VIcon icon="tabler-x" @click="dataInicio = ''; dataFinal = ''" />
              </p>
            </div>
            <v-text-field v-model="modelDatePicker" v-else label="Filtro por período"
              prepend-inner-icon="tabler-calendar-month" readonly @click="modelModalDatePickerPrimeira = true" />
            <p class="mb-1 my-7 font-weight-bold">Formato de trabalho</p>
            <div>
              <v-checkbox label="Presencial" value="Presencial" v-model="checkedValuesFormato"></v-checkbox>
              <v-checkbox label="Híbrido" value="Híbrido" v-model="checkedValuesFormato"></v-checkbox>
              <v-checkbox label="Remoto" value="Remoto" v-model="checkedValuesFormato"></v-checkbox>
            </div>
            <p class="mb-1 my-7 font-weight-bold">Tipo de contratação</p>
            <div>
              <v-checkbox label="Temporário" value="Temporário" v-model="checkedValuesContratacao"></v-checkbox>
              <v-checkbox label="Freelancer" value="Freelancer" v-model="checkedValuesContratacao"></v-checkbox>
              <v-checkbox label="Efetivo/CLT" value="Efetivo/CLT" v-model="checkedValuesContratacao"></v-checkbox>
              <v-checkbox label="Contrato Intermitente" value="Contrato Intermitente"
                v-model="checkedValuesContratacao"></v-checkbox>
              <v-checkbox label="Não Efetivo" value="Não Efetivo" v-model="checkedValuesContratacao"></v-checkbox>
            </div>
            <VDivider class="my-5" />
            <v-checkbox label="Minhas Candidaturas" v-model="checkedMyCandid" v-if="userData && userData.id"></v-checkbox>
            <VBtn class="mt-5 w-100" color="primary" @click="buscarTodosMobile()" style="height: 50px;">
              Buscar
            </VBtn>
            <VBtn class="mt-5 w-100" color="primary" variant="tonal" @click="clearFilters()"
              v-if="checkedValuesFormato.length > 0 || checkedValuesContratacao.length > 0 || checkedValuesArea.length > 0 || dataInicio || dataFinal">
              Limpar filtros
            </VBtn>
          </VCardText>

        </VCard>
      </v-dialog>

      <div class="mt-5">
        <p v-if="isLoading" class="w-100">
          <VProgressLinear indeterminate color="primary" height="5" />
        </p>

        <VRow v-if="apiData?.length > 0 && !isLoading">
          <VCol cols="12" v-for="vaga in apiData" :key="vaga.id">
            <VCard class="pa-0">
              <VCardText class="pa-4 cursor-pointer position-relative">

                <div class="d-flex flex-row justify-space-between align-center mb-3" @click="detalhesVaga(vaga.slug)">
                  <p class="mb-0" style="font-size: 13px;">
                    <VIcon icon="tabler-clock" size="13" style="margin-top: -2px;" /> Publicada em {{
                      formatDate(vaga.createdAt) }}
                  </p>
                  <VChip color="primary" label style="font-size: 14px; width: fit-content !important;"
                    v-if="vaga.distance">
                    {{ vaga.distance.replace(' ', '') }} de você
                  </VChip>
                </div>

                <div class="d-flex flex-row align-center gap-2 mb-5" @click="detalhesVaga(vaga.slug)">
                  <img :src="vaga.logo" alt="Logo da Empresa" width="30px" height="30px"
                    v-if="vaga.logo && vaga.logo !== 'none'" />
                  <img :src="logo" alt="Logo da Empresa" width="30px" height="30px"
                    v-if="!vaga.logo || vaga.logo == 'none'" />
                  <div>
                    <h3 class="font-weight-medium mb-0"
                      style="overflow: hidden; text-overflow: ellipsis; color: var(--color-akkiperto);">
                      {{ vaga.funcao }}
                    </h3>
                    <p class="mb-0" style="font-size: 13px;">
                      {{ vaga.empresa }}
                    </p>
                  </div>
                </div>

                <p class="mb-4" style="font-size: 13px;" v-if="!isMobile" @click="detalhesVaga(vaga.slug)">
                  Descrição: {{ truncateTitle(vaga.descricao) }}
                </p>

                <div class="d-flex flex-wrap gap-3 mb-2" @click="detalhesVaga(vaga.slug)">
                  <p class="mb-0 font-weight-bold">
                    <VIcon :icon="icon2" class="mr-1" />
                    {{ vaga.addressVaga?.city + '/' + vaga.addressVaga?.state }}
                  </p>

                  <p class="mb-0">
                    <VIcon :icon="icon" class="mr-1" />
                    {{ vaga.tipoVaga }}
                  </p>

                  <p class="mb-0">
                    <VIcon :icon="icon3" class="mr-1" />
                    {{ vaga.formaContrato }}
                  </p>

                </div>

                <div class="d-flex flex-row align-center mt-4 mb-2 w-100">
                  <VBtn :disabled="vaga.inscrito" @click="vaga.inscrito ? null : pageCandidatar(vaga.id)"
                    color="primary" class="w-100" style="height: 40px;" :loading="vaga.loadingCandidatar">
                    <p class="mb-0" style="text-transform: none !important;">
                      {{ vaga.inscrito ? "Inscrito" : "Candidatar-se" }}</p>
                  </VBtn>
                </div>

              </VCardText>
            </VCard>
          </VCol>
        </VRow>

        <div v-if="apiData?.length === 0 && !isLoading">
          <p>Nenhuma vaga encontrada</p>
        </div>

      </div>

      <div class="mt-8" v-if="apiData?.length > 1 && viewLoadMore">
        <VBtn color="primary" class="w-100" variant="tonal" @click="loadMoreVagas" style="height: 50px;"
          :loading="loadingMore">
          MOSTRAR MAIS VAGAS
        </VBtn>
      </div>

    </VCol>
  </VRow>

</template>
