<script setup lang="ts">
/**
 * @file CategorySidebar.vue
 * @description แถบเมนูด้านข้างสำหรับกรองคอร์สตามหมวดหมู่ (Sidebar for filtering courses by category)
 */

const props = defineProps<{
  categories: any[];
  modelValue: number[]; // selectedCategoryIds
}>();

const emit = defineEmits<{
  (e: "update:modelValue", value: number[]): void;
}>();

const { locale, t } = useI18n();
const showAllCategories = ref(false);

const getLocalizedText = (text: any) => {
  if (!text) return "";
  if (typeof text === "string") return text;
  
  const currentLocale = locale.value as 'th' | 'en';
  return text[currentLocale] || text.th || text.en || "";
};
const toggleCategory = (id: number) => {
  const current = [...props.modelValue];
  const index = current.indexOf(id);
  if (index > -1) {
    current.splice(index, 1);
  } else {
    current.push(id);
  }
  emit("update:modelValue", current);
};
</script>

<template>
    <div class="bg-white/60 dark:!bg-[#0f172a]/60 backdrop-blur-3xl rounded-[2.5rem] border border-slate-200 dark:border-white/10 shadow-xl shadow-blue-900/5 overflow-hidden transition-all duration-500">
        <q-expansion-item
            default-opened
            expand-separator
            header-class="py-6 px-8"
            class="group"
        >
            <template v-slot:header>
                <div class="flex items-center gap-4 w-full">
                    <div class="w-10 h-10 rounded-xl bg-blue-600/10 dark:bg-blue-400/10 flex items-center justify-center">
                        <q-icon name="category" class="text-blue-600 dark:text-blue-400" size="20px" />
                    </div>
                    <div class="flex-1">
                        <div class="text-lg font-black text-slate-900 dark:!text-white leading-none mb-1">{{ $t('discovery.categoryTitle') }}</div>
                        <div class="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-slate-500">{{ modelValue.length }} {{ $t('discovery.selectable') }}</div>
                    </div>
                </div>
            </template>

            <div class="px-3 pb-6 pt-2">
                <div class="space-y-1">
                    <div 
                        v-for="cat in showAllCategories ? categories : categories.slice(0, 5)" 
                        :key="cat.id"
                        class="relative group/item"
                    >
                        <div 
                            class="flex items-center gap-3 px-5 py-3 rounded-2xl transition-all cursor-pointer border border-transparent"
                            :class="modelValue.includes(cat.id) ? 'bg-blue-600/5 dark:bg-blue-400/5 border-blue-100 dark:border-blue-400/20 shadow-sm shadow-blue-500/5' : 'hover:bg-slate-50 dark:hover:bg-white/5'"
                            @click="toggleCategory(cat.id)"
                        >
                            <q-checkbox 
                                :model-value="modelValue.includes(cat.id)"
                                @update:model-value="toggleCategory(cat.id)"
                                color="primary"
                                keep-color
                                dense
                            />
                            <span 
                                class="text-sm font-bold transition-colors truncate"
                                :class="modelValue.includes(cat.id) ? 'text-blue-700 dark:text-blue-400' : 'text-slate-700 dark:text-slate-400 group-hover/item:text-slate-900 dark:group-hover/item:text-white'"
                            >
                                {{ getLocalizedText(cat.name) }}
                            </span>
                            
                            <!-- จุดแสดงสถานะเมื่อถูกเลือก (Active Indicator Dot) -->
                            <div v-if="modelValue.includes(cat.id)" class="ml-auto w-1.5 h-1.5 rounded-full bg-blue-600 dark:bg-blue-400 shadow-lg shadow-blue-500/50"></div>
                        </div>
                    </div>
                </div>

                <!-- ปุ่มแสดงเพิ่มเติม/แสดงน้อยลง (Show More/Less Action) -->
                <div 
                    v-if="categories.length > 5"
                    @click="showAllCategories = !showAllCategories"
                    class="mt-4 mx-2 py-3 px-5 rounded-xl border border-dashed border-slate-200 dark:border-white/10 flex items-center justify-center gap-2 cursor-pointer text-slate-500 dark:text-slate-400 hover:border-blue-300 dark:hover:border-blue-500/40 hover:text-blue-600 dark:hover:text-blue-400 transition-all font-bold text-xs uppercase tracking-widest"
                >
                    {{ showAllCategories ? $t('discovery.showLess') : $t('discovery.showMore') }}
                    <q-icon :name="showAllCategories ? 'keyboard_arrow_up' : 'keyboard_arrow_down'" size="16px" />
                </div>
            </div>
        </q-expansion-item>
    </div>
</template>
