<template>
	<view class="page">
		<view v-if="loading" class="state-wrap">
			<text class="state-text">加载分享数据中...</text>
		</view>

		<view v-else-if="errorText" class="state-wrap">
			<text class="state-text">{{ errorText }}</text>
			<button class="retry-btn" @tap="reload">重新加载</button>
		</view>

		<view v-else>
			<view class="owner-card">
				<image class="avatar" :src="owner.avatar_url || defaultAvatar" mode="aspectFill"></image>
				<view class="owner-main">
					<text class="owner-name">{{ owner.nickname || '戒烟用户' }}</text>
					<text class="owner-desc">分享了自己的戒烟记录（只读）</text>
				</view>
			</view>

			<view class="overview-grid">
				<view class="overview-item">
					<text class="overview-label">今日吸烟</text>
					<text class="overview-value">{{ overview.today_count || 0 }}</text>
				</view>
				<view class="overview-item">
					<text class="overview-label">今日忍住</text>
					<text class="overview-value">{{ overview.resisted_count || 0 }}</text>
				</view>
				<view class="overview-item">
					<text class="overview-label">连续记录</text>
					<text class="overview-value">{{ overview.streak_days || 0 }}天</text>
				</view>
				<view class="overview-item">
					<text class="overview-label">较昨日变化</text>
					<text class="overview-value" :class="overview.exceeded_yesterday ? 'warning' : 'success'">
						{{ overview.exceeded_yesterday ? '+' : '-' }}{{ overview.reduced_from_yesterday || 0 }}
					</text>
				</view>
			</view>

			<view class="section">
				<view class="section-header">
					<text class="section-title">统计报表</text>
					<view class="range-tabs">
						<view
							v-for="item in rangeTabs"
							:key="item.value"
							class="range-item"
							:class="{ active: range === item.value }"
							@tap="switchRange(item.value)"
						>
							{{ item.label }}
						</view>
					</view>
				</view>

				<view class="stats-row">
					<view class="stats-block">
						<text class="stats-key">日均支数</text>
						<text class="stats-val">{{ stats.daily_average || 0 }}</text>
					</view>
					<view class="stats-block">
						<text class="stats-key">变化幅度</text>
						<text class="stats-val">{{ stats.change_percent || 0 }}%</text>
					</view>
					<view class="stats-block">
						<text class="stats-key">范围忍住</text>
						<text class="stats-val">{{ stats.resisted_total || 0 }}</text>
					</view>
				</view>

				<view class="trend-wrap">
					<view v-for="(item, index) in stats.trend || []" :key="index" class="trend-item">
						<text class="trend-label">{{ item.label }}</text>
						<view class="trend-bar-bg">
							<view class="trend-bar" :style="{ width: trendWidth(item.count) + '%' }"></view>
						</view>
						<text class="trend-count">{{ item.count }}</text>
					</view>
				</view>
			</view>

			<view class="section">
				<view class="section-header">
					<text class="section-title">记录详情（只读）</text>
					<view class="range-tabs">
						<view
							v-for="item in logTypeTabs"
							:key="item.value"
							class="range-item"
							:class="{ active: logType === item.value }"
							@tap="switchLogType(item.value)"
						>
							{{ item.label }}
						</view>
					</view>
				</view>

				<view v-if="logs.length === 0" class="empty-box">
					<text class="empty-text">暂无记录</text>
				</view>
				<view v-else class="log-list">
					<view v-for="item in logs" :key="item.id" class="log-item" @tap="showDetail(item)">
						<view class="log-top">
							<text class="log-time">{{ displayTime(item) }}</text>
							<text class="log-type" :class="resolveType(item) === 'resisted' ? 'resisted' : 'smoke'">
								{{ resolveType(item) === 'resisted' ? '已忍住' : '已抽烟' }}
							</text>
						</view>
						<view class="log-meta">
							<text>数量：{{ item.num ?? 0 }}</text>
							<text>强度：{{ levelLabel(item.level) }}</text>
						</view>
						<text class="log-remark">{{ (item.remark && String(item.remark).trim()) || '无备注' }}</text>
					</view>
				</view>

				<button
					v-if="logs.length < total"
					class="load-more"
					:disabled="loadingMore"
					@tap="loadMore"
				>
					{{ loadingMore ? '加载中...' : '加载更多' }}
				</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getShareData } from '@/api'

const defaultAvatar = '/static/icons/profile.png'

