// src/views/about/OrganizationStructureView.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_th : header_en }}
      </h1>
    </div>

    <div v-if="aboutUsStore.isLoading.organizationStructure" 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 organization hierarchy...' }}</p>
    </div>

    <div v-else-if="aboutUsStore.errors.organizationStructure" class="text-center text-red-600 py-20">
      <p class="text-xl font-medium">{{ appStore.checkLang.isTh ? 'เกิดข้อผิดพลาดในการโหลดโครงสร้างองค์กร' : 'Error loading organization hierarchy.' }}</p>
      <p class="text-sm mt-2">
        {{ appStore.checkLang.isTh ? 'ไม่สามารถดึงข้อมูลโครงสร้างองค์กรได้ โปรดลองอีกครั้ง' : 'Failed to fetch organization hierarchy data. Please try again.' }}
      </p>
    </div>

    <div v-else-if="aboutUsStore.getOrganizationStructureForDisplay">
      <OrganizationTreeDiagram :treeData="aboutUsStore.getOrganizationStructureForDisplay" />
    </div>

    <div v-else class="text-center text-gray-400 py-16">
      <p class="text-xl">{{ appStore.checkLang.isTh ? 'ไม่พบข้อมูลโครงสร้างองค์กร' : 'No organization hierarchy found.' }}</p>
    </div>
  </div>
</template>

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

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

const header_th = "โครงสร้างองค์กรสมมุติ";
const header_en = "Fictional Organization Hierarchy";

onMounted(() => {
  aboutUsStore.fetchOrganizationStructure();
});
</script>

<style scoped>
/* No specific styles needed here, Tailwind handles it */
</style>