<!-- 设置页面 -->
<template>
	<view class="settings-page">
		<!-- 顶部栏 -->
		<!--<view class="settings-header" :style="{ paddingTop: statusBarHeight + 'px' }">
			<text class="back-btn" @click="goBack">❮</text>
			<text class="header-title">设置</text>
		</view>-->

		<scroll-view class="settings-content" direction="vertical">
			<!-- 账户设置 -->
			<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="goToAddressList">
						<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="userInfo.phone != null && userInfo.phone != '' ? 'bound' : ''">
								{{ userInfo.phone != null && 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="userInfo.email != null && userInfo.email != '' ? 'bound' : ''">
								{{ userInfo.email != null && 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 class="settings-switch" :checked="notifications.order" @change="toggleNotification('order')" />
					</view>
					<view class="list-item">
						<text class="item-icon">🎁</text>
						<text class="item-text">促销活动</text>
						<switch class="settings-switch" :checked="notifications.promotion" @change="toggleNotification('promotion')" />
					</view>
					<view class="list-item">
						<text class="item-icon">⭐</text>
						<text class="item-text">评价提醒</text>
						<switch class="settings-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 class="settings-switch" :checked="privacy.hidePurchase" @change="togglePrivacy('hidePurchase')" />
					</view>
					<view class="list-item">
						<text class="item-icon">🔍</text>
						<text class="item-text">允许通过手机号找到我</text>
						<switch class="settings-switch" :checked="privacy.allowSearchByPhone" @change="togglePrivacy('allowSearchByPhone')" />
					</view>
					<view class="list-item">
						<text class="item-icon">💬</text>
						<text class="item-text">接收商家消息</text>
						<switch class="settings-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="goToMyReviews">
						<text class="item-icon">📝</text>
						<text class="item-text">我的评价</text>
						<text class="item-arrow">›</text>
					</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 { onBackPress } from '@dcloudio/uni-app'
import supa from '@/components/supadb/aksupainstance.uts'

// 拦截返回事件，强制跳转到个人中心页
onBackPress((options) => {
	// 无论是什么触发的返回（系统返回键或导航栏返回按钮），都跳转到profile
	// 注意：onBackPress 只能在 page 中使用，component 中无效
	uni.switchTab({
		url: '/pages/main/profile'
	})
	// 返回 true 表示阻止默认返回行为
	return true
})

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')

const statusBarHeight = ref<number>(0)

const loadUserInfo = () => {
	const userStore = uni.getStorageSync('userInfo')
	if (userStore != null) {
		const storeObj = userStore as UTSJSONObject
		const user: UserType = {
			id: storeObj.getString('id') ?? '',
			phone: storeObj.getString('phone'),
			email: storeObj.getString('email'),
			nickname: storeObj.getString('nickname'),
			avatar_url: storeObj.getString('avatar_url')
		} as UserType
		userInfo.value = user
	}
}

const loadSettings = () => {
	const savedNotifications = uni.getStorageSync('userNotifications')
	if (savedNotifications != null) {
		const notifObj = savedNotifications as UTSJSONObject
		const notif: NotificationType = {
			order: notifObj.getBoolean('order') ?? true,
			promotion: notifObj.getBoolean('promotion') ?? true,
			review: notifObj.getBoolean('review') ?? true
		} as NotificationType
		notifications.value = notif
	}
	
	const savedPrivacy = uni.getStorageSync('userPrivacy')
	if (savedPrivacy != null) {
		const privacyObj = savedPrivacy as UTSJSONObject
		const priv: PrivacyType = {
			hidePurchase: privacyObj.getBoolean('hidePurchase') ?? false,
			allowSearchByPhone: privacyObj.getBoolean('allowSearchByPhone') ?? true,
			receiveMerchantMsg: privacyObj.getBoolean('receiveMerchantMsg') ?? true
		} as PrivacyType
		privacy.value = priv
	}
	
	cacheSize.value = '12.5 MB'
	
	const appInfo = uni.getAppBaseInfo()
	if (appInfo != null) {
		const infoObj = appInfo as UTSJSONObject
		const version = infoObj.getString('appVersion')
		if (version != null) {
			appVersion.value = version
		}
	}
}

onMounted(() => {
	const systemInfo = uni.getSystemInfoSync()
	statusBarHeight.value = systemInfo.statusBarHeight ?? 0
	loadUserInfo()
	loadSettings()
})

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

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

// 修改密码
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: string) => {
	if (type === 'order') {
		notifications.value.order = notifications.value.order === false
	} else if (type === 'promotion') {
		notifications.value.promotion = notifications.value.promotion === false
	} else if (type === 'review') {
		notifications.value.review = notifications.value.review === false
	}
	uni.setStorageSync('userNotifications', notifications.value)
}

// 切换隐私设置
const togglePrivacy = (type: string) => {
	if (type === 'hidePurchase') {
		privacy.value.hidePurchase = privacy.value.hidePurchase === false
	} else if (type === 'allowSearchByPhone') {
		privacy.value.allowSearchByPhone = privacy.value.allowSearchByPhone === false
	} else if (type === 'receiveMerchantMsg') {
		privacy.value.receiveMerchantMsg = privacy.value.receiveMerchantMsg === false
	}
	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 goToMyReviews = () => {
	// 跳转到订单列表的已完成或者是评价相关的页面
	uni.navigateTo({
		url: '/pages/mall/consumer/orders?status=completed'
	})
}

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

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

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

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

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

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

const rateApp = () => {
	uni.showModal({
		title: '给个好评',
		content: '如果喜欢我们的应用，请给个好评吧！感谢您的支持！',
		confirmText: '好的',
		showCancel: false
	})
}

// 退出登录
const logout = () => {
	uni.showModal({
		title: '退出登录',
		content: '确定要退出登录吗？',
		success: (res) => {
			if (res.confirm) {
				uni.showLoading({
					title: '正在退出...'
				})
				
				uni.removeStorageSync('userInfo')
				uni.removeStorageSync('user_id')
				uni.removeStorageSync('access_token')
				
				uni.hideLoading()
				
				uni.showToast({
					title: '已退出登录',
					icon: 'success'
				})
				
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/user/login'
					})
				}, 1000)
			}
		}
	})
}
const deleteAccount = () => {
	uni.showModal({
		title: '注销账号',
		content: '确定要注销账号吗？此操作不可恢复，所有数据将被删除！',
		confirmText: '注销',
		confirmColor: '#ff4757',
		success: (res) => {
			if (res.confirm) {
				uni.showLoading({
					title: '注销中...'
				})
                
                let userId: string | null = userInfo.value.id
                if (userId == null || userId === '') {
                     const storageId = uni.getStorageSync('user_id')
                     userId = (storageId != null) ? storageId as string : null
                }
                
                if (userId != null) {
                    const updateObj: UTSJSONObject = new UTSJSONObject()
                    updateObj.set('status', 3)
                    supa
                        .from('ml_user_profiles')
                        .update(updateObj)
                        .eq('user_id', userId)
                        .execute()
                }
				
				uni.removeStorageSync('userInfo')
				uni.removeStorageSync('user_id')
				uni.removeStorageSync('access_token')
				
				uni.hideLoading()
				uni.showToast({
					title: '账号已注销',
					icon: 'success',
					duration: 2000
				})
				
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/user/login'
					})
				}, 1500)
			}
		}
	})
}
</script>

