<template>
  <div style="min-height: 100vh">
    <div v-if="offer" class="container offer-page">
      <div class="text-page">
        <nav class="breadline" aria-label="Breadcrumb">
          <nuxt-link to="/">{{ $t("home") }}</nuxt-link>
          <svg
            class="arrowDir"
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            aria-hidden="true"
          >
            <path
              d="M9.99998 13.28L5.65331 8.9333C5.13998 8.41997 5.13998 7.57997 5.65331 7.06664L9.99998 2.71997"
              stroke="#A7B9D0"
              stroke-width="1.5"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
          <nuxt-link to="/offers">{{ $t("offers") }}</nuxt-link>
          <svg
            class="arrowDir"
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            aria-hidden="true"
          >
            <path
              d="M9.99998 13.28L5.65331 8.9333C5.13998 8.41997 5.13998 7.57997 5.65331 7.06664L9.99998 2.71997"
              stroke="#A7B9D0"
              stroke-width="1.5"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
          <span class="fw-bold" aria-current="page">{{ offer.Offers.title }}</span>
        </nav>
        <div>
          <h1 class="title mobileHead">{{ offer.Offers.title }}</h1>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="150"
            height="3"
            viewBox="0 0 50 3"
            fill="none"
          >
            <rect
              x="11.9048"
              width="78.0952"
              height="3.00022"
              rx="1.50011"
              fill="#2D9596"
            />
            <rect
              opacity="0.9"
              width="5.14286"
              height="3.00022"
              rx="1.50011"
              fill="#2D9596"
            />
          </svg>
        </div>
      </div>

      <div class="main-offer-img">
        <img :src="offer.Offers.cover" :alt="offer.Offers.title || 'Offer details'" loading="lazy" />
      </div>

      <div v-html="offer?.Offers?.description" class="mb-5"></div>

      <div class="cars">
        <div class="head">
          <h5 class="">{{ $t("carOffer") }}</h5>
        </div>
        <div class="row">
          <div
            v-for="item in offer.Offers.car"
            class="col-12 col-xl-3 col-lg-3 col-md-6 my-3"
          >
            <carCard :item="item" />
          </div>
        </div>
      </div>
    </div>

    <loading v-if="isLoading2" />
  </div>
</template>

<script setup>
import { useOfferStore } from "@/stores/offers";
const localePath = useLocalePath();
const { locale } = useI18n();
const route = useRoute();
const slug = ref(route.params.slug);
const router = useRouter();
let store = useOfferStore();
await store.getOfferBySlug(slug.value);
let offer = ref(store.offer);
let isLoading2 = ref(false); // Data is already loaded after await

// Redirect to offers index if offer not found (handles old/deleted offer URLs)
if (!store.offer?.Offers && import.meta.server) {
  navigateTo(localePath('/offers'), { redirectCode: 301 });
}

// SEO Configuration
const { setPageSeo } = useSeoConfig();

// Watch for offer to load and update SEO
watch(
  () => store.offer,
  (newOffer) => {
    if (newOffer && newOffer.Offers) {
      const offerSchema = {
        "@context": "https://schema.org",
        "@type": "Offer",
        name:
          newOffer.Offers.title ||
          (locale.value === "ar" ? "عرض خاص" : "Special Offer"),
        description:
          newOffer.Offers.description ||
          (locale.value === "ar"
            ? "عرض خاص على السيارات في خليج أوتو"
            : "Special offer on cars at Khalej Auto"),
        seller: {
          "@type": "Organization",
          name: "khalej Auto",
        },
        url: `https://khalejauto.sa/offers/${slug.value}`,
        image: newOffer.Offers.image || undefined,
      };

      setPageSeo({
        title: `${
          newOffer.Offers.title ||
          (locale.value === "ar" ? "عرض خاص" : "Special Offer")
        } - خليج أوتو`,
        path: `/offers/${slug.value}`,
        image: newOffer.Offers.image || undefined,
        type: "product",
        additionalSchemas: [offerSchema],
      });
    }
  },
  { immediate: true }
);

// Watch for store updates
watch(() => store.offer, (val) => {
  offer.value = val;
});
</script>
