<!-- pages/mall/consumer/cart.uvue -->
<template>
	<view class="cart-page">
		<!-- 智能顶部导航栏 - 与消息页保持一致 -->
		<view class="smart-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-container">
				<text class="nav-title">购物车</text>
				<view class="nav-actions">
					<view class="action-btn" @click="toggleManageMode">
						<text class="action-icon">{{ isManageMode ? '✓' : '⚙️' }}</text>
						<text class="action-text">{{ isManageMode ? '完成' : '管理' }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 导航栏占位符 - 需要包含statusBarHeight + 导航栏高度44px -->
		<view class="navbar-placeholder" :style="{ height: (statusBarHeight + 44) + 'px' }"></view>
		
		<!-- 购物车内容 -->
		<scroll-view 
            :scroll-y="true" 
            class="cart-content" 
            :show-scrollbar="false" 
            :enhanced="true" 
            :bounces="true"
        >
			<!-- 空购物车 -->
			<view v-if="!loading && cartItems.length === 0" class="empty-cart">
				<text class="empty-icon">🛒</text>
				<text class="empty-title">购物车是空的</text>
				<text class="empty-desc">快去挑选喜欢的商品吧</text>
				<button class="go-shopping-btn" @click="goShopping">去逛逛</button>
			</view>
			
			<!-- 购物车商品列表 -->
			<view v-else class="cart-list">
				<view 
					v-for="group in cartGroups" 
					:key="group.shopId"
					class="shop-group"
				>
					<!-- 店铺头部 -->
					<view class="shop-header">
						<view class="shop-select" @click="toggleShopSelect(group.shopId)">
							<text v-if="isShopSelected(group.shopId)" class="selected-icon">✓</text>
							<text v-else class="unselected-icon"></text>
						</view>
						<text class="shop-icon" @click="navigateToShop(group.shopId, group.merchantId)">🏪</text>
						<text class="shop-name" :lines="1" @click="navigateToShop(group.shopId, group.merchantId)">{{ group.shopName }}</text>
						<text class="shop-arrow" @click="navigateToShop(group.shopId, group.merchantId)">></text>
					</view>
					
					<!-- 店铺商品 -->
					<view 
						v-for="item in group.items" 
						:key="item.id"
						class="cart-item"
					>
						<view class="item-select" @click="toggleSelect(item.id)">
							<text v-if="item.selected" class="selected-icon">✓</text>
							<text v-else class="unselected-icon"></text>
						</view>
						
						<image 
							class="item-image" 
							:src="item.image" 
							mode="aspectFill"
							@click="navigateToProduct(item)"
						/>
						
						<view class="item-info">
							<view class="info-top">
								<text class="item-name" :lines="1">{{ item.name }}</text>
								<text class="item-spec">{{ item.spec }}</text>
							</view>
							
							<view class="item-footer">
								<text class="item-price">¥{{ item.price }}</text>
								<view class="quantity-control">
									<text class="quantity-btn" @click="decreaseQuantity(item.id)">-</text>
									<text class="quantity-value">{{ item.quantity }}</text>
									<text class="quantity-btn" @click="increaseQuantity(item.id)">+</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 购物车操作栏 (移至推荐商品上方) -->
            <view v-if="cartItems.length > 0" class="cart-action-bar">
                <view class="action-bar-content">
                    <view class="action-left">
                        <view class="select-all" @click="toggleSelectAll">
                            <text v-if="allSelected" class="selected-icon">✓</text>
                            <text v-else class="unselected-icon"></text>
                            <text class="select-all-text">全选</text>
                        </view>
                    </view>
                    
                    <view class="action-right">
                        <view v-if="!isManageMode" class="total-info">
                            <text class="total-text">合计:</text>
                            <text class="total-price">¥{{ totalPrice }}</text>
                        </view>
                        <button v-if="!isManageMode" class="checkout-btn" @click="goToCheckout">
                            去结算({{ selectedCount }})
                        </button>
                        <button v-else class="delete-btn" @click="deleteSelectedItems">
                            删除({{ selectedCount }})
                        </button>
                    </view>
                </view>
            </view>
			
			<!-- 推荐商品 -->
			<view v-if="recommendProducts.length > 0" class="recommend-section">
				<view class="section-header">
					<text class="section-title">猜你喜欢</text>
					<view class="refresh-btn" @click="refreshRecommend">
						<text class="refresh-icon">🔄</text>
						<text class="refresh-text">换一批</text>
					</view>
				</view>
				<view class="recommend-list">
					<view 
						v-for="product in recommendProducts" 
						:key="product.id"
						class="recommend-item"
						@click="navigateToProduct(product)"
					>
						<image 
							class="recommend-image" 
							:src="product.image" 
							mode="aspectFill"
						/>
						<text class="recommend-name" :lines="2">{{ product.name }}</text>
						<view class="recommend-bottom">
							<text class="recommend-price">¥{{ product.price }}</text>
							<view class="recommend-add-btn" @click.stop="addToCart(product)">
								<text class="recommend-add-icon">+</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 底部结算栏 - 已移除，移动到内容区域 -->
		<!-- <view v-if="cartItems.length > 0" class="cart-footer">
			<view class="footer-content">
				<view class="footer-left">
					<view class="select-all" @click="toggleSelectAll">
						<text v-if="allSelected" class="selected-icon">✓</text>
						<text v-else class="unselected-icon"></text>
						<text class="select-all-text">全选</text>
					</view>
				</view>
				
				<view class="footer-right">
					<view v-if="!isManageMode" class="total-info">
						<text class="total-text">合计:</text>
						<text class="total-price">¥{{ totalPrice }}</text>
					</view>
					<button v-if="!isManageMode" class="checkout-btn" @click="goToCheckout">
						去结算({{ selectedCount }})
					</button>
					<button v-else class="delete-btn" @click="deleteSelectedItems">
						删除({{ selectedCount }})
					</button>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script setup lang="uts">
import { ref, computed, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { supabaseService, type CartItem as SupabaseCartItem, type Product } from '@/utils/supabaseService.uts'

type LocalCartItem = {
    id: string
    shopId: string
    shopName: string
    name: string
    price: number
    image: string
    spec: string
    quantity: number
    selected: boolean
    productId: string
    skuId: string
    merchantId: string
}

type CartGroup = {
	shopId: string
	shopName: string
	merchantId: string
	items: LocalCartItem[]
}

type RecommendProduct = {
	id: string
	shopId: string
	shopName: string
	name: string
	price: number
	image: string
	skuId: string
	merchant_id: string
}

// 响应式数据
const cartItems = ref<LocalCartItem[]>([])
const recommendProducts = ref<RecommendProduct[]>([])
const loading = ref<boolean>(false)
const statusBarHeight = ref(0)
const isManageMode = ref(false)
const updatingItems = ref<Set<string>>(new Set()) // Track items being updated to prevent race conditions

// 计算属性
const cartGroups = computed<CartGroup[]>(() => {
	const groups = new Map<string, CartGroup>()

	cartItems.value.forEach((item: LocalCartItem) => {
		const shopKey = item.shopId
		if (!groups.has(shopKey)) {
			groups.set(shopKey, {
				shopId: item.shopId,
				shopName: item.shopName,
				merchantId: item.merchantId,
				items: []
			})
		}

		const group = groups.get(shopKey)
		if (group != null) {
			group.items.push(item)
		}
	})

	const groupArray: CartGroup[] = []
	groups.forEach((value: CartGroup) => {
		groupArray.push(value)
	})
	return groupArray
})

const allSelected = computed(() => {
	return cartItems.value.length > 0 && cartItems.value.every((item: LocalCartItem) => item.selected)
})

const selectedCount = computed(() => {
	return cartItems.value.filter((item: LocalCartItem) => item.selected).reduce((sum: number, item: LocalCartItem) => sum + item.quantity, 0)
})

const totalPrice = computed(() => {
	return cartItems.value
		.filter((item: LocalCartItem) => item.selected)
		.reduce((sum: number, item: LocalCartItem) => sum + item.price * item.quantity, 0)
		.toFixed(2)
})

// 检查店铺是否全选
const isShopSelected = (shopId: string): boolean => {
	const shopItems = cartItems.value.filter((item: LocalCartItem): boolean => item.shopId === shopId)
	return shopItems.length > 0 && shopItems.every((item: LocalCartItem): boolean => item.selected)
}

const toggleManageMode = () => {
	isManageMode.value = !isManageMode.value
}

// 初始化页面数据
const initPage = () => {
	const systemInfo = uni.getSystemInfoSync()
	statusBarHeight.value = systemInfo.statusBarHeight ?? 0
}

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

const refreshRecommend = async () => {
    try {
        // 使用 searchProducts 获取销售额排序的 6 个产品
        const hotResp = await supabaseService.searchProducts('', 1, 6, 'sales')
        const recommends = hotResp.data
        
        if (recommends.length > 0) {
            recommendProducts.value = recommends.map((p: Product): RecommendProduct => {
                return {
                    id: p.id,
                    shopId: p.merchant_id ?? 'unknown',
                    shopName: p.shop_name ?? '商城推荐',
                    name: p.name,
                    price: p.base_price ?? p.market_price ?? 0,
                    image: p.main_image_url ?? p.image_url ?? '/static/images/default-product.png',
                    skuId: '',
                    merchant_id: p.merchant_id ?? ''
                }
            })
            uni.showToast({
                title: '已更新推荐',
                icon: 'none'
            })
        }
    } catch (error) {
        console.error('刷新推荐失败:', error)
    }
}

// 加载数据
const loadCartData = async () => {
	loading.value = true
	
	try {
		// 从Supabase加载购物车数据
		const supabaseCartItems = await supabaseService.getCartItems()
		
		// 转换数据格式以匹配前端界面
		const transformedItems = supabaseCartItems.map((item: SupabaseCartItem): LocalCartItem => {
			// 调试日志：打印每条商品数据的关键字段
			console.log(`CartItem raw: id=${item.id}, shop_id=${item.shop_id}, shop_name=${item.shop_name}, name=${item.product_name}, price=${item.product_price}`);
			
			// 关键修复：确保shopId有值，如果后端返回null/undefined，使用'default_shop'作为分组键
			const shopId = (item.shop_id != null && item.shop_id !== '') ? item.shop_id : 'default_shop'
			const shopName = (item.shop_name != null && item.shop_name !== '') ? item.shop_name : '商城优选'
			
			return {
				id: item.id,
				shopId: shopId,
				shopName: shopName,
				name: item.product_name ?? '未知商品',
				price: item.product_price != null ? item.product_price : 0,
				image: item.product_image ?? '/static/images/default-product.png',
				spec: item.product_specification ?? '标准规格',
				quantity: item.quantity ?? 1,
				selected: item.selected ?? false,
				productId: item.product_id ?? '',
				skuId: item.sku_id ?? '',
				merchantId: item.merchant_id ?? ''
			} as LocalCartItem
		})
		
		console.log('Transformed items count:', transformedItems.length);
		cartItems.value = transformedItems
		
		// 加载推荐商品（优先获取推荐位商品，如果没有则通过搜索获取热销商品）
        let recommends = await supabaseService.getRecommendedProducts(6)
        
        // 如果没有设置推荐商品，则获取热销商品作为补充
        if (recommends.length === 0) {
            const hotResp = await supabaseService.searchProducts('', 1, 6, 'sales')
            recommends = hotResp.data
        }

        if (recommends.length > 0) {
            recommendProducts.value = recommends.map((p: Product): RecommendProduct => {
				return {
					id: p.id,
					shopId: p.merchant_id ?? 'unknown',
					shopName: p.shop_name ?? '商城推荐',
					name: p.name,
					price: p.base_price ?? p.market_price ?? 0,
					image: p.main_image_url ?? p.image_url ?? '/static/images/default-product.png',
					skuId: '',
					merchant_id: p.merchant_id ?? ''
				}
			})
        } else {
             recommendProducts.value = []
        }
	} catch (error) {
		console.error('加载购物车数据失败:', error)
		cartItems.value = []
	} finally {
		loading.value = false
	}
}

onShow(() => {
	loadCartData()
})

// 商品操作 - 更新选中状态到Supabase
const toggleSelect = async (itemId: string) => {
    // 乐观更新
	const index = cartItems.value.findIndex(item => item.id === itemId)
	if (index !== -1) {
		const newSelected = !cartItems.value[index].selected
		cartItems.value[index].selected = newSelected
		cartItems.value = [...cartItems.value] // 触发响应式更新
		
		// 更新到Supabase
		const success = await supabaseService.updateCartItemSelection(itemId, newSelected)
		if (!success) {
			console.error('更新选中状态失败')
			// 恢复状态
			cartItems.value[index].selected = !newSelected
			cartItems.value = [...cartItems.value]
            uni.showToast({ title: '网络异常，请重试', icon: 'none' })
		}
	}
}

const toggleShopSelect = async (shopId: string) => {
	// 获取该店铺下所有商品的ID
	const shopItems = cartItems.value.filter((item: LocalCartItem): boolean => item.shopId === shopId)
	if (shopItems.length === 0) return
	
	const isAllShopSelected = shopItems.every((item: LocalCartItem): boolean => item.selected)
	const newState = !isAllShopSelected
	
	const shopItemIds = shopItems.map((item: LocalCartItem): string => item.id)
	
    // 乐观更新本地状态
    const oldStates = new Map<string, boolean>()
    cartItems.value.forEach(item => {
        if (item.shopId === shopId) {
            oldStates.set(item.id, item.selected)
            item.selected = newState
        }
    })
    cartItems.value = [...cartItems.value]

	// 批量更新到Supabase
	const success = await supabaseService.batchUpdateCartItemSelection(shopItemIds, newState)
	
	if (!success) {
		console.error('批量更新店铺商品选中状态失败')
        // 回滚
        cartItems.value.forEach(item => {
            if (item.shopId === shopId && oldStates.has(item.id)) {
                item.selected = oldStates.get(item.id)!
            }
        })
        cartItems.value = [...cartItems.value]
		uni.showToast({
			title: '操作失败',
			icon: 'none'
		})
	}
}

const toggleSelectAll = async () => {
    // 目标状态：如果当前全选，则取消全选；否则全选
	const newSelectedState = !allSelected.value
    
    // 乐观更新
	const oldItems = JSON.parse(JSON.stringify(cartItems.value)) as LocalCartItem[]
	const selectedItems = cartItems.value.map((item): LocalCartItem => {
        item.selected = newSelectedState
        return item
    })
    cartItems.value = selectedItems
	
	// 更新到Supabase
	const itemIds = cartItems.value.map(item => item.id)
    if (itemIds.length === 0) return

	const success = await supabaseService.batchUpdateCartItemSelection(itemIds, newSelectedState)
	
	if (!success) {
		console.error('批量更新选中状态失败')
		cartItems.value = oldItems
		uni.showToast({
			title: '操作失败',
			icon: 'none'
		})
	}
}

const increaseQuantity = async (itemId: string) => {
    if (updatingItems.value.has(itemId)) return
    
	const index = cartItems.value.findIndex(item => item.id === itemId)
	if (index !== -1) {
        updatingItems.value.add(itemId)
		const newQuantity = cartItems.value[index].quantity + 1
		cartItems.value[index].quantity = newQuantity
		cartItems.value = [...cartItems.value]
		
		// 更新到Supabase
		const success = await supabaseService.updateCartItemQuantity(itemId, newQuantity)
        updatingItems.value.delete(itemId)

		if (!success) {
			console.error('更新商品数量失败')
			// 恢复状态
			cartItems.value[index].quantity = newQuantity - 1
			cartItems.value = [...cartItems.value]
            uni.showToast({ title: '更新失败', icon: 'none' })
		}
	}
}

const decreaseQuantity = async (itemId: string) => {
    if (updatingItems.value.has(itemId)) return

	const index = cartItems.value.findIndex(item => item.id === itemId)
	if (index !== -1) {
		if (cartItems.value[index].quantity > 1) {
            updatingItems.value.add(itemId)
			const newQuantity = cartItems.value[index].quantity - 1
			cartItems.value[index].quantity = newQuantity
			cartItems.value = [...cartItems.value]
			
			// 更新到Supabase
			const success = await supabaseService.updateCartItemQuantity(itemId, newQuantity)
            updatingItems.value.delete(itemId)

			if (!success) {
				console.error('更新商品数量失败')
				// 恢复状态
				cartItems.value[index].quantity = newQuantity + 1
				cartItems.value = [...cartItems.value]
                uni.showToast({ title: '更新失败', icon: 'none' })
			}
		} else {
			// 数量为1时，询问是否删除
			uni.showModal({
				title: '提示',
				content: '确定要从购物车移除该商品吗？',
				success: (res) => {
					if (res.confirm) {
						// 从Supabase删除
						supabaseService.deleteCartItem(itemId).then((success) => {
							if (success) {
								cartItems.value.splice(index, 1)
								cartItems.value = [...cartItems.value]
								uni.showToast({
									title: '已移除',
									icon: 'none'
								})
							} else {
								console.error('删除商品失败')
								uni.showToast({
									title: '删除失败',
									icon: 'none'
								})
							}
						})
					}
				}
			})
		}
	}
}

// 删除商品 - 增加保存逻辑
const deleteSelectedItems = async () => {
	if (selectedCount.value === 0) {
		uni.showToast({
			title: '请选择要删除的商品',
			icon: 'none'
		})
		return
	}
	
	uni.showModal({
		title: '提示',
		content: `确定要删除选中的 ${selectedCount.value} 件商品吗？`,
		success: (res) => {
			if (res.confirm) {
				// 获取选中的商品ID
				const selectedItemIds = cartItems.value
					.filter(item => item.selected)
					.map(item => item.id)
				
				// 批量删除到Supabase
				supabaseService.batchDeleteCartItems(selectedItemIds).then((success) => {
					if (success) {
						// 从本地列表移除
						cartItems.value = cartItems.value.filter(item => !item.selected)
						
						// 如果购物车删空了，退出管理模式
						if (cartItems.value.length === 0) {
							isManageMode.value = false
						}
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
					} else {
						console.error('批量删除商品失败')
						uni.showToast({
							title: '删除失败',
							icon: 'none'
						})
					}
				})
			}
		}
	})
}

const addToCart = async (product: RecommendProduct) => {
	uni.showLoading({ title: '检查商品...' })
	try {
		const productId = product.id
		const skuId = product.skuId
		const merchantId = product.merchant_id
		
		// 检查商品是否有SKU
		const skus = await supabaseService.getProductSkus(productId)
		uni.hideLoading()
		
		if (skus.length > 0) {
			// 有规格，提示并跳转到商品详情页选择规格
			uni.showToast({
				title: '请选择规格',
				icon: 'none'
			})
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/mall/consumer/product-detail?id=' + productId
				})
			}, 500)
		} else {
			// 无规格，直接加入购物车
			uni.showLoading({ title: '添加中...' })
			const success = await supabaseService.addToCart(productId, 1, skuId, merchantId)
			uni.hideLoading()
			if (success) {
				uni.showToast({
					title: '已添加到购物车',
					icon: 'success'
				})
				
				// 重新加载购物车数据
				loadCartData()
			} else {
				console.error('添加商品到购物车失败')
				uni.showToast({
					title: '添加失败',
					icon: 'none'
				})
			}
		}
	} catch (error) {
		console.error('添加商品到购物车异常:', error)
		uni.hideLoading()
		uni.showToast({
			title: '添加失败',
			icon: 'none'
		})
	}
}

