<template>
    <view class="privacy-screen">
        <view class="privacy-header">
            <view class="privacy-back" @click="handleBack">
                <text class="privacy-back-icon">←</text>
            </view>
            <text class="privacy-title">隐私政策</text>
        </view>

        <view v-if="loading" class="privacy-loading">
            <text class="privacy-loading-text">加载中...</text>
        </view>

        <view v-else-if="error" class="privacy-error">
            <text class="privacy-error-text">{{ error }}</text>
            <button class="privacy-retry-btn" @click="loadPrivacyPolicy">
                <text class="privacy-retry-text">重试</text>
            </button>
        </view>

        <view v-else class="privacy-content">
            <view v-if="policy" class="privacy-info">
                <text class="privacy-version">版本：{{ policy.version }}</text>
                <text class="privacy-date">生效日期：{{ policy.effective_date }}</text>
            </view>

            <view v-if="policy" class="privacy-body" v-html="policy.content"></view>

            <view v-if="!policy" class="privacy-default">
                <view class="privacy-section">
                    <text class="privacy-section-title">引言</text>
                    <text class="privacy-text">
                        壹梵起名（以下简称"我们"）非常重视用户的隐私保护。本隐私政策旨在向您说明我们如何收集、使用、存储和保护您的个人信息。
                    </text>
                </view>

                <view class="privacy-section">
                    <text class="privacy-section-title">一、我们收集的信息</text>
                    <text class="privacy-text">
                        1. 账号信息：手机号码、密码等注册信息；
                    </text>
                    <text class="privacy-text">
                        2. 服务信息：您在使用起名、测名等服务时提供的姓名、出生日期、性别等信息；
                    </text>
                    <text class="privacy-text">
                        3. 设备信息：设备型号、操作系统版本、设备标识符等；
                    </text>
                    <text class="privacy-text">
                        4. 日志信息：IP地址、访问时间、浏览记录等。
                    </text>
                </view>

                <view class="privacy-section">
                    <text class="privacy-section-title">二、信息的使用</text>
                    <text class="privacy-text">
                        我们收集的信息将用于：
                    </text>
                    <text class="privacy-text">
                        1. 提供、维护和改进我们的服务；
                    </text>
                    <text class="privacy-text">
                        2. 处理您的订单和支付；
                    </text>
                    <text class="privacy-text">
                        3. 向您发送服务通知和更新；
                    </text>
                    <text class="privacy-text">
                        4. 保护服务安全，防止欺诈；
                    </text>
                    <text class="privacy-text">
                        5. 遵守法律法规要求。
                    </text>
                </view>

                <view class="privacy-section">
                    <text class="privacy-section-title">三、信息的共享</text>
                    <text class="privacy-text">
                        我们不会向第三方出售、出租或以其他方式披露您的个人信息，除非：
                    </text>
                    <text class="privacy-text">
                        1. 获得您的明确同意；
                    </text>
                    <text class="privacy-text">
                        2. 法律法规要求；
                    </text>
                    <text class="privacy-text">
                        3. 为提供服务所必需（如支付服务提供商）；
                    </text>
                    <text class="privacy-text">
                        4. 保护我们或他人的合法权益。
                    </text>
                </view>

                <view class="privacy-section">
                    <text class="privacy-section-title">四、信息的存储</text>
                    <text class="privacy-text">
                        您的个人信息将存储在中华人民共和国境内的服务器上。我们将采取合理的安全措施保护您的信息，包括加密存储、访问控制等。
                    </text>
                </view>

                <view class="privacy-section">
                    <text class="privacy-section-title">五、您的权利</text>
                    <text class="privacy-text">
                        您有权：
                    </text>
                    <text class="privacy-text">
                        1. 访问、更正或删除您的个人信息；
                    </text>
                    <text class="privacy-text">
                        2. 撤回您的同意；
                    </text>
                    <text class="privacy-text">
                        3. 注销您的账号；
                    </text>
                    <text class="privacy-text">
                        4. 投诉或举报。
                    </text>
                </view>

                <view class="privacy-section">
                    <text class="privacy-section-title">六、未成年人保护</text>
                    <text class="privacy-text">
                        我们非常重视未成年人的个人信息保护。如果您是未成年人，请在监护人的陪同下阅读本政策，并在监护人同意的情况下使用我们的服务。
                    </text>
                </view>

                <view class="privacy-section">
                    <text class="privacy-section-title">七、政策更新</text>
                    <text class="privacy-text">
                        我们可能会不时更新本隐私政策。更新后的政策将在平台上公布，并在您继续使用服务时生效。
                    </text>
                </view>

                <view class="privacy-section">
                    <text class="privacy-section-title">八、联系我们</text>
                    <text class="privacy-text">
                        如果您对本隐私政策有任何疑问或建议，请通过平台内的反馈功能联系我们。
                    </text>
                </view>

                <view class="privacy-footer">
                    <text class="privacy-footer-text">壹梵起名</text>
                    <text class="privacy-footer-text">生效日期：2024年1月1日</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { userApi } from '@/api';
