<template>
    <div class="page-container">
        <div class="page-header">
            <h1 class="page-title">{{ $t('learn-our-solutions') }}</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('/solutions')">{{ $t('navigation.solutions') }}</NuxtLink>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="solutions-container">
            <el-tabs v-model="activeName" class="solutions-tabs">
                <el-tab-pane :label="$t('all')" name="all">
                    <div class="solution-list">
                        <production-card
v-for="solution in solutions" :key="solution.documentId || solution.id"
                            :slug="solution.documentId"
                            :image-url="useStrapiMedia(solution?.cover?.url || '')"
                            :name="solution.title" :description="solution.summary || ''" />
                    </div>
                </el-tab-pane>
                <el-tab-pane
v-for="(group, type) in groupedSolutions" :key="type" :label="type || '未分类'"
                    :name="type || 'no-category'">
                    <div class="solution-list">
                        <production-card
v-for="solution in group" :key="solution.documentId || solution.id"
                            :slug="solution.documentId"
                            :image-url="useStrapiMedia(solution?.cover?.url || '')"
                            :name="solution.title" :description="solution.summary || ''" />
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

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

const strapiLocale = getStrapiLocale()

const activeName = ref<string>('all')

const solutions = ref<Solution[]>([])

// 按类型分组
const groupedSolutions = computed(() => {
    const gourps: Record<string, Solution[]> = {}
    for (const sol of solutions.value) {
        let typeKey = ''
        if (typeof sol.solution_type === 'string') {
            typeKey = sol.solution_type
        } else if (sol.solution_type && typeof sol.solution_type === 'object' && 'type' in sol.solution_type) {
            typeKey = sol.solution_type.type || ''
        }
        if (!gourps[typeKey]) gourps[typeKey] = []
        gourps[typeKey]?.push(sol)
    }
    return gourps
})



onMounted(async () => {
    try {
        const response = await find<Solution>('solutions', {
            populate: {
                cover: {
                    populate: '*',
                },
                solution_type: {
                    populate: '*',
                },
            },
            locale: strapiLocale,
        })
        solutions.value = response.data.map((item: Solution) => ({
            ...item,
            solution_type: item.solution_type,
        }))
        console.log('Fetched Solutions:', solutions.value)
        console.log('Grouped Solutions:', groupedSolutions.value)
    } catch (error) {
        console.error('Failed to fetch solutions:', 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);
}

.breadcrumb {
    margin-left: auto;
}

.solution-list {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}
</style>