// src/views/NewsCategoryView.vue
<template>
  <div class="container mx-auto p-4 md:p-8">
    <h2 class="text-2xl md:text-3xl font-bold text-gray-900 mb-6 border-b pb-4">
      {{ appStore.checkLang.isTh ? `ข่าวสารหมวดหมู่: ${categoryTitleTh}` : `News Category: ${categoryTitleEn}` }}
    </h2>

    <div v-if="newsList.length > 0" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <div
          v-for="item in newsList"
          :key="item.id"
          class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300"
      >
        <router-link :to="`/content/${item.id}`" class="block">
          <div class="w-full h-48 overflow-hidden">
            <img
                v-if="item.image && item.image.url"
                class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
                :src="`${appStore.imageBaseUrl}${item.image.url}`"
                :alt="appStore.checkLang.isTh ? item.title_th : item.title_en"
            />
            <div v-else class="w-full h-full bg-gray-200 flex items-center justify-center text-gray-500">
              No Image
            </div>
          </div>
          <div class="p-4">
            <h3 class="font-semibold text-lg text-gray-800 hover:text-primary-focus leading-tight mb-2">
              {{ appStore.checkLang.isTh ? item.title_th : item.title_en }}
            </h3>
            <p class="text-sm text-gray-600 leading-snug mb-3">
              {{ truncateDetail(appStore.checkLang.isTh ? item.detail_th : item.detail_en, 120) }}
            </p>
            <div class="text-xs text-gray-500">
              <span v-if="item.release_date">{{ formatDate(item.release_date) }}</span>
            </div>
          </div>
        </router-link>
      </div>
    </div>
    <div v-else class="text-center text-gray-600 py-16">
      <p class="text-2xl font-semibold mb-4">
        {{ appStore.checkLang.isTh ? 'ไม่พบข่าวสารในหมวดหมู่นี้ หรือข่าวสารนี้ไม่พร้อมใช้งานในภาษาปัจจุบัน' : 'No news found in this category or not available in the current language.' }}
      </p>
      <router-link to="/home" class="btn bg-[#1b3872] text-white hover:bg-[#1b3872]/90 rounded-none border-none shadow-md">
        {{ appStore.checkLang.isTh ? 'กลับหน้าหลัก' : 'Back to Home' }}
      </router-link>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useAppStore } from '@/stores/app.js';
import { RouterLink } from 'vue-router';

const appStore = useAppStore();
const route = useRoute();
const newsList = ref([]);

// Computed property เพื่อแสดงชื่อหมวดหมู่ตามภาษา
const categoryTitleTh = computed(() => {
  // เพิ่มการตรวจสอบว่า appStore.tabs มีอยู่จริงหรือไม่ และเป็น Array หรือไม่
  if (appStore.tabs && Array.isArray(appStore.tabs) && appStore.tabs.length > 0) {
    const tab = appStore.tabs.find(t => t.category === route.params.category);
    return tab ? tab.title : 'ไม่ระบุหมวดหมู่';
  }
  return 'กำลังโหลด...';
});

const categoryTitleEn = computed(() => {
  if (appStore.tabs && Array.isArray(appStore.tabs) && appStore.tabs.length > 0) {
    const tab = appStore.tabs.find(t => t.category === route.params.category);
    return tab ? tab.title_en : 'Unspecified Category';
  }
  return 'Loading...';
});

const truncateDetail = (text, maxLength) => {
  if (!text) return '';
  if (text.length <= maxLength) return text;
  return text.substring(0, maxLength) + '...';
};

const formatDate = (dateString) => {
  if (!dateString) return '';
  const parts = dateString.split('/'); // Assumes MM/DD/YYYY
  if (parts.length === 3) {
    const [month, day, year] = parts;
    const dateObj = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
    const formattedDay = String(dateObj.getDate()).padStart(2, '0');
    const formattedMonth = String(dateObj.getMonth() + 1).padStart(2, '0');
    const formattedYear = dateObj.getFullYear();
    return `${formattedDay}/${formattedMonth}/${formattedYear}`;
  }
  return dateString;
};

const fetchNewsForCategory = async (category) => {
  try {
    // เพราะ appStore.find ควรจะมีการกรอง active, active_en, release_date และ feature ให้เรียบร้อยแล้ว
    const allNews = await appStore.find('tabNews', ''); // ดึงข่าวทั้งหมดก่อน เพื่อให้ filter ได้ถูกต้อง

    const filteredNews = allNews.filter(item => {
      return item.type === category;
    });

    newsList.value = filteredNews;

  } catch (error) {
    console.error(`Error fetching news for category ${category}:`, error);
    newsList.value = [];
  }
};


onMounted(() => {
  fetchNewsForCategory(route.params.category);
});

watch(() => route.params.category, (newCategory) => {
  fetchNewsForCategory(newCategory);
});

// Watch for language changes and re-fetch the news list
watch(() => appStore.checkLang.isTh, () => { // **แก้ไขตรงนี้**
  fetchNewsForCategory(route.params.category);
});
</script>

<style scoped>

</style>