<script setup>
import { useModalLoginOpen } from '@layouts/stores/config'
import { useAlert } from '@/composables/useAlert'
import { watch } from 'vue';

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

const loading = ref(true)
const router = useRouter()
const route = useRoute()

const idVaga = ref(route.params.id);
const userData = useCookie("userData").value;
const userGetData = ref({});

const vaga = ref([])
const dadosCandidatura = ref([])

const inscrito = ref(false)

const formacao = ref('')
const quemsou = ref('')
const exp = ref(null)
const expTime = ref(null)
const curriculo = ref(null)
const address_cep = ref('')
const address_street = ref('')
const address_city = ref('')
const address_state = ref('')
const address_neighborhood = ref('')
const address_complement = ref('')
const address_number = ref('')

if(!idVaga) {
  setAlert('Ocorreu um erro ao encontrar a vaga.', 'error', 'tabler-alert-triangle', 4000)
  router.push('/vagas')
}

if (!userData || !userData.id) {
  setAlert('Você precisa estar logado para se candidatar a vaga', 'error', 'tabler-alert-triangle', 4000)
  modalLoginOpen.value = true
}

const getUser = async () => {
  try {
    const response = await $api(`/users/get/${userData.id}`, {
      method: 'GET',
    })

    if (!response) return

    userGetData.value = response
    console.log('Usuário Dados:', response)

    await getCep()
    await cidadesList(response.endereco?.state)

    loading.value = false

  } catch (error) {
    console.log('Erro ao buscar usuário:', error, error.response)
    loading.value = false
  }

}

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: 'Rio de Janeiro' },
  { 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' },
]

const cidades = ref([])

const cidadesList = async (estado) => {
  if (!estado) {
    estado = 'RJ'
  }

  try {
    const res = await $api(`/users/cidades/${estado}`, { method: "GET" });

    if (!res) return;

    //console.log(res)
    cidades.value = res

  } catch (error) {
    console.error('Erro ao buscar cidades: ', error);
    console.error('Erro ao buscar cidades: ', error.response);
  }
}

const getCep = async () => {
  if (address_cep.value?.length === 9) {
    try {
      const res = await $api(`/users/cep/${address_cep.value}`, { method: "GET" });

      if (!res) return;

      console.log(res)

      address_street.value = res.logradouro
      address_neighborhood.value = res.bairro
      address_city.value = res.localidade
      address_state.value = res.uf
      cidadesList(res.uf)

    } catch (error) {
      console.error('Erro ao buscar CEP: ', error);
      console.error('Erro ao buscar CEP: ', error.response);
      setAlert('CEP não encontrado! Tente novamente.', 'error', 'tabler-alert-triangle', 4000)
    }
  }
}

const submitForm = async () => {
  let file = curriculo.value[0];

  if (!file) {
    setAlert("Por favor, selecione um currículo.", "error", "tabler-alert-triangle", 4000);
    return;
  }

  if (!formacao.value || !quemsou.value || !address_cep.value || !address_street.value || !address_city.value || !address_state.value
    || !address_neighborhood.value || !address_number.value || formacao == '' || quemsou == '' || address_cep == '' || address_street == ''
    || address_city == '' || address_state == '' || address_number == '' || address_neighborhood == '' || exp.value == null || (exp.value == 'Sim' && expTime.value == null)) {
    setAlert("Por favor, preencha todos os campos.", "error", "tabler-alert-triangle", 4000);
    return;
  }

  loading.value = true;

  console.log({
    userId: userData.id,
    formacao: formacao.value,
    quemsou: quemsou.value,
    exp: exp.value,
    expTime: expTime.value,
    curriculo: file,
    address_cep: address_cep.value,
    address_street: address_street.value,
    address_city: address_city.value,
    address_state: address_state.value,
    address_neighborhood: address_neighborhood.value,
    address_complement: address_complement.value,
    address_number: address_number.value,
  })

  const formData = new FormData();

  formData.append("userId", userData.id);
  formData.append("formacao", formacao.value);
  formData.append("quemsou", quemsou.value);
  formData.append("exp", exp.value);
  formData.append("expTime", expTime.value);
  formData.append("curriculo", file);
  formData.append("address_cep", address_cep.value);
  formData.append("address_street", address_street.value);
  formData.append("address_city", address_city.value);
  formData.append("address_state", address_state.value);
  formData.append("address_neighborhood", address_neighborhood.value);
  formData.append("address_complement", address_complement.value);
  formData.append("address_number", address_number.value);

  try {
    $api(`/vagas/candidatar/${idVaga.value}`, {
      method: "POST",
      body: formData,
    }).then(() => {
      setAlert("Candidatura realizada com sucesso. Boa sorte!", "success", "tabler-circle-check", 4000);
      router.push("/vagas");
    });
    inscrito.value = true;
  } catch (error) {
    console.error("Erro ao se candidatar:", error);
  }

}

