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

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

const route = useRoute();
const slug = route.params.slug as string;
const { data: project, isPending, error } = useProjectDetailsQuery(slug);
const { locale } = useI18n();
const setI18nParams = useSetI18nParams();

const pageTitle = computed(
  () => project.value?.meta?.title || project.value?.title,
);
const pageDescription = computed(
  () => project.value?.meta?.meta_tag_description || project.value?.description,
);
const pageKeyword = computed(() => project.value?.meta?.meta_tag_keyword);

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

const arUrl = computed(() =>
  project.value?.slug_ar
    ? `${baseUrl}/our-projects/${project.value.slug_ar}`
    : "",
);

const enUrl = computed(() =>
  project.value?.slug_en
    ? `${baseUrl}/en/our-projects/${project.value.slug_en}`
    : "",
);

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

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

useHead(() => ({
  link: project.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 },
      ]
    : [],
}));

if (import.meta.server) {
  watch(
    project,
    (val) => {
      if (val) {
        useProjectSchema({
          name: pageTitle.value || "",
          description: pageDescription.value || "",
          image: val.background_image || "",
          url: route.path,
        });
      }
    },
    { immediate: true },
  );
}

watch(
  project,
  (newProject) => {
    if (newProject) {
      const currentSlug = route.params.slug;
      const targetSlug =
        locale.value === "ar" ? newProject.slug_ar : newProject.slug_en;

      if (currentSlug !== targetSlug) {
        navigateTo(
          {
            name: "our-projects-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: newProject.slug_ar },
        en: { slug: newProject.slug_en },
      });
    }
  },
  { immediate: true },
);

watch(error, (err) => {
  if (err) {
    showError({
      statusCode: 404,
      statusMessage: "Project not found",
      fatal: true,
    });
  }
});
</script>

<template>
  <main>
    <GlobalLoader v-if="isPending" />
    <ProjectsSingleProjectHero v-if="project" :project-info="project" />
    <ProjectsSingleProjectSection
      v-if="project?.project_content"
      :project-contnet="project.project_content"
      :is-loading="isPending"
    />
  </main>
</template>
