<template>
    <div class="page-container">
        <div v-if="content">
            <div class="page-tab">
                <el-segmented v-model="activeTab" class="segmented" :options="options" block size="large" @change="handleSegmentedChange" />
            </div>
            <div class="page-header">
                <h1 class="page-title">{{ $t('navigation.contact-info') }}</h1>
                <el-breadcrumb class="breadcrumb" separator="/">
                    <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('/support')">
                            {{ $t('navigation.support') }}
                        </NuxtLink>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item class="text-md opacity-50">
                        <NuxtLink :to="$localePath('/support/contact-us')">
                            {{ $t('navigation.contact-info') }}
                        </NuxtLink>
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </div>

            <div class="page-content">
                <markdown-renderer :content="content || ''" />
            </div>
        </div>
        <div v-else class="loading">
            <el-skeleton :rows="5" animated />
        </div>
    </div>
</template>

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

const strapiLocale = getStrapiLocale()

const content = ref<string>('')

const activeTab = ref('contact-us')
const options = [
    { label: '服务支持', value: '' },
    { label: '常见问题', value: 'faq' },
    { label: '联系售后', value: 'contact-us' },
    { label: '文档资料', value: 'documents' },
]

const handleSegmentedChange = (value: string) => {
    const localePath = useLocalePath()
    navigateTo(localePath(`/support/${value}`))
}

onMounted(async () => {
    try {
        const response = await findOne<StrapiContactInfo>('contact-info', undefined, {
            populate: '*',
            locale: strapiLocale,
        })
        if (response.data) {
            content.value = response.data.content || ''
        } else {
            console.warn('No contact info data found')
        }
    } catch (error) {
        console.error('Failed to fetch contact info:', error)
    }
})
</script>

<style scoped>
.page-header {
    display: flex;
    padding: 2rem 2rem 0rem;
}

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

.breadcrumb {
    margin-left: auto;
}

.segmented {
    --el-segmented-bg-color: transparent;
    --el-segmented-item-active-color: var(--el-color-primary);
    --el-segmented-item-color: var(--el-text-color-secondary);
    --el-segmented-item-hover-color: var(--el-color-primary);
    --el-segmented-item-border-color: transparent;
    --el-segmented-item-active-border-color: transparent;
    border-bottom: 1px solid var(--el-border-color-light);
}

.segmented :deep(.el-segmented__item-selected) {
    /* --el-border-radius-base: 16px; */
    transition: none;
    background: transparent;
}

.segmented :deep(.el-segmented__item) {

    &:hover {
        background: transparent;
        color: var(--el-color-primary);
    }

    &.is-selected {
        color: var(--el-color-primary-dark-2);
        border-bottom: 4px solid var(--el-color-primary-dark-2);
    }
}

.page-content {
    padding: 2rem;
    margin-bottom: 2rem;
}

:deep(.markdown-body ul) {
    list-style-type: none;
}
</style>