// 导航函数
const navigateToShop = (shopId: string, merchantId: any) => {
    // Prevent navigation for invalid shops
    if (shopId == '' || shopId === 'default_shop' || shopId === 'unknown') return
    
	let url = `/pages/mall/consumer/shop-detail?id=${shopId}`
	if (merchantId != null) {
        const mId = `${merchantId}`
        if (mId !== '' && mId !== 'null' && mId !== 'undefined' && mId !== 'false') {
            url += `&merchantId=${mId}`
        }
	}
	uni.navigateTo({ url })
}

const goShopping = () => {
	uni.switchTab({ url: '/pages/mall/consumer/index' })
}

const navigateToProduct = (product: any) => {
	console.log('navigateToProduct', product)
	
	// 使用 JSON 转换确保可以作为 JSONObject 处理，兼容 LocalCartItem 类型和普通对象
	const productJson = JSON.parse(JSON.stringify(product)) as UTSJSONObject
	
	// 使用productId（如果存在）作为跳转的商品ID，否则使用id
	let productId = productJson.getString('productId')
	if (productId == null || productId == '') {
		productId = productJson.getString('id')
	}
	
	if (productId == null || productId == '') {
		console.error('无法获取商品ID', product)
		return
	}

	// 传递完整的参数，确保商品详情页能正确加载
	let paramsArr: string[] = []
	paramsArr.push('id=' + encodeURIComponent(productId))
	paramsArr.push('productId=' + encodeURIComponent(productId))
	
	const price = productJson.getNumber('price') ?? 0
	paramsArr.push('price=' + price)
	
	let originalPrice = productJson.getNumber('original_price')
	if (originalPrice == null) {
		originalPrice = productJson.getNumber('originalPrice')
	}
	if (originalPrice == null) {
		originalPrice = parseFloat((price * 1.2).toFixed(2))
	}
	paramsArr.push('originalPrice=' + originalPrice)

	const name = productJson.getString('name') ?? ''
	paramsArr.push('name=' + encodeURIComponent(name))
	
	const image = productJson.getString('image') ?? '/static/product1.jpg'
	paramsArr.push('image=' + encodeURIComponent(image))
	
	const url = `/pages/mall/consumer/product-detail?${paramsArr.join('&')}`
	console.log('Navigate to:', url)
	
	uni.navigateTo({ 
		url: url
	})
}

