// 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="filteredFeatureNews.length > 0" class="flex flex-col">
          <NewsItem :item="filteredFeatureNews[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, key) in filteredNews"
              :key="key"
              class="flex flex-col"
          >
            <NewsItem :item="item" />
          </div>
        </div>

        <div class="md:col-span-2 flex justify-end mt-8">
          <router-link
              to="/news/HumanTechNews" 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, computed } from 'vue';
// ไม่ต้อง import Carousel, Slide แล้ว
import NewsItem from './NewsItem.vue'; // Component ย่อย
import { useAppStore } from '@/stores/app';
import { RouterLink } from 'vue-router'; // Import RouterLink

const appStore = useAppStore();

const news = ref([]);
const featureNews = ref([]); // ยังคงแยกเพื่อการ filter ที่ชัดเจน
const more = "อ่านข่าวต่อ";
const more_en = "Read More";

const filterNewsByDate = (items) => {
  const today = new Date();
  const currentDate = new Date(today.getFullYear(), today.getMonth(), today.getDate()); // Normalize to start of day

  return items.filter(item => {
    if (!item.release_date) return false;
    const [month, day, year] = item.release_date.split('/');
    const releaseDate = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));

    return releaseDate <= currentDate;
  });
};

const filteredFeatureNews = computed(() => {
  const langFiltered = appStore.checkLang.isTh
      ? featureNews.value.filter(item => item.active && item.feature)
      : featureNews.value.filter(item => item.active_en && item.feature);
  // **สำคัญ:** จำกัดให้เหลือแค่ 1 ข่าวเด่นที่จะแสดง
  return filterNewsByDate(langFiltered).slice(0, 1);
});

const filteredNews = computed(() => {
  const langFiltered = appStore.checkLang.isTh
      ? news.value.filter(item => item.active && !item.feature)
      : news.value.filter(item => item.active_en && !item.feature);
  // Limit to 4 items as per original logic
  return filterNewsByDate(langFiltered).slice(0, 4);
});


onMounted(async () => {
  const allNews = await appStore.find('news', '');
  news.value = allNews;
  featureNews.value = allNews; // featureNews ก็ยังใช้ allNews เหมือนเดิม
});
</script>

<style scoped>

</style>