<!-- 设置页面 -->
<template>
	<view class="settings-page">
		<!-- 顶部栏 -->
		<view class="settings-header">
			<text class="back-btn" @click="goBack">‹</text>
			<text class="header-title">设置</text>
		</view>

		<scroll-view class="settings-content" scroll-y>
			<!-- 账户设置 -->
			<view class="settings-section">
				<text class="section-title">账户设置</text>
				<view class="section-list">
					<view class="list-item" @click="goToProfile">
						<text class="item-icon">👤</text>
						<text class="item-text">个人资料</text>
						<text class="item-arrow">›</text>
					</view>
					<view class="list-item" @click="goToAddress">
						<text class="item-icon">📍</text>
						<text class="item-text">收货地址</text>
						<text class="item-arrow">›</text>
					</view>
					<view class="list-item" @click="changePassword">
						<text class="item-icon">🔒</text>
						<text class="item-text">修改密码</text>
						<text class="item-arrow">›</text>
					</view>
					<view class="list-item" @click="bindPhone">
						<text class="item-icon">📱</text>
						<text class="item-text">手机绑定</text>
						<view class="item-right">
							<text class="item-status" :class="{ bound: userInfo.phone }">
								{{ userInfo.phone ? '已绑定' : '未绑定' }}
							</text>
							<text class="item-arrow">›</text>
						</view>
					</view>
					<view class="list-item" @click="bindEmail">
						<text class="item-icon">📧</text>
						<text class="item-text">邮箱绑定</text>
						<view class="item-right">
							<text class="item-status" :class="{ bound: userInfo.email }">
								{{ userInfo.email ? '已绑定' : '未绑定' }}
							</text>
							<text class="item-arrow">›</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 消息通知 -->
			<view class="settings-section">
				<text class="section-title">消息通知</text>
				<view class="section-list">
					<view class="list-item">
						<text class="item-icon">🔔</text>
						<text class="item-text">订单消息</text>
						<switch :checked="notifications.order" @change="toggleNotification('order')" />
					</view>
					<view class="list-item">
						<text class="item-icon">🎁</text>
						<text class="item-text">促销活动</text>
						<switch :checked="notifications.promotion" @change="toggleNotification('promotion')" />
					</view>
					<view class="list-item">
						<text class="item-icon">⭐</text>
						<text class="item-text">评价提醒</text>
						<switch :checked="notifications.review" @change="toggleNotification('review')" />
					</view>
				</view>
			</view>

			<!-- 隐私设置 -->
			<view class="settings-section">
				<text class="section-title">隐私设置</text>
				<view class="section-list">
					<view class="list-item">
						<text class="item-icon">👁️</text>
						<text class="item-text">隐藏购物记录</text>
						<switch :checked="privacy.hidePurchase" @change="togglePrivacy('hidePurchase')" />
					</view>
					<view class="list-item">
						<text class="item-icon">🔍</text>
						<text class="item-text">允许通过手机号找到我</text>
						<switch :checked="privacy.allowSearchByPhone" @change="togglePrivacy('allowSearchByPhone')" />
					</view>
					<view class="list-item">
						<text class="item-icon">💬</text>
						<text class="item-text">接收商家消息</text>
						<switch :checked="privacy.receiveMerchantMsg" @change="togglePrivacy('receiveMerchantMsg')" />
					</view>
				</view>
			</view>

			<!-- 通用设置 -->
			<view class="settings-section">
				<text class="section-title">通用设置</text>
				<view class="section-list">
					<view class="list-item" @click="clearCache">
						<text class="item-icon">🗑️</text>
						<text class="item-text">清除缓存</text>
						<view class="item-right">
							<text class="item-cache">{{ cacheSize }}</text>
							<text class="item-arrow">›</text>
						</view>
					</view>
					<view class="list-item" @click="changeLanguage">
						<text class="item-icon">🌐</text>
						<text class="item-text">语言设置</text>
						<view class="item-right">
							<text class="item-status">{{ currentLanguage }}</text>
							<text class="item-arrow">›</text>
						</view>
					</view>
					<view class="list-item" @click="changeTheme">
						<text class="item-icon">🎨</text>
						<text class="item-text">主题设置</text>
						<view class="item-right">
							<text class="item-status">{{ currentTheme }}</text>
							<text class="item-arrow">›</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 关于我们 -->
			<view class="settings-section">
				<text class="section-title">关于我们</text>
				<view class="section-list">
					<view class="list-item" @click="aboutUs">
						<text class="item-icon">ℹ️</text>
						<text class="item-text">关于商城</text>
						<text class="item-arrow">›</text>
					</view>
					<view class="list-item" @click="userAgreement">
						<text class="item-icon">📜</text>
						<text class="item-text">用户协议</text>
						<text class="item-arrow">›</text>
					</view>
					<view class="list-item" @click="privacyPolicy">
						<text class="item-icon">🛡️</text>
						<text class="item-text">隐私政策</text>
						<text class="item-arrow">›</text>
					</view>
					<view class="list-item" @click="checkUpdate">
						<text class="item-icon">🔄</text>
						<text class="item-text">检查更新</text>
						<view class="item-right">
							<text class="item-status">{{ appVersion }}</text>
							<text class="item-arrow">›</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 客服与反馈 -->
			<view class="settings-section">
				<text class="section-title">客服与反馈</text>
				<view class="section-list">
					<view class="list-item" @click="contactService">
						<text class="item-icon">💬</text>
						<text class="item-text">联系客服</text>
						<text class="item-arrow">›</text>
					</view>
					<view class="list-item" @click="feedback">
						<text class="item-icon">📝</text>
						<text class="item-text">意见反馈</text>
						<text class="item-arrow">›</text>
					</view>
					<view class="list-item" @click="rateApp">
						<text class="item-icon">⭐</text>
						<text class="item-text">给个好评</text>
						<text class="item-arrow">›</text>
					</view>
				</view>
			</view>

			<!-- 退出登录 -->
			<view class="logout-section">
				<button class="logout-btn" @click="logout">退出登录</button>
			</view>

			<!-- 账号注销 -->
			<view class="delete-account-section">
				<text class="delete-account" @click="deleteAccount">注销账号</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="uts">