const goToCheckout = () => {
	if (selectedCount.value === 0) {
		uni.showToast({
			title: '请选择商品',
			icon: 'none'
		})
		return
	}
	
	// 获取选中的商品 (直接过滤cartItems，不依赖cartGroups，确保扁平化传递)
	const selectedItems = cartItems.value
		.filter(item => item.selected)
		.map(item => ({
			id: item.id,
			product_id: item.productId ?? item.id,
			sku_id: item.skuId ?? item.id,
			product_name: item.name,
            shop_id: item.shopId,     // 关键：保留shopId用于分组
            shop_name: item.shopName, // 关键：保留shopName
			merchant_id: item.merchantId,
			product_image: item.image,
			sku_specifications: item.spec,
			price: item.price, // 确保是数字
			quantity: item.quantity // 确保是数字
		}))

    // 关键修复：将结算数据写入 Storage，确保 checkout 页面能稳定获取
    uni.setStorageSync('checkout_type', 'cart')
    // 使用纯JSON序列化防止复杂对象引发的问题
    try {
        uni.setStorageSync('checkout_items', JSON.stringify(selectedItems))
    } catch (e) {
        console.error('存储结算数据失败', e)
        uni.showToast({ title: '系统异常，请重试', icon: 'none' })
        return
    }

	// 跳转到结算页面并传递数据
	uni.navigateTo({
		url: '/pages/mall/consumer/checkout'
	})
}
</script>

