// src/views/about/CommanderBioView.vue
<template>
  <div class="container mx-auto px-4 md:px-8 lg:px-16 py-12">
    <div class="text-center mb-12">
      <h1 class="text-3xl font-bold text-blue-800">
        {{ appStore.checkLang.isTh ? title_th : title_en }}
      </h1>
    </div>

    <div v-if="isLoading" class="text-center py-20">
      <span class="loading loading-spinner loading-lg text-blue-500"></span>
      <p class="mt-4 text-xl text-gray-500">{{ appStore.checkLang.isTh ? 'กำลังโหลดข้อมูล...' : 'Loading data...' }}</p>
    </div>

    <div v-else-if="error" class="text-center text-red-600 py-20">
      <p class="text-xl font-medium">{{ appStore.checkLang.isTh ? 'เกิดข้อผิดพลาดในการโหลดข้อมูลผู้บริหาร' : 'Error loading commander data.' }}</p>
      <p class="text-sm mt-2">
        {{ appStore.checkLang.isTh ? 'โปรดตรวจสอบ ID หรือลองใหม่อีกครั้ง' : 'Please check the ID or try again.' }}
      </p>
    </div>

    <div v-else-if="commander" class="flex justify-center">
      <div class="card w-full md:w-4/5 lg:w-3/4 bg-base-100 shadow-xl rounded-box overflow-hidden">
        <div class="card-body p-6 md:p-8 text-center flex flex-col items-center">
          <template v-if="shouldShowImage(commander.image)">
            <img
                :src="getImageUrl(commander.image)"
                :alt="appStore.checkLang.isTh ? commander.name_th : commander.name_en"
                class="w-48 h-48 object-cover rounded-lg shadow-lg border-4 border-blue-300 mb-6"
                @error="onImageError(commander.id)"
            />
          </template>
          <template v-else>
            <div class="w-48 h-48 rounded-lg shadow-lg border-4 border-gray-200 bg-gray-100 flex items-center justify-center mb-6">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-28 w-28 text-gray-400" viewBox="0 0 24 24" fill="currentColor">
                <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z" clip-rule="evenodd" />
              </svg>
            </div>
          </template>

          <h2 class="card-title text-3xl font-bold text-gray-900 mb-2">
            {{ appStore.checkLang.isTh ? commander.name_th : commander.name_en }}
          </h2>
          <div class="text-xl text-gray-700 mb-6 prose max-w-none"
               v-html="appStore.checkLang.isTh ? commander.bio_th : commander.bio_en">
          </div>
        </div>

        <div class="p-6 md:p-8 border-t border-gray-200 bg-gray-50">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-y-4 gap-x-8">
            <div>
              <h3 class="text-lg font-semibold text-blue-700 mb-2">{{ appStore.checkLang.isTh ? education_th : education_en }}</h3>
              <ul class="list-disc list-inside text-gray-700 space-y-1">
                <li v-for="(item, i) in getFilteredDetails(appStore.checkLang.isTh ? 'การศึกษา' : 'Education')" :key="`edu-${i}`">
                  {{ appStore.checkLang.isTh ? item.title_th : item.title_en }}
                </li>
                <li v-if="getFilteredDetails(appStore.checkLang.isTh ? 'การศึกษา' : 'Education').length === 0" class="text-gray-500 italic">
                  {{ appStore.checkLang.isTh ? 'ไม่มีข้อมูลการศึกษา' : 'No education information available.' }}
                </li>
              </ul>
            </div>

            <div>
              <h3 class="text-lg font-semibold text-blue-700 mb-2">{{ appStore.checkLang.isTh ? position_th : position_en }}</h3>
              <ul class="list-disc list-inside text-gray-700 space-y-1">
                <li v-for="(item, i) in getFilteredDetails(appStore.checkLang.isTh ? 'ตำแหน่งที่สำคัญ' : 'Important Positions')" :key="`pos-${i}`">
                  {{ appStore.checkLang.isTh ? item.title_th : item.title_en }}
                </li>
                <li v-if="getFilteredDetails(appStore.checkLang.isTh ? 'ตำแหน่งที่สำคัญ' : 'Important Positions').length === 0" class="text-gray-500 italic">
                  {{ appStore.checkLang.isTh ? 'ไม่มีข้อมูลตำแหน่งที่สำคัญ' : 'No important positions information available.' }}
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="card-actions justify-end p-6 border-t border-gray-200">
          <router-link to="/about/commander" class="btn bg-[#1b3872] text-white hover:bg-[#1b3872]/90 rounded-none border-none shadow-md">
            {{ appStore.checkLang.isTh ? 'กลับไปยังผู้บริหารระดับสูง' : 'Back to Senior Executives' }}
          </router-link>
        </div>
      </div>
    </div>

    <div v-else class="text-center text-gray-400 py-16">
      <p class="text-xl">{{ appStore.checkLang.isTh ? 'ไม่พบข้อมูลผู้บริหารท่านนี้' : 'Commander not found.' }}</p>
    </div>
  </div>
</template>

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

const appStore = useAppStore();
const aboutUsStore = useAboutUsStore();
const route = useRoute();

const commanderId = ref(null);
const commander = ref(null);
const isLoading = ref(true);
const error = ref(null);
const imageLoadErrors = ref({});

const title_th = "ประวัติผู้บริหาร";
const title_en = "Commander's Biography";
const education_th = "การศึกษา";
const education_en = "Education";
const position_th = "ตำแหน่งที่สำคัญ";
const position_en = "Important Positions";

