/**
 * 商品消费页
 */
import { View, Text, Button,  } from '@tarojs/components'
import { useState } from 'react'
import Taro, { useLoad } from '@tarojs/taro'
import { Tabs, Divider,Image } from '@taroify/core'
import { ArrowDown, Arrow } from '@taroify/icons'
import EmptyData from '@/components/EmptyData'
import FilterPopup from '../orderList/components/FilterPopup'
import './index.scss'

// 商品消费订单数据接口
interface GoodsOrderItem {
  id: string
  time: string           // 消费时间
  storeName: string      // 消费门店
  address: string        // 地址
  orderNo: string        // 订单号
  amount: number         // 消费金额
  goodsCount: number     // 商品数量
  status: 'unpaid' | 'paid' | 'refund'  // 未支付 | 已支付 | 退款
  
  // 退款订单特有字段
  refundGoods?: RefundGoodsItem[]  // 退款商品列表
}

// 退款商品信息接口
interface RefundGoodsItem {
  id: string
  image: string          // 商品图片
  name: string           // 商品名称
  refundAmount: number   // 退款金额
  refundStatus: 'success' | 'failed'  // 退款状态：成功 | 失败
  paymentMethod: string  // 支付方式
}

const GoodsCons = () => {
  const [statusTab, setStatusTab] = useState(0) // 0: 未支付, 1: 已支付, 2: 退款
  const [filterPopupOpen, setFilterPopupOpen] = useState(false) // 筛选弹窗
  const [filterData, setFilterData] = useState({
    startDate: '',
    endDate: '',
    paymentMethods: [] as string[]
  })

  // 模拟商品消费订单数据
  const [orderList] = useState<GoodsOrderItem[]>([
    {
      id: '1',
      time: '2025-01-10 16:30:01',
      storeName: 'XXX店',
      address: 'XXX市XXXXXXXX',
      orderNo: 'wjekwejrwkjsf1321445255',
      amount: 15.50,
      goodsCount: 2,
      status: 'unpaid'
    },
    {
      id: '2',
      time: '2025-01-09 10:30:01',
      storeName: 'XXX店',
      address: 'XXX市XXX区XXXXXXXXXXXXXXXX街道XXXXXXX大厦201',
      orderNo: 'wjekwejrwkjsf1321445255',
      amount: 15.00,
      goodsCount: 2,
      status: 'paid'
    },
    {
      id: '3',
      time: '2025-01-08 14:20:00',
      storeName: 'XXX店',
      address: 'XXX市XXXXXXXX',
      orderNo: 'wjekwejrwkjsf1321445256',
      amount: 20.00,
      goodsCount: 1,
      status: 'refund',
      refundGoods: [
        {
          id: '1',
          image: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          name: '美汁源Minute Maid果粒橙 橙汁饮料 1.25l/瓶',
          refundAmount: 12.50,
          refundStatus: 'success',
          paymentMethod: '微信'
        },
        {
          id: '2',
          image: '',  // 空图片显示占位图
          name: '美汁源Minute Maid果粒橙 橙汁饮料 1.25l/瓶',
          refundAmount: 12.50,
          refundStatus: 'success',
          paymentMethod: '支付宝'
        },
        {
          id: '3',
          image: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          name: '可口可乐 迷你装 200ml/罐',
          refundAmount: 3.00,
          refundStatus: 'failed',
          paymentMethod: '微信'
        }
      ]
    }
  ])

  useLoad(() => {
    console.log('商品消费页面加载')
  })

  // 筛选按钮点击
  const handleFilter = () => {
    setFilterPopupOpen(true)
  }

  // 筛选确认
  const handleFilterConfirm = (data: any) => {
    setFilterData(data)
    
    // 计算筛选数量
    let count = 0
    if (data.startDate || data.endDate) count++
    if (data.paymentMethods.length > 0) count += data.paymentMethods.length
    
    console.log('筛选数据', data, '筛选数量', count)
    
    Taro.showToast({
      title: '筛选成功',
      icon: 'success',
      duration: 2000
    })
  }

  // 计算筛选数量
  const getFilterCount = () => {
    let count = 0
    if (filterData.startDate || filterData.endDate) count++
    if (filterData.paymentMethods.length > 0) count += filterData.paymentMethods.length
    return count
  }

  // 根据选中的 Tab 筛选订单
  const getFilteredOrders = () => {
    let filtered = orderList

    // 根据状态筛选
    if (statusTab === 0) {
      filtered = filtered.filter(order => order.status === 'unpaid')
    } else if (statusTab === 1) {
      filtered = filtered.filter(order => order.status === 'paid')
    } else if (statusTab === 2) {
      filtered = filtered.filter(order => order.status === 'refund')
    }

    return filtered
  }

  const filteredOrders = getFilteredOrders()

  // 订单卡片点击
  const handleOrderClick = (orderId: string) => {
    console.log('订单详情', orderId)
    Taro.navigateTo({
      url: `/pagesUser/goodsOrderDetail/index?orderId=${orderId}&status=${statusTab === 0 ? 'unpaid' : 'paid'}`
    })
  }

  // 立即支付
  const handlePay = (orderId: string, e: any) => {
    e.stopPropagation() // 阻止冒泡到卡片点击事件
    console.log('立即支付', orderId)
    Taro.showToast({
      title: '跳转支付',
      icon: 'none'
    })
  }

  // 获取状态文本
  const getStatusText = (status: string) => {
    if (status === 'unpaid') return '未支付'
    if (status === 'paid') return '已支付'
    if (status === 'refund') return '退款'
    return ''
  }

  // 获取状态样式类
  const getStatusClass = (status: string) => {
    if (status === 'unpaid') return 'unpaid'
    if (status === 'paid') return 'paid'
    if (status === 'refund') return 'refund'
    return ''
  }

  // 获取退款状态文本
  const getRefundStatusText = (status: 'success' | 'failed') => {
    return status === 'success' ? '退款成功' : '退款失败'
  }

  // 获取退款状态样式类
  const getRefundStatusClass = (status: 'success' | 'failed') => {
    return status === 'success' ? 'refund_success' : 'refund_failed'
  }

  return (
    <View className="goods-cons-page">
      {/* 状态 Tab：未支付/已支付/退款 + 筛选 */}
      <View className="status-tab-container">
        <Tabs value={statusTab} onChange={setStatusTab} className="status-tabs">
          <Tabs.TabPane title="未支付" />
          <Tabs.TabPane title="已支付" />
          <Tabs.TabPane title="退款" />
        </Tabs>
        
        <View className="filter-btn" onClick={handleFilter}>
          <Text className="filter-text">筛选{getFilterCount() > 0 ? ` ${getFilterCount()}` : ''}</Text>
          <ArrowDown size="16px" color="#8B8B8B" />
        </View>
      </View>

      {/* 订单列表 */}
      <View className="order-list">
        {filteredOrders.length === 0 ? (
          <EmptyData />
        ) : (
          <>
            {filteredOrders.map(order => {
              // 退款订单：每个退款商品显示为独立卡片
              if (order.status === 'refund' && order.refundGoods) {
                return order.refundGoods.map((goods) => (
                  <View 
                    key={`${order.id}-${goods.id}`}
                    className="order-card refund_card"
                    onClick={() => handleOrderClick(order.id)}
                  >
                    {/* 商品信息 */}
                    <View className="goods_row">
                      {/* 商品图片 */}
                   
                        <Image 
                          width="208rpx"
                          height="208rpx"
                          className="goods_img" 
                          src={goods.image} 
                          mode="aspectFill"
                          placeholder="加载中..."
                          fallback="加载失败"
                        />
                 
                      
                      {/* 商品名称和退款金额 */}
                      <View className="goods_info_box">
                        <Text className="goods_name">{goods.name}</Text>
                        <Text className="refund_amount">退款: ¥ {goods.refundAmount.toFixed(2)}</Text>
                      </View>
                    </View>

                    {/* 退款状态栏 */}
                    <View className={`refund_status_bar ${getRefundStatusClass(goods.refundStatus)}`}>
                      <Text className="refund_status_text">{getRefundStatusText(goods.refundStatus)}</Text>
                      <Text className="payment_method">{goods.paymentMethod}</Text>
                      <Text className="refund_amount_text">¥ {goods.refundAmount.toFixed(2)}</Text>
                      <View className="detail_btn_box">
                        <Text className="detail_text">详情</Text>
                        <Arrow size="16px" color="#646566" />
                      </View>
                    </View>
                  </View>
                ))
              }
              
              // 普通订单：未支付/已支付，每个订单显示为一个卡片
              return (
                <View 
                  key={order.id} 
                  className="order-card"
                  onClick={() => handleOrderClick(order.id)}
                >
                  {/* 标题行：时间 + 状态 */}
                  <View className="card-header">
                    <Text className="time">{order.time}</Text>
                    <View className="status-with-arrow">
                      <Text className={`status ${getStatusClass(order.status)}`}>
                        {getStatusText(order.status)}
                      </Text>
                      <Arrow size="16px" color={order.status === 'unpaid' ? '#FF3B30' : '#8B8B8B'} />
                    </View>
                  </View>

                  {/* 虚线分隔 */}
                  <Divider dashed={true} />
                  
                  {/* 订单信息 */}
                  <View className="card-info">
                    <View className="info-row">
                      <Text className="info-label">消费门店</Text>
                      <Text className="info-value">{order.storeName}</Text>
                    </View>
                    <View className="info-row">
                      <Text className="info-label">地址</Text>
                      <Text className="info-value">{order.address}</Text>
                    </View>
                    <View className="info-row">
                      <Text className="info-label">订单号</Text>
                      <Text className="info-value">{order.orderNo}</Text>
                    </View>
                    <View className="info-row">
                      <Text className="info-label">消费金额</Text>
                      <Text className="info-value">{order.amount.toFixed(2)}元</Text>
                    </View>
                    <View className="info-row">
                      <Text className="info-label">商品数量</Text>
                      <Text className="info-value">{order.goodsCount}</Text>
                    </View>
                  </View>

                  {/* 未支付订单显示立即支付按钮 */}
                  {order.status === 'unpaid' && (
                    <Button className="pay-btn" onClick={(e) => handlePay(order.id, e)}>
                      立即支付
                    </Button>
                  )}
                </View>
              )
            })}

            {/* 到底了提示 */}
            <View className="list-end">
              <Text className="end-text">到底了~</Text>
            </View>
          </>
        )}
      </View>

      {/* 筛选弹窗 */}
      <FilterPopup
        open={filterPopupOpen}
        onClose={() => setFilterPopupOpen(false)}
        onConfirm={handleFilterConfirm}
      />
    </View>
  )
}

export default GoodsCons