import React, { useState, useEffect } from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { getRefundDetail, type RefundDetail } from '@/api/shop/shopOrderRefund'
import Loading from '@/components/common/Loading'
import EmptyState from '@/components/common/EmptyState'

definePageConfig({
  navigationBarTitleText: '退款详情',
})

const RefundDetailPage: React.FC = () => {
  const { orderId } = Taro.getCurrentInstance().router?.params || {}
  const [loading, setLoading] = useState(true)
  const [refundDetail, setRefundDetail] = useState<RefundDetail | null>(null)

  useEffect(() => {
    loadRefundDetail()
  }, [orderId])

  const loadRefundDetail = async () => {
    try {
      setLoading(true)
      const data = await getRefundDetail(orderId || '')
      setRefundDetail(data)
    } catch (err) {
      Taro.showToast({ title: '加载失败', icon: 'none' })
      console.error('加载退款详情失败', err)
    } finally {
      setLoading(false)
    }
  }

  if (loading) {
    return <Loading fullscreen />
  }

  if (!refundDetail) {
    return (
      <View className='min-h-screen bg-gray-50 flex items-center justify-center'>
        <EmptyState text='未找到退款信息' />
      </View>
    )
  }

  return (
    <View className='min-h-screen bg-gray-50 flex flex-col'>
      <ScrollView scrollY className='flex-1'>
        {/* 退款状态 */}
        <View className='p-4 text-center bg-white'>
          <Text className='text-lg font-bold text-orange-500 block'>{refundDetail.statusText}</Text>
          <Text className='text-sm text-gray-400 mt-1 block'>
            退款金额: {'\u00A5'}{refundDetail.refundMoney}
          </Text>
        </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>
          {refundDetail.steps.map((step, idx) => (
            <View key={idx} className='flex gap-3 pb-4 border-b border-gray-50' style={idx === refundDetail.steps.length - 1 ? { borderBottom: 'none', paddingBottom: '0' } : undefined}>
              <View className='flex flex-col items-center'>
                <View className={`w-3 h-3 rounded-full ${step.done ? 'bg-green-500' : 'bg-gray-300'}`} />
                {idx < refundDetail.steps.length - 1 && (
                  <View className={`w-1 flex-1 min-h-4 ${step.done ? 'bg-green-500' : 'bg-gray-200'}`} />
                )}
              </View>
              <View className='flex-1'>
                <Text className={`text-sm ${step.done ? 'text-gray-800' : 'text-gray-400'}`}>{step.title}</Text>
                <Text className='text-xs text-gray-400 mt-0 block'>{step.desc}</Text>
                {step.time && (
                  <Text className='text-xs text-gray-400 mt-0 block'>{step.time}</Text>
                )}
              </View>
            </View>
          ))}
        </View>

        {/* 退款信息 */}
        <View className='bg-white mx-3 mt-3 p-4 rounded-xl mb-4'>
          <Text className='text-sm font-medium text-gray-800 mb-2 block'>退款信息</Text>
          <View className='text-xs text-gray-500 leading-6'>
            <Text>订单编号: {refundDetail.orderNo}</Text>
            <Text>退款原因: {refundDetail.reason}</Text>
            <Text>申请时间: {refundDetail.time}</Text>
          </View>
        </View>
      </ScrollView>
    </View>
  )
}

export default RefundDetailPage