// src/views/about/CommandingOfficersView.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 ? header : header_en }}
      </h1>
      <p class="mt-3 text-lg opacity-90 text-gray-700">
        {{ appStore.checkLang.isTh ? 'ทำความรู้จักกับผู้บริหารระดับสูงขององค์กร' : 'Meet the senior executives and commanding officers of our organization' }}
      </p>
    </div>

    <div v-if="aboutUsStore.isLoading.commanders" 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="aboutUsStore.errors.commanders" class="text-center text-red-600 py-20">
      <p class="text-xl font-medium">{{ appStore.checkLang.isTh ? 'เกิดข้อผิดพลาดในการโหลดข้อมูลผู้บังคับบัญชา' : 'Error loading commanding officers data.' }}</p>
      <p class="text-sm mt-2">
        {{ appStore.checkLang.isTh ? 'โปรดลองใหม่อีกครั้ง หรือติดต่อผู้ดูแลระบบหากปัญหายังคงอยู่' : 'Please try again or contact support if the issue persists.' }}
      </p>
    </div>

    <div v-else-if="aboutUsStore.getCommandersForDisplay && aboutUsStore.getCommandersForDisplay.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 justify-items-center">
      <div class="md:col-span-2 lg:col-span-3 flex justify-center w-full mb-8">
        <figure class="flex flex-col items-center text-center p-4">
          <router-link v-if="aboutUsStore.getCommandersForDisplay[0] && aboutUsStore.getCommandersForDisplay[0].id" :to="`/about/commander/${aboutUsStore.getCommandersForDisplay[0].id}`">
            <template v-if="shouldShowImage(aboutUsStore.getCommandersForDisplay[0])">
              <img
                  :src="getImageUrl(aboutUsStore.getCommandersForDisplay[0].image.url)"
                  :alt="appStore.checkLang.isTh ? aboutUsStore.getCommandersForDisplay[0].name_th : aboutUsStore.getCommandersForDisplay[0].name_en"
                  class="w-48 h-48 object-cover rounded-lg shadow-lg border-4 border-blue-200 hover:border-blue-500 transition-all duration-300"
                  @error="onImageError(aboutUsStore.getCommandersForDisplay[0].id)"
              />
            </template>
            <template v-else>
              <div class="w-48 h-48 rounded-lg shadow-lg border-4 border-gray-200 hover:border-blue-500 transition-all duration-300 bg-gray-100 flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 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>
          </router-link>
          <template v-else-if="aboutUsStore.getCommandersForDisplay[0]">
            <template v-if="shouldShowImage(aboutUsStore.getCommandersForDisplay[0])">
              <img
                  :src="getImageUrl(aboutUsStore.getCommandersForDisplay[0].image.url)"
                  :alt="appStore.checkLang.isTh ? aboutUsStore.getCommandersForDisplay[0].name_th : aboutUsStore.getCommandersForDisplay[0].name_en"
                  class="w-48 h-48 object-cover rounded-lg shadow-lg border-4 border-blue-200"
                  @error="onImageError(aboutUsStore.getCommandersForDisplay[0].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">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 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>
          </template>

          <figcaption v-if="aboutUsStore.getCommandersForDisplay[0]" class="mt-4">
            <p class="text-xl font-semibold text-gray-800">
              {{ appStore.checkLang.isTh ? aboutUsStore.getCommandersForDisplay[0].name_th : aboutUsStore.getCommandersForDisplay[0].name_en }}
            </p>
            <div class="text-gray-600 text-base"
                 v-html="appStore.checkLang.isTh ? aboutUsStore.getCommandersForDisplay[0].bio_th : aboutUsStore.getCommandersForDisplay[0].bio_en">
            </div>
          </figcaption>
        </figure>
      </div>

      <div v-for="(person, index) in aboutUsStore.getCommandersForDisplay.slice(1)" :key="person.id || index" class="w-full">
        <figure class="flex flex-col items-center text-center p-4">
          <router-link v-if="person.id" :to="`/about/commander/${person.id}`">
            <template v-if="shouldShowImage(person)">
              <img
                  :src="getImageUrl(person.image.url)"
                  :alt="appStore.checkLang.isTh ? person.name_th : person.name_en"
                  class="w-40 h-40 object-cover rounded-lg shadow-md border-2 border-gray-300 hover:border-blue-500 transition-all duration-300"
                  @error="onImageError(person.id)"
              />
            </template>
            <template v-else>
              <div class="w-40 h-40 rounded-lg shadow-md border-2 border-gray-300 hover:border-blue-500 transition-all duration-300 bg-gray-100 flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-20 w-20 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>
          </router-link>
          <template v-else>
            <template v-if="shouldShowImage(person)">
              <img
                  :src="getImageUrl(person.image.url)"
                  :alt="appStore.checkLang.isTh ? person.name_th : person.name_en"
                  class="w-40 h-40 object-cover rounded-lg shadow-md border-2 border-gray-300"
                  @error="onImageError(person.id)"
              />
            </template>
            <template v-else>
              <div class="w-40 h-40 rounded-lg shadow-md border-2 border-gray-300 bg-gray-100 flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-20 w-20 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>
          </template>

          <figcaption class="mt-3">
            <p class="text-lg font-medium text-gray-800">
              {{ appStore.checkLang.isTh ? person.name_th : person.name_en }}
            </p>
            <div class="text-gray-600 text-sm"
                 v-html="appStore.checkLang.isTh ? person.bio_th : person.bio_en">
            </div>
          </figcaption>
        </figure>
      </div>
    </div>

    <div v-else class="text-center text-gray-400 py-16">
      <p class="text-xl">{{ appStore.checkLang.isTh ? 'ไม่พบข้อมูลผู้บังคับบัญชา' : 'No commanding officers data found.' }}</p>
    </div>
  </div>
</template>

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

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

// Ref เพื่อเก็บสถานะการโหลดรูปภาพที่ไม่สำเร็จ โดยใช้ ID ของบุคคลเป็น Key
const imageLoadErrors = ref({});

// Static header translations
const header = "ผู้บริหารระดับสูง";
const header_en = "Senior Executives";

// Function to construct image URL
const getImageUrl = (imagePath) => {
  return imagePath;
};

// Handler เมื่อรูปภาพโหลดไม่สำเร็จ
const onImageError = (id) => {
  imageLoadErrors.value = { ...imageLoadErrors.value, [id]: true };
};

// Computed property เพื่อตรวจสอบว่าควรแสดงรูปภาพจริง หรือไอคอนคน/placeholder
const shouldShowImage = (person) => {
  // ตรวจสอบว่ามี URL รูปภาพ และไม่มีข้อผิดพลาดในการโหลดรูปภาพสำหรับ ID นั้นๆ
  return person.image && person.image.url && !imageLoadErrors.value[person.id];
};

// Fetch data using Composition API
onMounted(() => {
  // เรียก action จาก aboutUsStore เพื่อดึงข้อมูลผู้บริหาร
  aboutUsStore.fetchCommanders();
});
</script>

<style scoped>
/* No specific custom styles are needed beyond Tailwind/DaisyUI, as they handle most styling. */

</style>