import { ref, onMounted } from 'vue'
// import supa from '@/components/supadb/aksupainstance.uts'

type UserType = {
	id: string
	phone: string | null
	email: string | null
	nickname: string | null
	avatar_url: string | null
}

type NotificationType = {
	order: boolean
	promotion: boolean
	review: boolean
}

type PrivacyType = {
	hidePurchase: boolean
	allowSearchByPhone: boolean
	receiveMerchantMsg: boolean
}

const userInfo = ref<UserType>({
	id: '',
	phone: null,
	email: null,
	nickname: null,
	avatar_url: null
})
const notifications = ref<NotificationType>({
	order: true,
	promotion: true,
	review: true
})
const privacy = ref<PrivacyType>({
	hidePurchase: false,
	allowSearchByPhone: true,
	receiveMerchantMsg: true
})
const cacheSize = ref<string>('0.0 MB')
const currentLanguage = ref<string>('简体中文')
const currentTheme = ref<string>('自动')
const appVersion = ref<string>('1.0.0')

// 生命周期
onMounted(() => {
	loadUserInfo()
	loadSettings()
})

// 加载用户信息
const loadUserInfo = () => {
	const userStore = uni.getStorageSync('userInfo')
	if (userStore) {
		userInfo.value = userStore
	}
}

// 加载设置
const loadSettings = () => {
	// 从本地存储加载设置
	const savedNotifications = uni.getStorageSync('userNotifications')
	if (savedNotifications) {
		notifications.value = savedNotifications
	}
	
	const savedPrivacy = uni.getStorageSync('userPrivacy')
	if (savedPrivacy) {
		privacy.value = savedPrivacy
	}
	
	// 计算缓存大小
	calculateCacheSize()
	
	// 获取应用版本
	// @ts-ignore
	const appInfo = uni.getAppBaseInfo()
	if (appInfo?.appVersion) {
		appVersion.value = appInfo.appVersion
	}
}