import type { PrivacyPolicyResponse } from '@/api/types';

const router = useRouter();
const loading = ref(true);
const error = ref('');
const policy = ref<PrivacyPolicyResponse | null>(null);

const handleBack = () => {
    router.back();
};

const loadPrivacyPolicy = async () => {
    loading.value = true;
    error.value = '';

    try {
        const result = await userApi.getPrivacyPolicy();
        policy.value = result;
    } catch (err: any) {
        console.error('加载隐私政策失败:', err);
        error.value = err.msg || '加载失败，请重试';
    } finally {
        loading.value = false;
    }
};

onMounted(() => {
    loadPrivacyPolicy();
});
</script>

<style scoped>
.privacy-screen {
    min-height: 100vh;
    width: 100%;
    background: #fdfbf7 url("https://www.transparenttextures.com/patterns/rice-paper.png");
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.privacy-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: rgba(253, 251, 247, 0.95);
    border-bottom: 1px solid #eaddcf;
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

.privacy-back {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 12px;
    flex-shrink: 0;
}

.privacy-back-icon {
    font-size: 24px;
    color: #8b2323;
    font-weight: bold;
}

.privacy-title {
    font-size: 18px;
    font-weight: 500;
    color: #2c2c2c;
    font-family: SimSun, "Songti SC", serif;
}

.privacy-loading,
.privacy-error {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.privacy-loading-text,
.privacy-error-text {
    font-size: 14px;
    color: #8a8a8a;
    font-family: SimSun, "Songti SC", serif;
    margin-bottom: 16px;
}

.privacy-retry-btn {
    padding: 8px 24px;
    background: #8b2323;
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    font-family: SimSun, "Songti SC", serif;
}

.privacy-content {
    flex: 1;
    padding: 24px 20px 40px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
}

.privacy-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(139, 35, 35, 0.05);
    border-radius: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 8px;
}

.privacy-version,
.privacy-date {
    font-size: 13px;
    color: #8b2323;
    font-family: SimSun, "Songti SC", serif;
}

.privacy-body {
    font-size: 14px;
    line-height: 1.8;
    color: #4a4a4a;
    font-family: SimSun, "Songti SC", serif;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

.privacy-default {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.privacy-section {
    margin-bottom: 24px;
    width: 100%;
}

.privacy-section-title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #8b2323;
    margin-bottom: 12px;
    font-family: SimSun, "Songti SC", serif;
    word-wrap: break-word;
    word-break: break-word;
}

.privacy-text {
    display: block;
    font-size: 14px;
    line-height: 1.8;
    color: #4a4a4a;
    margin-bottom: 8px;
    font-family: SimSun, "Songti SC", serif;
    word-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.privacy-footer {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #eaddcf;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.privacy-footer-text {
    display: block;
    font-size: 13px;
    color: #8a8a8a;
    font-family: SimSun, "Songti SC", serif;
}
</style>
