<template>
	<view class="page">
		<!-- 筛选标签 -->
		<view class="tabs">
			<view
				v-for="tab in tabs"
				:key="tab.value"
				class="tab"
				:class="{ 'tab-active': currentTab === tab.value }"
				@tap="currentTab = tab.value"
			>
				{{ tab.label }}
			</view>
		</view>

		<!-- 记录列表 -->
		<scroll-view
			class="scroll-container"
			scroll-y
			:refresher-enabled="true"
			:refresher-triggered="logsStore.refreshing"
			@refresherrefresh="onRefresh"
			@scrolltolower="onLoadMore"
		>
			<!-- 骨架屏 -->
			<view v-if="logsStore.loading && logsStore.logs.length === 0" class="skeleton">
				<view v-for="i in 3" :key="i" class="skeleton-item">
					<view class="skeleton-dot"></view>
					<view class="skeleton-card">
						<view class="skeleton-line skeleton-line-title"></view>
						<view class="skeleton-line skeleton-line-text"></view>
						<view class="skeleton-line skeleton-line-text short"></view>
					</view>
				</view>
			</view>

			<!-- 时间轴 -->
			<view v-else-if="filteredLogs.length > 0" class="timeline">
				<view v-for="(group, date) in groupedLogs" :key="date" class="timeline-group">
					<view class="timeline-date">
						<text class="timeline-date-badge">{{ formatDate(date) }}</text>
					</view>

					<view class="timeline-items">
						<view v-for="(log, logIndex) in group" :key="log.id" class="timeline-item">
							<view class="timeline-line" v-if="logIndex < group.length - 1"></view>
							<view class="timeline-dot" :class="log.type === 'resisted' ? 'dot-green' : 'dot-smoke'">
								<text v-if="log.type === 'resisted'">💪</text>
								<text v-else>🚬</text>
							</view>
							
							<!-- 记录卡片 -->
							<view class="timeline-content" :class="log.type === 'resisted' ? 'content-green' : 'content-red'">
								<view class="log-header">
									<text class="log-type">{{ log.type === 'resisted' ? '想抽忍住了' : '记录抽烟' }}</text>
									<view class="log-actions">
										<text class="action-btn edit-btn" @tap.stop="handleEdit(log)">编辑</text>
										<text class="action-btn delete-btn" @tap.stop="handleDelete(log)">删除</text>
									</view>
								</view>
								
								<view class="log-time-row">
									<text class="log-time">{{ log.displayTime || '--:--' }}</text>
									<text v-if="log.interval" class="log-interval">距上次 {{ log.interval }}</text>
								</view>
								
								<view v-if="log.type === 'smoke'" class="log-meta">
									<text class="meta-item">数量: {{ log.num !== undefined && log.num !== null ? log.num : 0 }} 支</text>
									<text v-if="log.level !== undefined && log.level !== null" class="meta-item">等级: {{ log.level }}</text>
								</view>
								
								<view v-if="log.remark && typeof log.remark === 'string' && log.remark.trim() && log.remark.trim().length > 0" class="log-remark">
									<text class="remark-text">{{ log.remark.trim() }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view v-else class="empty-state">
				<text class="empty-icon">📝</text>
				<text class="empty-text">暂无记录</text>
				<text class="empty-hint">点击右下角按钮开始记录</text>
			</view>

			<!-- 加载更多 -->
			<view v-if="logsStore.loading && logsStore.logs.length > 0" class="loading-more">
				<text class="loading-text">加载中...</text>
			</view>
			
			<view v-if="!logsStore.hasMore && logsStore.logs.length > 0" class="no-more">
				<text class="no-more-text">没有更多了</text>
			</view>
		</scroll-view>

		<!-- 浮动按钮 -->
		<view class="fab" @tap="addLog">
			<text class="fab-icon">+</text>
		</view>
		
		<!-- 编辑弹框 -->
		<smoke-record-dialog 
			v-model:show="showEditDialog" 
			:type="editType"
			:initial-data="editData"
			@submit="handleUpdate"
		/>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useLogsStore } from '@/stores/logs'
import { useLogin } from '@/hooks/useLogin'

const { waitForLogin } = useLogin()
const logsStore = useLogsStore()

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

