import React, { useState, useEffect } from 'react'
import Taro, { useRouter } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import {
  Rate,
  TextArea,
  Button,
  Uploader,
  Loading,
  Empty
} from '@nutui/nutui-react-taro'
import './index.scss'

// 订单商品信息
interface OrderGoods {
  goodsId: string
  goodsName: string
  goodsImage: string
  goodsPrice: number
  goodsNum: number
  skuInfo?: string
}

// 评价信息
interface EvaluateInfo {
  goodsId: string
  rating: number // 评分 1-5
  content: string // 评价内容
  images: string[] // 评价图片
  isAnonymous: boolean // 是否匿名
}

const EvaluatePage: React.FC = () => {
  const router = useRouter()
  const { orderId, orderNo } = router.params

  const [loading, setLoading] = useState(true)
  const [submitting, setSubmitting] = useState(false)
  const [orderGoods, setOrderGoods] = useState<OrderGoods[]>([])
  const [evaluates, setEvaluates] = useState<Map<string, EvaluateInfo>>(new Map())

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

  // 加载订单商品信息
  const loadOrderGoods = async () => {
    try {
      setLoading(true)

      // 模拟API调用 - 实际项目中替换为真实API
      const mockOrderGoods: OrderGoods[] = [
        {
          goodsId: '1',
          goodsName: 'iPhone 15 Pro Max 256GB 深空黑色',
          goodsImage: 'https://via.placeholder.com/100x100',
          goodsPrice: 9999,
          goodsNum: 1,
          skuInfo: '颜色：深空黑色，容量：256GB'
        },
        {
          goodsId: '2',
          goodsName: 'AirPods Pro 第三代',
          goodsImage: 'https://via.placeholder.com/100x100',
          goodsPrice: 1999,
          goodsNum: 1,
          skuInfo: '颜色：白色'
        }
      ]

      // 模拟网络延迟
      await new Promise(resolve => setTimeout(resolve, 1000))

      setOrderGoods(mockOrderGoods)

      // 初始化评价信息
      const initialEvaluates = new Map<string, EvaluateInfo>()
      mockOrderGoods.forEach(goods => {
        initialEvaluates.set(goods.goodsId, {
          goodsId: goods.goodsId,
          rating: 5,
          content: '',
          images: [],
          isAnonymous: false
        })
      })
      setEvaluates(initialEvaluates)

    } catch (error) {
      console.error('加载订单商品失败:', error)
      Taro.showToast({
        title: '加载失败，请重试',
        icon: 'none'
      })
    } finally {
      setLoading(false)
    }
  }

  // 更新评价信息
  const updateEvaluate = (goodsId: string, field: keyof EvaluateInfo, value: any) => {
    setEvaluates(prev => {
      const newEvaluates = new Map(prev)
      const evaluate = newEvaluates.get(goodsId)
      if (evaluate) {
        newEvaluates.set(goodsId, {
          ...evaluate,
          [field]: value
        })
      }
      return newEvaluates
    })
  }

  // 处理图片上传
  const handleImageUpload = async (goodsId: string, files: any) => {
    try {
      // 模拟图片上传
      const uploadedImages: string[] = []

      for (const file of files) {
        if (file.url) {
          uploadedImages.push(file.url)
        }
      }

      updateEvaluate(goodsId, 'images', uploadedImages)
    } catch (error) {
      console.error('图片上传失败:', error)
      Taro.showToast({
        title: '图片上传失败',
        icon: 'none'
      })
    }
  }

  // 提交评价
  const submitEvaluate = async () => {
    try {
      // 验证评价内容
      const evaluateList = Array.from(evaluates.values())
      const invalidEvaluate = evaluateList.find(evaluate =>
        evaluate.rating < 1 || evaluate.rating > 5
      )

      if (invalidEvaluate) {
        Taro.showToast({
          title: '请为所有商品评分',
          icon: 'none'
        })
        return
      }

      setSubmitting(true)

      // 模拟API调用
      await new Promise(resolve => setTimeout(resolve, 2000))

      Taro.showToast({
        title: '评价提交成功',
        icon: 'success'
      })

      // 延迟返回上一页
      setTimeout(() => {
        Taro.navigateBack()
      }, 1500)

    } catch (error) {
      console.error('提交评价失败:', error)
      Taro.showToast({
        title: '提交失败，请重试',
        icon: 'none'
      })
    } finally {
      setSubmitting(false)
    }
  }

  // 获取评分文字描述
  const getRatingText = (rating: number) => {
    const texts = ['', '很差', '一般', '满意', '很好', '非常满意']
    return texts[rating] || ''
  }

  if (loading) {
    return (
      <View className="evaluate-page">
        <View className="loading-container">
          <Loading type="spinner" />
          <Text className="loading-text">正在加载商品信息...</Text>
        </View>
      </View>
    )
  }

  if (orderGoods.length === 0) {
    return (
      <View className="evaluate-page">
        <Empty
          description="暂无商品信息"
          imageSize={80}
        >
          <Button type="primary" size="small" onClick={() => Taro.navigateBack()}>
            返回
          </Button>
        </Empty>
      </View>
    )
  }

  return (
    <View className="evaluate-page">
      {/* 订单信息 */}
      <View className="order-info">
        <Text className="order-no">订单号：{orderNo}</Text>
        <Text className="order-tip">请为以下商品进行评价</Text>
      </View>

      {/* 商品评价列表 */}
      <View className="goods-list">
        {orderGoods.map(goods => {
          const evaluate = evaluates.get(goods.goodsId)
          if (!evaluate) return null

          return (
            <View key={goods.goodsId} className="goods-item">
              {/* 商品信息 */}
              <View className="goods-info">
                <Image
                  className="goods-image"
                  src={goods.goodsImage}
                  mode="aspectFill"
                />
                <View className="goods-detail">
                  <Text className="goods-name">{goods.goodsName}</Text>
                  {goods.skuInfo && (
                    <Text className="goods-sku">{goods.skuInfo}</Text>
                  )}
                  <Text className="goods-price">¥{goods.goodsPrice}</Text>
                </View>
              </View>

              {/* 评分 */}
              <View className="rating-section">
                <View className="rating-header">
                  <Text className="rating-label">商品评分</Text>
                  <Text className="rating-text">{getRatingText(evaluate.rating)}</Text>
                </View>
                <Rate
                  value={evaluate.rating}
                  onChange={(value) => updateEvaluate(goods.goodsId, 'rating', value)}
                  allowHalf={false}
                />
              </View>

              {/* 评价内容 */}
              <View className="content-section">
                <Text className="content-label">评价内容</Text>
                <TextArea
                  placeholder="请描述您对商品的使用感受..."
                  value={evaluate.content}
                  onChange={(value) => updateEvaluate(goods.goodsId, 'content', value)}
                  maxLength={500}
                  showCount
                  rows={6}
                />
              </View>

              {/* 图片上传 */}
              <View className="image-section">
                <Text className="image-label">上传图片（可选）</Text>
                <Uploader
                  value={evaluate.images.map(url => ({ url }))}
                  onChange={(files) => handleImageUpload(goods.goodsId, files)}
                  multiple
                  maxCount={6}
                  previewType="picture"
                  deletable
                />
              </View>
            </View>
          )
        })}
      </View>

      {/* 提交按钮 */}
      <View className="submit-section">
        <Button
          type="primary"
          block
          loading={submitting}
          onClick={submitEvaluate}
        >
          {submitting ? '提交中...' : '提交评价'}
        </Button>
      </View>
    </View>
  )
}

export default EvaluatePage
