import React, { useState, useEffect } from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { pageShopActivity, signUpActivity } from '@/api/shop/shopActivity'
import type { ShopActivity, ActivityStatus, ActivityType } from '@/api/shop/shopActivity'
import EmptyState from '@/components/common/EmptyState'
import LoadMore from '@/components/common/LoadMore'

definePageConfig({
  navigationBarTitleText: '活动列表',
})

const ActivityListPage: React.FC = () => {
  const [activeTab, setActiveTab] = useState(0)
  const [activities, setActivities] = useState<ShopActivity[]>([])
  const [loading, setLoading] = useState(false)
  const [finished, setFinished] = useState(false)
  const [page, setPage] = useState(1)

  useEffect(() => {
    setActivities([])
    setPage(1)
    setFinished(false)
    loadList(1)
  }, [activeTab])

  const loadList = async (p: number) => {
    if (loading) return
    setLoading(true)

    try {
      // 根据 tab 筛选状态
      let status: ActivityStatus | undefined
      if (activeTab === 1) status = 'ongoing'
      else if (activeTab === 2) status = 'upcoming'
      else if (activeTab === 3) status = 'ended'

      const res = await pageShopActivity({
        page: p,
        limit: 10,
        status,
      })

      if (res?.list) {
        if (p === 1) {
          setActivities(res.list)
        } else {
          setActivities(prev => [...prev, ...res.list])
        }
        setFinished(res.list.length < 10)
        setPage(p)
      }
    } catch (err) {
      console.error('加载活动列表失败', err)
      Taro.showToast({ title: '加载失败', icon: 'none' })
    } finally {
      setLoading(false)
    }
  }

  // 加载更多
  const handleLoadMore = () => {
    if (!finished && !loading) {
      loadList(page + 1)
    }
  }

  // 报名活动
  const handleSignUp = async (id: number) => {
    Taro.showModal({
      title: '确认报名',
      content: '确定报名参加该活动吗？',
      confirmColor: '#0e932e',
      success: async (res) => {
        if (res.confirm) {
          try {
            await signUpActivity({ activityId: id, userId: 0 })
            Taro.showToast({ title: '报名成功', icon: 'success' })
          } catch (err) {
            console.error('报名失败', err)
            Taro.showToast({ title: '报名失败', icon: 'none' })
          }
        }
      }
    })
  }

  // 获取状态标签
  const getStatusLabel = (status: ActivityStatus) => {
    const map: Record<ActivityStatus, { label: string; color: string }> = {
      'upcoming': { label: '未开始', color: 'text-blue-500' },
      'ongoing': { label: '进行中', color: 'text-green-500' },
      'ended': { label: '已结束', color: 'text-gray-400' },
      'cancelled': { label: '已取消', color: 'text-gray-400' },
    }
    return map[status] || { label: '未知', color: 'text-gray-400' }
  }

  // 获取活动类型名称
  const getTypeLabel = (type: ActivityType) => {
    const map: Record<ActivityType, string> = {
      'discount': '限时折扣',
      'full_reduction': '满减活动',
      'seckill': '秒杀活动',
      'group_buy': '团购活动',
      'flash_sale': '闪购活动',
    }
    return map[type] || '其他'
  }

  // 格式化时间
  const formatTime = (timeStr: string) => {
    const date = new Date(timeStr)
    const month = (date.getMonth() + 1).toString().padStart(2, '0')
    const day = date.getDate().toString().padStart(2, '0')
    const hour = date.getHours().toString().padStart(2, '0')
    const minute = date.getMinutes().toString().padStart(2, '0')
    return `${month}-${day} ${hour}:${minute}`
  }

  return (
    <View className='min-h-screen bg-gray-50'>
      {/* Tab 栏 */}
      <View className='bg-white flex'>
        {['全部', '进行中', '未开始', '已结束'].map((tab, index) => (
          <View
            key={index}
            className={`flex-1 text-center py-3 relative ${
              activeTab === index ? 'text-orange-500 font-medium' : 'text-gray-600'
            }`}
            onClick={() => setActiveTab(index)}
          >
            <Text className='text-sm'>{tab}</Text>
            {activeTab === index && (
              <View className='absolute bottom-0 w-8 h-px bg-orange-500 rounded' style={{ left: '50%', transform: 'translateX(-50%)' }} />
            )}
          </View>
        ))}
      </View>

      {/* 活动列表 */}
      <ScrollView
        scrollY
        className='flex-1'
        onScrollToLower={handleLoadMore}
        lowerThreshold={100}
      >
        <View className='p-3'>
          {activities.length === 0 && !loading ? (
            <EmptyState text='暂无活动' />
          ) : (
            activities.map(activity => (
              (() => {
                const statusInfo = getStatusLabel(activity.status)
                return (
                  <View key={activity.id} className='bg-white rounded-xl p-4 mb-3 shadow-sm' onClick={() => Taro.navigateTo({ url: `/pages/activity/detail/index?id=${activity.id}` })}>
                    {/* 活动图片 */}
                    <View className='w-full rounded-lg flex items-center justify-center mb-3' style={{ height: '160px', background: 'linear-gradient(to right, #fb923c, #ef4444)' }}>
                      <Text className='text-5xl'>🎉</Text>
                    </View>

                    {/* 活动信息 */}
                    <View className='mb-2'>
                      <View className='flex items-center gap-2 mb-1'>
                          <Text className='text-base font-bold text-gray-800 flex-1'>{activity.name}</Text>
                          <View className={`px-2 py-1 rounded ${activity.status === 'ongoing' ? 'bg-green-50' : activity.status === 'upcoming' ? 'bg-blue-50' : 'bg-gray-50'}`}>
                            <Text className={`text-xs ${statusInfo.color}`}>{statusInfo.label}</Text>
                          </View>
                      </View>
                      <Text className='text-sm text-gray-600 mb-2 block'>{activity.description}</Text>
                    
                      <View className='flex items-center gap-3 text-xs text-gray-400'>
                        <View className='flex items-center gap-1'>
                          <Text>📅</Text>
                          <Text>{formatTime(activity.startTime)}</Text>
                        </View>
                        <View className='flex items-center gap-1'>
                          <Text>👥</Text>
                          <Text>{activity.participants}人参与</Text>
                        </View>
                      </View>
                    </View>

                    {/* 活动类型标签 */}
                      <View className='flex items-center justify-between'>
                        <View className='bg-orange-100 px-2 py-1 rounded'>
                          <Text className='text-xs text-orange-500'>{getTypeLabel(activity.type)}</Text>
                        </View>
                      
                        {activity.status === 'ongoing' && (
                          <View
                            className='bg-orange-500 px-4 py-1 rounded-full'
                            onClick={() => handleSignUp(activity.id)}
                          >
                            <Text className='text-xs text-white'>立即报名</Text>
                          </View>
                        )}
                        {activity.status === 'upcoming' && (
                          <View
                            className='bg-blue-500 px-4 py-1 rounded-full'
                            onClick={() => Taro.navigateTo({ url: `/pages/activity/detail/index?id=${activity.id}` })}
                          >
                            <Text className='text-xs text-white'>查看详情</Text>
                          </View>
                        )}
                      </View>
                  </View>
                )
              })()
            ))
          )}

          <LoadMore loading={loading} finished={finished} />
        </View>
      </ScrollView>
    </View>
  )
}

export default ActivityListPage