const currentTab = ref('all')
const showEditDialog = ref(false)
const editType = ref('smoke')
const editData = ref(null)
const editingLogId = ref(null)

// 筛选后的记录
const filteredLogs = computed(() => {
	const logs = logsStore.formattedLogs
	if (currentTab.value === 'all') {
		return logs
	}
	return logs.filter(log => log.type === currentTab.value)
})

// 按日期分组
const groupedLogs = computed(() => {
	return filteredLogs.value.reduce((groups, log) => {
		const date = log.displayDate
		if (!groups[date]) {
			groups[date] = []
		}
		groups[date].push(log)
		return groups
	}, {})
})

// 格式化日期显示
function formatDate(dateStr) {
	if (!dateStr) return ''
	
	const date = new Date(dateStr)
	const today = new Date()
	const yesterday = new Date(today)
	yesterday.setDate(yesterday.getDate() - 1)

	const todayStr = today.toISOString().split('T')[0]
	const yesterdayStr = yesterday.toISOString().split('T')[0]

	if (dateStr === todayStr) {
		return `今天 ${date.getMonth() + 1}月${date.getDate()}日`
	}
	if (dateStr === yesterdayStr) {
		return `昨天 ${date.getMonth() + 1}月${date.getDate()}日`
	}
	return `${date.getMonth() + 1}月${date.getDate()}日`
}

// 下拉刷新
async function onRefresh() {
	await logsStore.fetchLogs(true)
}

// 上拉加载
async function onLoadMore() {
	await logsStore.loadMore()
}

// 新增记录
function addLog() {
	uni.switchTab({ url: '/pages/index/index' })
}

// 编辑记录
function handleEdit(log) {
	editingLogId.value = log.id
	editType.value = log.type
	editData.value = {
		smoke_time: log.smoke_time?.split('T')[0] || '',
		smoke_time_only: log.displayTime,
		smoke_at: log.smoke_at,
		remark: log.remark || '',
		level: log.level || 2,
		num: log.num || 1
	}
	showEditDialog.value = true
}

// 更新记录
async function handleUpdate(data) {
	if (!editingLogId.value) return
	
	const success = await logsStore.updateLog(editingLogId.value, data)
	if (success) {
		showEditDialog.value = false
		editingLogId.value = null
		editData.value = null
	}
}

// 删除记录
function handleDelete(log) {
	uni.showModal({
		title: '确认删除',
		content: `确定要删除这条${log.type === 'resisted' ? '忍住' : '抽烟'}记录吗？`,
		confirmColor: '#EF4444',
		success: async (res) => {
			if (res.confirm) {
				await logsStore.deleteLog(log.id)
			}
		}
	})
}

// 初始化页面
async function initPage() {
	try {
		await waitForLogin()
		await logsStore.fetchLogs(true)
	} catch (e) {
		console.error('initPage error:', e)
	}
}

onMounted(() => {
	initPage()
})
</script>