<style>
.cart-page {
	flex: 1; /* 使用 Flex 撑满 */
    height: 100%; /* 兼容性考虑，部分环境需要 */
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
    overflow: hidden; /* 防止整页滚动 */
}

/* 智能导航栏 */
	.smart-navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #4CAF50;
		z-index: 1000;
		box-shadow: 0 2px 12px rgba(76, 175, 80, 0.15);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		flex-shrink: 0;
	}

.nav-container {
	padding: 0 16px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	height: 44px; /* 统一高度 44px */
}

.nav-title {
	font-size: 18px;
	font-weight: bold;
	color: white;
}

.nav-actions {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.action-btn {
	display: flex;
	flex-direction: row;
	align-items: center;
	background: rgba(255, 255, 255, 0.2);
	padding: 4px 12px;
	border-radius: 20px;
	/* cursor: pointer; REMOVED */
	transition: all 0.2s ease;
}

.action-btn:hover {
	background: rgba(255, 255, 255, 0.3);
}

.action-icon {
	font-size: 14px;
	margin-right: 4px;
	color: white;
}

.action-text {
	font-size: 12px;
	color: white;
	font-weight: bold;
}

/* 导航栏占位符 */
.navbar-placeholder {
	width: 100%;
	flex-shrink: 0;
}

/* 内容区 */
.cart-content {
	flex: 1;
    /* 必须设置 height: 0 或 overflow: hidden 可以在 flex 容器中正确收缩 */
    height: 0px; 
    width: 100%;
	padding-bottom: 60px; /* 为底部结算栏留出空间 */
}

/* 空购物车 */
.empty-cart {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	text-align: center;
}

.empty-icon {
	font-size: 80px;
	color: #ddd;
	margin-bottom: 20px;
}

.empty-title {
	font-size: 18px;
	color: #666;
	margin-bottom: 10px;
}

.empty-desc {
	font-size: 14px;
	color: #999;
	margin-bottom: 30px;
}

.go-shopping-btn {
	background-color: #ff5000;
	color: white;
	border: none;
	border-radius: 25px;
	padding: 10px 40px;
	font-size: 16px;
}

/* 购物车商品列表 */
.cart-list {
	background-color: transparent; /* 背景透明，因为每个店铺有自己的卡片 */
	margin: 10px;
	border-radius: 0;
	overflow: visible;
}

.shop-group {
	background-color: white;
	border-radius: 12px;
	margin-bottom: 12px;
	overflow: hidden;
}

.shop-header {
	display: flex;
	flex-direction: row; /* 强制横向排列 */
	align-items: center;
	justify-content: flex-start; /* 靠左对齐 */
	padding: 12px;
	border-bottom: 1px solid #f5f5f5;
}

.shop-select {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
	flex-shrink: 0; /* 防止被压缩 */
}

.shop-icon {
	font-size: 16px;
	margin-right: 6px;
	flex-shrink: 0;
}

.shop-name {
	font-size: 14px;
	font-weight: 700;
	color: #333;
	margin-right: 4px;
	/* 自适应宽度，但不超过剩余空间 */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.shop-arrow {
	font-size: 12px;
	color: #999;
	flex-shrink: 0;
}

.cart-item {
	display: flex;
	flex-direction: row; /* 显式横向排列 */
	padding: 12px; /* 减小内边距 */
	border-bottom: 1px solid #f5f5f5;
	align-items: center;
	height: 100px; /* 固定高度节省空间 */
}

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

.item-select {
	width: 30px; /* 减小选择框区域 */
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 5px;
}

.selected-icon {
	width: 18px;
	height: 18px;
	background-color: #ff5000;
	color: white;
	border-radius: 9px;
	text-align: center;
	line-height: 18px;
	font-size: 12px;
}

.unselected-icon {
	width: 18px;
	height: 18px;
	border: 1px solid #ddd;
	border-radius: 9px;
}

.item-image {
	width: 70px; /* 减小图片尺寸 */
	height: 70px;
	border-radius: 6px;
	margin-right: 10px;
	flex-shrink: 0;
}

.item-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 70px; /* 与图片高度一致 */
	overflow: hidden;
}

.info-top {
	display: flex;
	flex-direction: column;
}

.item-name {
	font-size: 14px; /* 稍微减小字体 */
	color: #333;
	margin-bottom: 2px;
	/* display: -webkit-box; REMOVED */
	/* -webkit-line-clamp: 1; REMOVED */
	/* -webkit-box-orient: vertical; REMOVED */
	overflow: hidden;
	font-weight: bold;
	text-overflow: ellipsis;
}

.item-spec {
	font-size: 12px;
	color: #999;
	margin-bottom: auto; /* 自动占据中间空间 */
}

.item-footer {
	display: flex;
	flex-direction: row; /* 显式设置横向排列 */
	justify-content: space-between;
	align-items: center;
	width: 100%; /* 确保占满宽度 */
}

.item-price {
	font-size: 16px;
	color: #ff5000;
	font-weight: bold;
}

.quantity-control {
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: #f5f5f5;
	border-radius: 12px;
	overflow: hidden;
	height: 28px;
}

.quantity-btn {
	width: 28px;
	height: 28px;
	text-align: center;
	line-height: 28px;
	font-size: 16px;
	color: #333;
	background-color: #eee;
}

.quantity-value {
	min-width: 36px;
	text-align: center;
	font-size: 14px;
	line-height: 28px;
	color: #333;
}

/* 推荐商品 */
.recommend-section {
	margin: 20px 10px;
	background-color: white;
	border-radius: 10px;
	padding: 15px;
}

.section-header {
	margin-bottom: 15px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.refresh-btn {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 4px 8px;
}

.refresh-icon {
	font-size: 14px;
	margin-right: 4px;
}

.refresh-text {
	font-size: 12px;
	color: #999;
}

.section-title {
	font-size: 16px;
	font-weight: bold;
	color: #333;
}

.recommend-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	/* grid-template-columns: repeat(2, 1fr); REMOVED */
	/* gap: 12px; REMOVED */
}

.recommend-item {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	width: 48%; /* 替换 grid 1fr auto fit */
	margin-bottom: 12px;
}

.recommend-image {
	width: 100%;
	height: 170px; /* 显式高度 */
	/* aspect-ratio: 1; REMOVED */
	/* object-fit: cover; REMOVED */
	border-radius: 8px;
	margin-bottom: 8px;
	background: #f5f5f5;
}

	.recommend-name {
		font-size: 13px;
		color: #333;
		margin-bottom: 5px;
		line-height: 1.4;
		height: 36px;
		overflow: hidden;
		/* display: -webkit-box; REMOVED */
		/* -webkit-line-clamp: 2; REMOVED */
		/* -webkit-box-orient: vertical; REMOVED */
		text-overflow: ellipsis;
	}

.recommend-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-right: 8px;
	}

	.recommend-price {
		font-size: 15px;
		color: #ff5000;
		font-weight: bold;
	}
	
	.recommend-add-btn {
		width: 24px;
		height: 24px;
		background-color: #ff5000;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.recommend-add-icon {
		color: white;
		font-size: 16px;
		line-height: 1;
		font-weight: bold;
	}

	/* 响应式布局优化 */
