import React, { useState, useEffect } from 'react'
import { View, Text, Input, Image, ScrollView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { Button, Uploader } from '@nutui/nutui-react-taro'
import { getShopOrder } from '@/api/shop/shopOrder'
import type { ShopOrder } from '@/api/shop/shopOrder/model'
import Price from '@/components/common/Price'

definePageConfig({
  navigationBarTitleText: '申请售后',
})

// 售后类型
const AFTER_SALE_TYPES = [
  { value: 'refund', label: '退款', desc: '仅退款，商品无需退回' },
  { value: 'return', label: '退货退款', desc: '退款并退货，商品需退回' },
]

// 退款原因选项
const REASON_OPTIONS = [
  '商品损坏/有瑕疵',
  '商品与描述不符',
  '收到错误商品',
  '商品少发/漏发',
  '不想要了',
  '其他原因',
]

const AfterSaleApplyPage: React.FC = () => {
  const { orderId, type } = Taro.getCurrentInstance().router?.params || {}
  const [order, setOrder] = useState<ShopOrder | null>(null)
  const [loading, setLoading] = useState(false)

  // 售后类型
  const [afterSaleType, setAfterSaleType] = useState<'refund' | 'return'>(
    (type as 'refund' | 'return') || 'refund'
  )

  // 退款原因
  const [selectedReason, setSelectedReason] = useState('')
  const [reasonDesc, setReasonDesc] = useState('')

  // 图片上传
  const [images, setImages] = useState<string[]>([])

  // 选中的商品
  const [selectedItems, setSelectedItems] = useState<number[]>([])

  // 可退金额
  const [refundAmount, setRefundAmount] = useState('0.00')

  useEffect(() => {
    if (orderId) {
      loadOrder()
    }
  }, [orderId])

  const loadOrder = async () => {
    try {
      const res = await getShopOrder(Number(orderId))
      if (res) {
        setOrder(res)
        // 默认选中所有商品
        const allItemIndices = (res.orderGoods || []).map((_, idx) => idx)
        setSelectedItems(allItemIndices)
        // 计算可退金额
        const amount = calculateRefundAmount(res, allItemIndices)
        setRefundAmount(amount)
      }
    } catch (err) {
      console.error('加载订单失败', err)
      Taro.showToast({ title: '加载失败', icon: 'none' })
    }
  }

  // 计算可退金额
  const calculateRefundAmount = (orderData: ShopOrder, selectedIdx: number[]): string => {
    if (!orderData.orderGoods || selectedIdx.length === 0) return '0.00'

    let total = 0
    orderData.orderGoods.forEach((item, idx) => {
      if (selectedIdx.includes(idx)) {
        total += Number(item.price || 0) * (item.num || item.quantity || 1)
      }
    })

    // 按比例计算优惠分摊
    const totalPrice = Number(orderData.totalPrice || 0)
    if (totalPrice > 0) {
      const payPrice = Number(orderData.payPrice || 0)
      const ratio = payPrice / totalPrice
      total = total * ratio
    }

    return total.toFixed(2)
  }

  // 切换商品选中
  const toggleItem = (idx: number) => {
    const newSelected = selectedItems.includes(idx)
      ? selectedItems.filter(i => i !== idx)
      : [...selectedItems, idx]
    setSelectedItems(newSelected)
    if (order) {
      setRefundAmount(calculateRefundAmount(order, newSelected))
    }
  }

  // 全选/取消全选
  const toggleAll = () => {
    if (!order?.orderGoods) return
    if (selectedItems.length === order.orderGoods.length) {
      setSelectedItems([])
      setRefundAmount('0.00')
    } else {
      const allIdx = order.orderGoods.map((_, idx) => idx)
      setSelectedItems(allIdx)
      setRefundAmount(calculateRefundAmount(order, allIdx))
    }
  }

  // 提交申请
  const handleSubmit = async () => {
    if (selectedItems.length === 0) {
      Taro.showToast({ title: '请选择要售后的商品', icon: 'none' })
      return
    }
    if (!selectedReason) {
      Taro.showToast({ title: '请选择退款原因', icon: 'none' })
      return
    }

    Taro.showModal({
      title: '确认提交',
      content: `确认提交${afterSaleType === 'refund' ? '退款' : '退货退款'}申请？`,
      success: async (res) => {
        if (res.confirm) {
          await submitApply()
        }
      },
    })
  }

  const submitApply = async () => {
    if (!selectedReason) {
      Taro.showToast({ title: '请选择退款原因', icon: 'none' })
      return
    }

    setLoading(true)
    try {
      const res = await applyAfterSale({
        orderId: orderId || '',
        type: afterSaleType,
        reason: selectedReason,
        description: reasonDesc,
        amount: parseFloat(refundAmount),
        evidenceImages: images
      })
      
      if (res.success) {
        Taro.showToast({ title: '申请提交成功', icon: 'success' })
        setTimeout(() => {
          Taro.redirectTo({ url: '/pages/order/after-sale-list' })
        }, 1500)
      } else {
        Taro.showToast({ title: res.message || '提交失败', icon: 'none' })
      }
    } catch (err) {
      console.error('申请售后失败:', err)
      Taro.showToast({ title: '提交失败', icon: 'none' })
    } finally {
      setLoading(false)
    }
  }

  if (!order) {
    return (
      <View className='min-h-screen bg-gray-50 flex items-center justify-center'>
        <Text className='text-gray-400 text-sm'>加载中...</Text>
      </View>
    )
  }

  return (
    <View className='min-h-screen bg-gray-50 pb-20 flex flex-col'>
      <ScrollView scrollY className='flex-1'>
        {/* 售后类型选择 */}
        <View className='bg-white mx-3 mt-3 p-4 rounded-xl'>
          <Text className='text-sm font-medium text-gray-800 mb-3 block'>售后类型</Text>
          <View className='flex gap-3'>
            {AFTER_SALE_TYPES.map(item => (
              <View
                key={item.value}
                className={`flex-1 p-3 rounded-lg border-2 text-center ${
                  afterSaleType === item.value
                    ? 'border-green-500 bg-green-50'
                    : 'border-gray-200 bg-white'
                }`}
                onClick={() => setAfterSaleType(item.value as 'refund' | 'return')}
              >
                <Text className={`text-sm font-medium block ${
                  afterSaleType === item.value ? 'text-green-600' : 'text-gray-600'
                }`}>
                  {item.label}
                </Text>
                <Text className='text-xs text-gray-400 mt-1 block'>{item.desc}</Text>
              </View>
            ))}
          </View>
        </View>

        {/* 商品选择 */}
        <View className='bg-white mx-3 mt-3 p-4 rounded-xl'>
          <View className='flex justify-between items-center mb-3'>
            <Text className='text-sm font-medium text-gray-800'>选择商品</Text>
            <Text
              className='text-xs text-green-600'
              onClick={toggleAll}
            >
              {selectedItems.length === order.orderGoods?.length ? '取消全选' : '全选'}
            </Text>
          </View>

          {order.orderGoods?.map((item, idx) => (
            <View
              key={idx}
              className='flex items-center gap-3 py-3 border-b border-gray-50'
              style={idx === (order.orderGoods?.length ?? 0) - 1 ? { borderBottom: 'none' } : undefined}
              onClick={() => toggleItem(idx)}
            >
              {/* 选中状态 */}
              <View className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
                selectedItems.includes(idx)
                  ? 'border-green-500 bg-green-500'
                  : 'border-gray-300'
              }`}>
                {selectedItems.includes(idx) && (
                  <Text className='text-white text-xs'>✓</Text>
                )}
              </View>

              {/* 商品图片 */}
              <Image
                className='w-16 h-16 rounded-lg'
                src={item.image || ''}
                mode='aspectFill'
              />

              {/* 商品信息 */}
              <View className='flex-1'>
                <Text className='text-sm text-gray-700 line-clamp-2'>{item.goodsName}</Text>
                <View className='flex justify-between items-center mt-1'>
                  <Price price={item.price || '0'} size='small' />
                  <Text className='text-xs text-gray-500'>x{item.num || item.quantity || 1}</Text>
                </View>
              </View>
            </View>
          ))}
        </View>

        {/* 退款原因 */}
        <View className='bg-white mx-3 mt-3 p-4 rounded-xl'>
          <Text className='text-sm font-medium text-gray-800 mb-3 block'>退款原因</Text>
          <View className='flex flex-wrap gap-2'>
            {REASON_OPTIONS.map(reason => (
              <View
                key={reason}
                className={`px-3 py-2 rounded-full text-sm ${
                  selectedReason === reason
                    ? 'bg-green-50 text-green-600 border border-green-500'
                    : 'bg-gray-50 text-gray-600 border border-gray-200'
                }`}
                onClick={() => setSelectedReason(reason)}
              >
                <Text>{reason}</Text>
              </View>
            ))}
          </View>

          {/* 补充说明 */}
          <View className='mt-3'>
            <Text className='text-xs text-gray-500 mb-1 block'>补充说明（选填）</Text>
            <View className='bg-gray-50 rounded-lg p-3'>
              <Input
                className='w-full text-sm'
                placeholder='请详细描述您遇到的问题'
                value={reasonDesc}
                onInput={e => setReasonDesc(e.detail.value)}
                style={{ minHeight: '80px' }}
              />
            </View>
          </View>
        </View>

        {/* 上传凭证 */}
        <View className='bg-white mx-3 mt-3 p-4 rounded-xl'>
          <Text className='text-sm font-medium text-gray-800 mb-3 block'>上传凭证（选填）</Text>
          <Uploader
            value={images.map((url, idx) => ({ id: String(idx), url }))}
            onChange={(files) => {
              setImages(files.map(f => f.url || ''))
            }}
            maxCount={3}
          />
        </View>

        {/* 退款金额 */}
        <View className='bg-white mx-3 mt-3 p-4 rounded-xl mb-4'>
          <View className='flex justify-between items-center'>
            <Text className='text-sm font-medium text-gray-800'>预计退款金额</Text>
            <Text className='text-lg font-bold text-red-500'>
              {'\u00A5'}{refundAmount}
            </Text>
          </View>
          {afterSaleType === 'return' && (
            <Text className='text-xs text-gray-400 mt-2 block'>
              退货时请将商品寄回，商家收货后退款将原路返回
            </Text>
          )}
        </View>
      </ScrollView>

      {/* 提交按钮 */}
      <View className='bg-white border-t border-gray-100 p-3' style={{ paddingBottom: '20px' }}>
        <Button
          type='primary'
          className='w-full rounded-full'
          loading={loading}
          style={{ backgroundColor: '#0e932e' }}
          onClick={handleSubmit}
        >
          提交申请
        </Button>
      </View>
    </View>
  )
}

export default AfterSaleApplyPage