const loading = ref(true)
const loadingMore = ref(false)
const errorText = ref('')

const shareToken = ref('')
const range = ref('week')
const logType = ref('all')

const owner = ref({})
const overview = ref({})
const stats = ref({})
const logs = ref([])

const page = ref(1)
const pageSize = ref(20)
const total = ref(0)

const rangeTabs = [
	{ label: '周', value: 'week' },
	{ label: '月', value: 'month' },
	{ label: '年', value: 'year' }
]

const logTypeTabs = [
	{ label: '全部', value: 'all' },
	{ label: '已抽烟', value: 'smoke' },
	{ label: '已忍住', value: 'resisted' }
]

const maxTrend = computed(() => {
	const values = (stats.value?.trend || []).map((item) => Number(item.count) || 0)
	const max = Math.max(...values, 0)
	return max <= 0 ? 1 : max
})

function trendWidth(count) {
	const n = Number(count) || 0
	return Math.max(8, Math.round((n / maxTrend.value) * 100))
}

function resolveType(item) {
	if ((item?.level || 0) === 0 && (item?.num || 0) === 0) {
		return 'resisted'
	}
	return 'smoke'
}

function levelLabel(level) {
	const value = Number(level)
	if (Number.isNaN(value)) return '未知'
	if (value <= 1) return '轻微'
	if (value === 2) return '中等'
	if (value === 3) return '明显'
	if (value === 4) return '强烈'
	return '极强'
}

function displayTime(item) {
	if (item?.smoke_at) {
		return String(item.smoke_at).replace('T', ' ').slice(0, 19)
	}
	if (item?.smoke_time) {
		return String(item.smoke_time).slice(0, 10)
	}
	if (item?.createtime) {
		const ts = Number(item.createtime)
		if (!Number.isNaN(ts) && ts > 0) {
			const d = new Date(ts * 1000)
			const y = d.getFullYear()
			const m = String(d.getMonth() + 1).padStart(2, '0')
			const day = String(d.getDate()).padStart(2, '0')
			const h = String(d.getHours()).padStart(2, '0')
			const mm = String(d.getMinutes()).padStart(2, '0')
			const s = String(d.getSeconds()).padStart(2, '0')
			return `${y}-${m}-${day} ${h}:${mm}:${s}`
		}
	}
	return '--'
}

async function fetchShare(resetLogs = false) {
	if (!shareToken.value) {
		errorText.value = '分享参数缺失'
		loading.value = false
		return
	}

	if (resetLogs) {
		page.value = 1
		logs.value = []
	}

	const params = {
		range: range.value,
		type: logType.value,
		page: page.value,
		page_size: pageSize.value
	}

	try {
		const res = await getShareData(shareToken.value, params)
		const payload = res.data || {}
		owner.value = payload.owner || {}
		overview.value = payload.overview || {}
		stats.value = payload.stats || {}

		const logPayload = payload.logs || {}
		const items = logPayload.items || []
		if (resetLogs) {
			logs.value = items
		} else {
			logs.value = [...logs.value, ...items]
		}
		total.value = Number(logPayload.total || 0)
		page.value = Number(logPayload.page || page.value)
	} catch (e) {
		console.error('fetchShare error:', e)
		errorText.value = e?.message || '分享已失效或不可访问'
	} finally {
		loading.value = false
		loadingMore.value = false
	}
}

async function switchRange(next) {
	if (range.value === next) return
	range.value = next
	loading.value = true
	errorText.value = ''
	await fetchShare(true)
}

async function switchLogType(next) {
	if (logType.value === next) return
	logType.value = next
	loading.value = true
	errorText.value = ''
	await fetchShare(true)
}

async function loadMore() {
	if (loadingMore.value || logs.value.length >= total.value) return
	loadingMore.value = true
	page.value += 1
	await fetchShare(false)
}

function showDetail(item) {
	uni.showModal({
		title: '记录详情',
		showCancel: false,
		content: [
			`时间：${displayTime(item)}`,
			`类型：${resolveType(item) === 'resisted' ? '已忍住' : '已抽烟'}`,
			`数量：${item.num ?? 0}`,
			`强度：${levelLabel(item.level)}`,
			`备注：${(item.remark && String(item.remark).trim()) || '无备注'}`
		].join('\n')
	})
}

async function reload() {
	loading.value = true
	errorText.value = ''
	await fetchShare(true)
}

