// src/views/LandingPageView.vue
<template>
  <div class="container mx-auto p-4 md:p-8">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full px-4">
        <div class="flex flex-col items-center justify-center">
          <template v-if="check === true">
            <a
                v-if="landingPageViewStore.mainBannerData && landingPageViewStore.mainBannerData.link"
                :href="`//${landingPageViewStore.mainBannerData.link}`"
                target="_blank"
                rel="noopener noreferrer"
                class="inline-block"
            >
              <img
                  :src="mainBannerSrc"
                  alt="Main Banner (Clickable)"
                  class="max-w-[980px] max-h-[600px] w-full h-auto transition-transform duration-500 transform ease-in-out hover:scale-105"
              />
            </a>
            <img
                v-else-if="mainBannerSrc"
                :src="mainBannerSrc"
                alt="Main Banner"
                class="max-w-[980px] max-h-[600px] w-full h-auto"
            />
          </template>

          <router-link to="/home" class="btn btn-lg mt-4 normal-case
            bg-yellow-500 text-white      /* สีพื้นหลังเหลือง */
            hover:bg-yellow-600           /* สีพื้นหลังเมื่อโฮเวอร์ */
            active:bg-yellow-700          /* สีพื้นหลังเมื่อคลิก */
            focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 /* Focus ring */
            shadow-md                      /* เพิ่มเงาเล็กน้อย */
            rounded-lg                     /* ทำให้โค้งมนขึ้นเล็กน้อย */
          ">
            เข้าสู่เว็บไซต์
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
// เปลี่ยนมา import useLandingPageViewStore
import { useLandingPageViewStore } from '@/stores/landingPageView';
import { RouterLink } from 'vue-router';

// เปลี่ยนมาใช้ useLandingPageViewStore
const landingPageViewStore = useLandingPageViewStore();

const check = ref(false);

const mainBannerSrc = computed(() => {
  // ดึงข้อมูลจาก landingPageViewStore
  const data = landingPageViewStore.mainBannerData;
  if (data && data.url) { // ตรวจสอบ .url โดยตรงจาก mainBannerData
    return `${landingPageViewStore.imageBaseUrl}${data.url}`;
  }
  return '';
});

onMounted(async () => { // คง async ไว้ ถ้ามี fetchLandingPageData จริงๆ
                        // เรียก fetchLandingPageData ของ Store เฉพาะ
  await landingPageViewStore.fetchLandingPageData();

  const mainBannerConfig = landingPageViewStore.mainBannerData;

  if (mainBannerConfig && mainBannerConfig.startDate && mainBannerConfig.endDate) {
    const parseDateString = (dateString) => {
      const parts = dateString.split('/');
      return new Date(parseInt(parts[2]), parseInt(parts[0]) - 1, parseInt(parts[1]));
    };

    let from = parseDateString(mainBannerConfig.startDate);
    let to = parseDateString(mainBannerConfig.endDate);
    let today = new Date();
    let dd = String(today.getDate()).padStart(2, '0');
    let mm = String(today.getMonth() + 1).padStart(2, '0');
    let yyyy = today.getFullYear();
    let currentDate = `${mm}/${dd}/${yyyy}`;
    let checkDate = parseDateString(currentDate);

    check.value = checkDate >= from && checkDate <= to;
  } else {
    check.value = true;
  }

  // Debugging logs:
  console.log('Main Banner Data from LandingPageViewStore:', landingPageViewStore.mainBannerData);
  console.log('Main Banner Image Source:', mainBannerSrc.value);
  console.log('Check date result (check.value):', check.value);
});
</script>

<style scoped>
/* สไตล์ Tailwind CSS และ DaisyUI จะจัดการเรื่องความสวยงามเป็นหลัก */
</style>