<template>
    <view class="scroll-container theme-light">
        <view class="bt-page">
            <MemberInfoSubNav title="体测设置" @back="onBack" />
            <view class="bt-page__body">
                <view class="bt-card">
                    <text class="bt-card__title">单位制</text>
                    <view class="bt-setting-row" @tap="toggleUnit">
                        <text class="bt-setting-row__label">单位制</text>
                        <view class="bt-setting-row__value">
                            <text class="bt-setting-row__text">{{ unitLabel }}</text>
                            <image
                                class="bt-setting-row__arrow"
                                src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/rightarrow.png"
                                mode="aspectFit"
                            />
                        </view>
                    </view>
                </view>

                <view class="bt-card">
                    <text class="bt-card__title">设备管理</text>
                    <view class="bt-device-row">
                        <view class="bt-device-row__icon">
                            <image
                                src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/bluetooth.png"
                                mode="aspectFit"
                            />
                        </view>
                        <view class="bt-device-row__info">
                            <text class="bt-device-row__name">{{ device.name || '未连接设备' }}</text>
                            <text class="bt-device-row__status">
                                {{ device.connected ? `已连接 · 电量 ${device.battery}%` : '点击连接体脂秤' }}
                            </text>
                        </view>
                        <view
                            v-if="device.connected"
                            class="bt-device-row__disconnect"
                            hover-class="mi-tap-btn--hover"
                            @tap="disconnect"
                        >
                            <text class="bt-device-row__disconnect-text">解除</text>
                        </view>
                    </view>
                </view>

                <view class="bt-card">
                    <text class="bt-card__title">通知提醒</text>
                    <view class="bt-setting-row">
                        <text class="bt-setting-row__label">体测提醒</text>
                        <switch
                            :checked="settings.remindEnabled"
                            @change="(e) => onSwitch('remindEnabled', e)"
                        />
                    </view>
                    <view v-if="settings.remindEnabled" class="bt-setting-row">
                        <text class="bt-setting-row__label">提醒周期</text>
                        <picker
                            mode="selector"
                            :range="['每周', '每两周', '每月']"
                            :value="settings.remindInterval"
                            @change="(e) => onSwitch('remindInterval', e)"
                        >
                            <view class="bt-setting-row__value">
                                <text class="bt-setting-row__text">
                                    {{ ['每周', '每两周', '每月'][settings.remindInterval] }}
                                </text>
                                <image
                                    class="bt-setting-row__arrow"
                                    src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/rightarrow.png"
                                    mode="aspectFit"
                                />
                            </view>
                        </picker>
                    </view>
                </view>

                <view class="bt-card">
                    <text class="bt-card__title">隐私设置</text>
                    <view class="bt-setting-row">
                        <text class="bt-setting-row__label">数据可见性</text>
                        <picker
                            mode="selector"
                            :range="['仅本人', '教练可见', '完全公开']"
                            :value="settings.privacy"
                            @change="(e) => onSwitch('privacy', e)"
                        >
                            <view class="bt-setting-row__value">
                                <text class="bt-setting-row__text">
                                    {{ ['仅本人', '教练可见', '完全公开'][settings.privacy] }}
                                </text>
                                <image
                                    class="bt-setting-row__arrow"
                                    src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/rightarrow.png"
                                    mode="aspectFit"
                                />
                            </view>
                        </picker>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { PAGE, goBackOrTab } from '@/common/constants/routes.js'
import {
    loadMemberStore,
    persistMemberStore
} from '@/common/memberInfo/store.js'
import {
    updateBodyTestSettings,
    disconnectBodyTestDevice
} from '@/common/memberInfo/bodyTestStore.js'

const settings = ref({})
const device = ref({})

const unitLabel = computed(() => {
    return settings.value.unitSystem === 'imperial' ? '英制 (lb / in)' : '公制 (kg / cm)'
})

function refreshFromStore() {
    const store = loadMemberStore()
    settings.value = { ...store.bodyTest.settings }
    device.value = { ...store.bodyTest.device }
}

function onBack() {
    goBackOrTab(PAGE.BODY_TEST_HOME)
}

function onSwitch(key, e) {
    const store = loadMemberStore()
    updateBodyTestSettings(store, { [key]: e.detail.value })
    persistMemberStore(store)
    refreshFromStore()
    uni.showToast({ title: '已保存', icon: 'success' })
}

function toggleUnit() {
    const store = loadMemberStore()
    const next = settings.value.unitSystem === 'metric' ? 'imperial' : 'metric'
    updateBodyTestSettings(store, { unitSystem: next })
    persistMemberStore(store)
    refreshFromStore()
    uni.showToast({ title: `已切换为${unitLabel.value}`, icon: 'none' })
}

function disconnect() {
    uni.showModal({
        title: '解除配对',
        content: '解除后下次体测需重新连接设备，确定继续？',
        success: (res) => {
            if (!res.confirm) return
            const store = loadMemberStore()
            disconnectBodyTestDevice(store)
            persistMemberStore(store)
            refreshFromStore()
            uni.showToast({ title: '已解除配对', icon: 'success' })
        }
    })
}

refreshFromStore()
</script>

<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
@import '@/common/style/memberInfo/member-info-component-reset.css';
@import '@/common/style/memberInfo/member-info-sub-nav.css';
@import '@/common/style/memberInfo/member-info-tap.css';
@import '@/common/style/memberInfo/pages/body-test-common.css';
</style>
