import React, { useState } from 'react'
import { View, Text, ScrollView, Swiper, SwiperItem } from '@tarojs/components'
import Taro from '@tarojs/taro'

definePageConfig({
  navigationBarTitleText: '评价详情',
})

const EvaluateDetailPage: React.FC = () => {
  const [evaluation, setEvaluation] = useState({
    id: 1,
    goodsId: 1,
    goodsName: '高品质保温杯',
    goodsImage: '',
    score: 5,
    content: '质量很好，保温效果非常棒！物流也很快，包装严实，非常满意的一次购物体验。\n\n杯子的外观设计很时尚，颜色也很正，同事们都问我在哪里买的。保温效果真的很好，早上装的开水，到下午还是温热的。\n\n唯一的小缺点就是盖子有点紧，不过用多了应该会好一些。总体来说非常满意，推荐大家购买！',
    images: ['', '', ''],
    isAnonymous: false,
    userName: '张***',
    createTime: '2026-05-10 14:30:00',
    likes: 12,
    isLiked: false,
    replies: [
      {
        id: 1,
        content: '感谢您的好评！我们会继续努力提供优质产品和服务。',
        createTime: '2026-05-10 15:00:00',
        isOfficial: true,
      },
    ],
  })

  // 渲染星星
  const renderStars = (score: number) => {
    const stars = []
    for (let i = 1; i <= 5; i++) {
      stars.push(
        <Text key={i} className={i <= score ? 'text-orange-400' : 'text-gray-300'}>
          ★
        </Text>
      )
    }
    return stars
  }

  // 处理点赞
  const handleLike = () => {
    setEvaluation(prev => ({
      ...prev,
      isLiked: !prev.isLiked,
      likes: prev.isLiked ? prev.likes - 1 : prev.likes + 1,
    }))
    Taro.showToast({ title: evaluation.isLiked ? '已取消点赞' : '点赞成功', icon: 'success' })
  }

  // 图片预览
  const handleImagePreview = (index: number) => {
    // 这里应该调用 Taro.previewImage
    Taro.showToast({ title: `查看第${index + 1}张图片`, icon: 'none' })
  }

  return (
    <View className='bg-gray-50 flex flex-col' style={{ minHeight: '100vh' }}>
      <ScrollView scrollY className='flex-1'>
        {/* 用户信息 */}
        <View className='bg-white p-4 mb-3'>
          <View className='flex items-center gap-2 mb-3'>
            <View className='w-10 h-10 rounded-full flex items-center justify-center' style={{ background: 'linear-gradient(to right, #60a5fa, #c084fc)' }}>
              <Text className='text-white font-bold'>{evaluation.isAnonymous ? '匿' : evaluation.userName[0]}</Text>
            </View>
            <View className='flex-1'>
              <Text className='text-sm text-gray-700 font-medium block'>{evaluation.userName}</Text>
              <View className='flex items-center gap-1'>
                {renderStars(evaluation.score)}
              </View>
            </View>
            <Text className='text-xs text-gray-400'>{evaluation.createTime.split(' ')[0]}</Text>
          </View>
        </View>

        {/* 商品信息 */}
        <View
          className='bg-white p-4 mb-3'
          onClick={() => Taro.navigateTo({ url: `/pages/shop/product-detail?id=${evaluation.goodsId}` })}
        >
          <View className='flex items-center gap-2'>
            <View className='w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0'>
              <Text className='text-2xl'>🛍️</Text>
            </View>
            <View className='flex-1'>
              <Text className='text-sm text-gray-700 block'>{evaluation.goodsName}</Text>
              <Text className='text-xs text-gray-400 mt-1 block'>查看商品详情</Text>
            </View>
            <Text className='text-gray-400'>→</Text>
          </View>
        </View>

        {/* 评价内容 */}
        <View className='bg-white p-4 mb-3'>
          <Text className='text-sm text-gray-700 leading-7 block whitespace-pre-wrap'>
            {evaluation.content}
          </Text>

          {/* 评价图片 */}
          {evaluation.images && evaluation.images.length > 0 && (
            <View className='mt-3'>
              <Swiper
                className='h-48 rounded-lg'
                indicatorColor='#999'
                indicatorActiveColor='#333'
                circular
                autoplay={false}
              >
                {evaluation.images.map((_, index) => (
                  <SwiperItem key={index}>
                    <View className='w-full h-48 bg-gray-100 flex items-center justify-center'>
                      <Text className='text-4xl'>🖼️</Text>
                      <Text className='text-xs text-gray-400 mt-2'>评价图片 {index + 1}</Text>
                    </View>
                  </SwiperItem>
                ))}
              </Swiper>
              <View className='flex justify-center gap-1 mt-2'>
                {evaluation.images.map((_, index) => (
                  <View key={index} className='w-1 h-1 rounded-full bg-gray-300' />
                ))}
              </View>
            </View>
          )}
        </View>

        {/* 商家回复 */}
        {evaluation.replies && evaluation.replies.length > 0 && (
          <View className='bg-white p-4 mb-3'>
            <Text className='text-sm font-medium text-gray-800 mb-2 block'>商家回复</Text>
            {evaluation.replies.map(reply => (
              <View key={reply.id} className='bg-orange-50 rounded-lg p-3'>
                <View className='flex items-center gap-2 mb-2'>
                  {reply.isOfficial && (
                    <View className='bg-orange-500 px-2 py-1 rounded'>
                      <Text className='text-xs text-white'>官方</Text>
                    </View>
                  )}
                  <Text className='text-xs text-gray-400'>{reply.createTime}</Text>
                </View>
                <Text className='text-sm text-gray-700 leading-6'>{reply.content}</Text>
              </View>
            ))}
          </View>
        )}

      </ScrollView>

      {/* 底部操作栏 */}
      <View className='bg-white border-t border-gray-100 px-4 py-2 flex items-center justify-around' style={{ paddingBottom: '20px' }}>
        <View className='flex flex-col items-center' onClick={handleLike}>
          <Text className={`text-2xl ${evaluation.isLiked ? 'text-red-500' : 'text-gray-400'}`}>
            {evaluation.isLiked ? '❤️' : '🤍'}
          </Text>
          <Text className={`text-xs ${evaluation.isLiked ? 'text-red-500' : 'text-gray-400'}`}>
            {evaluation.likes}
          </Text>
        </View>

        <View className='flex flex-col items-center' onClick={() => Taro.showToast({ title: '收藏成功', icon: 'success' })}>
          <Text className='text-2xl'>⭐</Text>
          <Text className='text-xs text-gray-400'>收藏</Text>
        </View>

        <View className='flex flex-col items-center' onClick={() => Taro.showToast({ title: '举报已提交', icon: 'success' })}>
          <Text className='text-2xl'>⚠️</Text>
          <Text className='text-xs text-gray-400'>举报</Text>
        </View>

        <View
          className='bg-orange-500 text-white px-6 py-2 rounded-full'
          onClick={() => Taro.navigateTo({ url: `/pages/shop/product-detail?id=${evaluation.goodsId}` })}
        >
          <Text className='text-sm text-white'>查看商品</Text>
        </View>
      </View>
    </View>
  )
}

export default EvaluateDetailPage