const getVaga = async () => {
  const userId = userData ? userData.id : null;

  console.log('userId: ', userId); // userId: 'undefined
  console.log('userData: ', userData); // userData: null

  try {
    const response = await $api(`/vagas/${idVaga.value}`, { method: "GET" });
    if (userId) {
      const responseCandidatura = await $api(
        `/vagas/ultimaCandidaturaCompleto/${userId}`,
        { method: "GET" }
      );

      console.log('responseCandidatura: ', responseCandidatura); // responseCandidatura: null
      if (responseCandidatura !== 'Nenhuma candidatura encontrada para este usuário') {
        dadosCandidatura.value = responseCandidatura;

        address_cep.value = dadosCandidatura.endereco.cep;
        address_street.value = dadosCandidatura.endereco.street;
        address_state.value = dadosCandidatura.endereco.state;
        address_city.value = dadosCandidatura.endereco.city;
        address_neighborhood.value = dadosCandidatura.endereco.neighborhood;
        address_complement.value = dadosCandidatura.endereco.complement;
        address_number.value = dadosCandidatura.endereco.number;
        formacao.value = dadosCandidatura.formacao;
        quemsou.value = dadosCandidatura.quemsou;
        exp.value = dadosCandidatura.exp;
        expTime.value = dadosCandidatura.expTime;
      }
    }
    vaga.value = response;

    inscrito.value = vaga?.candidaturas?.some(
      (candidatura) => candidatura.userId === userData.id
    );

    console.log('Vaga: ', vaga);
  } catch (error) {
    console.error(`Erro na requisição: ${error}, ${error.response}`);
  }
}

const step = ref(1);

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

watch(() => window.innerWidth, (width) => {
  if (width < 768) {
    isMobile.value = true
  } else {
    isMobile.value = false
  }
})

const prevStep = () => {
  if (step.value == 1) return
  step.value--;
}

const nextStep = () => {

  if(step.value == 1 ) {
    if (!address_cep.value || !address_street.value || !address_city.value || !address_state.value || !address_neighborhood.value || !address_number.value
      || address_cep == '' || address_street == '' || address_city == '' || address_state == '' || address_neighborhood == '' || address_number == '') {
      setAlert('Por favor, preencha todos os campos!', 'error', 'tabler-alert-triangle', 4000)
      return
    }
  }

  if(step.value == 2 ) {
    if (!formacao.value || !quemsou.value || formacao == '' || quemsou == '') {
      setAlert('Por favor, preencha todos os campos!', 'error', 'tabler-alert-triangle', 4000)
      return
    }
  }

  if (step.value == 3) {
    submitForm();
    return
  }
  step.value++
}

onMounted(async () => {
  await getVaga()

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

  await getUser()

  address_cep.value = userGetData?.value?.endereco?.cep ? userGetData?.value?.endereco?.cep : ''
  address_street.value = userGetData?.value?.endereco?.street ? userGetData?.value?.endereco?.street : ''
  address_city.value = userGetData?.value?.endereco?.city ? userGetData?.value?.endereco?.city : ''
  address_state.value = userGetData?.value?.endereco?.state ? userGetData?.value?.endereco?.state : ''
  address_neighborhood.value = userGetData?.value?.endereco?.neighborhood ? userGetData?.value?.endereco?.neighborhood : ''
  address_complement.value = userGetData?.value?.endereco?.complement ? userGetData?.value?.endereco?.complement : ''
  address_number.value = userGetData?.value?.endereco?.number ? userGetData?.value?.endereco?.number : ''

});