// 计算缓存大小
const calculateCacheSize = () => {
	// 这里应该计算实际缓存大小，这里使用模拟数据
	cacheSize.value = '12.5 MB'
}

// 跳转到个人资料
const goToProfile = () => {
	uni.navigateTo({
		url: '/pages/mall/consumer/profile'
	})
}

// 跳转到地址管理
const goToAddress = () => {
	uni.navigateTo({
		url: '/pages/mall/consumer/address'
	})
}

// 修改密码
const changePassword = () => {
	uni.navigateTo({
		url: '/pages/user/change-password'
	})
}

// 绑定手机
const bindPhone = () => {
	uni.navigateTo({
		url: '/pages/user/bind-phone'
	})
}

// 绑定邮箱
const bindEmail = () => {
	uni.navigateTo({
		url: '/pages/user/bind-email'
	})
}

// 切换通知设置
const toggleNotification = (type: keyof NotificationType) => {
	notifications.value[type] = !notifications.value[type]
	uni.setStorageSync('userNotifications', notifications.value)
}

// 切换隐私设置
const togglePrivacy = (type: keyof PrivacyType) => {
	privacy.value[type] = !privacy.value[type]
	uni.setStorageSync('userPrivacy', privacy.value)
}

// 清除缓存
const clearCache = () => {
	uni.showModal({
		title: '清除缓存',
		content: `确定要清除 ${cacheSize.value} 缓存吗？`,
		success: (res) => {
			if (res.confirm) {
				// 这里应该清除实际缓存
				uni.showLoading({
					title: '清除中...'
				})
				
				setTimeout(() => {
					cacheSize.value = '0.0 MB'
					uni.hideLoading()
					uni.showToast({
						title: '缓存已清除',
						icon: 'success'
					})
				}, 1000)
			}
		}
	})
}

// 切换语言
const changeLanguage = () => {
	uni.showActionSheet({
		itemList: ['简体中文', 'English', '日本語'],
		success: (res) => {
			const languages = ['简体中文', 'English', '日本語']
			currentLanguage.value = languages[res.tapIndex]
			uni.setStorageSync('appLanguage', currentLanguage.value)
			
			uni.showToast({
				title: '语言已切换',
				icon: 'success'
			})
		}
	})
}

// 切换主题
const changeTheme = () => {
	uni.showActionSheet({
		itemList: ['自动', '浅色模式', '深色模式'],
		success: (res) => {
			const themes = ['自动', '浅色模式', '深色模式']
			currentTheme.value = themes[res.tapIndex]
			uni.setStorageSync('appTheme', currentTheme.value)
			
			uni.showToast({
				title: '主题已切换',
				icon: 'success'
			})
		}
	})
}

// 关于我们
const aboutUs = () => {
	uni.navigateTo({
		url: '/pages/info/about'
	})
}

// 用户协议
const userAgreement = () => {
	uni.navigateTo({
		url: '/pages/user/terms'
	})
}

// 隐私政策
const privacyPolicy = () => {
	uni.navigateTo({
		url: '/pages/info/privacy'
	})
}

// 检查更新
const checkUpdate = () => {
	uni.showLoading({
		title: '检查更新中...'
	})
	
	setTimeout(() => {
		uni.hideLoading()
		uni.showModal({
			title: '检查更新',
			content: '当前已是最新版本',
			showCancel: false
		})
	}, 1000)
}

// 联系客服
const contactService = () => {
	uni.navigateTo({
		url: '/pages/mall/service/chat'
	})
}

// 意见反馈
const feedback = () => {
	uni.navigateTo({
		url: '/pages/info/feedback'
	})
}

// 给个好评
const rateApp = () => {
	// 这里应该跳转到应用商店评分
	uni.showModal({
		title: '给个好评',
		content: '如果喜欢我们的应用，请给个好评吧！',
		confirmText: '去评分',
		success: (res) => {
			if (res.confirm) {
				// 跳转到应用商店
				// @ts-ignore
				uni.navigateToMiniProgram({
					appId: 'wx1234567890', // 示例AppID
					fail: () => {
						uni.showToast({
							title: '跳转失败',
							icon: 'none'
						})
					}
				})
			}
		}
	})
}

