import { View, Text, Image, Button } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState, useEffect } from 'react'
import './index.scss'
import { useThemeContext } from '../../context/ThemeContext'
import { useSafeArea } from '../../hooks/useSafeArea'
import { useStatusBar } from '../../hooks/useStatusBar'
import { getOrderList, getDefaultAddress, getAddressList, type AddressItem, type OrderItem } from '../../utils/store'
import { PRODUCT_ICON_MAP } from '../../utils/productConfig'

export default function OrderDetailPage() {
  const { theme, resolvedTheme } = useThemeContext()
  const safe = useSafeArea()
  useStatusBar(resolvedTheme)
  const params = Taro.getCurrentInstance().router?.params
  const orderId = params?.orderId || ''

  const [order, setOrder] = useState<OrderItem | null>(null)
  const [address, setAddress] = useState<AddressItem | null>(null)
  const [showAddrPicker, setShowAddrPicker] = useState(false)
  const [addrList, setAddrList] = useState<AddressItem[]>([])

  useEffect(() => {
    const orders = getOrderList()
    const o = orders.find(x => x.id === orderId)
    if (o) {
      setOrder(o)
      // 优先显示订单已有地址，否则用默认地址
      if ((o as any).address) {
        setAddress((o as any).address)
      } else {
        setAddress(getDefaultAddress())
      }
    }
    setAddrList(getAddressList())
  }, [orderId])

  const handlePickAddress = (addr: AddressItem) => {
    setAddress(addr)
    setShowAddrPicker(false)
    // 同步更新订单里的地址
    const orders = getOrderList()
    const idx = orders.findIndex(x => x.id === orderId)
    if (idx >= 0) {
      orders[idx] = { ...orders[idx], address: addr } as any
      // 这里不直接写回 store，用临时状态即可，实际后端会有 order update API
    }
    Taro.showToast({ title: '地址已更改', icon: 'success' })
  }

  if (!order) {
    return (
      <View className={`theme-${resolvedTheme}`}>
        <View className='order-detail-page'>
          <View className='page-header dashed-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
            <Text className='page-title'>订单不存在</Text>
          </View>
        </View>
      </View>
    )
  }

  return (
    <View className={`theme-${resolvedTheme}`}>
      <View className='order-detail-page'>

        <View className='page-header dashed-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
          <View className='star-badge' />
          <View className='flex-between' style={{ width: '100%' }}>
            <Text className='back-btn' onTap={() => Taro.navigateBack()}>←</Text>
            <Text className='page-title'>订单详情</Text>
            <View style={{ width: '60px' }} />
          </View>
        </View>

        {/* 状态横幅 */}
        <View className='status-banner dashed-card mt-20'>
          <View className='star-badge' />
          <Text className='status-text'>
            {order.statusCode === 'pending' && '待付款'}
            {order.statusCode === 'paid' && '待发货'}
            {order.statusCode === 'shipping' && '待收货'}
            {order.statusCode === 'done' && '已完成'}
          </Text>
          <Text className='status-desc'>
            {order.statusCode === 'pending' && '请在30分钟内完成支付'}
            {order.statusCode === 'paid' && '商品正在打包中，即将发货'}
            {order.statusCode === 'shipping' && '快递运输中，请注意查收'}
            {order.statusCode === 'done' && '交易已完成，感谢惠顾'}
          </Text>
        </View>

        {/* 物流信息（仅 shipping/done） */}
        {(order.statusCode === 'shipping' || order.statusCode === 'done') && (
          <View className='logistics-card dashed-card mt-20'>
            <View className='star-badge' />
            <View className='logistics-header'>
              <View className='flex-center'>
                <Image className='card-icon-img' src='/icon/包裹.png' mode='aspectFit' />
                <Text className='logistics-title'>物流信息</Text>
              </View>
              <Text className='logistics-num'>单号: SF1234567890</Text>
            </View>
            <View className='timeline'>
              <View className='timeline-item active'>
                <View className='timeline-dot' />
                <View className='timeline-content'>
                  <Text className='timeline-status'>运输中</Text>
                  <Text className='timeline-time'>2024-01-15 14:30</Text>
                  <Text className='timeline-desc'>【北京市】快件已到达北京朝阳转运中心</Text>
                </View>
              </View>
              <View className='timeline-item'>
                <View className='timeline-dot' />
                <View className='timeline-content'>
                  <Text className='timeline-status'>已发货</Text>
                  <Text className='timeline-time'>2024-01-15 09:00</Text>
                  <Text className='timeline-desc'>【深圳市】商家已发货，等待揽收</Text>
                </View>
              </View>
              <View className='timeline-item'>
                <View className='timeline-dot' />
                <View className='timeline-content'>
                  <Text className='timeline-status'>已下单</Text>
                  <Text className='timeline-time'>2024-01-14 20:15</Text>
                  <Text className='timeline-desc'>订单已生成，等待商家发货</Text>
                </View>
              </View>
            </View>
          </View>
        )}

        {/* 商品信息 */}
        <View className='product-card dashed-card mt-20'>
          <View className='star-badge' />
          <View className='product-row'>
            <View className='product-icon-wrapper'>
              <Image
                className='product-icon-img'
                src={order.productIcon?.startsWith('/icon/') ? order.productIcon : '/icon/四角星.png'}
                mode='aspectFit'
              />
            </View>
            <View className='product-info'>
              <Text className='product-name'>{order.productName}</Text>
              <Text className='product-sku'>{order.sku}</Text>
            </View>
          </View>
          <View className='price-row'>
            <Text className='price-label'>实付款</Text>
            <Text className='price-value'>{order.price}</Text>
          </View>
        </View>

        {/* 收货地址 */}
        <View className='address-card dashed-card mt-20'>
          <View className='star-badge' />
          <View className='address-header'>
            <View className='flex-center'>
              <Image className='card-icon-img' src='/icon/地址.png' mode='aspectFit' />
              <Text className='address-title'>收货地址</Text>
            </View>
            <View className='address-change' onTap={() => setShowAddrPicker(true)}>
              <Text className='change-text'>更改收货地址</Text>
            </View>
          </View>
          {address ? (
            <View className='address-body'>
              <View className='address-row'>
                <Text className='address-name'>{address.name}</Text>
                <Text className='address-phone'>{address.phone}</Text>
              </View>
              <Text className='address-detail'>
                {address.region?.join(' ')} {address.detail}
              </Text>
            </View>
          ) : (
            <View className='address-empty'>
              <Text>暂无收货地址，请先添加</Text>
            </View>
          )}
        </View>

        {/* 订单信息 */}
        <View className='meta-card dashed-card mt-20'>
          <View className='star-badge' />
          <Text className='meta-title'>订单信息</Text>
          <View className='meta-row'>
            <Text className='meta-label'>订单编号</Text>
            <Text className='meta-value'>{order.id}</Text>
          </View>
          <View className='meta-row'>
            <Text className='meta-label'>创建时间</Text>
            <Text className='meta-value'>{order.date}</Text>
          </View>
          <View className='meta-row'>
            <Text className='meta-label'>数量</Text>
            <Text className='meta-value'>{order.count} 件</Text>
          </View>
        </View>

        <View style={{ height: '40px' }} />

        {/* 地址选择底部弹窗 */}
        {showAddrPicker && (
          <View className='modal-overlay' style={{ alignItems: 'flex-end', justifyContent: 'flex-end' }}>
            <View className='addr-picker-sheet dashed-card'>
              <View className='addr-picker-header'>
                <Text className='addr-picker-title'>选择收货地址</Text>
                <Text className='addr-picker-close' onTap={() => setShowAddrPicker(false)}>✕</Text>
              </View>
              <View className='addr-picker-list'>
                {addrList.map((addr) => (
                  <View
                    key={addr.id}
                    className={`addr-picker-item ${address?.id === addr.id ? 'active' : ''}`}
                    onTap={() => handlePickAddress(addr)}
                  >
                    <View className='addr-picker-row'>
                      <Text className='addr-picker-name'>{addr.name}</Text>
                      <Text className='addr-picker-phone'>{addr.phone}</Text>
                      {addr.isDefault && <Text className='addr-picker-default'>默认</Text>}
                    </View>
                    <Text className='addr-picker-detail'>
                      {addr.region?.join(' ')} {addr.detail}
                    </Text>
                  </View>
                ))}
                {addrList.length === 0 && (
                  <View className='addr-picker-empty'>
                    <Text>暂无地址，请先添加收货地址</Text>
                  </View>
                )}
              </View>
              <View className='addr-picker-add' onTap={() => { setShowAddrPicker(false); Taro.navigateTo({ url: '/pages/address/index' }) }}>
                <Text className='addr-picker-add-text'>+ 新建收货地址</Text>
              </View>
            </View>
          </View>
        )}
      </View>
    </View>
  )
}