<style scoped>
.page {
	min-height: 100vh;
	background: linear-gradient(to bottom, #D1FAE5 0%, #F0FDF4 50%, #FFFFFF 100%);
	box-sizing: border-box;
}

.tabs {
	display: flex;
	gap: 16rpx;
	padding: 32rpx 32rpx 0;
	margin-bottom: 24rpx;
}

.tab {
	padding: 16rpx 32rpx;
	border-radius: 32rpx;
	font-size: 28rpx;
	color: #6B7280;
	background-color: #FFFFFF;
	border: 2rpx solid #E5E7EB;
	transition: all 0.3s;
}

.tab-active {
	background-color: #10B981;
	color: #FFFFFF;
	border-color: #10B981;
	font-weight: 600;
}

.scroll-container {
	height: calc(100vh - 140rpx);
	padding: 0 32rpx 200rpx;
}

/* 骨架屏 */
.skeleton {
	padding-top: 24rpx;
}

.skeleton-item {
	position: relative;
	padding-left: 80rpx;
	margin-bottom: 32rpx;
}

.skeleton-dot {
	position: absolute;
	left: 0;
	top: 16rpx;
	width: 48rpx;
	height: 48rpx;
	border-radius: 50%;
	background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
}

.skeleton-card {
	background-color: #FFFFFF;
	border-radius: 24rpx;
	padding: 24rpx;
}

.skeleton-line {
	height: 24rpx;
	background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
	border-radius: 8rpx;
	margin-bottom: 16rpx;
}

.skeleton-line-title {
	width: 60%;
	height: 32rpx;
}

.skeleton-line-text {
	width: 80%;
}

.skeleton-line-text.short {
	width: 40%;
}

@keyframes shimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

/* 时间轴 */
.timeline-group { 
	margin-bottom: 32rpx; 
}

.timeline-date { 
	margin-bottom: 16rpx; 
}

.timeline-date-badge {
	font-size: 24rpx;
	color: #059669;
	background-color: #D1FAE5;
	padding: 8rpx 20rpx;
	border-radius: 16rpx;
	font-weight: 500;
}

.timeline-items {
	position: relative;
	padding-left: 80rpx;
}

.timeline-item {
	position: relative;
	margin-bottom: 24rpx;
}

.timeline-line {
	position: absolute;
	left: -44rpx;
	top: 56rpx;
	bottom: -24rpx;
	width: 4rpx;
	background-color: #E5E7EB;
}

.timeline-dot {
	position: absolute;
	left: -60rpx;
	top: 16rpx;
	width: 48rpx;
	height: 48rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	z-index: 1;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.dot-green { 
	background-color: #10B981; 
}

.dot-smoke { 
	background-color: #EF4444; 
}

.timeline-content {
	background-color: #FFFFFF;
	border-radius: 24rpx;
	padding: 24rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	border-left: 4rpx solid;
	transition: all 0.3s;
	overflow: hidden;
}

.content-green {
	border-left-color: #10B981;
}

.content-red {
	border-left-color: #EF4444;
}

.log-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12rpx;
}

.log-type {
	font-size: 30rpx;
	font-weight: 600;
	color: #1F2937;
}

.log-actions {
	display: flex;
	gap: 16rpx;
}

.action-btn {
	font-size: 24rpx;
	padding: 8rpx 16rpx;
	border-radius: 8rpx;
	transition: all 0.3s;
}

.edit-btn {
	background-color: #EFF6FF;
	color: #3B82F6;
}

.delete-btn {
	background-color: #FEE2E2;
	color: #EF4444;
}

.log-time-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12rpx;
}

.log-time {
	font-size: 28rpx;
	color: #1F2937;
	font-weight: 500;
}

.log-interval {
	font-size: 24rpx;
	color: #9CA3AF;
}

.log-meta {
	display: flex;
	gap: 16rpx;
	margin-bottom: 12rpx;
	flex-wrap: wrap;
}

.meta-item {
	font-size: 24rpx;
	color: #6B7280;
	background-color: #F9FAFB;
	padding: 6rpx 12rpx;
	border-radius: 8rpx;
	white-space: nowrap;
}

.log-remark {
	background-color: #F9FAFB;
	padding: 12rpx 16rpx;
	border-radius: 12rpx;
	margin-bottom: 0;
	margin-top: 8rpx;
}

.remark-text {
	font-size: 26rpx;
	color: #374151;
	line-height: 1.6;
	word-break: break-word;
}

/* 空状态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 120rpx 32rpx;
}

.empty-icon {
	font-size: 120rpx;
	margin-bottom: 24rpx;
}

.empty-text {
	font-size: 32rpx;
	color: #6B7280;
	font-weight: 500;
	margin-bottom: 12rpx;
}

.empty-hint {
	font-size: 26rpx;
	color: #9CA3AF;
}

/* 加载状态 */
.loading-more, .no-more {
	text-align: center;
	padding: 32rpx;
}

.loading-text, .no-more-text {
	font-size: 24rpx;
	color: #9CA3AF;
}

/* 浮动按钮 */
.fab {
	position: fixed;
	right: 32rpx;
	bottom: 140rpx;
	width: 96rpx;
	height: 96rpx;
	background-color: #10B981;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.4);
	transition: all 0.3s;
	z-index: 100;
}

.fab:active {
	transform: scale(0.95);
}

.fab-icon {
	font-size: 48rpx;
	color: #FFFFFF;
	font-weight: 300;
}
</style>
