<template>
    <view class="scroll-container theme-light">
        <view class="bt-page">
            <MemberInfoSubNav title="体测" @back="goBack" />
            <view class="bt-page__body">
                <view v-if="latest" class="bt-hero">
                    <view class="bt-hero__time">
                        <image class="bt-hero__time-icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/clock.png" mode="aspectFit" />
                        <text class="bt-hero__time-text">{{ latest.testTime }}</text>
                    </view>
                    <view class="bt-hero__metrics">
                        <view
                            v-for="m in previewMetrics"
                            :key="m.key"
                            class="bt-hero__metric"
                        >
                            <text class="bt-hero__metric-value">{{ m.value }}</text>
                            <text class="bt-hero__metric-label">{{ m.label }}</text>
                        </view>
                    </view>
                    <view class="bt-hero__actions">
                        <view
                            class="bt-btn bt-btn--primary"
                            hover-class="mi-tap-btn--hover"
                            :hover-stay-time="150"
                            @tap="viewLatestReport"
                        >
                            <text class="bt-btn__text">查看报告</text>
                        </view>
                    </view>
                </view>

                <view class="bt-card">
                    <view class="bt-card__header">
                        <text class="bt-card__title">快捷操作</text>
                    </view>
                    <view class="bt-quick-grid">
                        <view
                            v-for="link in quickLinks"
                            :key="link.key"
                            class="bt-quick-item"
                            hover-class="mi-tap--hover"
                            :hover-stay-time="150"
                            @tap="onQuickLink(link.key)"
                        >
                            <image class="bt-quick-item__icon" :src="link.icon" mode="aspectFit" />
                            <text class="bt-quick-item__label">{{ link.label }}</text>
                        </view>
                    </view>
                </view>

                <view class="bt-card">
                    <view class="bt-card__header">
                        <text class="bt-card__title">开始体测</text>
                    </view>
                    <view class="bt-device-status" @tap="startMeasure">
                        <view class="bt-device-status__icon-wrap">
                            <image
                                class="bt-device-status__icon"
                                src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/bluetooth.png"
                                mode="aspectFit"
                            />
                        </view>
                        <view class="bt-device-status__info">
                            <text class="bt-device-status__name">{{ device.name || '体脂秤' }}</text>
                            <text class="bt-device-status__text">{{ deviceStatusText }}</text>
                        </view>
                        <image
                            class="bt-device-status__arrow"
                            src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/rightarrow.png"
                            mode="aspectFit"
                        />
                    </view>
                    <view class="bt-card__actions">
                        <view
                            class="bt-btn bt-btn--primary"
                            hover-class="mi-tap-btn--hover"
                            :hover-stay-time="150"
                            @tap="startMeasure"
                        >
                            <text class="bt-btn__text">{{ device.connected ? '开始测量' : '连接设备' }}</text>
                        </view>
                    </view>
                </view>

                <view class="bt-settings-link" @tap="goSettings">
                    <text class="bt-settings-link__text">体测设置</text>
                    <image class="bt-settings-link__arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/rightarrow.png" mode="aspectFit" />
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { PAGE, navigateToPage, backToMemberCenter } from '@/common/constants/routes.js'
import { loadMemberStore } from '@/common/memberInfo/store.js'
import { getLatestBodyTestRecord } from '@/common/memberInfo/bodyTestStore.js'

const latest = ref(null)
const device = ref({})
const quickLinks = ref([
    { key: 'history', label: '历史记录', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/clock.png' },
    { key: 'compare', label: '历史对比', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/trendingdown.png' },
    { key: 'trend', label: '趋势分析', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/activity.png' },
    { key: 'report', label: '体测报告', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/filetext.png' }
])

const deviceStatusText = computed(() => {
    if (device.value.connected) {
        return `已连接 · 电量 ${device.value.battery}%`
    }
    return '未连接 · 点击开始体测进行配对'
})

const previewMetrics = computed(() => {
    if (!latest.value?.metrics) return []
    const m = latest.value.metrics
    return [
        { key: 'weight', label: '体重(kg)', value: m.weight },
        { key: 'bmi', label: 'BMI', value: m.bmi },
        { key: 'bodyFat', label: '体脂率(%)', value: m.bodyFat },
        { key: 'muscleMass', label: '肌肉量(kg)', value: m.muscleMass }
    ]
})

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

function goBack() {
    backToMemberCenter()
}

function startMeasure() {
    const store = loadMemberStore()
    if (store.bodyTest.device.connected) {
        navigateToPage(PAGE.BODY_TEST_MEASURING)
    } else {
        navigateToPage(PAGE.BODY_TEST_CONNECT)
    }
}

function viewLatestReport() {
    if (!latest.value) return
    navigateToPage(`${PAGE.BODY_TEST_REPORT}?id=${latest.value.id}`)
}

function goSettings() {
    navigateToPage(PAGE.BODY_TEST_SETTINGS)
}

function onQuickLink(key) {
    const routes = {
        history: PAGE.BODY_TEST_HISTORY,
        compare: PAGE.BODY_TEST_COMPARE,
        trend: PAGE.BODY_TEST_TREND,
        report: latest.value
            ? `${PAGE.BODY_TEST_REPORT}?id=${latest.value.id}`
            : PAGE.BODY_TEST_HISTORY
    }
    navigateToPage(routes[key] || PAGE.BODY_TEST_HOME)
}

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>