onLoad(async (options) => {
	shareToken.value = String(options?.share_token || '').trim()
	await fetchShare(true)
})
</script>

<style scoped>
.page {
	min-height: 100vh;
	padding: 24rpx;
	box-sizing: border-box;
	background: #f5f7fa;
}

.state-wrap {
	padding: 120rpx 40rpx;
	text-align: center;
}

.state-text {
	font-size: 28rpx;
	color: #6b7280;
}

.retry-btn {
	margin-top: 24rpx;
	font-size: 26rpx;
	background: #10b981;
	color: #fff;
	border: none;
	border-radius: 16rpx;
}

.owner-card {
	display: flex;
	align-items: center;
	gap: 20rpx;
	padding: 24rpx;
	background: #ffffff;
	border-radius: 20rpx;
}

.avatar {
	width: 90rpx;
	height: 90rpx;
	border-radius: 50%;
	background: #e5e7eb;
}

.owner-main {
	display: flex;
	flex-direction: column;
	gap: 6rpx;
}

.owner-name {
	font-size: 32rpx;
	font-weight: 700;
	color: #111827;
}

.owner-desc {
	font-size: 24rpx;
	color: #6b7280;
}

.overview-grid {
	margin-top: 20rpx;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16rpx;
}

.overview-item {
	padding: 20rpx;
	background: #fff;
	border-radius: 16rpx;
}

.overview-label {
	font-size: 22rpx;
	color: #6b7280;
}

.overview-value {
	margin-top: 10rpx;
	display: block;
	font-size: 34rpx;
	font-weight: 700;
	color: #111827;
}

.overview-value.success {
	color: #10b981;
}

.overview-value.warning {
	color: #ef4444;
}

.section {
	margin-top: 20rpx;
	padding: 20rpx;
	background: #fff;
	border-radius: 20rpx;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12rpx;
}

.section-title {
	font-size: 30rpx;
	font-weight: 700;
	color: #111827;
}

.range-tabs {
	display: flex;
	gap: 8rpx;
}

.range-item {
	padding: 8rpx 18rpx;
	font-size: 22rpx;
	color: #6b7280;
	border-radius: 999rpx;
	background: #f3f4f6;
}

.range-item.active {
	background: #10b981;
	color: #fff;
}

.stats-row {
	margin-top: 18rpx;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12rpx;
}

.stats-block {
	padding: 14rpx;
	border-radius: 14rpx;
	background: #f8fafc;
}

.stats-key {
	font-size: 20rpx;
	color: #6b7280;
}

.stats-val {
	display: block;
	margin-top: 8rpx;
	font-size: 30rpx;
	font-weight: 700;
	color: #111827;
}

.trend-wrap {
	margin-top: 18rpx;
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}

.trend-item {
	display: grid;
	grid-template-columns: 1.5fr 3fr 0.8fr;
	align-items: center;
	gap: 10rpx;
}

.trend-label,
.trend-count {
	font-size: 22rpx;
	color: #374151;
}

.trend-bar-bg {
	height: 16rpx;
	border-radius: 999rpx;
	background: #e5e7eb;
	overflow: hidden;
}

.trend-bar {
	height: 100%;
	background: linear-gradient(90deg, #34d399, #10b981);
}

.empty-box {
	padding: 40rpx 0;
	text-align: center;
}

.empty-text {
	font-size: 24rpx;
	color: #6b7280;
}

.log-list {
	margin-top: 14rpx;
	display: flex;
	flex-direction: column;
	gap: 14rpx;
}

.log-item {
	padding: 18rpx;
	border-radius: 14rpx;
	background: #f8fafc;
}

.log-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.log-time {
	font-size: 24rpx;
	font-weight: 600;
	color: #111827;
}

.log-type {
	font-size: 20rpx;
	padding: 6rpx 12rpx;
	border-radius: 999rpx;
}

.log-type.smoke {
	background: #ffedd5;
	color: #c2410c;
}

.log-type.resisted {
	background: #dcfce7;
	color: #047857;
}

.log-meta {
	margin-top: 10rpx;
	display: flex;
	gap: 18rpx;
	font-size: 22rpx;
	color: #4b5563;
}

.log-remark {
	margin-top: 8rpx;
	font-size: 22rpx;
	color: #6b7280;
}

.load-more {
	margin-top: 16rpx;
	font-size: 24rpx;
	border-radius: 14rpx;
	border: none;
	background: #ecfdf5;
	color: #047857;
}
</style>
