<script setup lang="ts">
import { useJobQuery } from "~/queries/career";

definePageMeta({
  // Disable automatic i18n SEO head tags
  // Manually set them to use correct locale-specific slugs
  i18n: {
    seo: false,
  },
});

const slug = useRoute().params.slug as string;
const { data: jobData, isPending } = useJobQuery(slug);
const { locale } = useI18n();
const setI18nParams = useSetI18nParams();

const pageTitle = computed(() => jobData.value?.title);
const pageDescription = computed(() => jobData.value?.description);


const baseUrl = "https://webstdy.com";

const arUrl = computed(() =>
  jobData.value?.slug_ar
    ? `${baseUrl}/join-us/${jobData.value.slug_ar}`
    : ""
);

const enUrl = computed(() =>
  jobData.value?.slug_en
    ? `${baseUrl}/en/join-us/${jobData.value.slug_en}`
    : ""
);

const canonicalUrl = computed(() =>
  locale.value === "ar" ? arUrl.value : enUrl.value
);


useSeoMeta({
  title: pageTitle,
  description: pageDescription,
  ogTitle: pageTitle,
  ogDescription: pageDescription,
});


useHead(() => ({
  link: jobData.value ? [
    { rel: "canonical", href: canonicalUrl.value },
    { rel: "alternate", hreflang: "x-default", href: arUrl.value },
    { rel: "alternate", hreflang: "ar", href: arUrl.value },
    { rel: "alternate", hreflang: "en", href: enUrl.value },
  ] : [],
}));

watch(
  jobData,
  (newJobData) => {
    if (newJobData) {
      const currentSlug = useRoute().params.slug;
      const targetSlug = locale.value === "ar" ? newJobData.slug_ar : newJobData.slug_en;

      if (currentSlug !== targetSlug) {
        navigateTo(
          {
            name: "join-us-slug",
            params: { slug: targetSlug },
          },
          {
            redirectCode: 301,
            external: true,
          },
        );
      }

      // Set i18n params for language switcher (doesn't generate hreflang tags due to i18n.seo: false)
      setI18nParams({
        ar: { slug: newJobData.slug_ar },
        en: { slug: newJobData.slug_en },
      });
    }
  },
  { immediate: true },
);
</script>
<template>
  <main>
    <GlobalLoader v-if="isPending" />
    <InternalHeaderSection v-if="!isPending" video-url="/videos/join-us.mp4" :pages="[
      { name: $t('joinus'), link: '/join-us' },
      { name: jobData!.title },
    ]">
      <template #title>
        <h1>
          {{ jobData?.title }}
        </h1>
        <div class="dark-text-gradient text-center text-[20px]">
          <span>{{ jobData?.location }}</span>
          <span class="mx-2 inline-block">|</span>
          <span>{{ jobData?.type }}</span>
        </div>
      </template>
    </InternalHeaderSection>
    <section class="bg-gradient-odd py-section">
      <div class="relative container mx-auto grid gap-6 px-4 lg:grid-cols-2">
        <JoinUsJobDetails v-if="jobData?.description" :job-details="jobData?.description" />
        <JoinUsFormSection :slug="slug" class="static top-[90px] h-fit lg:sticky" />
      </div>
    </section>
    <div class="bg-gradient-even pb-section px-4">
      <SubscribeSection />
    </div>
  </main>
</template>
<style scoped></style>
