// src/components/News.vue
<template>
  <div class="mt-6">
    <div
        class="p-4 bg-cover bg-center"
        :style="`background-image: url('${appStore.imageBaseUrl}${appStore.headers.header_background.url}')`"
    >
      <h4
          class="inline-block text-white text-2xl md:text-3xl font-semibold px-6 py-2 bg-[#1b3872] rounded shadow-md"
      >
        {{ appStore.checkLang.isTh ? 'เรื่องราวดี ๆ ที่เราอยากบอกต่อ' : 'Our Inspiring Stories' }}
      </h4>
    </div>
    <div class="p-6" :style="`background-color:${appStore.headers.bgColor || '#ffffff'}`">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 ">

        <div v-if="featureNewsDisplay.length > 0" class="flex flex-col">
          <NewsItem :item="featureNewsDisplay[0]" :isFeature="true" />
        </div>
        <div v-else class="h-full">
          <div class="bg-gray-200 flex items-center justify-center rounded-lg text-gray-500 h-full">
            {{ appStore.checkLang.isTh ? 'ไม่พบข่าวเด่น' : 'No feature news found' }}
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div
              v-for="item in generalNewsDisplay"
              :key="item.id" class="flex flex-col"
          >
            <NewsItem :item="item" />
          </div>
        </div>

        <div class="md:col-span-2 flex justify-end mt-8">
          <router-link
              to="/all-news" class="btn bg-[#1b3872] text-white hover:bg-[#1b3872]/90 rounded-none border-none shadow-md"
          >
            {{ appStore.checkLang.isTh ? more : more_en }}
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'; // เพิ่ม watch
import NewsItem from './NewsItem.vue';
import { useAppStore } from '@/stores/app';
import { RouterLink } from 'vue-router';

const appStore = useAppStore();

const featureNewsRaw = ref([]); // ข้อมูลดิบของข่าวเด่น (1 รายการ)
const generalNewsRaw = ref([]); // ข้อมูลดิบของข่าวทั่วไป (4 รายการ)

const more = "อ่านข่าวต่อ";
const more_en = "Read More";

// ฟังก์ชันสำหรับดึงข่าว
const fetchAndSetNews = async () => {
  // ดึงข่าวเด่น: limit 1, feature=true. Store จะกรองให้ตาม isFeature, release_date, active/active_en
  const featureResult = await appStore.find('news', '_limit=1&feature=true');
  featureNewsRaw.value = Array.isArray(featureResult) ? featureResult : [];

  // ดึงข่าวทั่วไป: limit 4, feature=false. Store จะกรองให้ตาม isFeature, release_date, active/active_en
  const generalResult = await appStore.find('news', '_limit=4&feature=false');
  generalNewsRaw.value = Array.isArray(generalResult) ? generalResult : [];
};

// Computed properties สำหรับแสดงผล (ไม่ได้กรอง feature หรือ date ซ้ำแล้ว)
// แต่ยังคงกรอง active/active_en เพื่อให้มั่นใจว่า UI แสดงตามภาษาที่ถูกต้อง
const featureNewsDisplay = ref([]);
const generalNewsDisplay = ref([]);

watch([featureNewsRaw, generalNewsRaw, () => appStore.checkLang.isTh], () => {
  // ข่าวเด่นที่ถูกดึงมาแล้วจะถูกกรอง feature และ date มาแล้ว
  featureNewsDisplay.value = appStore.checkLang.isTh
      ? featureNewsRaw.value.filter(item => item.active)
      : featureNewsRaw.value.filter(item => item.active_en);

  // ข่าวทั่วไปที่ถูกดึงมาแล้วจะถูกกรอง feature และ date มาแล้ว
  generalNewsDisplay.value = appStore.checkLang.isTh
      ? generalNewsRaw.value.filter(item => item.active)
      : generalNewsRaw.value.filter(item => item.active_en);
}, { immediate: true }); // เรียกใช้ทันทีเมื่อ component mounted หรือภาษาเปลี่ยน

onMounted(() => {
  fetchAndSetNews();
});

// Watch language changes to refetch news list
watch(() => appStore.checkLang.isTh, () => {
  fetchAndSetNews();
});
</script>

<style scoped>
</style>