const fetchCommanderData = async (id) => {
  isLoading.value = true;
  error.value = null;
  commander.value = null; // Clear previous data

  console.log('--- fetchCommanderData started ---');
  console.log('Fetching for ID:', id);

  try {
    // ตรวจสอบว่าข้อมูล commanders โหลดมาหรือยัง
    if (!aboutUsStore.getCommandersForDisplay || aboutUsStore.getCommandersForDisplay.length === 0) {
      console.log('Commanders data not in store, fetching...');
      await aboutUsStore.fetchCommanders(); // ถ้ายังไม่โหลด ให้โหลดก่อน
      console.log('Commanders fetched. Total:', aboutUsStore.getCommandersForDisplay.length);
    } else {
      console.log('Commanders data already in store. Total:', aboutUsStore.getCommandersForDisplay.length);
    }

    // ค้นหาผู้บริหารจากข้อมูลใน Store
    const parsedId = parseInt(id);
    console.log('Parsed ID:', parsedId);

    // **จุดที่สำคัญ:** ข้อมูลของคุณไม่ได้มี .attributes ซ้อนอยู่
    // ดังนั้นการค้นหาต้องเป็นการเปรียบเทียบ ID โดยตรง
    const foundCommander = aboutUsStore.getCommandersForDisplay.find(
        (p) => {
          // ในกรณีที่ข้อมูลใน Store มี .attributes ซ้อนอยู่ เช่น p.attributes.id
          // ให้ใช้ p.attributes.id === parsedId
          // แต่จากภาพ console.log ของคุณ ข้อมูลคือ p.id โดยตรง
          console.log(`Comparing p.id (${p.id}) with parsedId (${parsedId})`);
          return p.id === parsedId;
        }
    );

    if (foundCommander) {
      commander.value = foundCommander;
      console.log('Commander found:', commander.value);
    } else {
      error.value = new Error('Commander not found');
      console.warn('Commander not found for ID:', id);
    }
  } catch (err) {
    error.value = err;
    console.error("Error fetching commander bio:", err);
  } finally {
    isLoading.value = false;
    console.log('--- fetchCommanderData finished ---');
  }
};

// **แก้ไข:** Computed property เพื่อกรองรายละเอียดตาม category และภาษา
const getFilteredDetails = (category) => {
  // ตรวจสอบว่า commander.value มีข้อมูล และมี .details (ไม่ใช่ .attributes.details)
  if (!commander.value || !commander.value.details) { // <--- แก้ไขตรงนี้
    console.log('getFilteredDetails: commander or details not available, returning empty array.');
    return [];
  }
  // กรองตาม category_th หรือ category_en ตามภาษาที่เลือก
  return commander.value.details.filter(item => { // <--- แก้ไขตรงนี้
    if (appStore.checkLang.isTh) {
      return item.category_th === category;
    } else {
      return item.category_en === category;
    }
  });
};

// **แก้ไข:** Function to construct image URL
const getImageUrl = (imageObject) => {
  // จากภาพ console.log ของคุณ, image object มี url โดยตรง ไม่ได้ซ้อนใน data.attributes
  const url = imageObject?.url || ''; // <--- แก้ไขตรงนี้
  console.log('getImageUrl received:', imageObject, '-> URL:', url);
  return url;
};

// Handler เมื่อรูปภาพโหลดไม่สำเร็จ (ไม่มีการเปลี่ยนแปลงจากเดิม)
const onImageError = (id) => {
  imageLoadErrors.value = { ...imageLoadErrors.value, [id]: true };
  console.warn('Image failed to load for ID:', id);
};

// **แก้ไข:** Computed property เพื่อตรวจสอบว่าควรแสดงรูปภาพจริง หรือไอคอนคน/placeholder
const shouldShowImage = (imageObject) => {
  // จากภาพ console.log ของคุณ, image object มี url โดยตรง ไม่ได้ซ้อนใน data.attributes
  const show = imageObject?.url && !imageLoadErrors.value[commander.value?.id]; // <--- แก้ไขตรงนี้
  console.log('shouldShowImage received:', imageObject, '-> Result:', show);
  return show;
};

// Initial data fetch on component mount
onMounted(() => {
  commanderId.value = route.params.id;
  console.log('onMounted: Route ID:', commanderId.value);
  if (commanderId.value) {
    fetchCommanderData(commanderId.value);
  } else {
    error.value = new Error('No commander ID provided in URL.');
    isLoading.value = false;
    console.error('No commander ID provided in URL.');
  }
});

// Watch for changes in route.params.id (ถ้าผู้ใช้เปลี่ยน ID ใน URL ตรงๆ)
watch(() => route.params.id, (newId) => {
  console.log('Route ID changed:', newId);
  if (newId && newId !== commanderId.value) {
    commanderId.value = newId;
    fetchCommanderData(newId);
  }
});

// Watch for language changes (ถ้าจำเป็นต้อง re-render เนื้อหา)
watch(() => appStore.checkLang.isTh, (newVal) => {
  console.log('Language changed to TH:', newVal);
  // ไม่ต้อง re-fetch data เพราะการแปลเนื้อหาจัดการโดย computed properties
});
</script>

<style scoped>
ul {
  list-style-type: disc;
  padding-left: 1.5em;
  margin-bottom: 0.5em;
}
li {
  margin-bottom: 0.25em;
}
</style>