// 退出登录
const logout = () => {
	uni.showModal({
		title: '退出登录',
		content: '确定要退出登录吗？',
		success: async (res) => {
			if (res.confirm) {
				try {
					// 调用登出接口
                    /*
					const { error } = await supa.auth.signOut()
					
					if (error !== null) {
						console.error('登出失败:', error)
						uni.showToast({
							title: '登出失败',
							icon: 'none'
						})
						return
					}
                    */
					
					// 清除本地存储
					uni.removeStorageSync('userInfo')
					uni.removeStorageSync('token')
					uni.removeStorageSync('userSettings')
					
					// 跳转到登录页
					uni.reLaunch({
						url: '/pages/user/login'
					})
					
				} catch (err) {
					console.error('登出异常:', err)
					uni.showToast({
						title: '登出失败',
						icon: 'none'
					})
				}
			}
		}
	})
}

// 注销账号
const deleteAccount = () => {
	uni.showModal({
		title: '注销账号',
		content: '确定要注销账号吗？此操作不可恢复，所有数据将被删除！',
		confirmText: '注销',
		confirmColor: '#ff4757',
		success: async (res) => {
			if (res.confirm) {
				uni.showLoading({
					title: '处理中...'
				})
				
				try {
					const userId = userInfo.value.id
					
					// 这里应该调用注销账号的API
                    /*
					const { error } = await supa
						.from('users')
						.update({ status: 0 }) // 标记为注销状态
						.eq('id', userId)
					
					if (error !== null) {
						throw error
					}
                    */
					
					// 清除本地存储
					uni.removeStorageSync('userInfo')
					uni.removeStorageSync('token')
					
					// 提示并跳转
					uni.hideLoading()
					uni.showToast({
						title: '账号已注销',
						icon: 'success',
						duration: 2000
					})
					
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/user/login'
						})
					}, 1500)
					
				} catch (err) {
					uni.hideLoading()
					console.error('注销账号失败:', err)
					uni.showToast({
						title: '注销失败',
						icon: 'none'
					})
				}
			}
		}
	})
}

// 返回
const goBack = () => {
	uni.navigateBack()
}
</script>

<style scoped>
.settings-page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f5f5f5;
}

.settings-header {
	background-color: #ffffff;
	padding: 15px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #e5e5e5;
}

.back-btn {
	font-size: 24px;
	color: #333333;
	padding: 5px;
	margin-right: 15px;
}

.header-title {
	font-size: 18px;
	font-weight: bold;
	color: #333333;
}

.settings-content {
	flex: 1;
}

.settings-section {
	background-color: #ffffff;
	margin-bottom: 10px;
	padding: 15px;
}

.section-title {
	display: block;
	font-size: 16px;
	font-weight: bold;
	color: #333333;
	margin-bottom: 15px;
}

.section-list {
	display: flex;
	flex-direction: column;
}

.list-item {
	display: flex;
	align-items: center;
	padding: 15px 0;
	border-bottom: 1px solid #f5f5f5;
}

.list-item:last-child {
	border-bottom: none;
}

.item-icon {
	font-size: 20px;
	margin-right: 15px;
}

.item-text {
	flex: 1;
	font-size: 14px;
	color: #333333;
}

.item-arrow {
	color: #999999;
	font-size: 16px;
	margin-left: 10px;
}

.item-right {
	display: flex;
	align-items: center;
}

.item-status {
	font-size: 12px;
	color: #999999;
	margin-right: 10px;
}

.item-status.bound {
	color: #4caf50;
}

.item-cache {
	font-size: 12px;
	color: #999999;
	margin-right: 10px;
}

.logout-section {
	background-color: #ffffff;
	margin-top: 10px;
	padding: 15px;
}

.logout-btn {
	background-color: #ffffff;
	color: #ff4757;
	height: 45px;
	border: 1px solid #ff4757;
	border-radius: 22.5px;
	font-size: 16px;
	font-weight: bold;
}

.delete-account-section {
	background-color: #ffffff;
	padding: 20px 15px;
	text-align: center;
}

.delete-account {
	color: #999999;
	font-size: 14px;
	text-decoration: underline;
}
</style>