// src/views/ContentView.vue
<template>
  <div class="container mx-auto p-4 md:p-8">
    <div v-if="newsItem" class="bg-white shadow-lg rounded-lg overflow-hidden">
      <div class="relative h-64 md:h-96">
        <img
            v-if="newsItem.image && newsItem.image.url"
            :src="`${appStore.imageBaseUrl}${newsItem.image.url}`"
            :alt="appStore.checkLang.isTh ? newsItem.title_th : newsItem.title_en"
            class="w-full h-full object-cover"
        />
        <div v-else class="w-full h-full bg-gray-200 flex items-center justify-center text-gray-500">
          No Image Available
        </div>
      </div>

      <div class="p-6 md:p-8">
        <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4 leading-tight">
          {{ appStore.checkLang.isTh ? newsItem.title_th : newsItem.title_en }}
        </h1>
        <p class="text-sm text-gray-500 mb-6">
          <span v-if="newsItem.release_date">
            {{ appStore.checkLang.isTh ? 'เผยแพร่เมื่อ' : 'Published on' }}:
            {{ formatDate(newsItem.release_date) }}
          </span>
        </p>
        <div class="prose max-w-none text-gray-800 leading-relaxed break-words whitespace-pre-line">
          {{ appStore.checkLang.isTh ? newsItem.detail_th : newsItem.detail_en }}
        </div>
      </div>
    </div>
    <div v-else class="text-center text-gray-600 py-16">
      <p class="text-2xl font-semibold mb-4">
        {{ appStore.checkLang.isTh ? 'ไม่พบข่าวสารนี้ หรือข่าวสารนี้ไม่พร้อมใช้งานในภาษาปัจจุบัน' : 'News not found or not available in the current language.' }}
      </p>
      <router-link to="/home" class="btn btn-primary">
        {{ appStore.checkLang.isTh ? 'กลับหน้าหลัก' : 'Back to Home' }}
      </router-link>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router'; // สำหรับการเข้าถึง route parameters
import { useAppStore } from '@/stores/app.js';
import { RouterLink } from 'vue-router'; // ใช้สำหรับปุ่มกลับหน้าหลัก

const appStore = useAppStore();
const route = useRoute(); // Instance ของ useRoute
const newsItem = ref(null); // ใช้เก็บข้อมูลข่าวที่ดึงมา

// Function to fetch news detail by ID
const fetchNewsDetail = async (id) => {
  // ในสถานการณ์จริง คุณจะเรียก API เช่น await axios.get(`/api/news/${id}`);
  // สำหรับตอนนี้ ใช้ mock data ใน store
  const foundNews = appStore.mockNews.find(item => item.id == id); // ใช้ == เพื่อให้แปลง string/number ได้
  if (foundNews) {
    // ตรวจสอบ active และ active_en ตามภาษาปัจจุบัน
    if (appStore.isTh && foundNews.active) {
      newsItem.value = foundNews;
    } else if (!appStore.isTh && foundNews.active_en) { // ใช้ !appStore.isTh สำหรับภาษาอังกฤษ
      newsItem.value = foundNews;
    } else {
      newsItem.value = null; // ไม่พบข่าวที่ active ในภาษาปัจจุบัน
    }
  } else {
    newsItem.value = null;
  }
};

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;
};

// ดึงข้อมูลเมื่อ Component ถูก mount
onMounted(() => {
  fetchNewsDetail(route.params.id);
});

// Watch for changes in route.params.id (กรณีที่ผู้ใช้คลิก Link ไปยังข่าวอื่นบนหน้าเดิม)
watch(() => route.params.id, (newId) => {
  fetchNewsDetail(newId);
});

// Watch for language changes and re-fetch the news detail
watch(() => appStore.isTh, () => {
  fetchNewsDetail(route.params.id);
});
</script>

<style scoped>
/* หากใช้ DaisyUI/TailwindCSS ก็ไม่จำเป็นต้องมี style scoped มากนัก */
.prose {
  /* Tailwind CSS's @tailwindcss/typography plugin provides 'prose' class for nicely formatted text.
     If you haven't installed it, these styles can be adjusted manually or by adding the plugin. */
  max-width: 80ch; /* Limit line length for readability */
  margin-left: auto;
  margin-right: auto;
}
.whitespace-pre-line {
  white-space: pre-line; /* Keeps line breaks from your data */
}
</style>