<style scoped>
/* 响应式布局优化 */
.section-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.list-item {
	display: flex;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid #f5f5f5;
	background-color: #ffffff;
	
	/* 手机端每行显示4个，自适应排到下一行 */
	width: 25%;
	flex-direction: column; /* 内容改为垂直排列，图标在上文字在下 */
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
	border-right: 1px solid #f5f5f5; /* 添加右边框分隔 */
}

.item-icon {
	font-size: 24px;
	margin-right: 0; /* 移除右侧间距 */
	margin-bottom: 5px; /* 添加底部间距 */
}

.item-text {
	font-size: 12px;
	color: #333333;
	/* 文字太长可能需要处理，这里暂时不做截断 */
}

.item-arrow {
	display: none; /* 网格模式下通常不需要箭头 */
}

.item-right {
	display: none; /* 简化显示，隐藏右侧状态/箭头等复杂内容 */
}

/* 针对 switch 组件的特殊处理，如果需要显示开关，可能需要调整布局 */
.settings-switch {
	transform: scale(0.7);
	margin-top: 5px;
}

/* 屏幕宽度大于 480px (大屏手机/平板/PC) 时，启用更宽的网格布局或列表布局 */
@media screen and (min-width: 480px) {
	.list-item {
		width: 47%; /* width: calc(50% - 10px);  REPLACED */
		margin: 5px;
		border: 1px solid #f0f0f0;
		border-radius: 8px;
		border-bottom: 1px solid #f0f0f0; 
		flex-direction: row; /* 恢复水平排列 */
		text-align: left;
		justify-content: flex-start;
	}
	
	.item-icon {
		margin-right: 15px;
		margin-bottom: 0;
	}
	
	.item-text {
		font-size: 14px;
	}
	
	.item-arrow, .item-right {
		display: flex; /* 恢复显示 */
		margin-left: auto; /* 推到右侧 */
	}
}

/* 增加针对手机横屏的媒体查询 */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .list-item {
		width: 22%; /* width: calc(25% - 10px); REPLACED */
		margin: 5px;
		border: 1px solid #f0f0f0;
		border-radius: 8px;
        flex-direction: column;
	}
}

/* 屏幕宽度大于 1024px (大屏PC) 时 */
@media screen and (min-width: 1024px) {
	.settings-page {
		flex-direction: row; /* 整体左右布局 */
	}

	.settings-header {
		display: none;
	}
	
	.settings-content {
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px;
	}
	
	.list-item {
		width: 31%; /* width: calc(33.33% - 10px); REPLACED */
		flex-direction: row; /* PC端保持水平排列 */
        justify-content: flex-start;
        text-align: left;
	}
    
    .item-icon {
		margin-right: 15px;
		margin-bottom: 0;
	}
    
    .item-arrow, .item-right {
		display: flex;
        margin-left: auto;
	}
}

.settings-page {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
}

.settings-header {
	background-color: #ffffff;
	padding: 15px;
	display: flex;
	flex-direction: row;
	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;
	width: 100%;
	height: 100px;
}

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

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

/* 删除多余的 .section-list 定义 */
/* 删除多余的 .list-item 定义 */
/* 删除多余的 .list-item:last-child 定义 */

.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; REMOVED */
</style>

