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

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 { state: blog, isPending } = useBlogQuery(slug);
const { locale } = useI18n();
const setI18nParams = useSetI18nParams();

const pageTitle = computed(
  () => blog.value.data?.blog?.meta?.title || blog.value.data?.blog?.title,
);
const pageDescription = computed(
  () =>
    blog.value.data?.blog?.meta?.meta_tag_description ||
    blog.value.data?.blog?.description,
);

const pageKeyword = computed(
  () => blog.value.data?.blog?.meta?.meta_tag_keyword,
);

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

const arUrl = computed(() =>
  blog.value.data?.blog?.slug_ar
    ? `${baseUrl}/blogs/${blog.value.data.blog.slug_ar}`
    : ""
);

const enUrl = computed(() =>
  blog.value.data?.blog?.slug_en
    ? `${baseUrl}/en/blogs/${blog.value.data.blog.slug_en}`
    : ""
);

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

useSeoMeta({
  title: pageTitle,
  description: pageDescription,
  keywords: pageKeyword,
  ogTitle: pageTitle,
  ogDescription: pageDescription,
  ogImage: blog.value.data?.blog.image,
});

useHead(() => ({
  link: blog.value.data?.blog ? [
    { 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(
  blog,
  (newblog) => {
    if (newblog?.data?.blog) {
      const currentSlug = route.params.slug;
      const targetSlug =
        locale.value === "ar"
          ? newblog.data.blog.slug_ar
          : newblog.data.blog.slug_en;

      if (currentSlug !== targetSlug) {
        navigateTo(
          {
            name: "blogs-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: newblog.data.blog.slug_ar },
        en: { slug: newblog.data.blog.slug_en },
      });
    }
  },
  { immediate: true },
);
</script>

<template>
  <main>
    <GlobalLoader v-if="isPending" />
    <div v-else>
      <BlogsSingleBlogHero :title="blog?.data?.blog.title ?? 'Default Title'"
        :page="blog?.data?.blog.category ?? 'Default Category'" :image="blog?.data?.blog.image ?? '/default-image.jpg'"
        :date="blog?.data?.blog.created_at ?? new Date().toISOString()" />

      <BlogsSingleBlogSection :description="blog?.data?.blog?.description ?? 'Default Description'" />

      <BlogsRelatedBlogs :related-blogs="blog?.data?.relatedBlogs ?? []" />
    </div>
  </main>
</template>
