<template>
  <div class="cart-container">
    <div class="cart-header">
      <div class="header-left">
        <a-avatar :size="48" style="background: linear-gradient(135deg, #ff7eb3 0%, #ff758c 100%)">
          <icon-shopping-cart :size="24" />
        </a-avatar>
        <div class="header-title">
          <h1>购物车</h1>
          <span class="item-count">共 {{ cart.length }} 件商品</span>
        </div>
      </div>
      <div class="header-actions">
        <a-button shape="round" @click="goProducts">
          <template #icon><icon-arrow-left /></template>
          继续购物
        </a-button>
        <a-button shape="round" @click="goOrders">
          <template #icon><icon-file /></template>
          我的订单
        </a-button>
      </div>
    </div>

    <a-card :bordered="false" class="cart-content">
      <a-empty v-if="cart.length === 0" description="购物车空空如也">
        <template #image>
          <icon-shopping-cart :size="80" style="color: #e0e0e0" />
        </template>
        <a-button type="primary" shape="round" @click="goProducts">去逛逛</a-button>
      </a-empty>

      <template v-else>
        <div class="address-section">
          <div class="section-header">
            <icon-location :size="20" style="color: #ff758c" />
            <span>收货地址</span>
          </div>
          <a-input v-model="address" placeholder="请输入详细收货地址" allow-clear>
            <template #prefix>
              <icon-home />
            </template>
          </a-input>
        </div>

        <div class="cart-items">
          <div class="cart-item" v-for="item in cart" :key="item.productId">
            <div class="item-image">
              <img :src="item.imageUrl || 'https://picsum.photos/100/100?baby=' + item.productId" />
            </div>
            <div class="item-info">
              <div class="item-name">{{ item.productName }}</div>
              <div class="item-category">
                <a-tag size="small" color="pink">{{ item.category }}</a-tag>
              </div>
            </div>
            <div class="item-price">
              <span class="price-label">单价</span>
              <span class="price-value">¥{{ item.unitPrice }}</span>
            </div>
            <div class="item-quantity">
              <span class="quantity-label">数量</span>
              <a-input-number :model-value="item.quantity" :min="1" :max="item.stock" size="small" disabled />
            </div>
            <div class="item-subtotal">
              <span class="subtotal-label">小计</span>
              <span class="subtotal-value">¥{{ item.subtotal }}</span>
            </div>
            <div class="item-actions">
              <a-popconfirm content="确定要从购物车移除此商品吗？" @ok="removeCart(item.productId)">
                <a-button type="text" status="danger" size="small">
                  <template #icon><icon-delete /></template>
                </a-button>
              </a-popconfirm>
            </div>
          </div>
        </div>

        <div class="cart-footer">
          <div class="total-info">
            <span class="total-label">商品总额</span>
            <span class="total-value">¥{{ totalAmount }}</span>
          </div>
          <a-space size="large">
            <a-button shape="round" @click="loadCart">
              <template #icon><icon-refresh /></template>
              刷新
            </a-button>
            <a-button type="primary" shape="round" size="large" @click="checkout">
              <template #icon><icon-check /></template>
              结算购物车 ({{ cart.length }}件)
            </a-button>
          </a-space>
        </div>
      </template>
    </a-card>
  </div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { Message } from '@arco-design/web-vue'
import { api } from '../api'
import { useUserStore } from '../stores/user'

const router = useRouter()
const userStore = useUserStore()
const cart = ref([])
const address = ref(localStorage.getItem('customer_address') || '')

const totalAmount = computed(() => {
  return cart.value.reduce((sum, item) => sum + item.subtotal, 0).toFixed(2)
})

const goProducts = () => router.push('/products')
const goOrders = () => router.push('/orders')

const loadCart = async () => {
  cart.value = await api.customerCartViews()
}

const removeCart = async (productId) => {
  await api.delCart(productId)
  Message.success('已移除')
  await loadCart()
}

const checkout = async () => {
  if (!address.value) return Message.warning('请填写收货地址')
  localStorage.setItem('customer_address', address.value)
  await api.checkout({ address: address.value })
  Message.success('结算成功')
  router.push('/orders')
}

import { IconApps, IconArrowLeft, IconFile, IconLocation, IconHome, IconDelete, IconRefresh, IconCheck } from '@arco-design/web-vue/es/icon'

onMounted(async () => {
  try {
    await userStore.fetchMe()
    if (userStore.role !== 'CUSTOMER') return router.replace('/login')
    await loadCart()
  } catch {
    router.replace('/login')
  }
})
</script>

<style scoped>
.cart-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #fff5f8 0%, #f0f5ff 100%);
  padding: 24px;
}

.cart-header {
  max-width: 1200px;
  margin: 0 auto 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-title h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(135deg, #ff7eb3 0%, #ff758c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.item-count {
  color: #888;
  font-size: 14px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.cart-content {
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.address-section {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  color: #333;
}

.cart-items {
  margin-bottom: 24px;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  background: #fafafa;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.cart-item:hover {
  background: #fff0f5;
}

.item-image img {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
}

.item-info {
  flex: 1;
  padding: 0 16px;
}

.item-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}

.item-category {
  font-size: 12px;
  color: #888;
}

.item-price,
.item-quantity,
.item-subtotal {
  text-align: center;
  min-width: 100px;
}

.price-label,
.quantity-label,
.subtotal-label {
  display: block;
  font-size: 12px;
  color: #888;
  margin-bottom: 4px;
}

.price-value {
  font-size: 16px;
  font-weight: 600;
  color: #ff4d4f;
}

.subtotal-value {
  font-size: 18px;
  font-weight: 700;
  color: #ff4d4f;
}

.item-actions {
  padding-left: 16px;
}

.cart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.total-info {
  text-align: left;
}

.total-label {
  font-size: 14px;
  color: #666;
  margin-right: 12px;
}

.total-value {
  font-size: 28px;
  font-weight: 700;
  color: #ff4d4f;
}

:deep(.arco-btn-primary) {
  background: linear-gradient(135deg, #ff7eb3 0%, #ff758c 100%);
  border-color: transparent;
}
</style>