@media screen and (min-width: 768px) {
	.cart-list, 
	.recommend-section {
		margin: 20px auto;
		width: 95%; /* max-width -> width */
	}

	.recommend-list {
		/* grid-template-columns: repeat(4, 1fr); REMOVED */
		/* gap: 16px; REMOVED */
		/* Flex 布局参数调整在下方 update */
	}
	.recommend-item {
		width: 23%;
		margin-bottom: 16px;
	}
}

@media screen and (min-width: 1024px) {
	/* 桌面端整体布局调整 */
	.cart-content {
		padding: 20px 40px;
		background-color: #f5f5f5;
	}

	.cart-list, 
	.recommend-section {
		margin: 20px auto;
		width: 96%; /* max-width -> width: percentage is safer */
		max-width: 1200px;
	}

	/* 店铺分组在桌面端显示为网格布局 */
	.shop-group {
		display: flex;
		flex-direction: column;
		background: transparent;
		box-shadow: none;
		border-radius: 0;
		overflow: visible;
	}

	.shop-header {
		background: white;
		border-radius: 12px;
		margin-bottom: 12px;
		padding: 16px 80px 16px 24px; /* 同步增加右侧内边距 */
	}

	/* 购物车商品列表转为列表布局 */
	.cart-item {
		background: white;
		border-radius: 0;
		padding: 15px 80px 15px 30px; /* 进一步增加右侧内边距 */
		height: 80px; /* 固定高度 */
		border-bottom: 1px solid #eee;
		box-shadow: none;
		display: flex;
		flex-direction: row; /* 显式设置横向排列 */
		align-items: center; /* 垂直居中 */
		width: 100%;
	}
    
    .cart-item:hover {
        background-color: #f9f9f9;
        transform: none;
        box-shadow: none;
    }

	.item-image {
		width: 50px;
		height: 50px;
		margin-right: 20px;
		flex-shrink: 0;
	}

	.item-info {
		flex: 1;
        height: 100%;
		display: flex;
		flex-direction: row; /* 信息区域横向排列 */
		align-items: center;
        justify-content: space-between;
        overflow: visible;
	}
    
    .info-top {
        flex: 1;
		display: flex;
        flex-direction: row; /* 名称和规格横向排列 */
        align-items: center;
        margin-right: 20px;
		height: 100%;
    }

	.item-name {
		font-size: 14px;
        width: 250px; /* 固定名称宽度 */
        margin-right: 20px;
		/* 限制行数 */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
        margin-bottom: 0;
	}
    
    .item-spec {
        width: 150px;
        margin-bottom: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
    }
    
    .item-footer {
        width: auto;
		display: flex;
		flex-direction: row;
        justify-content: flex-end;
		align-items: center;
        /* gap: 40px; REMOVED */
		height: 100%;
    }
     
    .item-price {
        width: 100px;
        text-align: right;
		margin-bottom: 0;
		margin-right: 40px; /* Replace gap */
    }
    
    .quantity-control {
        margin-left: 0;
		display: flex;
		flex-direction: row;
    }

	/* 推荐商品优化 */
	.recommend-list {
		/* grid-template-columns: repeat(5, 1fr); REMOVED */
		/* gap: 20px; REMOVED */
	}
	.recommend-item {
		width: 18%; /* 5列 */
		margin-bottom: 20px;
	}
    
    .recommend-image {
        height: 200px; /* 强制高度 */
    }
	
	/* 底部结算栏优化 */
	.cart-footer {
		padding: 0 40px;
		width: 100%; /* max-width -> width */
		margin: 0 auto;
		box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
	}
	
	.footer-content {
		max-width: 1200px;
		margin: 0 auto;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

@media screen and (min-width: 1400px) {
	.cart-list, 
	.recommend-section {
		width: 1400px;
	}

	/* 大屏下购物车商品显示3列 - 移除，保持单列列表 */
	/* .cart-list .shop-group > view:not(.shop-header) {
		grid-template-columns: repeat(3, 1fr);
	} */

	.recommend-list {
		/* grid-template-columns: repeat(6, 1fr); REMOVED */
	}
	.recommend-item {
		width: 15%; /* 6 columns approx */
	}
	
	.footer-content {
		width: 1400px;
	}
}

	/* 购物车操作栏样式 - 自适应横向排列 */
	.cart-action-bar {
		background-color: white;
		margin: 10px;
		border-radius: 12px;
		padding: 10px 15px; /* 减小内边距 */
		box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	}

	.action-bar-content {
		display: flex;
		flex-direction: row; /* 强制横向 */
		align-items: center;
		justify-content: space-between;
		width: 100%;
        /* gap: 20px; REMOVED from .action-bar-content usually in desktop */
	}

	.action-left {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-shrink: 0;
	}

	.action-right {
		display: flex;
		flex-direction: row; /* 强制横向 */
		align-items: center;
		justify-content: flex-end;
		flex: 1;
		min-width: 0;
	}
	
	/* 合计信息区域 */
	.total-info {
		display: flex;
		flex-direction: row; /* 强制横向 */
		align-items: center;
		margin-right: 10px;
		flex-shrink: 1; /* 允许压缩 */
		overflow: hidden;
	}
	
	.total-text {
		font-size: 14px;
		color: #333;
		margin-right: 2px;
		white-space: nowrap;
		flex-shrink: 0;
	}
	
	.total-price {
		font-size: 16px;
		color: #ff5000;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	/* 结算按钮 */
	.checkout-btn, .delete-btn {
		background-color: #ff5000;
		color: white;
		border: none;
		border-radius: 25px;
		padding: 6px 16px; /* 减小按钮内边距 */
		font-size: 14px;
		white-space: nowrap;
		flex-shrink: 0;
		margin: 0; /* 移除可能的margin */
	}
	
	.delete-btn {
		background-color: #ff3b30;
		padding: 6px 20px;
	}
	
	/* 全选区域 */
	.select-all {
		display: flex;
		flex-direction: row; /* 强制横向 */
		align-items: center;
	}
	
	.select-all-text {
		margin-left: 8px;
		font-size: 14px;
		color: #333;
		white-space: nowrap;
	}
	
	/* 响应式调整 */
	/* 手机端小屏幕优化 */
	@media screen and (max-width: 375px) {
		.cart-action-bar {
			padding: 10px;
			margin: 10px 5px; /* 减小外边距增加可用宽度 */
		}
		
		.total-text {
			font-size: 12px;
		}
		
		.total-price {
			font-size: 15px;
		}
		
		.checkout-btn, .delete-btn {
			padding: 6px 12px;
			font-size: 12px;
		}
		
		.select-all-text {
			font-size: 13px;
			margin-left: 4px;
		}
	}
	
	/* 平板端优化 */
	@media screen and (min-width: 768px) {
		.cart-action-bar {
			margin: 20px auto;
			width: 95%; /* max-width -> width */
			padding: 20px;
		}
		
		.action-bar-content {
			/* gap: 20px; REMOVED */
		}
		
		.total-price {
			font-size: 20px;
		}
		
		.checkout-btn, .delete-btn {
			padding: 10px 30px;
			font-size: 16px;
			margin-left: 20px; /* Replace gap */
		}
	}
	
	/* 桌面端优化 */
	@media screen and (min-width: 1024px) {
		.cart-action-bar {
			width: 1200px; /* max-width -> width */
			padding: 20px 30px;
		}
		
		.action-bar-content {
			justify-content: space-between;
		}
		
		.total-info {
			margin-right: 30px;
		}
		
		.total-text {
			font-size: 16px;
		}
		
		.total-price {
			font-size: 22px;
		}
		
		.checkout-btn, .delete-btn {
			padding: 12px 40px;
			font-size: 16px;
		}
		
		.select-all-text {
			font-size: 16px;
		}
	}
	
	/* 大屏幕优化 */
	@media screen and (min-width: 1400px) {
		.cart-action-bar {
			width: 1400px; /* max-width -> width */
		}
	}
</style>

