// src/views/about/VisionMissionView.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_title : header_title_en }}
      </h1>
      <p class="mt-3 text-lg opacity-90 text-gray-700">
        {{ appStore.checkLang.isTh ? 'วิสัยทัศน์ พันธกิจ และคุณค่าหลักขององค์กร เพื่อขับเคลื่อนอนาคต' : 'Our Vision, Mission, and Core Values to drive the future' }}
      </p>
    </div>

    <div v-if="isLoadingAny" 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="hasError" class="text-center text-red-600 py-20">
      <p class="text-xl font-medium">{{ appStore.checkLang.isTh ? 'เกิดข้อผิดพลาดในการโหลดข้อมูล' : 'Error loading 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="isDataReady" class="space-y-16">

      <section v-if="visionData" class="py-8 px-6">
        <h2 class="text-3xl md:text-4xl font-bold text-gray-900 text-center mb-12">
          {{ appStore.checkLang.isTh ? 'วิสัยทัศน์ ภารกิจ และพันธกิจของเรา' : 'Our Vision, Mission, and Obligation' }}
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

          <div class="vm-card bg-white rounded-xl shadow-lg p-6 flex flex-col items-center text-center">
            <i class="fas fa-eye w-24 h-24 mb-4 text-blue-700 flex items-center justify-center text-6xl"></i>
            <h3 class="text-2xl font-bold text-blue-700 mb-3">{{ appStore.checkLang.isTh ? header_vision : header_vision_en }}</h3>
            <div class="prose lg:prose-base max-w-none text-gray-700">
              <div v-html="appStore.checkLang.isTh ? visionData.vision : visionData.vision_en"></div>
            </div>
          </div>

          <div class="vm-card bg-white rounded-xl shadow-lg p-6 flex flex-col items-center text-center">
            <i class="fas fa-handshake w-24 h-24 mb-4 text-blue-700 flex items-center justify-center text-6xl"></i>
            <h3 class="text-2xl font-bold text-blue-700 mb-3">{{ appStore.checkLang.isTh ? header_mission : header_mission_en }}</h3>
            <div class="prose lg:prose-base max-w-none text-gray-700">
              <div v-html="appStore.checkLang.isTh ? visionData.mission : visionData.mission_en"></div>
            </div>
          </div>

          <div class="vm-card bg-white rounded-xl shadow-lg p-6 flex flex-col items-center text-center">
            <i class="fas fa-clipboard-list w-24 h-24 mb-4 text-blue-700 flex items-center justify-center text-6xl"></i>
            <h3 class="text-2xl font-bold text-blue-700 mb-3">{{ appStore.checkLang.isTh ? header_ms : header_ms_en }}</h3>
            <div class="prose lg:prose-base max-w-none text-gray-700">
              <div v-html="appStore.checkLang.isTh ? visionData.obligation : visionData.obligation_en"></div>
            </div>
          </div>

        </div>
      </section>

      <section v-if="ourJourneyData" class="bg-gradient-to-br from-blue-900 via-blue-800 to-indigo-800 text-white py-16 px-6 text-center rounded-xl shadow-2xl">
        <h2 class="text-4xl font-bold mb-4 tracking-wide drop-shadow-md">
          {{ appStore.checkLang.isTh ? ourJourneyData.header_th : ourJourneyData.header_en }}
        </h2>
        <p class="text-lg mb-8 opacity-90 leading-relaxed">
          {{ appStore.checkLang.isTh ? ourJourneyData.description_th : ourJourneyData.description_en }}
        </p>
        <div class="aspect-video w-full max-w-4xl mx-auto rounded-lg overflow-hidden shadow-xl ring-2 ring-white/30">
          <iframe
              :src="ourJourneyData.youtube_video_url"
              title="Our Journey Starts Here Video"
              frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen
              class="w-full h-full"
          ></iframe>
        </div>
      </section>

      <section class="py-16 px-6">
        <h2 class="text-3xl md:text-4xl font-bold text-gray-900 text-center mb-12">
          {{ appStore.checkLang.isTh ? coreValuesData.header_th : coreValuesData.header_en }}
        </h2>
        <div class="bg-white rounded-xl shadow-lg p-4 md:p-8">
          <div class="flex flex-wrap justify-center items-stretch gap-6">
            <div
                v-for="(value, index) in (appStore.checkLang.isTh ? coreValuesData.values_th : coreValuesData.values_en)"
                :key="index"
                class="core-value-card relative overflow-hidden rounded-lg shadow-md group
                       w-full sm:w-[calc(50%-12px)] lg:w-[calc(33.333%-16px)] xl:w-[calc(25%-18px)]"
                :style="{ backgroundImage: 'url(' + (value.image_url || 'https://via.placeholder.com/400x300?text=Core+Value+Image') + ')', backgroundSize: 'cover', backgroundPosition: 'center' }"
            >
              <div class="absolute inset-0 bg-black bg-opacity-40 transition-opacity duration-300 group-hover:bg-opacity-70 flex flex-col items-center justify-center p-4 text-white text-center">
                <h3 class="text-xl font-semibold mb-2">{{ value.title }}</h3>
                <p class="text-sm opacity-90">{{ value.description }}</p>
                <a v-if="value.link_url" :href="value.link_url" class="btn btn-sm btn-outline btn-info mt-3 text-white border-white hover:bg-white hover:text-blue-800">
                  {{ appStore.checkLang.isTh ? 'ดูเพิ่มเติม' : 'Learn More' }}
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

    </div>

    <div v-else class="text-center text-gray-400 py-16">
      <p class="text-xl">{{ appStore.checkLang.isTh ? 'ไม่พบข้อมูลสำหรับหน้านี้' : 'No data found for this page.' }}</p>
    </div>

  </div>
</template>

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

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

const header_title = "วิสัยทัศน์ พันธกิจ";
const header_title_en = "Vision and Mission";
const header_vision = "วิสัยทัศน์";
const header_vision_en = "Vision";
const header_mission = "ภารกิจ";
const header_mission_en = "Mission";
const header_ms = "พันธกิจ"; // Obligation or Key Objectives
const header_ms_en = "Obligation";

// Local refs to hold data fetched from the store
const visionData = ref(null);
const whoWeAreData = ref(null);
const ourJourneyData = ref(null);
const ourCreedData = ref(null);
const coreValuesData = ref(null);
const keyCapabilitiesData = ref(null);

// Computed properties to manage overall loading and error states
const isLoadingAny = computed(() => {
  return (
      aboutUsStore.isLoading.visionMission ||
      aboutUsStore.isLoading.whoWeAre ||
      aboutUsStore.isLoading.ourJourney ||
      aboutUsStore.isLoading.ourCreed ||
      aboutUsStore.isLoading.coreValues ||
      aboutUsStore.isLoading.keyCapabilities
  );
});

const hasError = computed(() => {
  return (
      aboutUsStore.errors.visionMission !== null ||
      aboutUsStore.errors.whoWeAre !== null ||
      aboutUsStore.errors.ourJourney !== null ||
      aboutUsStore.errors.ourCreed !== null ||
      aboutUsStore.errors.coreValues !== null ||
      aboutUsStore.errors.keyCapabilities !== null
  );
});

const isDataReady = computed(() => {
  return (
      visionData.value &&
      whoWeAreData.value &&
      ourJourneyData.value &&
      ourCreedData.value &&
      coreValuesData.value && // Ensure coreValuesData is loaded
      keyCapabilitiesData.value
  );
});


const fetchAllData = async () => {
  try {
    // Fetch all necessary data using the store's actions
    await Promise.all([
      aboutUsStore.fetchVisionMission(),
      aboutUsStore.fetchWhoWeAre(),
      aboutUsStore.fetchOurJourney(),
      aboutUsStore.fetchOurCreed(),
      aboutUsStore.fetchCoreValues(), // Make sure this is fetched
      aboutUsStore.fetchKeyCapabilities(),
    ]);

    // Assign data from store getters to local refs
    visionData.value = aboutUsStore.getVisionMissionForDisplay;
    whoWeAreData.value = aboutUsStore.getWhoWeAreForDisplay;
    ourJourneyData.value = aboutUsStore.getOurJourneyForDisplay;
    // --- แก้ไขบรรทัดนี้: เปลี่ยนจาก aboutStore เป็น aboutUsStore ---
    ourCreedData.value = aboutUsStore.getOurCreedForDisplay;
    // -----------------------------------------------------------
    coreValuesData.value = aboutUsStore.getCoreValuesForDisplay; // Assign data
    keyCapabilitiesData.value = aboutUsStore.getKeyCapabilitiesForDisplay;

  } catch (err) {
    // Errors are already handled within the store's `errors` ref
    console.error("Error fetching data in VisionMissionView:", err);
  }
};


onMounted(() => {
  fetchAllData();
});

watch(() => appStore.checkLang.isTh, () => {
  // If your API fetches different data based on locale, uncomment this line
  // fetchAllData();
  // Otherwise, if translation is handled by getters, no need to re-fetch
});
</script>

<style scoped>
/* Tailwind CSS utility classes are mostly used in the template. */
/* Custom card-header background color from your original code */
.card-header {
  background-color: #c1d4db; /* ใช้สีเดิมที่คุณกำหนด */
}

/* Base Prose adjustments for lists */
.prose :deep(ul) {
  list-style-type: disc;
  padding-left: 1.5em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.prose :deep(ol) {
  list-style-type: decimal;
  padding-left: 1.5em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.prose :deep(li) {
  margin-bottom: 0.5em;
}
.prose :deep(p) {
  margin-bottom: 1em;
}

/* Styles for core value cards (unchanged) */
.core-value-card {
  /* Aspect ratio to maintain consistent height */
  aspect-ratio: 4 / 3; /* Width:Height, adjust as needed for your images */
  min-height: 200px; /* Minimum height for readability */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Align content to the bottom initially */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.core-value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.core-value-card .absolute.inset-0 {
  /* This overlay will handle the content and hover effect */
  opacity: 0; /* Hidden by default */
  background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black overlay */
  transition: opacity 0.3s ease-in-out;
}

.core-value-card:hover .absolute.inset-0 {
  opacity: 1; /* Visible on hover */
}

/* Ensure text is readable over the background image */
.core-value-card h3, .core-value-card p, .core-value-card a {
  color: white;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

/* Adjust text size for smaller screens if needed */
@media (max-width: 639px) { /* sm breakpoint */
  .core-value-card h3 {
    font-size: 1.125rem; /* text-lg */
  }
  .core-value-card p {
    font-size: 0.875rem; /* text-sm */
  }
}

/* Styles for Vision, Mission, Obligation cards (unchanged) */
.vm-card {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.vm-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
</style>