<template>
    <div class="page-container">
        <div class="page-header">
            <h1 class="page-title">{{ $t('our-productions') }}</h1>
            <el-breadcrumb class="breadcrumb">
                <el-breadcrumb-item class="text-md opacity-50">
                    <NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
                </el-breadcrumb-item>
                <el-breadcrumb-item class="text-md opacity-50">
                    <NuxtLink :to="$localePath('/productions')">{{ $t('navigation.productions') }}</NuxtLink>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="productions-container">
            <el-collapse v-model="activeNames" class="production-collapse">
                <el-collapse-item
v-for="(group, type) in groupedProductions" :key="type" :title="type || '未分类'"
                    :name="type || 'no-category'">
                    <div class="group-list">
                        <production-card
v-for="production in group" :key="production.documentId || production.id"
                            :slug="production.documentId"
                            :image-url="useStrapiMedia(production?.production_image?.url || '')"
                            :name="production.title" :description="production.summary || ''" />
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>



<script setup lang="ts">
const { find } = useStrapi()
const { getStrapiLocale } = useLocalizations()

const strapiLocale = getStrapiLocale()

const activeNames = ref<string[]>([])

const productions = ref<Production[]>([])

// 按类型分组
// 兼容 production_type 既可能为对象也可能为字符串
const groupedProductions = computed(() => {
    const groups: Record<string, Production[]> = {}
    for (const prod of productions.value) {
        let typeKey = ''
        if (typeof prod.production_type === 'string') {
            typeKey = prod.production_type
        } else if (prod.production_type && typeof prod.production_type === 'object' && 'type' in prod.production_type) {
            typeKey = prod.production_type.type || ''
        }
        if (!groups[typeKey]) groups[typeKey] = []
        groups[typeKey]?.push(prod)
    }
    return groups
})

onMounted(async () => {
    try {
        const response = await find<Production>('productions', {
            populate: {
                production_image: {
                    populate: '*',
                },
                production_type: {
                    populate: '*',
                }
            },
            filters: {
                show_in_production_list: {
                    $eq: true, // 只获取在产品列表中显示的产品
                },
            },
            locale: strapiLocale,
        })
        productions.value = response.data.map((item: Production) => ({
            ...item,
            // 保持 production_type 原始类型，兼容对象或字符串
            production_type: item.production_type,
        }))
        // 默认展开所有分组
        activeNames.value = Object.keys(groupedProductions.value)
        activeNames.value.push('no-category') // 展开未分类
    } catch (error) {
        console.error('Failed to fetch productions:', error)
    }
});
</script>

<style scoped>
.page-container {
    padding: 2rem 1rem;
}

.page-header {
    display: flex;
}

.page-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--el-color-primary);
    margin-bottom: 1rem;
}

.breadcrumb {
    margin-left: auto;
}

.productions-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.production-group {
    margin-bottom: 32px;
}

.group-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 16px;
    color: var(--el-color-primary);
}

.group-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
}

:deep(.el-collapse-item__header) {
    padding: 30px auto;
    font-size: 1.5rem;
}
</style>