const componentCheckValue = (value) => {
  if (!value) return '<span class="text-error d-flex align-center ml-2">Não informado <i class="tabler-alert-circle text-error text-h4 ml-2" /></span>';

  return `<span class="text-success d-flex align-center ml-2">${value} <i class="tabler-circle-check text-success text-h4 ml-2" /></span>`;
}


</script>

<template>
  <h3>Candidate-se a vaga de {{ vaga?.funcao }}</h3>
  <p>Preencha o seu cadastro a baixo para concorrer a essa vaga.</p>

  <VForm @submit.prevent="">
    <VStepper v-model="step" :mobile="isMobile" :touch="false" :showArrows="false" :mandatory="true" color="primary"
      hide-actions>

      <template v-slot:default>
        <v-stepper-header>
          <v-stepper-item :step="1" :value="1" :complete="step > 1" edit-icon="tabler-map-pin" editable
            :color="step > 1 ? 'success' : step == 1 ? 'primary' : '#4242424d'">
            <p v-if="!isMobile" class="mb-0" :style="step == 1 ? 'font-weight: 600' : ''">Endereço</p>
          </v-stepper-item>

          <v-divider></v-divider>

          <v-stepper-item :step="2" :value="2" :complete="step > 2" edit-icon="tabler-briefcase" editable
            :color="step > 2 ? 'success' : step == 2 ? 'primary' : '#4242424d'">
            <p v-if="!isMobile" class="mb-0" :style="step == 2 ? 'font-weight: 600' : ''">Sobre você</p>
          </v-stepper-item>

          <v-divider></v-divider>

          <v-stepper-item :step="3" :value="3" :complete="step > 3" edit-icon="tabler-file-text" editable
            :color="step > 3 ? 'success' : step == 3 ? 'primary' : '#4242424d'">
            <p v-if="!isMobile" class="mb-0" :style="step == 3 ? 'font-weight: 600' : ''">Confirmar candidatura</p>
          </v-stepper-item>
        </v-stepper-header>


        <v-stepper-window v-if="step == 1">
          <VRow>
            <VCol cols="12" md="6">
              <VLabel>
                <VIcon icon="tabler-home" class="mr-2" /> CEP
              </VLabel>
              <VTextField v-model="address_cep" outlined required placeholder="Informe seu CEP" v-mask="'#####-###'"
                :rules="[requiredValidator]" :loading="loading" @keyup="getCep" />
            </VCol>

            <VCol cols="12" md="6">
              <VLabel>
                <VIcon icon="tabler-map-pins" class="mr-2" /> Rua/Avenida/Logradouro
              </VLabel>
              <VTextField v-model="address_street" outlined required
                placeholder="Informe o nome da rua/avenida/logradouro" :rules="[requiredValidator]"
                :loading="loading" />
            </VCol>


            <VCol cols="12" md="6">
              <VLabel>
                <VIcon icon="tabler-number" class="mr-2" /> Número
              </VLabel>
              <VTextField v-model="address_number" outlined required placeholder="Informe o número"
                :rules="[requiredValidator]" :loading="loading" />
            </VCol>

            <VCol cols="12" md="6">
              <VLabel>
                <VIcon icon="tabler-align-box-left-bottom" class="mr-2" /> Complemento
              </VLabel>
              <VTextField v-model="address_complement" outlined placeholder="Informe o complemento"
                :loading="loading" />
            </VCol>

            <VCol cols="12" md="6">
              <VLabel>
                <VIcon icon="tabler-map-2" class="mr-2" /> Bairro
              </VLabel>
              <VTextField v-model="address_neighborhood" outlined required placeholder="Informe o bairro"
                :rules="[requiredValidator]" :loading="loading" />
            </VCol>

            <VCol cols="12" md="6">
              <VLabel>
                <VIcon icon="tabler-building" class="mr-2" /> Cidade
              </VLabel>
              <VSelect v-model="address_city" variant="outlined" :items="cidades" item-title="text" item-value="value"
                :placeholder="cidades.length === 0 ? 'Selecione um estado antes' : 'Selecione a cidade'"
                :disabled="cidades.length === 0 && address_city === '' ? true : false" required
                :rules="[requiredValidator]" :loading="loading" />

            </VCol>

            <VCol cols="12" md="6">
              <VLabel>
                <VIcon icon="tabler-flag-2" class="mr-2" /> Estado
              </VLabel>
              <VSelect v-model="address_state" variant="outlined" :items="estados" item-title="text" item-value="value"
                placeholder="Selecione o estado" @update:modelValue="cidadesList(address_state)" required
                :rules="[requiredValidator]" :loading="loading" />
            </VCol>
          </VRow>

        </v-stepper-window>

        <v-stepper-window v-if="step == 2">
          <VRow>
            <VCol cols="12">
              <VLabel>
                <VIcon icon="tabler-school" class="mr-2" /> Formação
              </VLabel>

              <p class="mb-2" style="font-size: 13px;">Insira a sua formação para aumentar suas chances. Preencha com o
                máximo de detalhes
                possíveis. Ex.: Graduação em Administração de Empresas pela Universidade Federal de São Paulo.</p>

              <VTextField v-model="formacao" outlined required placeholder="Informe sua formação"
                :rules="[requiredValidator]" :loading="loading" />
            </VCol>

            <VCol cols="12">
              <VLabel>
                <VIcon icon="tabler-user" class="mr-2" /> Quem Sou
              </VLabel>

              <p class="mb-2" style="font-size: 13px;">Fale sobre você para aumentar suas chances. Preencha com o máximo
                de detalhes como suas experiências
                profissionais, habilidades e conhecimentos.
                Ex.: Sou um profissional de marketing digital com 5 anos de experiência em
                empresas de tecnologia.</p>

              <VTextarea v-model="quemsou" outlined rows="6" required placeholder="Fale um pouco sobre você"
                label="Quem Sou" :rules="[requiredValidator]" :loading="loading" />
            </VCol>

            <!--Experiêncioa-->
            <VCol cols="12">
              <VLabel>
                <VIcon icon="tabler-tools" class="mr-2" /> Experiência
              </VLabel>

              <p class="mb-1 mt-2 font-weight-bold" style="font-size: 13px;">Possuí experiência na área?</p>
              <VSelect v-model="exp" variant="outlined" :items="['Sim', 'Não']" required
                placeholder="Selecione uma opção" :rules="[requiredValidator]" :loading="loading" />

              <p class="mb-1 mt-3 font-weight-bold" style="font-size: 13px;" v-if="exp == 'Sim'">Quanto tempo de experiência?</p>
              <VSelect v-model="expTime" v-if="exp == 'Sim'" variant="outlined" 
              :items="[ '1 a 6 meses', '6 meses a 1 ano', '1 a 2 anos', '2 a 3 anos', '3 a 5 anos', 'Mais de 5 anos']"
                required placeholder="Selecione uma opção" :rules="[requiredValidator]" :loading="loading" />
            </VCol>

            <VCol cols="12">
              <div class="d-flex" :class="isMobile ?  'flex-column' : 'flex-row'">
                <div :class="isMobile ? 'w-100' : 'w-50'">
                  <VLabel>
                    <VIcon icon="tabler-file-text" class="mr-2" /> Anexe o seu Currículo
                  </VLabel>
                  <p class="mb-2" style="font-size: 13px;">Anexe o seu currículo, recomendamos que insira o seu nome no
                    arquivo.<br>Ex.: Currículo João Silva. <br>Aceitamos arquivos nos formatos .pdf, .doc e .docx.</p>
                </div>

                <v-file-input label="Clique aqui e anexe seu currículo" v-model="curriculo" :class="isMobile ? 'w-100': 'ml-3 w-50'"
                  style="cursor: pointer !important;" :rules="[requiredValidator]">
                </v-file-input>
              </div>
            </VCol>

          </VRow>
        </v-stepper-window>

        <v-stepper-window v-if="step == 3">
          <v-alert border="start" border-color="warning" density="comfortable" variant="tonal"
            :text="`Você está prestes a se candidatar a vaga de ${vaga?.funcao}. Confira os dados abaixo e clique em 'CANDIDATAR-SE' para finalizar o processo.`"
            title="Atenção, revise os seus dados antes de se candidatar." type="warning"
            icon="tabler-alert-triangle-filled" closable prominent />

          <div>
            <div class="d-flex align-center text-h5 mt-4 font-weight-bold mb-2">
              <VIcon icon="tabler-map-pin" size="1.75rem" start />
              Seu endereço
            </div>


            <div class="d-flex">CEP: <span v-html="componentCheckValue(address_cep)"> </span> </div>
            <div class="d-flex">Rua: <span v-html="componentCheckValue(address_street)"> </span> </div>
            <div class="d-flex">Número: <span v-html="componentCheckValue(address_number)"> </span> </div>
            <div class="d-flex">Cidade: <span v-html="componentCheckValue(address_city)"> </span> </div>
            <div class="d-flex">Bairro: <span v-html="componentCheckValue(address_neighborhood)"> </span> </div>
            <div class="d-flex">Estado: <span v-html="componentCheckValue(address_state)"> </span> </div>
          </div>

          <v-divider class="mt-4"></v-divider>

          <div>
            <div class="d-flex align-center text-h5 mt-4 font-weight-bold mb-2">
              <VIcon icon="tabler-school" size="1.75rem" start />
              Sua formação
            </div>

            <div class="d-flex"><span v-html="componentCheckValue(formacao)"> </span> </div>
          </div>

          <v-divider class="mt-4"></v-divider>

          <div>
            <div class="d-flex align-center text-h5 mt-4 font-weight-bold mb-2">
              <VIcon icon="tabler-user" size="1.75rem" start />
              Quem Sou
            </div>

            <div class="d-flex"><span v-html="componentCheckValue(quemsou)"> </span> </div>
          </div>

          <v-divider class="mt-4"></v-divider>

          <div>
            <div class="d-flex align-center text-h5 mt-4 font-weight-bold mb-2">
              <VIcon icon="tabler-tools" size="1.75rem" start />
              Experiência
            </div>

            <div class="d-flex">Tem Experiência? <span v-html="componentCheckValue(exp)"> </span> </div>
            <div class="d-flex" v-if="exp == 'Sim'">Tempo de experiência: <span v-html="componentCheckValue(expTime)"> </span> </div>
          </div>

          <v-divider class="mt-4"></v-divider>

          <div>
            <div class="d-flex align-center text-h5 mt-4 font-weight-bold mb-2">
              <VIcon icon="tabler-file-text" size="1.75rem" start />
              Seu currículo
            </div>

            <!--<div class="d-flex">
              <span class="text-error d-flex align-center ml-2" v-if="!curriculo"> Não informado
                <i class="tabler-alert-circle text-error text-h4 ml-2" /></span>
              <span class="text-success d-flex align-center ml-2" v-else> Anexado
                <i class="tabler-circle-check text-success text-h4 ml-2" /></span>
            </div>-->

            <div class="d-flex"><span v-html="componentCheckValue(curriculo ? curriculo[0].name : '')"> </span> </div>


          </div>

        </v-stepper-window>


        <v-stepper-actions class="d-flex flex-column-reverse gap-3">
          <template #next>
            <VBtn variant="flat" color="primary" @click="nextStep()" :disabled="loading" :loading="loading"
              class="ml-auto w-100">
              {{ step != 3 ? 'AVANÇAR' : 'CANDIDATAR-SE' }}
              <VIcon :icon="step != 3 ? 'tabler-chevron-right' : ' tabler-circle-check'" class="ml-2" />
            </VBtn>

          </template>
          <template #prev>
            <VBtn v-if="step !== 1" variant="plain" color="primary" @click="prevStep" :disabled="loading">
              <VIcon icon="tabler-chevron-left" class="mr-2" />
              VOLTAR
            </VBtn>
          </template>
        </v-stepper-actions>

      </template>
    </VStepper>
  </VForm>

</template>

<style lang="scss">
.campo-60 .v-field__field {
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
}
</style>
